497 lines
12 KiB
Vue
497 lines
12 KiB
Vue
<template>
|
||
<view v-show="show">
|
||
<div class="" v-show="!loading && pageEmpty">
|
||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'"/>
|
||
</div>
|
||
<div v-show="!loading && !pageEmpty">
|
||
<div class="customer-content" >
|
||
<div class="tab-btn" v-if="topData.length>1" @tap="tabChange(canvasTab==1?0:1,opt)">查看{{topData[canvasTab?0:1].Serverpart_Region}}区数据</div>
|
||
<div class="customer-title">入区车流分析</div>
|
||
<div class="uni-flex jc-between">
|
||
<div style="flex:1;" class="tab-unit">
|
||
<div class="tab-title">车流量</div>
|
||
<div class="tab-number">{{topData[canvasTab].Vehicle_Count}}</div>
|
||
<div class="tab-rate"><span class="tab-desc">日</span> <span :style="topData[canvasTab].Vehicle_GrowthRate>0? 'color: #2CC260;' : 'color: #F54850;'">{{topData[canvasTab].Vehicle_GrowthRate}}%</span></div>
|
||
</div>
|
||
<div style="flex:1;" class="tab-unit">
|
||
<div class="tab-title">入区率</div>
|
||
<div class="tab-number">{{topData[canvasTab].Entry_Rate}}%</div>
|
||
<div class="tab-rate"><span class="tab-desc">日</span> <span :style="topData[canvasTab].Entry_GrowthRate>0? 'color: #2CC260;' : 'color: #F54850;'">{{topData[canvasTab].Entry_GrowthRate}}%</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- <canvas canvas-id="sexCate" id="sexCate" class="operation-cate-content"></canvas> -->
|
||
<div class="customer-content">
|
||
<div class="customer-title">各车停留时间</div>
|
||
<div v-if="chartdata.stayChart[canvasTab] && chartdata.stayChart[canvasTab].data.length>0">
|
||
<canvas canvas-id="carStay" id="carStay" class="operation-stock-content" ></canvas>
|
||
</div>
|
||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'" v-else/>
|
||
</div>
|
||
<div class="customer-content">
|
||
<div class="customer-title">车辆归属地</div>
|
||
<div v-if="chartdata.countChart[canvasTab] || !lodingDetail">
|
||
<view class="operation-stock-content">
|
||
<qiun-data-charts
|
||
type="radar"
|
||
:chartData="radarData"
|
||
:opts="radaropts"
|
||
background="none"
|
||
loadingType="2"
|
||
/>
|
||
</view>
|
||
<view class="operation-stock-content">
|
||
<qiun-data-charts
|
||
type="funnel"
|
||
:chartData="funnelData"
|
||
background="none"
|
||
:opts="funnelopts"
|
||
loadingType="0"
|
||
/>
|
||
</view>
|
||
</div>
|
||
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'" v-else/>
|
||
<!-- <div class="analysis-text" v-if="proportionList[canvasTab]">
|
||
<span class="key-text">分析</span><span>{{proportionList[canvasTab][1]}}</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
// import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
|
||
let rincanvas = {}
|
||
|
||
export default {
|
||
props: {
|
||
pieId: String,
|
||
barId: String,
|
||
show: Boolean
|
||
},
|
||
data() {
|
||
return {
|
||
funnelData:[],
|
||
funnelopts: {
|
||
|
||
color: ['#6B96F8', '#F6B760','#677798','#6BDBAB'],
|
||
extra: {
|
||
funnel: {
|
||
border: false,
|
||
}
|
||
},
|
||
dataPointShape:true,
|
||
tooltipShow:true,
|
||
showBox:true,
|
||
height: uni.upx2px(328),
|
||
width: uni.upx2px(686),
|
||
},
|
||
radaropts: {
|
||
color: ['#94b2f9'],
|
||
legend: {show:false},
|
||
tooltipShow: true,
|
||
dataPointShape: true,
|
||
dataLabel: true,
|
||
showBox: true,
|
||
extra:{
|
||
radar:{
|
||
border:true,
|
||
max: 200
|
||
}
|
||
},
|
||
|
||
},
|
||
radarData:[],
|
||
topData: [],
|
||
canvasTab: 0,
|
||
chartdata: {
|
||
"stayChart": [],
|
||
"countChart": []
|
||
},
|
||
opt: null,
|
||
pageEmpty: false,
|
||
loading: true,
|
||
lodingDetail:true,
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
refreshData(data) {
|
||
// 刷新数据
|
||
rincanvas['carStay'].updateData({series:data.data,categories:data.categories});
|
||
this.$forceUpdate()
|
||
},
|
||
tabChange(name,opt) {
|
||
this.canvasTab= name
|
||
|
||
if (!this.chartdata.stayChart[name]) {
|
||
this.lodingDetail=true
|
||
this.getProportion(name, opt) // 获取 各车型停留时间
|
||
this.getAnalysisDesc(name,opt)
|
||
} else {
|
||
if(this.chartdata.countChart[name]){
|
||
// 车辆归属地
|
||
const list = this.chartdata.countChart[name]
|
||
this.funnelData= {series: [{data: list.OwnerProvinceList.map(n=> {return {...n,value:parseInt(n.value)}} ) }]}
|
||
this.radarData= {
|
||
categories: list.OwnerCity,
|
||
series: [{
|
||
name: '车辆数量',
|
||
data: list.OwnerCityList.map(n=> parseInt(n.value)),
|
||
},
|
||
]}
|
||
}
|
||
if(this.chartdata.stayChart[name]){
|
||
// 车辆停留时间
|
||
const {data,categories} = this.chartdata.stayChart[name]
|
||
this.showClounm({
|
||
id: 'carStay',//+type,
|
||
data: data,
|
||
categories: categories
|
||
})
|
||
}
|
||
|
||
}
|
||
},
|
||
// 获取 各车型停留时间
|
||
async getProportion(type, params) {
|
||
let _this = this
|
||
_this.opt = params
|
||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetBayonetSTAList', {
|
||
Serverpart_Region: this.topData[type].Serverpart_Region,
|
||
...params
|
||
})
|
||
if (data.Result_Code === 100 && data.Result_Data.List.length > 0) {
|
||
const [list] = data.Result_Data.List
|
||
|
||
const showData = [{
|
||
name:'车型',
|
||
type: "column",
|
||
index:0,
|
||
data: list.VehicleCountList.map(n=>n.value)
|
||
},
|
||
{
|
||
name:'停留时间(分钟)',
|
||
type: "line",
|
||
index:1,
|
||
"style": "curve",
|
||
dataPointShape: true,
|
||
|
||
data: list.StayTimesList.map(n=> parseInt(n.value)+''),
|
||
}]
|
||
_this.showClounm({
|
||
id: 'carStay',//+type,
|
||
data: showData,
|
||
categories: list.Vehicle_Type
|
||
})
|
||
this.chartdata.stayChart[type] = { data:showData, categories: list.Vehicle_Type }
|
||
this.$forceUpdate()
|
||
|
||
} else {
|
||
this.chartdata.stayChart[type] = null
|
||
}
|
||
},
|
||
async getAnalysisDesc(type, params) {
|
||
let _this = this
|
||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetBayonetOAList', {
|
||
Serverpart_Region: this.topData[type].Serverpart_Region,
|
||
statisticsMonth: this.$util.cutDate(params.StatisticsDate,'YYYYMM'),
|
||
...params
|
||
})
|
||
if(data.Result_Code === 100 && data.Result_Data.List.length > 0){
|
||
const [list] = data.Result_Data.List
|
||
this.chartdata.countChart[type] = list
|
||
this.funnelData= {
|
||
series: [{
|
||
label: {
|
||
show: true,
|
||
position: 'inside'
|
||
},
|
||
data: list.OwnerProvinceList.map(n=> {return {...n, value:parseInt(n.value)}} )
|
||
}],
|
||
}
|
||
|
||
this.radaropts.extra.radar.max = 100 + list.OwnerCityList.reduce((a,b)=> parseInt(b.value) > parseInt(a.value)? parseInt(b.value): parseInt(a.value))
|
||
this.radarData= {
|
||
categories: list.OwnerCity,
|
||
series: [{
|
||
name: '车量',
|
||
data: list.OwnerCityList.map(n=> parseInt(n.value)),
|
||
},
|
||
]}
|
||
this.$forceUpdate()
|
||
}else{
|
||
this.chartdata.countChart[type] =null
|
||
}
|
||
this.lodingDetail=false
|
||
},
|
||
// 加载头部信息
|
||
async getTopData(params) {
|
||
const data = await this.$request.$webGet('CommercialApi/Revenue/GetBayonetEntryList', {
|
||
...params
|
||
})
|
||
this.loading=false
|
||
if(data.Result_Data.TotalCount==0){
|
||
this.pageEmpty = true
|
||
return
|
||
}
|
||
this.topData = data.Result_Data.List
|
||
this.lodingDetail=true
|
||
this.getProportion(this.canvasTab,params)
|
||
this.getAnalysisDesc(this.canvasTab,params)
|
||
},
|
||
tapchart(e,id){
|
||
rincanvas[id].showToolTip(e)
|
||
},
|
||
showPie(obj) {
|
||
let data = {
|
||
series: []
|
||
}
|
||
data.series.push({data:obj.data})
|
||
|
||
rincanvas[obj.id] = new uCharts({
|
||
$this: this,
|
||
canvasId: obj.id,
|
||
colors: ['#6B96F8', '#F6B760','#677798','#6BDBAB'],
|
||
type: 'funnel',
|
||
fontSize: 12,
|
||
|
||
legend: {
|
||
show: false,
|
||
padding: 5,
|
||
lineHeight: 11,
|
||
margin: 0,
|
||
},
|
||
background: '#FFFFFF',
|
||
pixelRatio: 1,
|
||
categories: obj.categories,
|
||
series: data.series,
|
||
animation: false,
|
||
width: uni.upx2px(666),
|
||
height: uni.upx2px(480),
|
||
dataLabel: false,
|
||
extra: {
|
||
funnel: {
|
||
border: false,
|
||
|
||
}
|
||
},
|
||
});
|
||
},
|
||
showRadar:(id)=>{
|
||
rincanvas[id] = new uCharts({
|
||
$this: this,
|
||
canvasId: id,
|
||
type: 'radar',
|
||
fontSize: 11,
|
||
padding: [15,15,0,15],
|
||
legend:{
|
||
show:true,
|
||
padding:5,
|
||
lineHeight:11,
|
||
margin:0,
|
||
},
|
||
background:'#FFFFFF',
|
||
pixelRatio: 1 ,
|
||
animation: true,
|
||
dataLabel: true,
|
||
categories: this.radarData.categories,
|
||
series: this.radarData.series,
|
||
width: uni.upx2px(666),
|
||
height: uni.upx2px(480),
|
||
extra: {
|
||
radar: {
|
||
max: 200,//雷达数值的最大值
|
||
gridType:'radar'//radar或者circle可选，网格样式，默认radar
|
||
}
|
||
},
|
||
})
|
||
},
|
||
showClounm(obj) {
|
||
let data = {
|
||
series: []
|
||
}
|
||
data.series = data.series.concat(obj.data)
|
||
rincanvas[obj.id] = new uCharts({
|
||
$this: this,
|
||
canvasId: obj.id,
|
||
type: 'mix',
|
||
legend: {
|
||
show: true,
|
||
position:'top',
|
||
float:'right',
|
||
fontSize: 11,
|
||
},
|
||
colors: ['#667ED5','#FFAB35'],
|
||
fontSize: 12,
|
||
background: '#FFFFFF',
|
||
padding: [10, 12, 12, 12],
|
||
animation: true,
|
||
categories: obj.categories,
|
||
series: data.series,
|
||
enableScroll: false, //开启图表拖拽功能
|
||
xAxis: {
|
||
disabled: false,
|
||
disableGrid: true,
|
||
axisLine: false,
|
||
fontColor: '#777777',
|
||
labelCount: 5,
|
||
},
|
||
yAxis: {
|
||
data: [{
|
||
position: "left",
|
||
title:'车流量(辆)',
|
||
disabled: false,
|
||
axisLine: false,
|
||
fontColor: '#777777',
|
||
min: 0,
|
||
format: (val) => {
|
||
return parseInt(val)
|
||
},
|
||
},
|
||
{
|
||
title:'(分钟)',
|
||
position: "right",
|
||
disabled: false,
|
||
axisLine: false,
|
||
min: 0,
|
||
fontColor: '#777777',
|
||
format: (val) => {
|
||
return parseInt(val)
|
||
}
|
||
}
|
||
],
|
||
|
||
gridType: 'dash',
|
||
gridColor: '#eee',
|
||
dashLength: 2,
|
||
// splitNumber: 3,
|
||
},
|
||
dataLabel: false,
|
||
width: uni.upx2px(686),
|
||
height: uni.upx2px(420),
|
||
showBox: true,
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: uni.upx2px(50),
|
||
dataLabel: true,
|
||
},
|
||
line: {
|
||
dataPointShapeType: 'hollow',
|
||
dataPointShape: true,
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.customer-content {
|
||
margin: 0 30rpx;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
|
||
background-color: #fff;
|
||
position: relative;
|
||
margin-bottom: 48rpx;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.customer-title {
|
||
padding: 0 40rpx;
|
||
line-height: 80rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.operation-cate-content {
|
||
height: 480rpx;
|
||
width: 690rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.charts-box{
|
||
width: 100%;
|
||
height: 330rpx;
|
||
}
|
||
.operation-stock-content {
|
||
height: 440rpx;
|
||
width: 690rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.tab-btn {
|
||
position: absolute;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
width: 241rpx;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
right: 0;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url(../../../static/images/revenue/tab-bg.png) no-repeat right;
|
||
background-size: contain;
|
||
}
|
||
.tab-btn::before {
|
||
content: '';
|
||
background: url(../../../static/images/revenue/next.png) no-repeat center;
|
||
background-size: contain;
|
||
width: 40rpx;
|
||
height: 16rpx;
|
||
}
|
||
.analysis-text {
|
||
color: #9498A4;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
font-size: 24rpx;
|
||
margin: 0 30rpx 0 30rpx;
|
||
}
|
||
|
||
.key-text {
|
||
min-width: 50rpx;
|
||
background: #EA7F56;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
background: #ea7f56;
|
||
border-radius: 5rpx;
|
||
margin-right: 16rpx;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
.tab-unit {
|
||
padding-left: 40rpx;
|
||
position: relative;
|
||
}
|
||
.tab-unit +.tab-unit::before {
|
||
content: '';
|
||
height: 77rpx;
|
||
width: 2rpx;
|
||
background-color: #E6E6E6;
|
||
display: block;
|
||
position: absolute;
|
||
top: 65rpx;
|
||
left: -10rpx;
|
||
|
||
}
|
||
.tab-title {
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.tab-number {
|
||
font-size: 30rpx;
|
||
}
|
||
.tab-title,.tab-desc {
|
||
color: #ADADAD;
|
||
margin-right: 16rpx;
|
||
}
|
||
.tab-desc ,.tab-rate{
|
||
font-size: 24rpx;
|
||
}
|
||
</style>
|