From 379ab2ceed662c2e38b7ad134189bdd4c6116ba1 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 05 Feb 2024 11:07:18 +0800
Subject: [PATCH] fix:bug修复

---
 src/views/onlineRate/detailBox.vue |  144 +++++++++++++++++++++++++++++++++++------------
 1 files changed, 107 insertions(+), 37 deletions(-)

diff --git a/src/views/onlineRate/detailBox.vue b/src/views/onlineRate/detailBox.vue
index 608c90c..27e06ea 100644
--- a/src/views/onlineRate/detailBox.vue
+++ b/src/views/onlineRate/detailBox.vue
@@ -35,6 +35,7 @@
               value-format="yyyy-MM-dd HH:mm"
               :default-date="[macDate.startTime, macDate.endTime]"
               :picker-options="pickerOptions"
+              align="right"
               @change="changeDay"
             />
           </el-form-item>
@@ -43,7 +44,7 @@
       <div>
         <div class="tit">
           <p style="font-size:16px">
-            {{ macOnlineDetailData.code }}%
+            ���<span class="greenClor">{{ sum }}</span>{{ time }}��������� <span class="greenClor">{{ macOnlineDetailData.pieChart2 }}</span>{{ time }}������������<span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate.toFixed(2) }}%</span>
           </p>
           <div id="myPieChart" />
         </div>
@@ -98,7 +99,12 @@
               label="������������"
               align="center"
               label-class-name="itemSpan"
-            />
+            >
+              <template slot-scope="scope">
+                <span v-if="scope.row.mun!=='-'">{{ scope.row.mun }}{{ time }}</span>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
           </el-table>
         </div>
       </div>
