提交

src/router/index.js

@@ -202,7 +202,6 @@ const router = new Router({
 })
 
 router.beforeEach((to, from, next) => {
-  debugger
   const userName = Cookies.get('userCJZT')
   console.log(userName)
   if (to.path === '/login' || to.path === '/' || to.path === '/waterPoints') {

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="box">
+    <div class="list4">
+      <div class="inner-title">
+        重点点位视频监控
+        <span
+          style="
+            float: right;
+            font-size: 16px;
+            color: #fff;
+            margin-right: 10px;
+            font-weight: normal;
+          "
+          >查看点位列表
+          <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
+            @click="openVideoList">></span
+          ></span
+        >
+      </div>
+      <div class="video-List">放视频</div>
+    </div>
+  </div>
+</template>
+    <script>
+import bus from "@/views/layout/bus";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  components: {},
+  created() {},
+  mounted() {},
+  methods: {
+    //打开视频列表
+    openVideoList(){
+        
+    }
+  },
+  watch: {},
+};
+</script>
+    <style lang='scss' scoped>
+@font-face {
+  font-family: "Tensentype-ZhiHeiJ-W5";
+  src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
+}
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("../../../../assets/construction/DIN-Bold.otf");
+}
+.box {
+  position: relative;
+  .inner-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .list4 {
+    width: 100%;
+    .video-List {
+    //   background: red;
+      height: 146px;
+      margin-left: 40px;
+      margin-right: 40px;
+      margin-top: 10px;
+    }
+  }
+}
+</style>
+    

src/views/pages/area/index.vue

@@ -38,7 +38,10 @@
 
       <div class="eventNum">
         累计事件数量(2022.05.25-至今)
-        <p><span>{{ allListDataNum }}</span>件</p>
+        <p>
+          <span>{{ allListDataNum }}</span
+          >件
+        </p>
       </div>
 
       <!-- 事件感知 -->
@@ -48,16 +51,23 @@
       </div>
 
       <!-- 视频标签、列表 -->
+           
       <div class="complaintContent1">
-        <video-list-right ref="videoListRef"></video-list-right>
+                <video-list-right></video-list-right>      
       </div>
-      <div class="keyAreas" @click="handleKeyArea">
+               
+      <!-- 重点视频列表 -->
+           
+      <div class="mainVideoList">
+                <video-list-left></video-list-left>      
+      </div>
+      <!-- <div class="keyAreas" @click="handleKeyArea">
          重点区域
-      </div>
+      </div> -->
       <!-- 工地列表 -->
-      <div class="siteList" v-if="keyAreasShow">
+      <!-- <div class="siteList" v-if="keyAreasShow">
         <site-list-more></site-list-more>
-      </div>
+      </div> -->
       <!-- 热力图图例 -->
       <div class="legend"></div>
 
@@ -75,33 +85,45 @@
         <div class="title">地图显示</div>
         <div class="change-btn-box">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
+            <el-checkbox
+              v-for="item in changeLayerBtnList"
+              :key="item.index"
+              :label="item"
+              @change="layerHandleChange(item)"
+            ></el-checkbox>
           </el-checkbox-group>
         </div>
         <div class="title">重点区域</div>
-        <div class="change-btn-box" style="width:230px">
+        <div class="change-btn-box" style="width: 230px">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
+            <el-checkbox
+              v-for="item in changeLayerBtnListArea"
+              :key="item.index"
+              :label="item"
+              @change="layerHandleChange(item)"
+            ></el-checkbox>
           </el-checkbox-group>
         </div>
         <div class="title">
-          <span class="special-title" @click="clearThermodynamic"> 人流热力 </span>
+          <span class="special-title" @click="clearThermodynamic">
+            人流热力
+          </span>
         </div>
         <div class="change-btn-box">
           <!-- <el-checkbox-group v-model="changeLayerBtnGroup">
             <el-checkbox v-for="item in changeLayerBtnListHot" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
           </el-checkbox-group> -->
-          <el-radio-group v-model="thermodynamicPeopleType" @change="changeThermodynamicPeopleType">
+          <el-radio-group
+            v-model="thermodynamicPeopleType"
+            @change="changeThermodynamicPeopleType"
+          >
             <el-radio label="all">全市</el-radio>
             <el-radio label="local">本地</el-radio>
             <el-radio label="noLocal">外地</el-radio>
           </el-radio-group>
         </div>
       </div>
-      <video-play
-        v-if="openVideo"
-        :channel-id="channelCode"
-      ></video-play>
+      <video-play v-if="openVideo" :channel-id="channelCode"></video-play>
     </div>
   </div>
 </template>
@@ -113,16 +135,25 @@ import { searchCamera } from "@/api/videoSurveillance/index";
 import bus from "@/views/layout/bus";
 import complaintEvent from "./components/ComplaintEvent";
 import EarlyWarning from "./components/EarlyWarning";
-import VideoPlay from './components/VideoPlay'
+import VideoPlay from "./components/VideoPlay";
 import VideoListRight from "./components/VideoListRight";
+import VideoListLeft from "./components/VideoListLeft";
 import SiteListMore from "./components/SiteListMore";
 import { selectByJdWd } from "@/api/construction/index";
-import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
-import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
+import {
+  createSiteListPop,
+  createCameraDetailsPop,
+  createEventListDetailsPop,
+  createImportantAreaPop,
+} from "@/supermap/createMarkerPopup";
+import {
+  listPassengerFlow,
+  listPassengerFlowByAllNums,
+} from "@/api/civilizedCity.js";
 import { selectByAreaEvent, selectKeyArea } from "@/api/area";
 import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
 // 时间轴
-import HorizonTimeLine from './components/HorizonTimeLine'
+import HorizonTimeLine from "./components/HorizonTimeLine";
 export default {
   data() {
     return {
@@ -131,16 +162,22 @@ export default {
 
       state: "",
       constructionSiteData: [],
-      changeLayerBtnList: ['AI事件','视频监控', '聚集区'],
-      changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
-      changeLayerBtnListHot: ['全市','本市','外地',],
+      changeLayerBtnList: ["AI事件", "视频监控", "聚集区"],
+      changeLayerBtnListArea: [
+        "公园广场",
+        "商业街区",
+        "景区景点",
+        "海水浴场",
+        "窗口单位",
+      ],
+      changeLayerBtnListHot: ["全市", "本市", "外地"],
       changeLayerBtnGroup: [],
 
-      thermodynamicPeopleType: '',
+      thermodynamicPeopleType: "",
       thermodynamicPeopleAll: [],
       thermodynamicPeopleLocal: [],
       thermodynamicPeopleNoLocal: [],
-      allListDataNum: '',
+      allListDataNum: "",
       openVideo: false,
       channelCode: [],
       hotDataNum: [],
@@ -148,13 +185,14 @@ export default {
       timelineData: [],
       // 热力图当日数据
       hotDataAll: {},
-      keyAreasShow:false, //是否显示重点区域。
+      keyAreasShow: false, //是否显示重点区域。
     };
   },
   components: {
     TiledMap,
     complaintEvent,
     VideoListRight,
+    VideoListLeft,
     SiteListMore,
     VideoPlay,
     HorizonTimeLine,
@@ -168,16 +206,16 @@ export default {
       this.hiMapFun
     );
 
-    bus.$off('openCurrentVideoSurveillance')
-    bus.$on('openCurrentVideoSurveillance', (channelCode) => {
-      this.openVideo = true
-      this.channelCode.unshift(channelCode)
-    })
-    bus.$off('openCurrentVideoWaterPoint')
-    bus.$on('openCurrentVideoWaterPoint', channelCode => {
-      this.openVideo = true
-      this.channelCode.unshift(channelCode)
-    })
+    bus.$off("openCurrentVideoSurveillance");
+    bus.$on("openCurrentVideoSurveillance", (channelCode) => {
+      this.openVideo = true;
+      this.channelCode.unshift(channelCode);
+    });
+    bus.$off("openCurrentVideoWaterPoint");
+    bus.$on("openCurrentVideoWaterPoint", (channelCode) => {
+      this.openVideo = true;
+      this.channelCode.unshift(channelCode);
+    });
     // 根据经纬度查询半径内所有的工地
     bus.$off("openCauseAnalysis");
     bus.$on("openCauseAnalysis", (row) => {
@@ -188,11 +226,13 @@ export default {
       // this.circle(latLng);
       this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
       // this.WithinRadiusSite(latLng);
-      let dataEvent = [{
+      let dataEvent = [
+        {
           latLng: { lat: row.wd, lng: row.jd },
           data: row,
           type: "site",
-      }]
+        },
+      ];
       this.hiMapFun.addPointsToMap(
         dataEvent,
         "construction.png",
@@ -202,115 +242,115 @@ export default {
     });
 
     bus.$off("roadOnMap");
-    bus.$on("roadOnMap",(roadData) => {
+    bus.$on("roadOnMap", (roadData) => {
       this.roadOnMap(roadData);
-    })
+    });
 
     bus.$off("removeCameraLayer");
-    bus.$on("removeCameraLayer",(type) => {
-      this.hiMapFun.removeLayerByLayerName(type)
-    })
+    bus.$on("removeCameraLayer", (type) => {
+      this.hiMapFun.removeLayerByLayerName(type);
+    });
 
     bus.$off("CameraSingleDataOnMap");
-    bus.$on("CameraSingleDataOnMap",(labelName,data) => {
-      this.addResourceTomap(labelName,data);
-    })
+    bus.$on("CameraSingleDataOnMap", (labelName, data) => {
+      this.addResourceTomap(labelName, data);
+    });
 
-    this.thermodynamic()
-    this.personToday()
-    this.getCurrentTime()
+    this.thermodynamic();
+    this.personToday();
+    this.getCurrentTime();
     // 获取当日全部数据
     for (let i = 0; i < this.timelineData.length; i++) {
-      this.todayAllData(this.timelineData[i].timeId)
+      this.todayAllData(this.timelineData[i].timeId);
     }
-   },
+  },
   methods: {
     // 获取年月日
-    getCurrentTime () {
-      const yy = new Date().getFullYear()
-      const m = new Date().getMonth() + 1
-      const mm = m < 10 ? '0' + m : m
+    getCurrentTime() {
+      const yy = new Date().getFullYear();
+      const m = new Date().getMonth() + 1;
+      const mm = m < 10 ? "0" + m : m;
       const dd =
         new Date().getDate() < 10
-          ? '0' + new Date().getDate()
-          : new Date().getDate()
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
 
-      this.gettime = yy + mm + dd
+      this.gettime = yy + mm + dd;
       // console.log(this.gettime);
 
       for (let i = 8; i <= 20; i++) {
         if (i < 10) {
           this.timelineData.push({
-            timeId: this.gettime + '0' + i + '00',
-            year: i
-          })
+            timeId: this.gettime + "0" + i + "00",
+            year: i,
+          });
         } else {
           this.timelineData.push({
-            timeId: this.gettime + i + '00',
-            year: i
-          })
+            timeId: this.gettime + i + "00",
+            year: i,
+          });
         }
       }
       // console.log(this.timelineData);
     },
     // 全部
-    todayAllData (val) {
+    todayAllData(val) {
       const params = {
-        timeId: val
-      }
-      this.hotDataAll[val] = []
+        timeId: val,
+      };
+      this.hotDataAll[val] = [];
       listPassengerFlow(params).then((res) => {
         // console.log(res.data);
         // this.hotDataAll.params = res.data;
-        this.hotDataAll[val] = res.data
-      })
+        this.hotDataAll[val] = res.data;
+      });
       // console.log(this.hotDataAll);
     },
     // 热力图点击事件
-    timeIdData (val) {
+    timeIdData(val) {
       // 清除实时热力图
-      this.hiMapFun.removeLayerByLayerName('thermodynamic')
-      this.hiMapFun.removeLayerByLayerName('types')
-      const dataA = []
-      const dataNumber = []
-      const dataMax = []
+      this.hiMapFun.removeLayerByLayerName("thermodynamic");
+      this.hiMapFun.removeLayerByLayerName("types");
+      const dataA = [];
+      const dataNumber = [];
+      const dataMax = [];
 
-      const listB = this.hotDataAll[val]
-      console.log(listB)
+      const listB = this.hotDataAll[val];
+      console.log(listB);
       // 最大值
       for (let num = 0; num < listB.length; num++) {
-        dataNumber.push(listB[num].allNums)
+        dataNumber.push(listB[num].allNums);
       }
-      const max = Math.max.apply(null, dataNumber)
-      console.log(max) // 16617
+      const max = Math.max.apply(null, dataNumber);
+      console.log(max); // 16617
       listB.forEach((item) => {
-        const arr = [0, 0.0, '', '0', '0.0']
+        const arr = [0, 0.0, "", "0", "0.0"];
         if (arr.indexOf(item.latitude) == -1) {
           dataA.push([
             Number(item.latitude),
             Number(item.longitude),
-            Number((item.allNums / max).toFixed(1))
-          ])
+            Number((item.allNums / max).toFixed(1)),
+          ]);
         }
-      })
+      });
       // 筛选
       dataA.forEach((item) => {
         if (item[2] > 0.1) {
-          dataMax.push(item)
+          dataMax.push(item);
         }
-      })
+      });
 
