From b599374e54fcb8fc56e6ccc8efe5f2b3f3d20716 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 29 九月 2025 13:40:54 +0800
Subject: [PATCH] 新问题 25-9-28

---
 src/views/home/data-video/index.vue |   62 +++++++++++++++++++++++-------
 1 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/views/home/data-video/index.vue b/src/views/home/data-video/index.vue
index b152a69..01d4df8 100644
--- a/src/views/home/data-video/index.vue
+++ b/src/views/home/data-video/index.vue
@@ -10,10 +10,16 @@
               </el-option>
             </el-select>
           </div>
-          <div >
+          <div style="margin-right: 20px" >
             <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏈堜唤"
                             @change="dateChange">
             </el-date-picker>
+          </div>
+          <div >
+            <el-select v-model="params.area" placeholder="鍖哄幙" @change="getChart"  clearable>
+              <el-option v-for="item in areaOption" :key="item.label" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
           </div>
         </div>
         <div class="chart-container">
@@ -41,6 +47,15 @@
       options: [
         {label: '鐪佸巺', value: 1},
         {label: '鍏畨閮�', value: 2}
+      ],
+      areaOption:[
+        {label:'鑷祦浜曞尯',value:'510302'},
+        {label:'璐′簳鍖�',value:'510303'},
+        {label:'澶у畨鍖�',value:'510304'},
+        {label:'娌挎哗鍖�',value:'510311'},
+        {label:'鑽ｅ幙',value:'510321'},
+        {label:'瀵岄『鍘�',value:'510322'},
+        {label:'楂樻柊鍖�',value:'510399'},
       ],
       dataList: [],
     }
@@ -91,7 +106,7 @@
     initChart(data) {
       const dataList = this.groupByData(data.list);
       const baseLine = data.baseLine == null ? 0 : data.baseLine;
-      const colors = ['#5470C6', '#66CC99', '#EE6666'];
+      const colors = ['#EE6666', '#66CC99', '#f8c87a'];
       option = {
         color: colors,
         tooltip: {
@@ -127,14 +142,14 @@
           }
         },
         grid: {
-          left: 10,
+          left: 15,
           right: 0,
           bottom: 0,
-          top: '20%',
+          top:'10%',
           containLabel: true
         },
         legend: {
-          data: ['鐐逛綅鍦ㄧ嚎', '褰曞儚瀹屾暣', '褰曞儚缂哄け']
+          data: ['鐐逛綅鍦ㄧ嚎', '褰曞儚瀹屾暣', '褰曞儚缂哄け','鏃犲綍鍍�']
         },
         xAxis: [
           {
@@ -172,7 +187,7 @@
             axisLine: {
               show: true,
               lineStyle: {
-                color: colors[0]
+                color: '#5470C6'
               }
             },
             axisLabel: {
@@ -208,7 +223,9 @@
             name: '褰曞儚瀹屾暣',
             yAxisIndex: 0,
             type: 'bar',
-            data: data.list.map(item => {
+            data:
+
+              data.list.map(item => {
               return item['integrityNum'];
             })
           },
@@ -217,9 +234,27 @@
             type: 'bar',
             yAxisIndex: 0,
             data:  data.list.map(item => {
-              return item['loseNum'];
+              return {
+                value: item['loseNum'],
+                itemStyle:{
+                  color: '#f8c87a',
+                }
+              }
             })
           },
+          {
+            name: '鏃犲綍鍍�',
+            type: 'bar',
+            yAxisIndex: 0,
+            data:  data.list.map(item => {
+              return {
+                value :item['errNum'],
+                itemStyle:{
+                  color: '#EE6666',
+                }}
+            })
+          },
+
           {
             name: '鐐逛綅鍦ㄧ嚎',
             type: 'line',
@@ -276,7 +311,6 @@
 .data-chart-container {
   height: 400px;
   margin-bottom: 20px;
-
   .data-card {
     height: 100%;
 
@@ -289,12 +323,11 @@
 }
 
 .title-container {
-  position: absolute;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  z-index: 2;
-
+  padding: 15px 20px; /* 鍐呰竟璺濇帶鍒堕珮搴﹀拰杈硅窛 */
+  background: #fff;
+  border-bottom: 1px solid #eee; /* 鍒嗛殧绾垮寮鸿瑙夊垎绂� */
   .more-button {
     cursor: pointer;
     font-size: 16px;
@@ -303,9 +336,8 @@
 }
 
 .chart-container {
-
   width: 100%;
-  height: 100%;
+  height: 80%;
 
   #chartContent {
     width: 100%;

--
Gitblit v1.8.0