|
@@ -1,6 +1,10 @@
|
|
|
<!-- 数据看板-笼位预约 -->
|
|
|
<template>
|
|
|
<view class="cagePosition">
|
|
|
+ <view class="total-box">
|
|
|
+ <view>笼位总数</view>
|
|
|
+ <view>{{totalCageNum}}</view>
|
|
|
+ </view>
|
|
|
<view class="chart">
|
|
|
<view class="chart-t">
|
|
|
<img src="@/pages/images/loudong@2x.png">
|
|
@@ -9,16 +13,16 @@
|
|
|
<view class="chart-b">
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData0" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts" :chartData="chartData0" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
- <text>{{dataList[0].appointNum}}</text>
|
|
|
- <text>{{dataList[0].appointNum}}%</text>
|
|
|
+ <text>{{dataList[0].cageNum}}</text>
|
|
|
+ <!-- <text>{{dataList[0].appointNum}}%</text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData1" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts2" :chartData="chartData1" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].freeNum}}</text>
|
|
@@ -27,7 +31,7 @@
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData2" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts3" :chartData="chartData2" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].appointNum}}</text>
|
|
@@ -36,16 +40,16 @@
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts4" :chartData="chartData3" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts4" :chartData="chartData3" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].lockedNum}}</text>
|
|
|
- <text>{{dataList[0].lockedNum}}%</text>
|
|
|
+ <text>{{dataList[0].lockedRate}}%</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts5" :chartData="chartData4" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts5" :chartData="chartData4" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].killNum}}</text>
|
|
@@ -54,7 +58,7 @@
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts6" :chartData="chartData5" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts6" :chartData="chartData5" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].repairNum}}</text>
|
|
@@ -71,16 +75,16 @@
|
|
|
<view class="chart-b">
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartDataTow0" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts" :chartData="chartDataTow0" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
- <text>{{dataList[0].appointNum}}</text>
|
|
|
- <text>{{dataList[0].appointNum}}%</text>
|
|
|
+ <text>{{dataList[0].cageNum}}</text>
|
|
|
+ <!-- <text>{{dataList[0].appointNum}}%</text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartDataTow1" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts2" :chartData="chartDataTow1" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].freeNum}}</text>
|
|
@@ -89,7 +93,7 @@
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartDataTow2" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts3" :chartData="chartDataTow2" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].appointNum}}</text>
|
|
@@ -98,16 +102,16 @@
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts4" :chartData="chartDataTow3" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts4" :chartData="chartDataTow3" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].lockedNum}}</text>
|
|
|
- <text>{{dataList[0].lockedNum}}%</text>
|
|
|
+ <text>{{dataList[0].lockedRate}}%</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts5" :chartData="chartDataTow4" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts5" :chartData="chartDataTow4" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].killNum}}</text>
|
|
@@ -116,7 +120,7 @@
|
|
|
</view>
|
|
|
<view class="chart-b-li">
|
|
|
<view class="chart-b-li-l">
|
|
|
- <qiun-data-charts type="arcbar" :opts="opts6" :chartData="chartDataTow5" />
|
|
|
+ <qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts6" :chartData="chartDataTow5" />
|
|
|
</view>
|
|
|
<view class="chart-b-li-r">
|
|
|
<text>{{dataList[0].repairNum}}</text>
|
|
@@ -135,7 +139,7 @@
|
|
|
</view>
|
|
|
<view class="chart-tow">
|
|
|
<view class="chart-tow-b">
|
|
|
- <qiun-data-charts :tapLegend="false" :tooltipShow="false"
|
|
|
+ <qiun-data-charts :canvas2d="true" :tapLegend="false" :tooltipShow="false"
|
|
|
type="bar" :opts="optsTow" :echartsH5="true" :chartData="chartDataThree" />
|
|
|
</view>
|
|
|
</view>
|
|
@@ -174,8 +178,8 @@
|
|
|
endAngle: 1.51,
|
|
|
gap: 2,
|
|
|
backgroundColor: "#373745",
|
|
|
- linearType:"custom",
|
|
|
- customColor:["#0183FA"],
|
|
|
+ // linearType:"custom",
|
|
|
+ // customColor:["#0183FA"],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -196,8 +200,8 @@
|
|
|
endAngle: 1.51,
|
|
|
gap: 2,
|
|
|
backgroundColor: "#373745",
|
|
|
- linearType:"custom",
|
|
|
- customColor:["#16BF32"],
|
|
|
+ // linearType:"custom",
|
|
|
+ // customColor:["#16BF32"],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -218,8 +222,8 @@
|
|
|
endAngle: 1.51,
|
|
|
gap: 2,
|
|
|
backgroundColor: "#373745",
|
|
|
- linearType:"custom",
|
|
|
- customColor:["#03D8D0"],
|
|
|
+ // linearType:"custom",
|
|
|
+ // customColor:["#03D8D0"],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -240,8 +244,8 @@
|
|
|
endAngle: 1.51,
|
|
|
gap: 2,
|
|
|
backgroundColor: "#373745",
|
|
|
- linearType:"custom",
|
|
|
- customColor:["#FF4800"],
|
|
|
+ // linearType:"custom",
|
|
|
+ // customColor:["#FF4800"],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -262,8 +266,8 @@
|
|
|
endAngle: 1.51,
|
|
|
gap: 2,
|
|
|
backgroundColor: "#373745",
|
|
|
- linearType:"custom",
|
|
|
- customColor:["#FF5F5F"],
|
|
|
+ // linearType:"custom",
|
|
|
+ // customColor:["#FF5F5F"],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -284,8 +288,8 @@
|
|
|
endAngle: 1.51,
|
|
|
gap: 2,
|
|
|
backgroundColor: "#373745",
|
|
|
- linearType:"custom",
|
|
|
- customColor:["#FF8C00"],
|
|
|
+ // linearType:"custom",
|
|
|
+ // customColor:["#FF8C00"],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -303,7 +307,9 @@
|
|
|
chartDataTow4: {},
|
|
|
chartDataTow5: {},
|
|
|
subNameTow:'',
|
|
|
-
|
|
|
+ //笼位总数
|
|
|
+ totalCageNum:"",
|
|
|
+ statisticsType:"1",
|
|
|
optsTow: {
|
|
|
rotate: false,
|
|
|
rotateLock: false,
|
|
@@ -370,11 +376,14 @@
|
|
|
data
|
|
|
} = await reportAppletReportApiCageRateCageRateList();
|
|
|
if (data.code == 200) {
|
|
|
+ self.totalCageNum=data.data.totalCageNum;
|
|
|
self.dataList=data.data.reportBsCageRateList;
|
|
|
let nameList=['总数','空闲','预约','锁定','消杀','维修']
|
|
|
- let colorList=['#B5DEFC','#9FF7B2','#B5F2F0','#FFBCA2','#FC9893','#FFDCB5']
|
|
|
+ // let colorList=['#B5DEFC','#9FF7B2','#B5F2F0','#FFBCA2','#FC9893','#FFDCB5']
|
|
|
+ let colorList=['#0183FA','#16BF32','#03D8D0','#FF4800','#FF5F5F','#FF8C00']
|
|
|
let numList=[
|
|
|
- data.data.reportBsCageRateList[0].appointNum/100,
|
|
|
+ // data.data.reportBsCageRateList[0].appointNum/100,
|
|
|
+ 1,
|
|
|
data.data.reportBsCageRateList[0].freeNum/100,
|
|
|
data.data.reportBsCageRateList[0].appointNum/100,
|
|
|
data.data.reportBsCageRateList[0].lockedNum/100,
|
|
@@ -384,7 +393,8 @@
|
|
|
this.subName=data.data.reportBsCageRateList[0].buildName;
|
|
|
|
|
|
let numListTow=[
|
|
|
- data.data.reportBsCageRateList[1].appointNum/100,
|
|
|
+ // data.data.reportBsCageRateList[1].appointNum/100,
|
|
|
+ 1,
|
|
|
data.data.reportBsCageRateList[1].freeNum/100,
|
|
|
data.data.reportBsCageRateList[1].appointNum/100,
|
|
|
data.data.reportBsCageRateList[1].lockedNum/100,
|
|
@@ -482,7 +492,23 @@
|
|
|
background: #363744;
|
|
|
padding: 20rpx 0rpx 0;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
+ .total-box{
|
|
|
+ display: flex;
|
|
|
+ padding:0 35rpx;
|
|
|
+ height:60rpx;
|
|
|
+ view{
|
|
|
+ line-height:60rpx;
|
|
|
+ font-size:32rpx;
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ view:nth-child(1){
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ view:nth-child(2){
|
|
|
+ color:#0183FA;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.chart {
|
|
|
width: 690rpx;
|
|
@@ -491,7 +517,7 @@
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
overflow: hidden;
|
|
|
margin: 20rpx 30rpx 0;
|
|
|
- padding: 38rpx 40rpx 0;
|
|
|
+ padding: 23rpx 40rpx 0;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.chart-t {
|
|
@@ -503,6 +529,7 @@
|
|
|
color: #FFFFFF;
|
|
|
line-height: 42rpx;
|
|
|
text-align: left;
|
|
|
+ padding-bottom:15rpx;
|
|
|
|
|
|
>img {
|
|
|
width: 40rpx;
|