You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
638 lines
17 KiB
638 lines
17 KiB
<template>
|
|
<view class="content">
|
|
<view class="title">客流实时数据</view>
|
|
<view class="titledate">以下数据以景区现场发布为准</view>
|
|
<view class="kllist" v-for="(el,ind) in jqdatas" :key="ind">
|
|
<view class="left">
|
|
<view class="name">{{el.name}}</view>
|
|
<view class="cont">
|
|
<view class="conlist">
|
|
<view class="conname cleft">实时在园</view>
|
|
<view class="connum cleft">{{el.value}}</view>
|
|
</view>
|
|
<view class="conlist">
|
|
<view class="conname cright">瞬时承载量</view>
|
|
<view class="connum cright">{{el.max1}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="ktime">
|
|
<!-- <view class="kname">AAAAA</view> -->
|
|
<!-- <view class="kopen">开放时间：8:30-17:00</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<!-- <view class="bfbstyle">
|
|
<span v-if="el.zb<=40" class="lscolor">{{el.zb}}%</span>
|
|
<span v-if="el.zb>=80" class="hscolor">{{el.zb}}%</span>
|
|
<span v-if="el.zb>40&&el.zb<80" class="yscolor">{{el.zb}}%</span>
|
|
</view> -->
|
|
<view class="bfbnamestyle">
|
|
<span v-if="el.zb1<=20" class="lscolor">{{el.zbName}}</span>
|
|
<span v-if="el.zb1<=40&&el.zb1>20" class="lscolor">{{el.zbName}}</span>
|
|
<span v-if="el.zb1<=60&&el.zb1>40" class="yscolor">{{el.zbName}}</span>
|
|
<span v-if="el.zb1<=80&&el.zb1>60" class="yscolor">{{el.zbName}}</span>
|
|
<span v-if="el.zb1>80" class="hscolor">{{el.zbName}}</span>
|
|
</view>
|
|
<!-- <canvas :canvas-id="'canvasPie'+ind" :id="'canvasPie'+ind" @touchstart="touchPie"></canvas> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
|
var _self;
|
|
var canvaPie = null;
|
|
var color = ['#00DB77', '#FF9024', '#FF4824'];
|
|
var zcolor = ['#22A86C', '#E68320', '#E64120'];
|
|
var canvaLineA = null;
|
|
var canvaLineA2 = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
info:{
|
|
color: true,
|
|
num: false,
|
|
},
|
|
// infos:{
|
|
// ind:0,
|
|
// color:false
|
|
// },
|
|
jqdatas:[],
|
|
token: ''
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
var date = new Date();
|
|
this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
|
|
// this.getData3();
|
|
// this.getData4();
|
|
_self = this;
|
|
// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
|
|
this.cWidth=uni.upx2px(750);
|
|
this.cHeight=uni.upx2px(250);
|
|
this.cWidth2=uni.upx2px(750);
|
|
this.cHeight2=uni.upx2px(170);
|
|
// this.getData1();
|
|
// this.getyj();
|
|
this.getToken();
|
|
},
|
|
onPageScroll(e) {
|
|
if(e.scrollTop>50&&!this.info.num){
|
|
this.info.num=true;
|
|
}
|
|
if(e.scrollTop<50&&this.info.num){
|
|
this.info.num=false;
|
|
}
|
|
},
|
|
methods: {
|
|
getToken(){
|
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'
|
|
var para = {
|
|
type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon'
|
|
};
|
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
|
|
// var para = {};
|
|
var that = this;
|
|
that.httpPostxin(that, url, para, function(res) {
|
|
// console.log(res.data.obj);
|
|
that.token=res.data.obj;
|
|
if(res.data.success==false){
|
|
that.sxToken();
|
|
}else{
|
|
that.getdata();
|
|
}
|
|
});
|
|
},
|
|
sxToken(){
|
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'
|
|
var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token};
|
|
var that = this;
|
|
that.httpPostxin(that, url, para, function(res) {
|
|
that.token=res.data.obj;
|
|
that.getdata();
|
|
});
|
|
},
|
|
removeDuplicateObj(arr) {
|
|
let obj = {};
|
|
arr = arr.reduce((newArr, next) => {
|
|
obj[next.key] ? "" : (obj[next.key] = true && newArr.push(next));
|
|
return newArr;
|
|
}, []);
|
|
return arr;
|
|
},
|
|
getdata(){
|
|
uni.showToast({
|
|
title: '加载中...',
|
|
icon:'loading',
|
|
});
|
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx';
|
|
var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{
|
|
"code": "020201_all",
|
|
"params": {},
|
|
"page": 0,
|
|
"size": 0,
|
|
"result": {},
|
|
"orders": []
|
|
}};
|
|
var that = this;
|
|
that.httpPostxin(that, url, para, function(res) {
|
|
if (res.data.success) {
|
|
uni.hideToast();
|
|
var datasAll = res.data.obj.jq_list;
|
|
var dataspw = res.data.obj.jq_pw_ss;
|
|
var datas = [];
|
|
let newList = [
|
|
{name:'虞山风景区',id:'1651860195535896577',zbName: ''},
|
|
{name:'沙家浜风景区',id:'1443165277469569026',zbName: ''},
|
|
{name:'尚湖风景区',id:'1443161860089081858',zbName: ''},
|
|
{name:'蒋巷生态园',id:'1652546686057652226',zbName: ''},
|
|
{name:'方塔古迹名胜区',id:'1443161860097470466',zbName: ''},
|
|
{name:'古里红豆山庄',id:'1572847079126556674',zbName: ''},
|
|
{name:'梅李聚沙园',id:'1443165794329456641',zbName: ''},
|
|
// {name:'曾园•赵园',id:'1443161860101664769',zbName: ''},
|
|
// {name:'燕园',id:'1443161860093276162',zbName: ''}
|
|
]
|
|
datasAll.map(item=>{
|
|
dataspw.map(item1=>{
|
|
if(item.glzd == item1.code) {
|
|
newList.map(v=>{
|
|
if(item._id===v.id){
|
|
that.$set(v,'value', item1.count<0?0:item1.count)
|
|
that.$set(v,'max',item.sumNum)
|
|
that.$set(v,'zb',((item1.count/item.sumNum)*100).toFixed(0))
|
|
if(v.name == '虞山风景区') {
|
|
that.$set(v,'max1',21700)
|
|
that.$set(v,'zb1',((item1.count/21700)*100).toFixed(0))
|
|
}else if(v.name == '沙家浜风景区') {
|
|
that.$set(v,'max1',46891)
|
|
that.$set(v,'zb1',((item1.count/46891)*100).toFixed(0))
|
|
}else if(v.name == '尚湖风景区') {
|
|
that.$set(v,'max1',16000)
|
|
that.$set(v,'zb1',((item1.count/16000)*100).toFixed(0))
|
|
}else if(v.name == '蒋巷生态园') {
|
|
that.$set(v,'max1',11357)
|
|
that.$set(v,'zb1',((item1.count/11357)*100).toFixed(0))
|
|
console.log('蒋巷生态园');
|
|
console.log(v);
|
|
}else if(v.name == '方塔古迹名胜区') {
|
|
that.$set(v,'max1',4000)
|
|
that.$set(v,'zb1',((item1.count/4000)*100).toFixed(0))
|
|
}else if(v.name == '古里红豆山庄') {
|
|
that.$set(v,'max1',16100)
|
|
that.$set(v,'zb1',((item1.count/16100)*100).toFixed(0))
|
|
}else if(v.name == '梅李聚沙园') {
|
|
that.$set(v,'max1',4000)
|
|
that.$set(v,'zb1',((item1.count/4000)*100).toFixed(0))
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
if(newList.length>0){
|
|
that.jqdatas = newList ;
|
|
for(var i = 0;i<that.jqdatas.length;i++) {
|
|
if(that.jqdatas[i].zb1 <= 20){
|
|
that.jqdatas[i].zbName = '舒适'
|
|
var data = {
|
|
series: [{
|
|
name: '舒适',
|
|
data:that.jqdatas[i].zb1
|
|
}]
|
|
}
|
|
}else if(that.jqdatas[i].zb1 > 20&&that.jqdatas[i].zb1 <= 40) {
|
|
that.jqdatas[i].zbName = '较为舒适'
|
|
var data = {
|
|
series: [{
|
|
name: '较为舒适',
|
|
data:that.jqdatas[i].zb1
|
|
}]
|
|
}
|
|
}else if(that.jqdatas[i].zb1 > 40&&that.jqdatas[i].zb1 <= 60) {
|
|
that.jqdatas[i].zbName = '一般'
|
|
var data = {
|
|
series: [{
|
|
name: '一般',
|
|
data:that.jqdatas[i].zb1
|
|
}]
|
|
}
|
|
}else if(that.jqdatas[i].zb1 > 60&&that.jqdatas[i].zb1 <= 80) {
|
|
that.jqdatas[i].zbName = '较拥挤'
|
|
var data = {
|
|
series: [{
|
|
name: '较拥挤',
|
|
data:that.jqdatas[i].zb1
|
|
}]
|
|
}
|
|
}else if(that.jqdatas[i].zb1 > 80){
|
|
that.jqdatas[i].zbName = '拥挤'
|
|
var data = {
|
|
series: [{
|
|
name: '拥挤',
|
|
data:that.jqdatas[i].zb1
|
|
}]
|
|
}
|
|
}
|
|
// that.showPie('canvasPie'+i, data);
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '查询失败'
|
|
});
|
|
}
|
|
}else {
|
|
uni.showToast({
|
|
title: '加载中...',
|
|
icon:'loading',
|
|
duration:20000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getyj(){
|
|
var data = [
|
|
{name:'尚湖风景区',value:'1550',max:10000,zb:1550/10000},
|
|
{name:'虞山公园',value:'799',max:10000,zb:799/10000},
|
|
{name:'虞山剑门景区',value:'512',max:10000,zb:512/10000},
|
|
{name:'蒋巷生态园',value:'512',max:10000,zb:512/10000},
|
|
{name:'方塔园',value:'283',max:10000,zb:283/10000},
|
|
{name:'兴福寺',value:'57',max:10000,zb:57/10000},
|
|
]
|
|
var that = this
|
|
if(data.length>0){
|
|
that.jqdatas = data ;
|
|
for(var i = 0;i<that.jqdatas.length;i++) {
|
|
var data = {
|
|
series: [{
|
|
name: '舒适',
|
|
data:that.jqdatas[i].zb
|
|
}]
|
|
}
|
|
that.showPie('canvasPie'+i, data);
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '查询失败'
|
|
});
|
|
}
|
|
|
|
},
|
|
getData1() { //获取景点动态
|
|
var url = '/toursData/getToursAnalysis.jspx';
|
|
var para = {};
|
|
var that = this;
|
|
that.httpPost(that, url, para, function(res) {
|
|
if (res.data.status == 200) {
|
|
var tmp = [];
|
|
for (var i = 0; i < res.data.data.scenic.length; i++) {
|
|
tmp.push({
|
|
name: res.data.data.scenic[i].name,
|
|
value: res.data.data.scenic[i].value,
|
|
max: 10000,
|
|
zb: res.data.data.scenic[i].value/10000
|
|
})
|
|
}
|
|
that.jqdatas = tmp;
|
|
for(var i = 0;i<that.jqdatas.length;i++) {
|
|
var data = {
|
|
series: [{
|
|
name: '舒适',
|
|
data:that.jqdatas[i].zb
|
|
}]
|
|
}
|
|
that.showPie('canvasPie'+i, data);
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '查询失败'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 展示图标的函数 接收参数，一个块的id,一个数据
|
|
showLineA(canvasId, chartData) {
|
|
canvaLineA = new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
// 图标类型
|
|
type: 'line',
|
|
fontSize: 11,
|
|
padding:[20,25,4,5],
|
|
legend: { show: false },
|
|
dataLabel:true,
|
|
dataPointShape: true,
|
|
background: '#F6F6F6',
|
|
pixelRatio: _self.pixelRatio,
|
|
categories: chartData.categories,
|
|
series: chartData.series,
|
|
animation: true,
|
|
enableScroll: true,//开启图表拖拽功能
|
|
// x轴显示的内容
|
|
xAxis: {
|
|
type: 'grid',
|
|
disableGrid:true,
|
|
gridColor: '#CCCCCC',
|
|
gridType: 'dash',
|
|
dashLength: 8,
|
|
itemCount:6,//x轴单屏显示数据的数量，默认为5个
|
|
scrollShow:true,//新增是否显示滚动条，默认false
|
|
scrollAlign:'left',//滚动条初始位置
|
|
scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
|
|
scrollColor:'#DEE7F7',//默认为 #A6A6A6
|
|
},
|
|
// y轴显示的内容
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
disableGrid:true,
|
|
gridColor: '#CCCCCC',
|
|
dashLength: 8,
|
|
splitNumber: 5,
|
|
format: val => {
|
|
return val.toFixed(0) + '℃';
|
|
}
|
|
},
|
|
width: _self.cWidth * _self.pixelRatio,
|
|
height: _self.cHeight * _self.pixelRatio,
|
|
extra: {
|
|
line: {
|
|
type: 'straight'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
showLineA2(canvasId, chartData) {
|
|
canvaLineA2 = new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
// 图标类型
|
|
type: 'line',
|
|
fontSize: 11,
|
|
padding:[20,35,0,0],
|
|
legend: { show: false },
|
|
dataLabel:true,
|
|
dataPointShape: true,
|
|
background: '#F6F6F6',
|
|
pixelRatio: _self.pixelRatio2,
|
|
categories: chartData.categories,
|
|
series: chartData.series,
|
|
animation: true,
|
|
// x轴显示的内容
|
|
xAxis: {
|
|
disabled:true,
|
|
disableGrid:true,
|
|
},
|
|
// y轴显示的内容
|
|
yAxis: {
|
|
disableGrid:true,
|
|
disabled:true,
|
|
},
|
|
width: _self.cWidth2 * _self.pixelRatio2,
|
|
height: _self.cHeight2 * _self.pixelRatio2,
|
|
extra: {
|
|
line: {
|
|
type: 'straight'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 点击图表显示的内容
|
|
touchLineA(e) {
|
|
canvaLineA.scrollStart(e);
|
|
// 使用声明的变量canvaLineA
|
|
canvaLineA.showToolTip(e, {
|
|
format: function(item, category) {
|
|
return category + ' ' + item.name + ':' + item.data;
|
|
}
|
|
});
|
|
},
|
|
touchLineA2(e) {
|
|
// 使用声明的变量canvaLineA
|
|
canvaLineA2.showToolTip(e, {
|
|
format: function(item, category) {
|
|
return category + ' ' + item.name + ':' + item.data;
|
|
}
|
|
});
|
|
},
|
|
moveLineA(e) {
|
|
canvaLineA.scroll(e);
|
|
},
|
|
touchEndLineA(e) {
|
|
canvaLineA.scrollEnd(e);
|
|
},
|
|
showPie(canvasId, chartData) {
|
|
new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
type: 'arcbar',
|
|
fontSize: 11,
|
|
legend: {
|
|
show: false
|
|
},
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
series: chartData.series,
|
|
colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[1]] : [color[2]],
|
|
animation: true,
|
|
width: 120,
|
|
height: 120,
|
|
dataLabel: true,
|
|
title: {
|
|
name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了，您可以直接给任意字符串
|
|
color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[1] : color[2],
|
|
fontSize: 18,
|
|
offsetY: -2
|
|
},
|
|
subtitle: {
|
|
name: chartData.series[0].name, //这里您可以直接给任意字符串
|
|
color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[1] : zcolor[2],
|
|
fontSize: 15,
|
|
offsetY: 2
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: 'circle', //整圆类型进度条图
|
|
width: 10, //圆弧的宽度
|
|
startAngle: 1.5, //整圆类型只需配置起始角度即可
|
|
backgroundColor: '#EFF3F7'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
touchPie(e) {
|
|
canvaPie.showToolTip(e, {
|
|
format: function(item) {
|
|
return item.name + ':' + item.data
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$twidth:702upx;
|
|
$klwidth:622upx;
|
|
$klheight:220upx;
|
|
$right:200upx;
|
|
$rheight:210upx;
|
|
view {
|
|
box-sizing: content-box;
|
|
}
|
|
.content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #F6F6F6;
|
|
padding-bottom: 100upx;
|
|
overflow-x: hidden;
|
|
// margin-bottom: 60rpx;
|
|
}
|
|
.kllist {
|
|
width: $klwidth;
|
|
// height: $klheight;
|
|
height: 180upx;
|
|
background: #FFFFFF;
|
|
border-radius: 20upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 40upx;
|
|
margin: 0upx 0upx 26upx 0upx;
|
|
|
|
.left {
|
|
width: 400upx;
|
|
|
|
.name {
|
|
font-size: 36upx;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.cont {
|
|
width: 350upx;
|
|
margin-top: 36upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 80upx;
|
|
|
|
.conlist:first-child {
|
|
border-right: 1upx solid #E3E3E3;
|
|
}
|
|
|
|
.conlist {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.conname {
|
|
width: 100%;
|
|
font-size: 24upx;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.cleft {
|
|
text-align: left;
|
|
}
|
|
|
|
.cright {
|
|
text-align: right;
|
|
}
|
|
|
|
.connum {
|
|
width: 100%;
|
|
font-size: 46upx;
|
|
font-family: DIN;
|
|
font-weight: bold;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ktime {
|
|
margin-top: 34upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 34upx;
|
|
align-items: center;
|
|
|
|
.kname {
|
|
width: 106upx;
|
|
height: 34upx;
|
|
background: #FFFDFA;
|
|
border: 1upx solid #F5E6D0;
|
|
border-radius: 4upx;
|
|
color: #CCA37A;
|
|
font-size: 24upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.kopen {
|
|
width: 320upx;
|
|
height: 34upx;
|
|
background: #FFFDFA;
|
|
border: 1upx solid #F5E6D0;
|
|
border-radius: 4upx;
|
|
color: #CCA37A;
|
|
font-size: 24upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: $right;
|
|
height: $rheight;
|
|
line-height: $rheight;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 50upx;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 600;
|
|
color: #230F00;
|
|
line-height: 56upx;
|
|
width: $twidth;
|
|
margin-top: 60upx;
|
|
margin-bottom: 50upx;
|
|
}
|
|
.titledate {
|
|
text-align: left;
|
|
margin: 0upx 0upx 50upx 0upx;
|
|
font-size: 12px;
|
|
width: $twidth;
|
|
}
|
|
.bfbstyle {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
margin: 38px 0px 0px 0px;
|
|
}
|
|
.bfbnamestyle {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
// margin: 50px 0px 0px 0px;
|
|
}
|
|
// var zcolor = ['#22A86C', '#E68320', '#E64120'];
|
|
.lscolor {
|
|
color: #22A86C;
|
|
}
|
|
.hscolor {
|
|
color: #E64120;
|
|
}
|
|
.yscolor {
|
|
color: #E68320;
|
|
}
|
|
</style>
|
|
|