|
@@ -34,8 +34,11 @@
|
|
|
<view class="line"></view>
|
|
|
<view class="statistics-b-li">
|
|
|
<view class="statistics-b-li-t-tow">
|
|
|
- <text class="color-B">{{rate}}%</text>
|
|
|
- <img src="@/pages/images/dataBoard/dataBoard-icon3.png">
|
|
|
+ <text
|
|
|
+ :class="rateType == 0?'color-C':(rateType == 1?'color-B':(rateType == 2?'color-A':''))">{{rate}}</text>
|
|
|
+ <img src="@/pages/images/dataBoard/dataBoard-icon2.png" style="margin-left:10rpx;" v-if="rateType == 2">
|
|
|
+ <img src="@/pages/images/dataBoard/dataBoard-icon3.png" style="margin-left:10rpx;transform: rotate(180deg);"
|
|
|
+ v-if="rateType == 1">
|
|
|
</view>
|
|
|
<view class="statistics-b-li-b">环比增长</view>
|
|
|
</view>
|
|
@@ -44,7 +47,8 @@
|
|
|
<view class="table">
|
|
|
<uni-card>
|
|
|
<view style="height: 400px">
|
|
|
- <zb-table :columns="column" :stripe="false" :border="false" :data="dataList"></zb-table>
|
|
|
+ <zb-table :cell-style="handleStyle" :columns="column" :stripe="false" :border="false"
|
|
|
+ :data="dataList"></zb-table>
|
|
|
</view>
|
|
|
</uni-card>
|
|
|
</view>
|
|
@@ -114,6 +118,7 @@
|
|
|
todayTotal: 0,
|
|
|
yesterdayTotal: 0,
|
|
|
rate: 0,
|
|
|
+ rateType: 0,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -126,6 +131,24 @@
|
|
|
this.getCurrentDate();
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleStyle(val) {
|
|
|
+ if (val.column.name == 'rate') {
|
|
|
+ console.log('val======>', val.row);
|
|
|
+ if (val.row.rate.indexOf('-') != -1) {
|
|
|
+ return {
|
|
|
+ 'color': '#2EA805',
|
|
|
+ }
|
|
|
+ } else if (val.row.rate.indexOf('+') != -1){
|
|
|
+ return {
|
|
|
+ 'color': '#FF0000',
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ return {
|
|
|
+ 'color': '#FFFFFF',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
dateClick(index) {
|
|
|
this.dateIndex = index;
|
|
|
this.reportAppStatisticsWarningHandle();
|
|
@@ -157,18 +180,18 @@
|
|
|
dayOfWeek: weekdays[nextDate.getDay()],
|
|
|
dayOfWeekTow: weekdaysTow[nextDate.getDay()],
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 输出接下来一周的每天日期和星期
|
|
|
for (let i = 0; i < 7; i++) {
|
|
|
- this.dateList.push({
|
|
|
- num:nextDays[i].dayOfWeekTow,
|
|
|
- letterNUm:nextDays[i].dayOfWeek,
|
|
|
- format:nextDays[i].year + "-" + nextDays[i].month + "-" + nextDays[i].date
|
|
|
- })
|
|
|
+ this.dateList.push({
|
|
|
+ num: nextDays[i].dayOfWeekTow,
|
|
|
+ letterNUm: nextDays[i].dayOfWeek,
|
|
|
+ format: nextDays[i].year + "-" + nextDays[i].month + "-" + nextDays[i].date
|
|
|
+ })
|
|
|
}
|
|
|
- this.dateList=this.dateList.reverse();
|
|
|
+ this.dateList = this.dateList.reverse();
|
|
|
this.reportAppStatisticsWarningHandle();
|
|
|
},
|
|
|
//预警处置
|
|
@@ -184,6 +207,13 @@
|
|
|
this.dataList = data.data.warningScatterList;
|
|
|
this.$set(self, 'todayTotal', data.data.warning.todayTotal);
|
|
|
this.$set(self, 'yesterdayTotal', data.data.warning.yesterdayTotal);
|
|
|
+ if (data.data.warning.rate.indexOf('-') != -1) {
|
|
|
+ this.$set(self, 'rateType', 1);
|
|
|
+ } else if (data.data.warning.rate.indexOf('+') != -1) {
|
|
|
+ this.$set(self, 'rateType', 2);
|
|
|
+ } else {
|
|
|
+ this.$set(self, 'rateType', 0);
|
|
|
+ }
|
|
|
this.$set(self, 'rate', data.data.warning.rate);
|
|
|
}
|
|
|
},
|
|
@@ -307,89 +337,110 @@
|
|
|
}
|
|
|
|
|
|
}
|
|
|
- .chart-b-li:nth-child(1){
|
|
|
- top:20rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(1) {
|
|
|
+ top: 20rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(2){
|
|
|
- top:20rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(2) {
|
|
|
+ top: 20rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(3){
|
|
|
- top:20rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(3) {
|
|
|
+ top: 20rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(4){
|
|
|
- top:80rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(4) {
|
|
|
+ top: 80rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(5){
|
|
|
- top:80rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(5) {
|
|
|
+ top: 80rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(6){
|
|
|
- top:80rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(6) {
|
|
|
+ top: 80rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(7){
|
|
|
- top:140rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(7) {
|
|
|
+ top: 140rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(8){
|
|
|
- top:140rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(8) {
|
|
|
+ top: 140rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(9){
|
|
|
- top:140rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(9) {
|
|
|
+ top: 140rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(10){
|
|
|
- top:200rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(10) {
|
|
|
+ top: 200rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(11){
|
|
|
- top:200rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(11) {
|
|
|
+ top: 200rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(12){
|
|
|
- top:200rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(12) {
|
|
|
+ top: 200rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(13){
|
|
|
- top:260rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(13) {
|
|
|
+ top: 260rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(14){
|
|
|
- top:260rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(14) {
|
|
|
+ top: 260rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(15){
|
|
|
- top:260rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(15) {
|
|
|
+ top: 260rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(16){
|
|
|
- top:320rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(16) {
|
|
|
+ top: 320rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(17){
|
|
|
- top:320rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(17) {
|
|
|
+ top: 320rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(18){
|
|
|
- top:320rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(18) {
|
|
|
+ top: 320rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(19){
|
|
|
- top:380rpx;
|
|
|
- left:30rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(19) {
|
|
|
+ top: 380rpx;
|
|
|
+ left: 30rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(20){
|
|
|
- top:380rpx;
|
|
|
- left:260rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(20) {
|
|
|
+ top: 380rpx;
|
|
|
+ left: 260rpx;
|
|
|
}
|
|
|
- .chart-b-li:nth-child(21){
|
|
|
- top:380rpx;
|
|
|
- left:490rpx;
|
|
|
+
|
|
|
+ .chart-b-li:nth-child(21) {
|
|
|
+ top: 380rpx;
|
|
|
+ left: 490rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -445,6 +496,9 @@
|
|
|
.color-B {
|
|
|
color: #2EA805;
|
|
|
}
|
|
|
+ .color-C {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
|
|
|
|
|
|
.statistics-b-li-b {
|
|
@@ -472,4 +526,4 @@
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|