补充漏提代码

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="m-timeline-wrap">
+    <div class="m-time-dot">
+      <div
+        :class="['m-dot-box', { active: active == item.year }]"
+        @click="onClickYear(item)"
+        v-for="(item, index) in timelineData"
+        :key="index"
+      >
+        <p class="u-year">{{ item.year }}</p>
+        <div class="m-dot">
+          <div class="u-dot"></div>
+        </div>
+        <!-- 演示按钮 -->
+      </div>
+      <!-- <el-button
+        class="shoWToday"
+        @click="shoWTodayClick"
+        icon="el-icon-video-play"
+        >播放</el-button> -->
+      <div class="shoWToday" @click="shoWTodayClick"><div></div></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HorizonTimeLine",
+  props: {
+    timelineData: {
+      // 时间轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // activeYear: {
+    //   // 初始选中年份
+    //   type: String,
+    //   default: "12:00",
+    // },
+  },
+  data() {
+    return {
+      active: this.activeYear,
+      gettime: "",
+      index: 0,
+      time: null,
+    };
+  },
+  methods: {
+    onClickYear(item) {
+      console.log("onClickYear==========》", item);
+      if (this.active !== item.year) {
+        this.active = item.year;
+        // console.log("hello", item.year);
+      }
+      this.$emit("timeId", item.timeId);
+    },
+    shoWTodayClick() {
+      this.$emit("hotName", "人流热力");
+      // debugger;
+      console.log("点击==========》", this.timelineData[this.index]);
+      this.onClickYear(this.timelineData[this.index]);
+      this.index++;
+      this.time = setInterval(() => {
+        console.log("时间轴数据===========》", this.timelineData, this.index);
+        if (this.index == this.timelineData.length) {
+          console.log("清空定时器");
+          this.onClickYear("");
+          this.$emit("hot");
+          this.index = 0;
+          clearInterval(this.time);
+        } else {
+          console.log("点击==========》", this.timelineData[this.index]);
+          this.onClickYear(this.timelineData[this.index]);
+          this.index++;
+        }
+      }, 200);
+      console.log(this.timelineData);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+$themecolor: #3c657c;
+.m-timeline-wrap {
+  // min-width: 120px;
+  width: 520px;
+  min-width: 520px;
+  height: 3px;
+  background: #3c657c;
+  .shoWToday {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #3c657c;
+    cursor: pointer;
+    position: relative;
+    top: -15px;
+    left: 10px;
+    div {
+      position: absolute;
+      left: 13px;
+      top: 6px;
+      width: 0px;
+      height: 0px;
+      border: 8px solid;
+      border-color: transparent transparent transparent #fff;
+      transition: all 0.3s;
+    }
+    div:hover{
+      border-color: transparent transparent transparent #66FFFF;
+    }
+  }
+  .m-time-dot {
+    display: flex;
+    justify-content: space-around;
+    .m-dot-box {
+      cursor: pointer;
+      text-align: center;
+      transform: translateY(-39px);
+      .u-year {
+        font-size: 15px;
+        font-weight: 500;
+        color: #3c657c;
+        transition: all 0.3s ease-in-out;
+      }
+      .m-dot {
+        margin: 0 auto;
+        margin-top: 10px;
+        width: 14px;
+        height: 14px;
+        background: #3c657c;
+        border-radius: 50%;
+        transition: all 0.3s ease-in-out;
+        .u-dot {
+          width: 14px;
+          height: 14px;
+          background: #3c657c;
+          border-radius: 50%;
+          transition: all 0.3s ease-in-out;
+        }
+      }
+    }
+    .m-dot-box:hover {
+      .u-year {
+        color: $themecolor;
+      }
+      .m-dot {
+        .u-dot {
+          background: $themecolor;
+        }
+      }
+    }
+    .active {
+      .u-year {
+        transform: scale(1) translateY(-18px); // 同时设置多个transform属性只需用空格间隔，执行时从后往前执行！
+        color: $themecolor;
+      }
+      .m-dot {
+        transform: scale(2);
+        .u-dot {
+          transform: scale(0.67);
+          background: $themecolor;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/pages/area/index.vue

@@ -55,7 +55,19 @@
       <div class="siteList">
         <site-list></site-list>
       </div>
+      <!-- 热力图图例 -->
+      <div class="legend"></div>
 
+      <!-- 时间轴 -->
+      <div class="timerShaft">
+        <HorizonTimeLine
+          :timelineData="timelineData"
+          @timeId="timeIdData"
+          @hot="thermodynamic"
+          @hotName="hotName"
+        />
+        <span>时</span>
+      </div>
       <div class="changeLayer">
         <div class="title">地图显示</div>
         <div class="change-btn-box">
@@ -69,7 +81,9 @@
             <el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
           </el-checkbox-group>
         </div>
-        <div class="title">人流热力</div>
+        <div class="title">
+          <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>
@@ -100,9 +114,10 @@ import VideoList from "./components/VideoList";
 import SiteList from "./components/SiteList";
 import { selectByJdWd } from "@/api/construction/index";
 import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
-import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
+import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
 import { selectByAreaEvent, selectKeyArea } from "@/api/area";
-
+// 时间轴
+import HorizonTimeLine from './components/HorizonTimeLine'
 export default {
   data() {
     return {
@@ -111,7 +126,7 @@ export default {
 
       state: "",
       constructionSiteData: [],
-      changeLayerBtnList: ['AI事件','视频监控'],
+      changeLayerBtnList: ['AI事件','视频监控', '聚集区'],
       changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
       changeLayerBtnListHot: ['全市','本市','外地',],
       changeLayerBtnGroup: [],
@@ -123,6 +138,11 @@ export default {
       allListDataNum: '',
       openVideo: false,
       channelCode: [],
+      hotDataNum: [],
+      // 时间轴
+      timelineData: [],
+      // 热力图当日数据
+      hotDataAll: {}
     };
   },
   components: {
@@ -130,7 +150,8 @@ export default {
     complaintEvent,
     VideoList,
     SiteList,
-    VideoPlay
+    VideoPlay,
+    HorizonTimeLine
   },
   created() {},
   mounted() {
@@ -184,8 +205,101 @@ export default {
     })
 
     this.thermodynamic()
+    this.personToday()
+    this.getCurrentTime()
+    // 获取当日全部数据
+    for (let i = 0; i < this.timelineData.length; i++) {
+      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
+      const dd =
+        new Date().getDate() < 10
+          ? '0' + new Date().getDate()
+          : new Date().getDate()
+
+      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
+          })
+        } else {
+          this.timelineData.push({
+            timeId: this.gettime + i + '00',
+            year: i
+          })
+        }
+      }
+      // console.log(this.timelineData);
+    },
+    // 全部
+    todayAllData (val) {
+      const params = {
+        timeId: val
+      }
+      this.hotDataAll[val] = []
+      listPassengerFlow(params).then((res) => {
+        // console.log(res.data);
+        // this.hotDataAll.params = res.data;
+        this.hotDataAll[val] = res.data
+      })
+      // console.log(this.hotDataAll);
+    },
+    // 热力图点击事件
+    timeIdData (val) {
+      // 清除实时热力图
+      this.hiMapFun.removeLayerByLayerName('thermodynamic')
+      this.hiMapFun.removeLayerByLayerName('types')
+      const dataA = []
+      const dataNumber = []
+      const dataMax = []
+
+      const listB = this.hotDataAll[val]
+      console.log(listB)
+      // 最大值
+      for (let num = 0; num < listB.length; num++) {
+        dataNumber.push(listB[num].allNums)
+      }
+      const max = Math.max.apply(null, dataNumber)
+      console.log(max) // 16617
+      listB.forEach((item) => {
+        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))
+          ])
+        }
+      })
+      // 筛选
+      dataA.forEach((item) => {
+        if (item[2] > 0.1) {
+          dataMax.push(item)
+        }
+      })
+
+      this.hiMapFun.thermodynamic(dataMax, 25, 'types')
+      // });
+    },
+    // 获取热力图的按钮
+    hotName (item) {
+      // console.log(item);
+      if (this.checkList.indexOf(item) == -1) {
+        this.checkList.push(item)
+        this.bottomTabList[3].img = this.bottomTabList[3].imgActive
+      }
+      console.log(this.checkList)
+    },
     querySearchAsync(queryString, cb) {
       if (queryString.length > 0) {
         searchCamera(queryString).then((res) => {
@@ -193,6 +307,12 @@ export default {
         });
       }
     },
+    // 人口聚集今日事件大于5000
+    personToday () {
+      listPassengerFlowByAllNums().then((res) => {
+        this.hotDataNum = res.data
+      })
+    },
     handleSelect(item) {
       this.hiMapFun.clearAllLayers();
       const arr = item.detail.location.split(",");
@@ -286,7 +406,6 @@ export default {
     },
 
     layerHandleChange(item) {
-      console.log('this.changeLayerBtnGroup---', this.changeLayerBtnGroup)
       if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
         switch (item) {
           case "AI事件":
@@ -308,6 +427,22 @@ export default {
           case "视频监控":
             this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
             break;
+          case "聚集区":
+            this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
+            const hotEventListDetail = []
+            this.hotDataNum.forEach((item) => {
+              hotEventListDetail.push({
+                latLng: { lat: item.latitude, lng: item.longitude },
+                data: item,
+                type: 'personHot'
+              })
+            })
+            this.hiMapFun.addPointsToMap(
+              hotEventListDetail,
+              'poi-blue.png',
+              'PersonHotDetail'
+            )
+            break;
           case "公园广场":
           case "商业街区":
           case "景区景点":
@@ -316,7 +451,6 @@ export default {
             this.hiMapFun.removeLayerByLayerName(item)
             selectKeyArea({ type: item}).then((res) => {
               const dataEvent = [];
-              console.log('res.data.data----', res.data.data)
               res.data.data.forEach((item) => {
                 dataEvent.push(
                   {
@@ -352,6 +486,9 @@ export default {
           case "视频监控":
             this.hiMapFun.removeLayerByLayerName('全部')
             break;
+          case "聚集区":
+            this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
+            break;
           default:
             break;
         }
@@ -429,8 +566,14 @@ export default {
           });
         });
     },
-
+    // 清除热力图
+    clearThermodynamic() {
+      this.hiMapFun.removeLayerByLayerName("types");
+      this.hiMapFun.removeLayerByLayerName("thermodynamic");
+      this.thermodynamicPeopleType = ''
+    },
     changeThermodynamicPeopleType(value) {
+      this.hiMapFun.removeLayerByLayerName("types");
       switch (value) {
         case 'all':
           this.hiMapFun.removeLayerByLayerName("thermodynamic");
@@ -444,13 +587,15 @@ export default {
           this.hiMapFun.removeLayerByLayerName("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')
+      this.hiMapFun.removeLayerByLayerName("thermodynamic");
+      this.hiMapFun.removeLayerByLayerName("types");
       this.hiMapFun.removeLayerByLayerName('全部')
       this.hiMapFun.removeLayerByLayerName('公园广场')
       this.hiMapFun.removeLayerByLayerName('商业街区')
@@ -609,7 +754,31 @@ export default {
     height:500px;
     background: rgba($color: #05213b, $alpha: .85);
   }
-
+  .legend {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 120px;
+    z-index: 1005;
+    width: 555px;
+    height: 80px;
+    background: url("~@/assets/civilizedCity/legend.png") no-repeat;
+    opacity: 0.8;
+  }
+  .timerShaft {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 220px;
+    z-index: 1000;
+    span {
+      position: absolute;
+      right: 42px;
+      top: -39px;
+      font-size: 14px;
+      color: #3c657c;
+    }
+  }
   .changeLayer {
     // width: 332px;
     // height: 67px;
@@ -627,6 +796,12 @@ export default {
       color: rgba(255,255,255,.6);
       text-align: center;
       line-height: 99px;
+      .special-title {
+        cursor: pointer;
+        &:hover {
+          color: #477fff;
+        }
+      }
     }
     .change-btn-box {
       height: 92px;

src/views/pages/roadGovernance/components/RoadMain.vue

@@ -340,8 +340,10 @@ export default {
     },
     async getRoadDataWeek () {
       const res = await getRoadDataByTimeRegion({
-        start: this.weekTime,
+        // start: this.weekTime,
-        end: this.preTime
+        // end: this.preTime
+        begin: this.weekTime,
+        over: this.preTime
       })
       // 道路事件  pm>200
       const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
@@ -352,8 +354,10 @@ export default {
     },
     async getRoadDataMonth () {
       const res = await getRoadDataByTimeRegion({
-        start: this.monthTime,
+        // start: this.monthTime,
-        end: this.preTime
+        // end: this.preTime
+        begin: this.monthTime,
+        over: this.preTime
       })
       // 道路事件  pm>200
       const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
@@ -365,7 +369,7 @@ export default {
       const param = {
         longitude: data.lng,
         latitude: data.lat,
-        radius: 3000
+        radius: 1000
         // start: '2021-05-17 00:00:00',
         // end: '2022-05-18 00:00:00'
       }
@@ -409,7 +413,7 @@ export default {
       const param = {
         longitude: data.latLng.lng,
         latitude: data.latLng.lat,
-        radius: 3000,
+        radius: 1000,
         start: newStartTime,
         end: newEndTime
       }
@@ -458,7 +462,7 @@ export default {
       const param = {
         longitude: data.latLng.lng,
         latitude: data.latLng.lat,
-        radius: 3000,
+        radius: 1000,
         start: newStartTime,
         end: newEndTime
       }
@@ -487,7 +491,7 @@ export default {
       const param = {
         gpsX: data.lng,
         gpsY: data.lat,
-        radius: 3000
+        radius: 1000
       }
 
       const res = await selectAllByGps(param)
@@ -548,7 +552,7 @@ export default {
 
     // 圈选查询
     circle (latlng) {
-      this.hiMapFun.addCircleToMap(latlng, 3800)
+      this.hiMapFun.addCircleToMap(latlng, 1200)
     },
     removeLayer (data) {
       this.hiMapFun.removeLayerByLayerName(data.layerName)