@@ -117,6 +123,7 @@
   data () {
     return {
       title: '������',
+      sum: '',
       formInline: {},
       macOnlineDetailData: {},
       time: '������',
@@ -132,6 +139,42 @@
       // ������
 
       pickerOptions: {
+        shortcuts: [{
+          text: '������',
+          onClick (picker) {
+            const end = dayjs()
+            const start = new Date(dayjs().startOf('day'))
+            picker.$emit('pick', [new Date(start), new Date(end)])
+          }
+        }, {
+          text: '���1���',
+          onClick (picker) {
+            const end = dayjs()
+            const start = dayjs().subtract(1, 'day')
+            picker.$emit('pick', [new Date(start), new Date(end)])
+          }
+        }, {
+          text: '���3���',
+          onClick (picker) {
+            const end = dayjs()
+            const start = dayjs().subtract(3, 'day')
+            picker.$emit('pick', [new Date(start), new Date(end)])
+          }
+        }, {
+          text: '���5���',
+          onClick (picker) {
+            const end = dayjs()
+            const start = dayjs().subtract(5, 'day')
+            picker.$emit('pick', [new Date(start), new Date(end)])
+          }
+        }, {
+          text: '���7���',
+          onClick (picker) {
+            const end = dayjs()
+            const start = dayjs().subtract(7, 'day')
+            picker.$emit('pick', [new Date(start), new Date(end)])
+          }
+        }],
         onPick: ({ maxDate, minDate }) => {
           // ���������������������������������������������������
           this.choiceDate = minDate.getTime()
@@ -161,12 +204,19 @@
       }
     }
   },
+  computed: {
+    onlineRate () {
+      return (this.macOnlineDetailData.pieChart2 / this.sum) * 100 || 0
+    }
+  },
   watch: {
     time (newValue, oldValue) {
       if (newValue === '���') {
         this.type = 'day'
+        this.lineType = 'day'
       } else if (newValue === '������') {
         this.type = 'hour'
+        this.lineType = 'hour'
       } else if (newValue === '������') {
         this.type = 'minute'
       }
@@ -174,8 +224,8 @@
   },
   mounted () {
     this.title = `${this.macDate.name}������`
-    this.startTime = this.macDate.startTime
-    this.endTime = this.macDate.endTime
+    this.startTime = dayjs(this.macDate.startTime).format('YYYY-MM-DD  HH:mm')
+    this.endTime = dayjs(this.macDate.endTime).format('YYYY-MM-DD  HH:mm')
     this.$set(this.selectTime, 0, new Date(this.macDate.startTime))
     this.$set(this.selectTime, 1, new Date(this.macDate.endTime))
     this.getLineData()
@@ -195,28 +245,43 @@
       this.startTime = !this.selectTime ? '' : dayjs(this.selectTime[0]).format('YYYY-MM-DD  HH:mm')
       this.endTime = !this.selectTime ? '' : dayjs(this.selectTime[1]).format('YYYY-MM-DD  HH:mm')
       this.getMacDetail()
-      if (this.type !== 'minute') {
-        this.getLineData()
+      if (this.type === 'minute') {
+        this.lineType = 'hour'
+        this.getLineData(this.startTime, this.endTime, 'hour')
+      } else {
+        this.lineType = this.type
+        this.getLineData(this.startTime, this.endTime, this.type)
       }
     },
     initPieChart (pieChartData) {
+      let that = this
+      let percent = null
       let labelData = {
-        show: false,
-      }
-      if (pieChartData[0] > 0) {
-        labelData = {
-          show: true,
-          position: 'left',
-          normal: {
-            formatter: function (params) {
-              console.log('params22', params)
-              let onlineType = params.dataIndex === 0 ? '������' : '������'
-              return `${onlineType}: ${params.value}`
-            },
-            fontSize: 14, // ������������������
-            fontStyle: 'italic', // ������������������
+        show: true,
+        position: 'right',
+        alignTo: 'edge',
+        margin: 0,
+        normal: {
+          formatter: function (params) {
+            percent = params.percent
+            let onlineType = params.dataIndex === 0 ? '������' : '������'
+            return `${onlineType}{a|${params.value}}${that.time}:{b|${params.percent}%}`
           },
-        }
+          fontSize: 14, // ������������������
+          fontStyle: 'italic', // ������������������
+          rich: { // ���rich������������������������������������
+            a: {
+              fontSize: 14,
+              fontStyle: 'italic',
+              color: '#67c23a'
+            },
+            b: {
+              fontSize: 14,
+              fontStyle: 'italic',
+              color: percent !== 0 ? '#67c23a' : 'red'
+            },
+          }
+        },
       }
       let dom = document.getElementById('myPieChart')
       let myChart = echarts.init(dom)
@@ -237,29 +302,32 @@
         series: [
           {
             radius: 30,
-            center: ['30%', '50%'],
+            center: ['50%', '50%'],
             type: 'pie',
             data: pieChartData,
             label: labelData,
+            labelLayout: {
+              hideOverlap: false
+            }
           },
         ],
       }, true)
     },
     initChart (myChart, option, dom) {
       myChart.setOption(option)
-      if (this.lineType === 'hour') {
-        myChart.on('click', (params) => {
-          console.log(params)
+      myChart.on('click', (params) => {
+        if (this.lineType === 'hour') {
           this.lineType = 'minute'
           echarts.dispose(dom)
           var myChart = echarts.init(dom)
           let starTiem = params.data[0]
-          console.log('starTiem', dayjs(starTiem).format('YYYY.MM.DD  HH:mm:ss'))
-          let endTiem = dayjs(starTiem).add(1, 'hour')
+          let data = dayjs(starTiem).add(1, 'hour')
+          let endTiem = dayjs(data).isAfter(dayjs()) ? dayjs() : data
+          console.log('.isAfter(now)', dayjs(endTiem).isAfter(dayjs()))
           this.getLineData(dayjs(starTiem).format('YYYY-MM-DD  HH:mm:ss'), dayjs(endTiem).format('YYYY-MM-DD  HH:mm:ss'), 'minute')
           myChart.setOption(option, true)
-        })
-      }
+        }
+      })
     },
     renderBack () {
       this.lineType = 'hour'
@@ -278,13 +346,10 @@
     },
     getOption (xData, sData) {
       let option = null
-      let minTime = xData[0]
-      let maxTime = xData[xData.length]
       let interval = 3600 * 1000
       if (this.type === 'minute') {
         interval = 60 * 1000
       }
-      console.log(minTime, maxTime)
       option = {
         grid: {
           left: '40px', // ���������������
@@ -306,9 +371,8 @@
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            console.log(params)
             var value = params.data[0]
-            let tip = params.value === 1 ? '������: ' + value : '������: ' + value
+            let tip = params.value[1] === 1 ? '������: ' + value : '������: ' + value
             return tip
           },
         },
@@ -339,7 +403,7 @@
             height: 20, // ������������������������
             type: 'slider', // type������������������������������������������slider������������������������������������inside���������������������������������������
             xAxisIndex: 0, // ���������x���������������������x���������������������
-            filterMode: 'filter', // ���������������������������,'filter'���������������������������������������������������������������������������'weakFilter'���������������������������������������������������������������������������
+            filterMode: 'weakFilter', // ���������������������������,'filter'���������������������������������������������������������������������������'weakFilter'���������������������������������������������������������������������������
             start: 0, // ���������������������������������
             end: 100, // ���������������������������������
           },
@@ -379,7 +443,6 @@
           this.sData = data.map((item, index) => {
             return [ this.xData[index], item ]
           })
-          console.log(this.sData)
           this.$nextTick(() => {
             this.renderLine()
           })
@@ -401,6 +464,7 @@
       })
         .then(res => {
           this.macOnlineDetailData = res.data
+          this.sum = res.data.sum
           this.tableData = res.data.tabulation
           let pieChartData = [this.macOnlineDetailData.pieChart1, this.macOnlineDetailData.pieChart2]
           this.initPieChart(pieChartData)
@@ -436,7 +500,7 @@
 }
   #myPieChart {
     height: 120px;
-    width: 400px!important;
+    width: 600px!important;
     canvas {
       width: 100%!important;
     }
@@ -459,4 +523,10 @@
     top: -40px;
   }
 }
+.redClor{
+  color: red;
+}
+.greenClor{
+  color:#67c23a;
+}
 </style>

--
Gitblit v1.8.0