Merge branch 'master' of http://192.168.124.50:80/wuhongjian/qd-changjing

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

@@ -4,17 +4,17 @@
       <div class="inner-title">
         重点点位视频监控
         <span
+        @click="openVideoList"
           style="float: right;
             font-size: 16px;
-            color: #fff;
             margin-right: 10px;
             font-weight: normal;
+            color: rgb(0 255 255);  cursor: pointer;
           "
-          >查看点位列表
+          >查看点位列表>
-          <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
+          <!-- <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
-            @click="openVideoList">></span
+            >></span> -->
-          ></span
+            </span>
-        >
       </div>
       <div class="video-List">
       <div id="video1" class="monitor">

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

@@ -88,15 +88,19 @@
         </div>
       </div>
       <div class="analysis-advice">
-        <span style=" font-size: 14px;color: #fff;">决策建议：</span>
+        <span style="font-size: 14px; color: #fff">决策建议：</span>
-        预测<span style=" font-size: 14px;
+        预测<span
+          style="
+            font-size: 14px;
             color: rgb(0 255 255);
             cursor: pointer;
-        text-decoration: underline;" >{{analysis.area}}</span>
+            text-decoration: underline;
+          "
+          >{{ analysis.area }}</span
+        >
         下周人流量较高，建议增加环卫人员数量、垃圾收运频次
       </div>
     </div>
-    
   </div>
 </template>
   <script>
@@ -105,7 +109,6 @@ import * as echarts from "echarts";
 export default {
   data() {
     return {
-     
       daterange: null,
       dataForm: {
         title: "",
@@ -127,9 +130,9 @@ export default {
         sanitationNum: 14,
         garbageNum: 2,
         mechanNum: 1,
-        advice:'',
+        advice: "",
-        area:'第一海水浴场'
+        area: "第一海水浴场",
-      }
+      },
     };
   },
   components: {},
@@ -213,18 +216,39 @@ export default {
           type: "category",
           data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
           axisLine: {
+            show: false, // 不显示坐标轴线
             lineStyle: {
               color: "#fff",
               fontSize: 10,
             },
           },
+          axisTick: {
+            show: false, // 隐藏坐标轴的刻度线
+            alignWithLabel: true, // 图形于标题居中
+            inside: true, // 刻度线是指向内部还是外部
+            length: 0, // x轴上指向标题刻度线的长度
+          },
         },
         yAxis: {
           type: "value",
-          axisLine: {
+          axisTick: {
+            show: false, // 隐藏坐标轴的刻度线
+            alignWithLabel: true, // 图形于标题居中
+            inside: true, // 刻度线是指向内部还是外部
+            length: 0, // x轴上指向标题刻度线的长度
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff", // 坐标轴文字颜色
+              fontSize: 10, // 坐标轴文字大小
+            },
+          },
+          splitLine: {
             lineStyle: {
-              color: "#fff",
+              // 直线指示器样式设置
-              fontSize: 10,
+              color: "#48b",
+              width: 1,
+              type: "solid",
             },
           },
         },
@@ -235,7 +259,17 @@ export default {
             itemStyle: {
               normal: {
                 //这里是重点
-                color: "#fe8463",
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    { offset: 1, color: "#FFDD53" },
+                    { offset: 0, color: "#FF515A" },
+                  ],
+                  false
+                ),
               },
             },
           },
@@ -254,7 +288,9 @@ export default {
           left: "40px",
           bottom: "20px",
         },
