diff --git a/src/views/pages/area/components/ImportantAreaPopNew.vue b/src/views/pages/area/components/ImportantAreaPopNew.vue
index 433b9f7..4464b63 100644
--- a/src/views/pages/area/components/ImportantAreaPopNew.vue
+++ b/src/views/pages/area/components/ImportantAreaPopNew.vue
@@ -133,7 +133,10 @@
         </el-tree>
       </div>
       <div class="site-content-right">
-        右
+        <div><span>视频监控</span></div>
+         <video-play
+                :key="channelCode" :channel-id="[channelCode]"
+              ></video-play>
       </div>
       </div>
       <div class="site-content-people" v-show="selectedIndex == 2">
@@ -241,6 +244,7 @@
   </div>
 </template>
 <script>
+import VideoPlay from './VideoPlay'
 import bus from "@/views/layout/bus";
 import 'viewerjs/dist/viewer.css'
 import { directive as viewer } from "v-viewer"
@@ -286,13 +290,6 @@ export default {
           channelCode: returnData[0].channelCode
         })
       }
-    })
-      getCameraAllLabel().then((res) => {
-      this.tabList = res.data.data
-    });
-    getCameraAll().then((res) => {
-      this.cameraAllData = res.data
-      // this.addResourceTomap('cameraAll',res.data);
     })
        getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
       this.cameraTree = res.data.data