-      this.hiMapFun.thermodynamic(dataMax, 25, 'types')
+      this.hiMapFun.thermodynamic(dataMax, 25, "types");
       // });
     },
     // 获取热力图的按钮
-    hotName (item) {
+    hotName(item) {
       // console.log(item);
       if (this.checkList.indexOf(item) == -1) {
-        this.checkList.push(item)
-        this.bottomTabList[3].img = this.bottomTabList[3].imgActive
+        this.checkList.push(item);
+        this.bottomTabList[3].img = this.bottomTabList[3].imgActive;
       }
-      console.log(this.checkList)
+      console.log(this.checkList);
     },
     querySearchAsync(queryString, cb) {
       if (queryString.length > 0) {
@@ -320,10 +360,10 @@ export default {
       }
     },
     // 人口聚集今日事件大于5000
-    personToday () {
+    personToday() {
       listPassengerFlowByAllNums().then((res) => {
-        this.hotDataNum = res.data
-      })
+        this.hotDataNum = res.data;
+      });
     },
     handleSelect(item) {
       this.hiMapFun.clearAllLayers();
@@ -428,70 +468,74 @@ export default {
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
           case "AI事件":
-            this.hiMapFun.removeLayerByLayerName('EventListDetail')
+            this.hiMapFun.removeLayerByLayerName("EventListDetail");
             selectByAreaEvent().then((res) => {
               const dataEvent = [];
               res.data.data.events.forEach((item) => {
-                dataEvent.push(
-                  {
-                    latLng: { lat: item.latitude, lng: item.longitude },
-                    data: item,
-                    type: "eventList",
-                  }
-                )
-              })
-              this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "poi-event.png", "EventListDetail", createEventListDetailsPop)
-            })
+                dataEvent.push({
+                  latLng: { lat: item.latitude, lng: item.longitude },
+                  data: item,
+                  type: "eventList",
+                });
+              });
+              this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+                dataEvent,
+                "poi-event.png",
+                "EventListDetail",
+                createEventListDetailsPop
+              );
+            });
             break;
           case "视频监控":