+
         tooltip: {
+          data: ["1", "2", "3", "4"],
           // 鼠标悬浮提示框显示 X和Y 轴数据
           trigger: "axis",
           backgroundColor: "rgba(32, 33, 36,.7)",
@@ -274,71 +310,149 @@ export default {
           type: "category",
           data: ["11.04", "11.05", "11.06", "11.07", "11.08", "11.09", "11.10"],
           axisLine: {
+            show: false, // 不显示坐标轴线
             lineStyle: {
               color: "#fff",
               fontSize: 10,
             },
           },
+          axisTick: {
+            show: false, // 隐藏坐标轴的刻度线
+            alignWithLabel: true, // 图形于标题居中
+            inside: true, // 刻度线是指向内部还是外部
+            length: 0, // x轴上指向标题刻度线的长度
+          },
         },
         yAxis: [
           {
             type: "value",
-            axisLine: {
+            axisTick: {
+              show: false, // 隐藏坐标轴的刻度线
+              alignWithLabel: true, // 图形于标题居中
+              inside: true, // 刻度线是指向内部还是外部
+              length: 0, // x轴上指向标题刻度线的长度
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#fff", // 坐标轴文字颜色
+                fontSize: 10, // 坐标轴文字大小
+              },
+            },
+            splitLine: {
+              show: false, // 隐藏坐标轴的刻度线
               lineStyle: {
-                color: "#fff",
+                // 直线指示器样式设置
-                fontSize: 10,
+                color: "#48b",
+                width: 1,
+                type: "solid",
               },
             },
           },
           {
             type: "value",
-            axisLine: {
+            axisTick: {
+              show: false, // 隐藏坐标轴的刻度线
+              alignWithLabel: true, // 图形于标题居中
+              inside: true, // 刻度线是指向内部还是外部
+              length: 0, // x轴上指向标题刻度线的长度
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#fff", // 坐标轴文字颜色
+                fontSize: 10, // 坐标轴文字大小
+              },
+            },
+            splitLine: {
               lineStyle: {
-                color: "#fff",
+                // 直线指示器样式设置
-                fontSize: 10,
+                color: "#48b",
+                width: 1,
+                type: "solid",
               },
             },
           },
         ],
         series: [
           {
-            data: [25, 20, 15, 11, 10, 5,6,3],
+            name: "人员数量",
+            data: [14, 10, 4, 11, 10, 12, 6, 13],
             type: "bar",
             itemStyle: {
               normal: {
-  
+                color: new echarts.graphic.LinearGradient(
-                color: "rgb(89 166 190)",
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    { offset: 0, color: "#00DCFB" },
+                    { offset: 1, color: "#14566B" },
+                  ],
+                  false
+                ),
               },
             },
           },
           {
+            name: "路面不洁",
             type: "line",
             yAxisIndex: 1,
-            data: [59, 10, 140, 40, 30, 40,160,50],
+            data: [150, 165, 160, 150, 130, 140, 160],
             itemStyle: {
-              color: 'green',
+              normal: {
-              showSymbol: false,
+                color: "#faa12f", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#faa12f",
+                  width: 1,
+                  borderColor: "#faa12f", //拐点边框颜色
+                },
+              },
             },
           },
           {
+            name: "违规停车",
             type: "line",
             yAxisIndex: 1,
-            data: [20, 30, 49, 57, 120, 28,40,60],
+            data: [140, 155, 126, 172, 130, 120, 150],
             itemStyle: {
-              color: 'yellow',
+              normal: {
-              showSymbol: false,
+                color: "#eff20c", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#eff20c",
+                  width: 1,
+                  borderColor: "#b5d816", //拐点边框颜色
+                },
+              },
             },
           },
           {
+            name: "垃圾桶满溢",
             type: "line",
             yAxisIndex: 1,
-            data: [60, 80, 100, 100, 150, 126,100,160],
+            data: [170, 155, 110, 120, 110, 120, 110],
             itemStyle: {
-              color: 'orange',
+              normal: {
-              showSymbol: false,
+                color: "#08e715", //圆点颜色
+                borderColor: "rgba(251,222,153,0.5)",
+                borderWidth: 4,
+                lineStyle: {
+                  //折线颜色大小
+                  type: "solid", //'dotted'虚线 'solid'实线
+                  color: "#08e715",
+                  width: 1,
+                  borderColor: "#147f1a", //拐点边框颜色
+                },
+              },
             },
           },
-          
         ],
       };
       eventChart.setOption(option);
@@ -373,10 +487,12 @@ export default {
     margin-top: 7px;
     width: 96%;
     margin-left: 2%;
-    height: 20px;
+    height: 22px;
-    line-height: 20px;
+    line-height: 22px;
     border-radius: 1px;
     background: #9000;
+    border-color: #107bb0;
+    box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
     color: #ffffff;
   }
   ::v-deep .el-date-editor .el-range__icon {
@@ -399,6 +515,7 @@ export default {
     font-size: 16px;
     font-weight: bold;
     color: #ffffff;
+    // background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%);
   }
   .list1 {
     width: 100%;
@@ -464,7 +581,8 @@ export default {
     width: 100%;
     .list2-conclusion {
       color: #fff;
-      border: 1px solid #fff;
+      border-color: #107bb0;
+      box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
       margin: 10px;
       padding: 0px 3px;
       font-size: 14px;
@@ -492,7 +610,8 @@ export default {
         width: 25%;
         color: #fff;
         .item-div {
-          background: #5f676c;
+          //  background: #5f676c;
+          background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
           margin: 10px 10px;
         }
       }
@@ -502,11 +621,9 @@ export default {
       font-size: 14px;
       margin-left: 10px;
     }
-
   }
   .list4 {
     width: 100%;
-   
   }
   header {
     width: 100%;