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.
549 lines
13 KiB
549 lines
13 KiB
7 months ago
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<!-- <view class="title">天气</view> -->
|
||
|
|
<!-- <back :info="info"></back> -->
|
||
|
|
<view class="title">客流实时数据</view>
|
||
|
|
<view class="kllist" v-for="(el,ind) in jqdatas">
|
||
|
|
<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.max}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="ktime">
|
||
|
|
<!-- <view class="kname">AAAAA</view> -->
|
||
|
|
<!-- <view class="kopen">开放时间：8:30-17:00</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<canvas :canvas-id="'canvasPie'+ind" :id="'canvasPie'+ind" @touchstart="touchPie"></canvas>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- <tabBar :info="infos"></tabBar> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import back from '@/components/html/back.vue';
|
||
|
|
import tabBar from '@/components/html/tabBar.vue';
|
||
|
|
var web = require('@/components/utils/request.js');
|
||
|
|
var util = require('@/components/utils/util.js');
|
||
|
|
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 {
|
||
|
|
components: {
|
||
|
|
tabBar,back
|
||
|
|
},
|
||
|
|
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://cs.tour-ma.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;
|
||
|
|
web.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://cs.tour-ma.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;
|
||
|
|
web.httpPostxin(that, url, para, function(res) {
|
||
|
|
that.token=res.data.obj;
|
||
|
|
that.getdata();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getdata(){
|
||
|
|
uni.showToast({
|
||
|
|
title: '加载中...',
|
||
|
|
icon:'loading',
|
||
|
|
});
|
||
|
|
var url = 'https://cs.tour-ma.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;
|
||
|
|
web.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 = [];
|
||
|
|
datasAll.map(item=>{
|
||
|
|
dataspw.map(item1=>{
|
||
|
|
if(item.glzd == item1.code) {
|
||
|
|
datas.push({
|
||
|
|
name: item.name,
|
||
|
|
value: item1.count,
|
||
|
|
max: item.sumNum,
|
||
|
|
zb: 0
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
datas.map(item=>{
|
||
|
|
if(item.value < 0) {
|
||
|
|
item.value = 0
|
||
|
|
}
|
||
|
|
item.zb = item.value/item.max
|
||
|
|
})
|
||
|
|
if(datas.length>0){
|
||
|
|
that.jqdatas = datas ;
|
||
|
|
for(var i = 0;i<that.jqdatas.length;i++) {
|
||
|
|
if(that.jqdatas[i].zb < 40){
|
||
|
|
var data = {
|
||
|
|
series: [{
|
||
|
|
name: '舒适',
|
||
|
|
data:that.jqdatas[i].zb
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}else if(that.jqdatas[i].zb > 80) {
|
||
|
|
var data = {
|
||
|
|
series: [{
|
||
|
|
name: '拥挤',
|
||
|
|
data:that.jqdatas[i].zb
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
var data = {
|
||
|
|
series: [{
|
||
|
|
name: '适中',
|
||
|
|
data:that.jqdatas[i].zb
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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:'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;
|
||
|
|
web.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;
|
||
|
|
.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;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 50upx;
|
||
|
|
font-family: Microsoft YaHei;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #230F00;
|
||
|
|
line-height: 56upx;
|
||
|
|
width: $twidth;
|
||
|
|
margin-top: 60upx;
|
||
|
|
margin-bottom: 50upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|