From 301532b5c1cad2c1d45080bfef86579b20486bf5 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 25 十二月 2024 10:33:23 +0800
Subject: [PATCH] 首页调整、考核结果页面调整

---
 src/views/home/data-chart/index.vue |   98 ++++++++++++++++++++++++++++++++----------------
 1 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/src/views/home/data-chart/index.vue b/src/views/home/data-chart/index.vue
index 0681229..48f1994 100644
--- a/src/views/home/data-chart/index.vue
+++ b/src/views/home/data-chart/index.vue
@@ -5,14 +5,14 @@
         <div class="title-container">
           <h1>杩愮淮鐩戞帶鎶ヨ〃</h1>
           <div class="select-container">
-            <el-select v-model="company" placeholder="璇烽�夋嫨杩愮淮鍏徃">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            <el-select v-model="params.unitId" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="showData">
+              <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
           </div>
           <div class="date-container">
-            <el-date-picker v-model="dateRange" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�"
-              end-placeholder="缁撴潫鏃ユ湡">
+            <el-date-picker type="monthrange" v-model="params.dateRange" range-separator="鑷�" start-placeholder="寮�濮嬫湀浠�"
+              end-placeholder="缁撴潫鏈堜唤" @change="showData">
             </el-date-picker>
           </div>
         </div>
@@ -26,38 +26,33 @@
 
 <script>
 import * as echarts from 'echarts';
+import { ywUnitList, monitor } from "@/api/platform/home";
 let lineChart = null;
+let observer = null;
 export default {
   name: 'DataChart',
   data() {
     return {
-      dateRange: '',
-      company: '',
-      options: [
-        { label: 'XX杩愮淮鍏徃1', value: 'XX杩愮淮鍏徃1' },
-        { label: 'XX杩愮淮鍏徃2', value: 'XX杩愮淮鍏徃2' },
-        { label: 'XX杩愮淮鍏徃3', value: 'XX杩愮淮鍏徃3' },
-        { label: 'XX杩愮淮鍏徃4', value: 'XX杩愮淮鍏徃4' },
-      ],
-      dataList: [
-        {
-          name: 'XX杩愮淮鍏徃1',
-          state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
-          state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }
-        },
-      ],
+      params: {
+        dateRange: '',
+        unitId: ''
+      },
+      options: [],
+      dataList: [],
     }
   },
   methods: {
     initChart() {
+      const sortedKeys  = Object.keys(this.acitveData.state)
+        .sort(); // 鎸夌収瀛楃涓茬殑瀛楀吀搴忓閿繘琛屾帓搴�
       const option = {
         legend: {
-          right: '2%',
-          top: '5%',
+          right: 'right',
+          top: 'top',
+          orient: "vertical",
           icon: 'rect',
           data: [
             {
-
               name: '姝e父鏁�',
               itemStyle: {
                 color: 'rgba(62, 144, 247, 1)'
@@ -81,13 +76,13 @@
         tooltip: {},
         xAxis: {
           type: 'category',
-          data: Object.keys(this.acitveData.state),
+          data: sortedKeys,
         },
         yAxis: {},
         series: [
           {
             name: '姝e父鏁�',
-            data: Object.entries(this.acitveData.state).map(([key, value]) => value),
+            data: sortedKeys.map(key => this.acitveData.state[key]),
             type: 'line',
             itemStyle: {
               color: 'rgba(62, 144, 247, 1)'
@@ -95,7 +90,7 @@
           },
           {
             name: '寮傚父鏁�',
-            data: Object.entries(this.acitveData.state2).map(([key, value]) => value),
+            data: sortedKeys.map(key => this.acitveData.state2[key]),
             type: 'line',
             itemStyle: {
               color: 'rgba(85, 192, 191, 1)'
@@ -106,21 +101,59 @@
       lineChart.setOption(option, true);
     },
 
+
+    showData() {
+      monitor(this.params).then(res => {
+        this.acitveData = res.data;
+        if (Object.keys(this.acitveData).length === 0) {
+          this.acitveData = {
+              "name": "",
+              "state": {},
+              "state2": {}
+          }
+        }
+        lineChart = echarts.init(this.$refs.chartContent);
+        this.initChart();
+        this.observe();
+      })
+    },
+
+    // 鐩戝惉鍙樺寲
+    observe() {
+      if (!observer) {
+        observer = new ResizeObserver(entries => {
+          this.handleResize();
+        })
+      }
+      observer.observe(this.$refs.chartContent);
+    },
+    // 绐楀彛鍙樻崲
     handleResize() {
       if (lineChart) {
-        lineChart.resize()
+        lineChart.resize();
       }
     }
 
   },
   mounted() {
-    this.acitveData = this.dataList[0];
-    lineChart = echarts.init(this.$refs.chartContent);
-    this.initChart();
-    window.addEventListener('resize', this.handleResize)
+    ywUnitList().then(res => {
+      this.options = res.data.data.map(item => {
+        return {
+          label: item.value,
+          value: item.id
+        }
+      })
+      if (this.params.unitId === '') {
+        this.params.unitId = this.options[0].value;
+      }
+      this.showData();
+    })
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize)
+    if (lineChart) {
+      lineChart.dispose();
+      observer.unobserve(this.$refs.chartContent);
+    }
   },
 }
 </script>
@@ -148,7 +181,6 @@
   align-items: center;
   z-index: 2;
 
-
   .more-button {
     cursor: pointer;
     font-size: 16px;
@@ -171,4 +203,4 @@
   margin: 0 20px;
   width: 180px;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0