提交

src/views/pages/areaMonitor/components/VideoListRight.vue

@@ -51,7 +51,7 @@
         > -->
       </div>
       <div class="list2-conclusion">
-        结论：<span>{{ relevanceName1 }}</span
+        <img src="../image/zongjie.png"> 结论：<span>{{ relevanceName1 }}</span
         >、<span>{{ relevanceName2 }}</span
         >、<span>{{ relevanceName1 }}</span> 与<span>{{ areaName }}</span
         >人员聚集较强相关。
@@ -89,7 +89,7 @@
         </div>
       </div>
       <div class="analysis-advice">
-        <span style="font-size: 14px; color: #fff">决策建议：</span>
+        <span style="font-size: 14px; color: #fff"><img src="../image/jianyi.png"> 决策建议：</span>
         预测<span
           style="
             font-size: 14px;
@@ -99,7 +99,7 @@
           "
           >{{ analysis.area }}</span
         >
-        下周人流量较高，建议增加环卫人员数量、垃圾收运频次
+        本周末人流量较高，建议增加管理人员数量、环卫人员数量。
       </div>
     </div>
   </div>
@@ -111,7 +111,7 @@ import * as echarts from "echarts";
 export default {
   data() {
     return {
-      daterange: null,
+      daterange: ['2022-11-18','2022-11-25'],
       dataForm: {
         title: "",
         startDate: "",
@@ -129,11 +129,11 @@ export default {
       //管理力量分析
       analysis: {
         manageNum: 3,
-        sanitationNum: 14,
+        sanitationNum: 5,
         garbageNum: 2,
         mechanNum: 1,
         advice: "",
-        area: "第一海水浴场",
+        area: "台东商圈",
       },
     };
   },
@@ -159,37 +159,37 @@ export default {
         {
           title: "TOP1",
           img:require("../image/one.png"),
-          areaName: "第一海水浴场",
+          areaName: "台东商圈",
           areaId: "1",
-          num: "223",
+          num: "12",
         },
         {
           title: "TOP2",
           img:require("../image/two.png"),
-          areaName: "石老人海水浴场",
+          areaName: "李村商圈",
           areaId: "2",
-          num: "123",
+          num: "8",
         },
         {
           title: "TOP3",
           img:require("../image/three.png"),
-          areaName: "金沙滩海水浴场",
+          areaName: "五四广场",
           areaId: "3",
-          num: "111",
+          num: "7",
         },
         {
           title: "4",
           img:require("../image/four.png"),
           areaName: "第一海水浴场",
           areaId: "4",
-          num: "65",
+          num: "5",
         },
         {
           title: "5",
           img:require("../image/five.png"),
-          areaName: "第一海水浴场",
+          areaName: "石老人海水浴场",
           areaId: "5",
-          num: "32",
+          num: "4",
         },
       ];
     },
@@ -222,7 +222,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
+          data: ["违章停车", "垃圾桶满溢", "占道经营", "道路不洁", "垃圾收运不及时"],
           axisLine: {
             show: false, // 不显示坐标轴线
             lineStyle: {
@@ -262,7 +262,8 @@ export default {
         },
         series: [
           {
-            data: [250, 200, 150, 110, 100, 50],
+            name:"事件数量",
+            data: [31, 24, 17, 13, 12],
             type: "bar",
             itemStyle: {
               normal: {
@@ -316,7 +317,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["11.04", "11.05", "11.06", "11.07", "11.08", "11.09", "11.10"],
+          data: ["11/18", "11/19", "11/20", "11/21", "11/22", "11/23", "11/24"],
           axisLine: {
             show: false, // 不显示坐标轴线
             lineStyle: {
@@ -382,8 +383,8 @@ export default {
         ],
         series: [
           {
-            name: "人员数量",
+            name: "人流量",
-            data: [14, 10, 4, 11, 10, 12, 6, 13],
+            data: [2500, 5600, 6500, 1200, 2300, 2400, 1900, 1800],
             type: "bar",
             itemStyle: {
               normal: {
@@ -402,10 +403,10 @@ export default {
             },
           },
           {
-            name: "路面不洁",
+            name: "违章停车数量",
             type: "line",
             yAxisIndex: 1,
-            data: [150, 165, 160, 150, 130, 140, 160],
+            data: [1, 10, 12, 2, 2, 3, 2,1],
             itemStyle: {
               normal: {
                 color: "#faa12f", //圆点颜色
@@ -422,10 +423,10 @@ export default {
             },
           },
           {
-            name: "违规停车",
+            name: "垃圾桶满溢事件数量",
             type: "line",
             yAxisIndex: 1,
-            data: [140, 155, 126, 172, 130, 120, 150],
+            data: [1,7,8,1,2,2,1,2],
             itemStyle: {
               normal: {
                 color: "#eff20c", //圆点颜色
@@ -442,10 +443,10 @@ export default {
             },
           },
           {
-            name: "垃圾桶满溢",
+            name: "占道经营事件数量",
             type: "line",
             yAxisIndex: 1,
-            data: [170, 155, 110, 120, 110, 120, 110],
+            data: [1,4,5,1,1,2,1,2],
             itemStyle: {
               normal: {
                 color: "#08e715", //圆点颜色
@@ -461,6 +462,46 @@ export default {
               },
             },
           },
+          {
+            name: "道路不洁事件数量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [1,2,1,1,2,2,3,1],
+            itemStyle: {
+              normal: {
+                color: "#e51b4d", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#e51b4d",
+                  width: 1,
+                  borderColor: "#e51b4d", //拐点边框颜色
+                },
+              },
+            },
+          },
+          {
+            name: "垃圾收运不及时事件数量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [2,1,1,2,1,3,1,1],
+            itemStyle: {
+              normal: {
+                color: "#d63ac3", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#d63ac3",
+                  width: 1,
+                  borderColor: "#d63ac3", //拐点边框颜色
+                },
+              },
+            },
+          },
         ],
       };
       eventChart.setOption(option);
@@ -517,8 +558,8 @@ export default {
     font-size: 12px;
   }
   .inner-title {
-    margin-top: 6px;
+    margin-top: 10px;
-    margin-bottom: 6px;
+    margin-bottom: 10px;
     margin-left: 10px;
     font-size: 16px;
     font-weight: bold;
@@ -633,9 +674,13 @@ export default {
       }
     }
     .analysis-advice {
+      border-color: #107bb0;
+      box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
       color: rgb(0 255 255);
       font-size: 14px;
       margin-left: 10px;
+      margin-right: 10px;
+      margin-top: 8px;
     }
   }
   .list4 {

src/views/pages/areaMonitor/components/VideoLists.vue

@@ -310,8 +310,8 @@ export default {
     }
 
     .el-checkbox-group {
-      height: 316px;
+      height: 425px;
-      width: 372px;
+      width: 444px;
       overflow-y: auto;
       margin-top: 6px;
       &::-webkit-scrollbar {
@@ -348,7 +348,7 @@ export default {
     }
 
     .el-tree {
-      width: 398px;
+      width: 444px;
     height:460px;
       overflow-y: auto;
       margin-top: 10px;

src/views/pages/areaMonitor/index.vue

@@ -924,7 +924,7 @@ export default {
     right: 10px;
     top: 89px;
     width: 477px;
-    height: 658px;
+    height:700px;
     background: rgba(5, 33, 59, 1);
   }
   .legend {