-            this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
+            this.addResourceTomap(
+              "全部",
+              this.$refs.videoListRef.cameraAllData
+            );
             break;
           case "聚集区":
-            this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
-            const hotEventListDetail = []
+            this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
+            const hotEventListDetail = [];
             this.hotDataNum.forEach((item) => {
               hotEventListDetail.push({
                 latLng: { lat: item.latitude, lng: item.longitude },
                 data: item,
-                type: 'personHot'
-              })
-            })
+                type: "personHot",
+              });
+            });
             this.hiMapFun.addPointsToMap(
               hotEventListDetail,
-              'poi-blue.png',
-              'PersonHotDetail'
-            )
+              "poi-blue.png",
+              "PersonHotDetail"
+            );
             break;
           case "公园广场":
           case "商业街区":
           case "景区景点":
           case "海水浴场":
           case "窗口单位":
-            this.hiMapFun.removeLayerByLayerName(item)
-            selectKeyArea({ type: item}).then((res) => {
-              if(item === '商业街区') {
+            this.hiMapFun.removeLayerByLayerName(item);
+            selectKeyArea({ type: item }).then((res) => {
+              if (item === "商业街区") {
                 res.data.data.forEach((newItem) => {
-                  if(newItem.point) {
-                    let arr = JSON.parse(newItem.point)
-                    let areaLatLng = []
+                  if (newItem.point) {
+                    let arr = JSON.parse(newItem.point);
+                    let areaLatLng = [];
                     arr.forEach((pointItem) => {
                       let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]);
-                      areaLatLng.push([lonLat[1],lonLat[0]])
-                    })
-                    this.hiMapFun.addAreaToMap(areaLatLng)
+                      areaLatLng.push([lonLat[1], lonLat[0]]);
+                    });
+                    this.hiMapFun.addAreaToMap(areaLatLng);
                   }
-                })
+                });
               } else {
                 const dataEvent = [];
                 res.data.data.forEach((item) => {
-                  dataEvent.push(
-                    {
-                      latLng: { lat: item.latitude, lng: item.longitude },
-                      data: item,
-                      type: "site",
-                    }
-                  )
-                })
+                  dataEvent.push({
+                    latLng: { lat: item.latitude, lng: item.longitude },
+                    data: item,
+                    type: "site",
+                  });
+                });
                 this.hiMapFun.addPointsToMap(
                   dataEvent,
                   "poi-red.png",
@@ -499,7 +543,7 @@ export default {
                   createImportantAreaPop
                 );
               }