@@ -343,11 +340,12 @@ export default {
       selectedFacilitiesType:"",//设施类型
       facilitiesTypeOption:[{label:"设施类型",value:"1"}],
       facilitiesDataResource:[{facilitiesType:"设施类型1",address:"李沧",manageMan:"张山",telePhone:"1334650987"}],
-       cameraAllData:[],
       cameraTreeIsShow:true,
       cameraTreeSingle: [],
       checkStatus: '2',
       cameraTree:[],
+      channelCode:"3701222749350945",
+      
     };
   },
   methods: {
diff --git a/src/views/pages/areaMonitor/components/VideoListLeft.vue b/src/views/pages/areaMonitor/components/VideoListLeft.vue
index ccbbbce..58c503a 100644
--- a/src/views/pages/areaMonitor/components/VideoListLeft.vue
+++ b/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;"
-            @click="openVideoList">></span
-          ></span
-        >
+          >查看点位列表>
+          <!-- <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
+            >></span> -->
+            </span>
       </div>
       <div class="video-List">
       <div id="video1" class="monitor">
diff --git a/src/views/pages/areaMonitor/components/VideoListRight.vue b/src/views/pages/areaMonitor/components/VideoListRight.vue
index 735705e..ef365d7 100644
--- a/src/views/pages/areaMonitor/components/VideoListRight.vue
+++ b/src/views/pages/areaMonitor/components/VideoListRight.vue
@@ -58,45 +58,49 @@
       <div class="relevanceChart" id="relevance-chart"></div>
     </div>
     <!--管理力量分析建议-->
-    <div class="list3"> 
-       <div class="inner-title">管理力量分析建议</div>
-       <div class="list3-analysis">
+    <div class="list3">
+      <div class="inner-title">管理力量分析建议</div>
+      <div class="list3-analysis">
         <div class="analysis-item">
           <div class="item-div">
-          <div>管理人员</div>
-          <div>{{analysis.manageNum}}人</div>
+            <div>管理人员</div>
+            <div>{{ analysis.manageNum }}人</div>
           </div>
         </div>
         <div class="analysis-item">
           <div class="item-div">
-          <div>环卫人员</div>
-          <div>{{analysis.sanitationNum}}人</div>
+            <div>环卫人员</div>
+            <div>{{ analysis.sanitationNum }}人</div>
           </div>
-          </div>
-     
+        </div>
+
         <div class="analysis-item">
           <div class="item-div">
-          <div>垃圾运送</div>
-          <div>{{analysis.garbageNum}}次/天</div>
+            <div>垃圾运送</div>
+            <div>{{ analysis.garbageNum }}次/天</div>
           </div>
         </div>
         <div class="analysis-item">
           <div class="item-div">
-          <div>机械化作业</div>
-          <div>{{analysis.mechanNum}}次/天</div>
+            <div>机械化作业</div>
+            <div>{{ analysis.mechanNum }}次/天</div>
+          </div>
         </div>
-        </div>
-       </div>
-       <div class="analysis-advice">
-        <span style=" font-size: 14px;color: #fff;">决策建议：</span>
-        预测<span style=" font-size: 14px;
-        color: rgb(0 255 255);
-        cursor: pointer;
-        text-decoration: underline;" >{{analysis.area}}</span>
-        下周人流量较高，建议增加环卫人员数量、垃圾收运频次
-       </div>
       </div>
-    
+      <div class="analysis-advice">
+        <span style="font-size: 14px; color: #fff">决策建议：</span>
+        预测<span
+          style="
+            font-size: 14px;
+            color: rgb(0 255 255);
+            cursor: pointer;
+            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: "",
@@ -116,20 +119,20 @@ export default {
       top5AreaList: [],
       //选中的高发区域
       selectArea: "",
-       //相关性
-       relevanceName1: "垃圾桶满溢",
+      //相关性
+      relevanceName1: "垃圾桶满溢",
       relevanceName2: "路面不洁",
       relevanceName3: "违规停车",
       areaName: "第一海水浴场",
       //管理力量分析
-      analysis:{
-        manageNum:3,
-        sanitationNum:14,
-        garbageNum:2,
-        mechanNum:1,
-        advice:'',
-        area:'第一海水浴场'
-      }
+      analysis: {
+        manageNum: 3,
+        sanitationNum: 14,
+        garbageNum: 2,
+        mechanNum: 1,
+        advice: "",
+        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)",
@@ -272,73 +308,151 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["11.04", "11.05", "11.06", "11.07", "11.08","11.09","11.10"],
+          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: "rgb(89 166 190)",
+                color: new echarts.graphic.LinearGradient(
+                  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',
-              showSymbol: false,
+              normal: {
+                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',
-              showSymbol: false,
+              normal: {
+                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',
-              showSymbol: false,
+              normal: {
+                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;
-    line-height: 20px;
+    height: 22px;
+    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%;
@@ -452,7 +569,7 @@ export default {
         display: table-cell;
         .top5EventStyle {
           float: left;
-          margin-right:10px;
+          margin-right: 10px;
           margin-left: 0px;
           width: 100%;
           height: 140px;
@@ -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;
@@ -476,37 +594,36 @@ export default {
     .relevanceChart {
       margin-left: 10px;
       height: 160px;
-      margin-right:10px;
+      margin-right: 10px;
     }
   }
   .list3 {
-    width: 100%;    
-    .list3-analysis{
+    width: 100%;
+    .list3-analysis {
       display: table;
       width: 98%;
       margin-left: 10px;
-    
-      .analysis-item{
+
+      .analysis-item {
         text-align: center;
         display: table-cell;
-        width:25%;
-        color:#fff;
-        .item-div{
-          background: #5f676c;
+        width: 25%;
+        color: #fff;
+        .item-div {
+          //  background: #5f676c;
+          background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
           margin: 10px 10px;
         }
       }
     }
- .analysis-advice{
-  color: rgb(0 255 255);
-  font-size: 14px;
-  margin-left: 10px;
- }
-
+    .analysis-advice {
+      color: rgb(0 255 255);
+      font-size: 14px;
+      margin-left: 10px;
+    }
   }
   .list4 {
     width: 100%;
-   
   }
   header {
     width: 100%;
diff --git a/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue b/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue
index c12830d..8d651b8 100644
--- a/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue
+++ b/src/views/pages/civilizedCity/components/EventListDetailsPopNew.vue
@@ -150,7 +150,7 @@ export default {
       openVideo: false,
       newImageUrl: "",
       resourceType:"resource",
-      channelCode:["3701222749350945"]
+      channelCode:"3701222749350945"
 
     };
   },