-            })
+            });
             break;
           default:
             break;
@@ -511,19 +555,19 @@ export default {
           case "景区景点":
           case "海水浴场":
           case "窗口单位":
-            if(item === '商业街区') {
-              this.hiMapFun.removerPolygon()
+            if (item === "商业街区") {
+              this.hiMapFun.removerPolygon();
             }
-            this.hiMapFun.removeLayerByLayerName(item)
+            this.hiMapFun.removeLayerByLayerName(item);
             break;
           case "AI事件":
-            this.hiMapFun.removeLayerByLayerName('EventListDetail')
+            this.hiMapFun.removeLayerByLayerName("EventListDetail");
             break;
           case "视频监控":
-            this.hiMapFun.removeLayerByLayerName('全部')
+            this.hiMapFun.removeLayerByLayerName("全部");
             break;
           case "聚集区":
-            this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
+            this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
             break;
           default:
             break;
@@ -531,20 +575,24 @@ export default {
       }
     },
 
-    addResourceTomap(type,data) {
+    addResourceTomap(type, data) {
       const dataEvent = [];
       data.forEach((item) => {
-        const arr = [0,0.0,'','0','0.0']
-        if(arr.indexOf(item.gpsX) == -1){
+        const arr = [0, 0.0, "", "0", "0.0"];
+        if (arr.indexOf(item.gpsX) == -1) {
           dataEvent.push({
             latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
             data: item,
-            type: 'videoSurveillance'
+            type: "videoSurveillance",
           });
         }
-        
       });
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        dataEvent,
+        "videoSurveillance.png",
+        type,
+        createCameraDetailsPop
+      );
     },
 
     thermodynamic() {
@@ -552,97 +600,114 @@ export default {
       let dataNumberLocal = [];
       let dataNumberNoLocal = [];
       listPassengerFlow().then((res) => {
-          const data = res.data;
-          // 最大值
-          for (let num = 0; num < data.length; num++) {
-            dataNumber.push(data[num].allNums);
-            dataNumberLocal.push(data[num].localNums);
-            dataNumberNoLocal.push(data[num].nonlocalNums);
-          }
-          let max = Math.max.apply(null, dataNumber);
-          let maxLocal = Math.max.apply(null, dataNumberLocal);
-          let maxNoLocal = Math.max.apply(null, dataNumberNoLocal);
-          data.forEach((item) => {
-            const arr = [0, 0.0, "", "0", "0.0"];
-            if (arr.indexOf(item.latitude) == -1 && arr.indexOf(item.longitude) == -1) {
-              //全部
-              if(item.allNums !== '0'){
-                let allNums = Number((item.allNums / max).toFixed(1))
-                if(allNums > 0.1){
-                  this.thermodynamicPeopleAll.push([
-                    Number(item.latitude),
-                    Number(item.longitude),
-                    allNums
-                  ]);
-                }
-              }
-              //本地
-              if(item.localNums !== '0'){
-                let localNums =  Number((item.localNums / maxLocal).toFixed(1))
-                if(localNums > 0.1){
-                  this.thermodynamicPeopleLocal.push([
-                    Number(item.latitude),
-                    Number(item.longitude),
-                    localNums
-                  ]);
-                }
-              }
-              //外地
-              if(item.nonlocalNums !== '0'){
-                let nonlocalNums  = Number((item.nonlocalNums / maxNoLocal).toFixed(1))
-                if(nonlocalNums > 0.1){
-                  this.thermodynamicPeopleNoLocal.push([
-                    Number(item.latitude),
-                    Number(item.longitude),
-                    nonlocalNums
-                  ]);
-                }
+        const data = res.data;
+        // 最大值
+        for (let num = 0; num < data.length; num++) {
+          dataNumber.push(data[num].allNums);
+          dataNumberLocal.push(data[num].localNums);
+          dataNumberNoLocal.push(data[num].nonlocalNums);
+        }
+        let max = Math.max.apply(null, dataNumber);
+        let maxLocal = Math.max.apply(null, dataNumberLocal);
+        let maxNoLocal = Math.max.apply(null, dataNumberNoLocal);
+        data.forEach((item) => {
+          const arr = [0, 0.0, "", "0", "0.0"];
+          if (
+            arr.indexOf(item.latitude) == -1 &&
+            arr.indexOf(item.longitude) == -1
+          ) {
+            //全部
+            if (item.allNums !== "0") {
+              let allNums = Number((item.allNums / max).toFixed(1));
+              if (allNums > 0.1) {
+                this.thermodynamicPeopleAll.push([
+                  Number(item.latitude),
+                  Number(item.longitude),
+                  allNums,
+                ]);
               }
             }
-          });
+            //本地
+            if (item.localNums !== "0") {
+              let localNums = Number((item.localNums / maxLocal).toFixed(1));
+              if (localNums > 0.1) {
+                this.thermodynamicPeopleLocal.push([
+                  Number(item.latitude),
+                  Number(item.longitude),
+                  localNums,
+                ]);
+              }
+            }
+            //外地
+            if (item.nonlocalNums !== "0") {
+              let nonlocalNums = Number(
+                (item.nonlocalNums / maxNoLocal).toFixed(1)
+              );
+              if (nonlocalNums > 0.1) {
+                this.thermodynamicPeopleNoLocal.push([
+                  Number(item.latitude),
+                  Number(item.longitude),
+                  nonlocalNums,
+                ]);
+              }
+            }
+          }
         });
+      });
     },
     // 清除热力图
     clearThermodynamic() {
       this.hiMapFun.removeLayerByLayerName("types");
       this.hiMapFun.removeLayerByLayerName("thermodynamic");
-      this.thermodynamicPeopleType = ''
+      this.thermodynamicPeopleType = "";
     },
     changeThermodynamicPeopleType(value) {
       this.hiMapFun.removeLayerByLayerName("types");
       switch (value) {
-        case 'all':
+        case "all":
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
-          this.hiMapFun.thermodynamic(this.thermodynamicPeopleAll, 25, "thermodynamic");
+          this.hiMapFun.thermodynamic(
+            this.thermodynamicPeopleAll,
+            25,
+            "thermodynamic"
+          );
           break;
-        case 'local':
+        case "local":
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
-          this.hiMapFun.thermodynamic(this.thermodynamicPeopleLocal, 25, "thermodynamic");
+          this.hiMapFun.thermodynamic(
+            this.thermodynamicPeopleLocal,
+            25,
+            "thermodynamic"
+          );
           break;
-        case 'noLocal':
+        case "noLocal":
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
-          this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic");
+          this.hiMapFun.thermodynamic(
+            this.thermodynamicPeopleNoLocal,
+            25,
+            "thermodynamic"
+          );
           break;
       }
     },
-    removeRoadCauseAnalysis () {
-      this.hiMapFun.removerPolygon()
-      this.hiMapFun.removeLayerByLayerName('roadPoint')
-      this.hiMapFun.removeLayerByLayerName('EventListDetail')
-      this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
+    removeRoadCauseAnalysis() {
+      this.hiMapFun.removerPolygon();
+      this.hiMapFun.removeLayerByLayerName("roadPoint");
+      this.hiMapFun.removeLayerByLayerName("EventListDetail");
+      this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
       this.hiMapFun.removeLayerByLayerName("thermodynamic");
       this.hiMapFun.removeLayerByLayerName("types");
-      this.hiMapFun.removeLayerByLayerName('全部')
-      this.hiMapFun.removeLayerByLayerName('公园广场')
-      this.hiMapFun.removeLayerByLayerName('商业街区')
-      this.hiMapFun.removeLayerByLayerName('景区景点')
-      this.hiMapFun.removeLayerByLayerName('海水浴场')
-      this.hiMapFun.removeLayerByLayerName('窗口单位')
+      this.hiMapFun.removeLayerByLayerName("全部");
+      this.hiMapFun.removeLayerByLayerName("公园广场");
+      this.hiMapFun.removeLayerByLayerName("商业街区");
+      this.hiMapFun.removeLayerByLayerName("景区景点");
+      this.hiMapFun.removeLayerByLayerName("海水浴场");
+      this.hiMapFun.removeLayerByLayerName("窗口单位");
     },
     //点击是否显示重点区域。
-    handleKeyArea(){
-      this.keyAreasShow=!this.keyAreasShow;
-    }
+    handleKeyArea() {
+      this.keyAreasShow = !this.keyAreasShow;
+    },
   },
   beforeDestroy() {},
 };
@@ -749,14 +814,23 @@ export default {
     background: rgba($color: #05213b, $alpha: .85)
   }
   .complaintContent1 {
-    position: absolute;
+   position: absolute;
     z-index: 1000;
     right: 10px;
     top: 90px;
-    height:980px;
+    height:660px;
     width: 478px;
     background: rgba($color: #05213b, $alpha: .85)
   }
+ .mainVideoList{
+    position: absolute;
+    z-index: 10;
+    right: 10px;
+    top: 760px;
+    width: 478px;
+    height:200px;
+    background: rgba($color: #05213b, $alpha: .85);
+}
   .eventNum {
     width: 245px;
     height: 92px;