From a57d293fc7157e42bbd58fc2eb704e7e30b8f719 Mon Sep 17 00:00:00 2001
From: yangxiaojiang <851673013@qq.com>
Date: Tue, 5 Jul 2022 17:15:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E6=B0=B4=E7=82=B9=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   5 +
 .../waterPoints/components/ComplaintEvent.vue | 505 +++++++++++++
 .../pages/waterPoints/components/SiteList.vue | 431 +++++++++++
 .../waterPoints/components/SiteListPop.vue    | 478 ++++++++++++
 .../components/StatisticalAnalysis.vue        | 706 ++++++++++++++++++
 .../waterPoints/components/VideoList.vue      | 201 +++++
 .../pages/waterPoints/components/tiledMap.vue |  52 ++
 src/views/pages/waterPoints/index.vue         | 520 +++++++++++++
 8 files changed, 2898 insertions(+)
 create mode 100644 src/views/pages/waterPoints/components/ComplaintEvent.vue
 create mode 100644 src/views/pages/waterPoints/components/SiteList.vue
 create mode 100644 src/views/pages/waterPoints/components/SiteListPop.vue
 create mode 100644 src/views/pages/waterPoints/components/StatisticalAnalysis.vue
 create mode 100644 src/views/pages/waterPoints/components/VideoList.vue
 create mode 100644 src/views/pages/waterPoints/components/tiledMap.vue
 create mode 100644 src/views/pages/waterPoints/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 26a18e9..e6c8c31 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -100,6 +100,11 @@ export const pageRoutes = [{
     name: 'point', 
     meta: { title: '' } 
 },
+{ path: '/waterPoints',
+    component: () => import('@/views/pages/waterPoints'), 
+    name: 'waterPoints', 
+    meta: { title: '积水点' } 
+},
 {
   path: '/forestControl',
   component: () =>
diff --git a/src/views/pages/waterPoints/components/ComplaintEvent.vue b/src/views/pages/waterPoints/components/ComplaintEvent.vue
new file mode 100644
index 0000000..2825b3f
--- /dev/null
+++ b/src/views/pages/waterPoints/components/ComplaintEvent.vue
@@ -0,0 +1,505 @@
+<template>
+  <div class="box">
+    <header>
+      <div class="title">事件感知</div>
+    </header>
+    <div class="toady-list">
+      <div class="toady-list-content">
+        <div class="toady-list-rotate"></div>
+        <div class="toady-list-icon"></div>
+        <div class="toady-list-num">今日事件<span> 36 </span>件</div>
+      </div>
+    </div>
+    <div class="tab-box">
+      <div class="tabs-button">
+        <div class="tabs-button-box">
+          <div  class="tabs-button-btn"
+                @click="tabHandleClick(item)"
+                v-for="item in tabsButton" 
+                :key="item.index"
+                :class="tabsActiveName == item?'tabs-button-btn-active':''"
+                >
+            {{item}}
+          </div>
+        </div>
+        <div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
+      </div>
+      <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
+        <div class="filter-btn-typeSelect">
+          <div  class="typeSelect-btn" 
+                v-for="item in filterButton.typeSelect" 
+                :key="item" 
+                :class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
+                @click="typeSelect(item)"
+                >{{item}}</div>
+        </div>
+        <div class="filter-btn-processStateSelect">
+          <div  class="processStateSelect-btn" 
+                v-for="item in filterButton.processStateSelect" 
+                :key="item"
+                :class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active':''"
+                @click="processStateSelect(item)"
+                >
+            <div class="select-circle"></div>
+            <div class="processStateSelect">{{item}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
+        <div class="event-details" v-for="item in eventListData" :key="item.index">
+          <div class="event-details-title">
+            <span>{{item.roadName||''}}</span>
+            <span>{{item.dt||''}}</span>
+            <!-- <span>未派发</span> -->
+          </div>
+          <div class="event-details-des">
+            <h5>道路起止:{{item.start||''}}--{{item.end||''}}</h5>
+            <!-- <p>简述简述简述简述简述简述简述简述</p> -->
+            <p>pm10:{{item.pm10||''}}</p>
+          </div>
+        </div>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="pageChange"
+          :total="total">
+        </el-pagination>
+      </div>
+    </div>
+    <statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
+  </div>
+</template>
+<script>
+import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
+import StatisticalAnalysis from "./StatisticalAnalysis.vue";
+import bus from "@/views/layout/bus";
+import {
+  getRoadData,
+  getRoadDataByTimeRegion,
+  selectRoadData,
+} from "@/api/road";
+export default {
+  data() {
+    return {
+      tabsButton: ["视频感知","物联感知","走航监测"],
+      tabsActiveName: "走航监测",
+      statisticalAnalysisIsShow: false,
+      filterButton:{
+        typeSelect:['事件','事件1'],
+        typeSelectActive:'事件',
+        processStateSelect:['全部','未派发','未处置','已处置'],
+        processStateSelectActive:'全部',
+      },
+      eventListData: [],
+      preTime: "",
+      total: 0,
+      roadData:[],
+    };
+  },
+  components: {
+    StatisticalAnalysis,
+  },
+  created() {
+    const currentDate = new Date();
+    currentDate.setTime(currentDate.getTime());
+    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
+    this.preTime =
+      currentDate.getFullYear() +
+      "-" +
+      (currentDate.getMonth() + 1) +
+      "-" +
+      currentDate.getDate() +
+      " " +
+      "00:00:00";
+  },
+  mounted() {
+    this.getRoadData()
+    this.selectRoadData()
+    this.selectRaise()
+    this.selectNoiceEvent()
+  },
+  methods: {
+    tabHandleClick(item) {
+      this.tabsActiveName = item
+      if(item == '视频感知'){
+        
+      }
+      if(item == '物联感知'){
+        this.filterButton.typeSelect = ['工地扬尘','工地噪声']
+        this.typeSelectActive = '工地扬尘'
+      }
+      if(item == '走航监测'){
+        this.selectRoadData()
+      }
+    },
+    openStatisticalAnalysis() {
+      this.statisticalAnalysisIsShow = true
+    },
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+    },
+    processStateSelect(item) {
+      this.filterButton.processStateSelectActive = item
+    },
+
+    async getRoadData() {
+      const res = await getRoadData({ dt: this.preTime });
+      //路网数据
+      this.roadData = res.data.data;
+      // bus.$emit("roadOnMap", this.roadData);
+    },
+
+    //走航监测
+    selectRoadData() {
+      let params = {
+        pageSize: 5,
+        page: 1,
+      }
+      selectRoadData(params).then((res) => {
+        this.eventListData = res.data.data.roadData;
+        this.total = res.data.data.sum
+      });
+    },
+
+    //物联感知  扬尘 噪声
+    selectRaise() {
+      let params = {
+        pageSize: 5,
+        page: 1,
+      }
+      selectRaise(params).then((res) => {
+        console.log(res)
+        // this.eventListData = res.data.data.roadData;
+
+      });
+    },
+    selectNoiceEvent() {
+      let params = {
+        pageSize: 5,
+        page: 1,
+      }
+      selectNoiceEvent(params).then((res) => {
+        console.log(res)
+      });
+    },
+
+    //分页
+    pageChange(val) {
+      if(this.tabsActiveName == '视频感知') {
+        
+      } else if(this.tabsActiveName == '物联感知') {
+        let params = {
+          pageSize: 5,
+          page: val,
+        }
+        selectRaise(params).then((res) => {
+          console.log(res)
+        });
+      } else if(this.tabsActiveName == '走航监测') {
+        let params = {
+          pageSize: 5,
+          page: val,
+        }
+        selectRoadData(params).then((res) => {
+          this.eventListData = res.data.data.roadData;
+        });
+      }
+    }
+  },
+};
+</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;
+  header {
+    width: 100%;
+    height: 44px;
+    background: url(../../../../assets/construction/subTitle.png) no-repeat center;
+    text-align: center;
+    .title {
+      font-size: 26px;
+      font-weight: bold;  
+      background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-family: 'Tensentype-ZhiHeiJ-W5';
+    }
+    .title::before {
+      content: '事件感知';
+      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: .6);
+      position: absolute;
+      z-index: -1;
+    }
+  }
+  .toady-list {
+    width:100%;
+    height:132px;
+    background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
+    .toady-list-content {
+      margin-left: 80px;
+      height:128px;
+      position: relative;
+      .toady-list-rotate {
+        position: absolute;
+        width: 128px;
+        height: 128px;
+        background: url(../../../../assets/construction/rotateBgi.png) no-repeat;
+        animation: routation 20s linear infinite;
+      }
+      .toady-list-icon {
+        position: absolute;
+        width: 128px;
+        height: 128px;
+        background: url(../../../../assets/construction/toadyListIcon.png) no-repeat;
+      }
+      .toady-list-num {
+        position: absolute;
+        width: 248px;
+        height: 72px;
+        top: 20px;
+        left: 100px;
+        background: url(../../../../assets/construction/toadyListBgi2.png) no-repeat;
+        color: #fff;
+        line-height: 72px;
+        text-align: center;
+        font-size: 18px;
+        span {
+          font-size: 38px;
+          font-weight: bold;
+          background: linear-gradient(180deg, #ff9fa8 0%, #fff 100%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-family: 'DIN-Bold';
+        }
+      }
+    }
+  }
+  
+  @keyframes routation {
+    0%{
+			transform:rotate(0deg);
+		}
+		100%{
+			transform:rotate(360deg);
+		}
+  }
+
+  .tab-box {
+    margin:0 10px;
+
+    .tabs-button {
+      position: relative;
+      .tabs-button-box {
+        width: 340px;
+        padding-bottom: 11px;
+        border-bottom: 3px solid #2c619c;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .tabs-button-btn {
+          font-size: 18px;
+          color: rgba($color: #fff, $alpha: 0.6);
+          position: relative;
+          cursor: pointer;
+        }
+        .tabs-button-btn-active {
+          font-size: 20px;
+          color: #fff;
+        }
+        .tabs-button-btn-active::after {
+          content: '';
+          position: absolute;
+          bottom: -15px;
+          // right: 24%;
+          right: 6%;
+          width: 64px;
+          height: 5px;
+          border-radius: 5px;
+          background-color: #1ffffc;
+        }
+      }
+      .statisticalAnalysisBtn {
+        position: absolute;
+        top: 5px;
+        right: 0px;
+        width: 96px;
+        height: 28px;
+        font-size: 16px;
+        color: #1ffefd;
+        line-height: 28px;
+        text-align: center;
+        border: 1px solid rgba(31, 254, 253, .6);
+        border-radius: 14px;
+        cursor: pointer;
+      }
+    }
+
+    .filter-btn-box {
+      margin-top: 16px;
+      .filter-btn-typeSelect {
+        display: flex;
+        .typeSelect-btn {
+          border-radius: 20px;
+          border: 1px solid rgba(0, 255, 255, .6);
+          background: rgba(2,51,87,.6);
+          margin-right: 5px;
+          padding: 4px 10px;
+          font-size: 14px;
+          color: #fff;
+          cursor: pointer;
+        }
+        .typeSelect-btn-active {
+          background: #005ea3;
+          border: 1px solid #00ffff;
+        }
+      }
+      .filter-btn-processStateSelect {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 12px;
+        color: #fff;
+        .processStateSelect-btn {
+          display: flex;
+          align-items: center;
+          margin-left: 24px;
+          cursor: pointer;
+          .select-circle {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            border: 1px solid #00ffff;
+            position: relative;
+          }
+          .processStateSelect {
+            margin-left: 8px;
+          }
+        }
+        .processStateSelect-btn-active {
+          .select-circle::after {
+            content: "";
+            width: 8px;
+            height: 8px;
+            background: #00ffff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
+    .event-list {
+      // margin-top: 12px;
+      // margin-top: 30px;
+      width: 100%;
+      // height: 625px;
+      height: 570px;
+      position: relative;
+
+      .event-details {
+        margin-top: 10px;
+        // margin-top: 18px;
+        width: 100%;
+        max-height: 100px;
+        padding-right: 8px;
+        background: linear-gradient(90deg, #173759 0, #133150 100%);
+        .event-details-title {
+          height: 36px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          span:nth-child(1) {
+            width: 140px;
+            padding-left: 10px;
+            color: #1ffefd;
+            font-size: 18px;
+            font-weight: bold;
+            line-height: 36px;
+            background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
+          }
+          span:nth-child(2) {
+            color: rgba(255,255,255,.6);
+            padding-left: 80px;
+          }
+          span:nth-child(3) {
+            width: 49px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            background: #ae761c;
+            border-radius: 2px;
+            font-size: 14px;
+            color: #fff;
+          }
+        }
+        .event-details-des {
+          padding: 8px 0 0 12px;
+          font-size: 16px;
+          h5 {
+            font-weight: normal;
+            padding-left: 18px;
+            color: rgba(255,255,255, .6);
+            background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+          }
+          p {
+            color: rgba(255,255,255, .8);
+            line-height: 28px;
+            overflow:hidden; 
+            text-overflow:ellipsis;
+            display:-webkit-box; 
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:1; 
+          }
+        }
+      }
+
+      ::v-deep .el-pagination {
+        position: absolute;
+        left: 50%;
+        bottom: 0px;
+        transform: translateX(-50%);
+        // margin-top: 16px;
+        button, ul>li {
+          width: 28px;
+          height: 28px;
+          border-radius: 2px;
+          border: 1px solid rgba(31,254,253, .5);
+          background: transparent;
+          color: rgba(31,254,253, .5);
+        }
+        li:not(.disabled).active {
+          color: #fff;
+          border: 1px solid rgba(31,254,253, .5);
+          background: rgba(31,254,253, .5);
+        }
+      }
+    }
+  }
+
+  .statisticalAnalysis {
+    position: absolute;
+    left: 486px;
+    top: 0;
+    width: 400px;
+    height: 878px;
+    background: rgba(24,51,76,.95);
+    border: 1px solid rgba(50,227,235,.95);
+    box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+  }
+}
+</style>
diff --git a/src/views/pages/waterPoints/components/SiteList.vue b/src/views/pages/waterPoints/components/SiteList.vue
new file mode 100644
index 0000000..7f7913a
--- /dev/null
+++ b/src/views/pages/waterPoints/components/SiteList.vue
@@ -0,0 +1,431 @@
+<template>
+  <div class="box">
+    <div class="title">工地列表</div>
+    <!-- 工地列表 -->
+    <div class="eventData">
+      <div style="display: flex;justify-content: space-between">
+        <el-input
+          placeholder="请输入工地名称"
+          prefix-icon="el-icon-search"
+          @input="searchSite"
+          v-model="searchValue"
+        >
+        </el-input>
+        <el-select v-model="selectValue" placeholder="全部区市" @change="fliterSiteByArea">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="eventNoise">
+        <el-table
+          :data="siteData"
+          height='356'
+          @row-click="analyse"
+          :cell-style="{
+            color: '#fff',
+            cursor: 'pointer',
+            'background-color': '#18304c',
+          }"
+          :header-cell-style="{
+            color: '#1ffefd',
+            'background-color': '#2b4b7a',
+          }"
+        >
+          <el-table-column width="114" label="工地名称" prop="projectName" 
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="78" prop="noice" label="噪声" sortable>
+            <template slot-scope="scope">
+              {{scope.row.noice + 'dB'}}
+            </template>
+          </el-table-column>
+          <el-table-column width="86" prop="pm10" label="扬尘" sortable>
+            <template slot-scope="scope">
+              {{scope.row.pm10 + 'mg/m³'}}
+            </template>
+          </el-table-column>
+          <el-table-column width="88" prop="yjsg" label="夜间施工">
+            <template slot-scope="scope">
+              <img v-if="scope.row.yjsg == '是'" src="../../../../assets/construction/night.png" alt="">
+              <img v-else src="../../../../assets/construction/nonight.png" alt="">
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    </div>
+</template>
+<script>
+import bus from "@/views/layout/bus";
+import {
+  selectAllBuilding,
+  selectByProjectName,
+  selectDayAll,
+  selectWeekAll,
+  selectMonthAll,
+} from "@/api/construction/index";
+
+export default {
+  data() {
+    return {
+      searchValue: "",
+      siteData: [],
+      siteDataAll: [],
+      selectSiteData: [],
+      InformationActiveName: "基本信息",
+      informationShow: false,
+      detailedInfToday: [],
+      detailedInfWeek: [],
+      detailedInfMonth: [],
+      dustActiveName: "今日",
+
+      options: [
+        {
+          value: '全部区市',
+          label: '全部区市'
+        },{
+          value: '市南区',
+          label: '市南区'
+        }, {
+          value: '市北区',
+          label: '市北区'
+        }, {
+          value: '崂山区',
+          label: '崂山区'
+        }, {
+          value: '李沧区',
+          label: '李沧区'
+        }, {
+          value: '即墨区',
+          label: '即墨区'
+        },{
+          value: '西海岸新区',
+          label: '西海岸新区'
+        },{
+          value: '城阳区',
+          label: '城阳区'
+        },{
+          value: '胶州市',
+          label: '胶州市'
+        },{
+          value: '平度市',
+          label: '平度市'
+        },{
+          value: '莱西市',
+          label: '莱西市'
+        }
+      ],
+      selectValue: ''
+    };
+  },
+  mounted() {
+    this.selectSiteByName();
+    // bus.$off("mainClick")
+    // bus.$on("mainClick", (data) => {
+    //   this.informationShow = true;
+    //   console.log(data);
+    //   this.informationData = data;
+    //   // 噪声及扬尘
+    //   const params = {
+    //     projectName: data.projectName,
+    //   };
+    //   selectByProjectName(params).then((res) => {
+    //     // console.log(res.data.data);
+    //     for (let i = 0; i < res.data.data.length; i++) {
+    //       this.selectSiteData.push(res.data.data[i]);
+    //     }
+    //     // console.log(this.selectSiteData);
+    //   });
+
+    //   // 噪声及扬尘信息
+    //   this.NoAndPMToday(data.projectName);
+    //   this.NoAndPMWeek(data.projectName);
+    //   this.NoAndPMMonth(data.projectName);
+    // });
+  },
+  methods: {
+    //   查询所有工地
+    selectSiteByName() {
+      selectAllBuilding().then((res) => {
+        // console.log(res.data.data);
+        this.siteData = res.data.data
+        this.siteDataAll = res.data.data
+      });
+    },
+
+    searchSite() {
+      if (this.searchValue == "") {
+        this.siteData = this.siteDataAll;
+      } else {
+        const params = {
+          projectName: this.searchValue,
+        };
+        selectByProjectName(params).then((res) => {
+          this.siteData = res.data.data
+        });
+      }
+    },
+
+    fliterSiteByArea(val) {
+      console.log(val)
+      if (val == '全部区市') {
+        this.siteData = this.siteDataAll;
+      } else {
+        this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
+      }
+    },
+    // 行点击
+    analyse(row) {
+      bus.$emit("openCauseAnalysis", row);
+    },
+    // 关闭基本信息窗口
+    informationClose() {
+      this.informationShow = false;
+    },
+    // 今日噪声及扬尘信息
+    NoAndPMToday(data) {
+      // 今日
+      this.detailedInfToday = [];
+      const params = {
+        projectName: data,
+      };
+      selectDayAll(params).then((res) => {
+        for (let i = 0; i < res.data.data.length; i++) {
+          this.detailedInfToday.push(res.data.data[i]);
+        }
+      });
+    },
+    // 近一周噪声及扬尘信息
+    NoAndPMWeek(data) {
+      // 近一周
+      this.detailedInfWeek = [];
+      const params = {
+        projectName: data,
+      };
+      selectWeekAll(params).then((res) => {
+        for (let i = 0; i < res.data.data.length; i++) {
+          this.detailedInfWeek.push(res.data.data[i]);
+        }
+      });
+    },
+    // 近一月噪声及扬尘信息
+    NoAndPMMonth(data) {
+      // 近一月
+      this.detailedInfMonth = [];
+      const params = {
+        projectName: data,
+      };
+      selectMonthAll(params).then((res) => {
+        for (let i = 0; i < res.data.data.length; i++) {
+          this.detailedInfMonth.push(res.data.data[i]);
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../assets/construction/listTopBg.png) no-repeat,
+              url(../../../../assets/construction/siteTag.png) no-repeat 324px 17px;
+  padding: 30px 0 18px 18px;
+  .title {
+    color: #fff;
+    font-size: 20px;
+  }
+  ::v-deep .eventData {
+    width: 368px;
+    margin-top: 14px;
+    .el-input {
+      width: 200px;
+    }
+    .el-input__inner {
+      border: 1px solid rgba(31,254,253,.9);
+      color: #fff;
+      background: rgba($color: #203b5d, $alpha: .8);
+      border-radius: unset;
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    .el-input__prefix {
+      color: rgba(31,254,253,.9);
+    }
+
+    .el-select {
+      // margin-left: 10px;
+      .el-input {
+        width: 161px;
+      }
+    }
+  }
+
+  ::v-deep .eventNoise {
+    margin-top: 16px;
+    .el-table {
+      border: 1px solid #325d94;
+      width: 100%;
+      th,td {
+          border-right: 1px solid #325d94 !important;
+        }
+      // .descending.is-leaf.is-sortable {
+      //   .sort-caret {
+      //     border-top-color: #1dfeff;
+      //   }
+      // }
+    }
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 16px;
+      font-weight: normal;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+    }
+    .el-table th.is-leaf {
+      border: 1px solid #1f557c;
+    }
+    .el-table td {
+      border: 0;
+      padding: 5px 0;
+    }
+    .el-table th {
+      padding: 5px 0;
+    }
+    .el-table::before {
+      height: 0px;
+    }
+    .el-table__row:nth-of-type(even) > td {
+      background-color: #113660 !important;
+    }
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 8px;
+        background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+  }
+  // 基本信息
+  .informationPop {
+    position: absolute;
+    top: 150px;
+    left: -800px;
+    width: 700px;
+    height: 350px;
+    background: #fff;
+    ::v-deep .el-tabs {
+      .el-tabs__header {
+        margin: 0;
+        .el-tabs__item {
+          background: #000;
+          color: #fff;
+          font-size: 16px;
+          font-weight: 600;
+          padding: 0 10px;
+        }
+        .el-tabs__item.is-active {
+          background: #ccc;
+        }
+        .el-tabs__active-bar {
+          display: none;
+        }
+        .is-top {
+          background: #000;
+        }
+        .el-tabs__nav-wrap::after {
+          display: none;
+        }
+        .el-table::before {
+          display: none;
+        }
+        .el-table th,
+        .el-table tr {
+          background: #3c657c;
+        }
+      }
+    }
+    .informationMain {
+      width: 100%;
+      display: flex;
+      height: 310px;
+      p {
+        padding: 4px 10px;
+      }
+      .informationLeft {
+        width: 60%;
+      }
+      .informationRight {
+        width: 40%;
+      }
+    }
+    .informationClose {
+      position: absolute;
+      z-index: 100;
+      right: 13px;
+      top: 2px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 20px;
+    }
+  }
+  // 详细信息
+  .dustList {
+    width: 100%;
+    ::v-deep .el-table::before {
+      display: none;
+    }
+    ::v-deep .el-tabs {
+      .el-tabs__header {
+        display: flex;
+        justify-content: flex-start;
+        padding: 10px 0 10px 5px;
+        margin-bottom: 0px;
+        .is-top {
+          background: #fff;
+        }
+        .el-tabs__item {
+          background: #ccc;
+          color: #fff;
+          font-size: 14px;
+          font-weight: 600;
+          width: 75px;
+          text-align: center;
+          margin: 0 2px;
+          border-radius: 23px;
+          padding: 0;
+          line-height: 26px;
+          height: 26px;
+          border: 0;
+        }
+        .el-tabs__item.is-active {
+          background: #409eff;
+        }
+        .el-tabs__active-bar {
+          display: none;
+        }
+        .el-tabs__nav-wrap::after {
+          display: none;
+        }
+        .el-table::before {
+          display: none;
+        }
+        .el-table th,
+        .el-table tr {
+          background: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/pages/waterPoints/components/SiteListPop.vue b/src/views/pages/waterPoints/components/SiteListPop.vue
new file mode 100644
index 0000000..fc240af
--- /dev/null
+++ b/src/views/pages/waterPoints/components/SiteListPop.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="pop-box">
+    <div class="title-bg"></div>
+    <div class="title">
+      <span>{{ feature.data.projectName || "" }}</span>
+      <span v-if="feature.data.yjsg=='是'">夜间</span>
+    </div>
+    <div class="site-address">{{ feature.data.sgwz || "" }}</div>
+    <div class="site-content">
+      <div class="site-content-left">
+        <div class="site-content-left-top">
+          <div class="noise">
+            <img src="../../../../assets/construction/noise.png" alt="">
+            <div>
+              <p>噪声</p>
+              <p><span>{{ feature.data.noice || "" }}</span>dB</p>
+            </div>
+          </div>
+          <div class="raise-dust">
+            <img src="../../../../assets/construction/raiseDust.png" alt="">
+            <div>
+              <p>扬尘</p>
+              <p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
+            </div>
+          </div>
+        </div>
+        <div class="site-content-left-bottom">
+          <div class="filter-btn-typeSelect">
+            <div  class="typeSelect-btn" 
+                  v-for="item in filterButton.typeSelect" 
+                  :key="item" 
+                  :class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
+                  @click="typeSelect(item)"
+                  >{{item}}</div>
+          </div>
+          <div id="chart"></div>
+        </div>
+      </div>
+      <div class="site-content-right">
+        <div
+          class="images" 
+          v-viewer="{movable: false}"
+          style="
+            width: 280px;
+            height: 158px;
+            cursor: pointer;
+          "
+        >
+          <img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
+        </div>
+        <div class="video-table">
+          <h4>周边监控</h4>
+          <el-table
+            :data="cameraData"
+            :cell-style="{
+              color: '#fff',
+              cursor: 'pointer',
+              'background-color': '#18304c',
+              borderColor: '#325d94'
+            }"
+            :header-cell-style="{
+              color: '#1ffefd',
+              borderColor: '#325d94',
+              'background-color': '#2b4b7a',
+            }"
+          >
+            <el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
+            </el-table-column>
+            <el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from "@/views/layout/bus";
+import 'viewerjs/dist/viewer.css'
+import { directive as viewer } from "v-viewer"
+import * as echarts from 'echarts'
+import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
+export default {
+  name: "",
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  mounted() {
+    console.log(this.feature);
+    selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      console.log(res)
+    })
+    selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+      console.log(res)
+    })
+    this.$nextTick( () => {
+      this.initCharts()
+    })
+  },
+  data() {
+    return {
+      filterButton:{
+        typeSelect:['近7天','近30天',],
+        typeSelectActive:'近7天',
+      },
+      cameraData: []
+
+    };
+  },
+  methods: {
+    // particularsClick(data){
+    //   console.log(data)
+    //   bus.$emit("mainClick", data);
+    // },
+
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+      this.initCharts()
+    },
+
+    initCharts () {
+      const option = {
+        grid: {
+          bottom: 34,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: 'rgba(255, 255, 255,.8)',
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#345a99',
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          boundaryGap: ['2%', '2%'],
+          data: ['1', '2', '3', '4', '5', '6', '7']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: 'dB',
+            nameTextStyle: {
+              color: 'rgba(255, 255, 255,.8)'
+            },
+            axisLabel: {
+              color: 'rgba(255, 255, 255,.8)',
+            },
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            splitArea: {
+              interval: '1',
+              show: true,
+              areaStyle: {
+                color: ['#1d3556','#18334c']
+              }
+            }
+          },
+          {
+            type: 'value',
+            name: 'ug/m³',
+            nameTextStyle: {
+              color: 'rgba(255, 255, 255,.8)'
+            },
+            axisLabel: {
+              color: 'rgba(255, 255, 255,.8)',
+              show: true,
+            },
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            max:100,
+            min: 0,
+          },
+        ],
+        color: ['#309afe','#fab228'],
+        legend: {
+          right: '16%',
+          top: '12%',
+          icon: 'line',
+          data: ['噪声值','扬尘值',],
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            name: '噪声值',
+            data: [60, 30, 60, 70, 40, 60, 70],
+            type: 'line',
+            symbol: 'none',
+            lineStyle: {
+              width: 2,
+              color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#3cb2ff' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: '#2682ff' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      }
+            }
+          },
+          {
+            name: '扬尘值',
+            data: [30, 40, 50, 80, 90, 40, 60],
+            type: 'line',
+            symbol: 'none',
+            lineStyle: {
+              width: 2,
+              color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#fdd033' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: '#fe9820' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      }
+            }
+          },
+        ]
+      }
+      const charts = echarts.init(
+        document.getElementById('chart')
+      )
+      charts.setOption(option)
+    },
+
+    show () {
+      const viewer = this.$el.querySelector('.images').$viewer
+      viewer.show()
+    },
+  },
+  directives: {
+    viewer: viewer({
+        debug: true,
+    }),
+  },
+};
+</script>
+<style lang="scss">
+// .leaflet-popup {
+//   width: auto !important;
+// }
+  .site-popup {
+    .leaflet-popup-content-wrapper {
+      box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+      background: rgba(24,51,76,.95);
+      border: 1px solid rgba(50,227,235,.95);
+    }
+    .leaflet-popup-content {
+      width: 734px !important;
+      height: 453px;
+      padding: 12px 16px;
+      .pop-box {
+        width: 100%;
+        height: 100%;
+
+        .title-bg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 42px;
+          width: 100%;
+          opacity: .4;
+          background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+        }
+
+        .title{
+            color: #fff;
+            font-size: 16px;
+            span:nth-child(2) {
+              display: inline-block;
+              width: 40px;
+              height: 22px;
+              margin-left: 8px;
+              border-radius: 2px;
+              border: 1px solid #0494ff;
+              color: #1ffefd;
+              text-align: center;
+              font-size: 14px;
+            }
+        }
+        
+        .site-address {
+          margin: 12px 0;
+          padding-left: 20px;
+          background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+          color: rgba(255, 255, 255, .6);
+        }
+
+        .site-content {
+          display: flex;
+          .site-content-left {
+            width: 392px;
+            margin-right: 29px;
+            .site-content-left-top {
+              width: 100%;
+              height: 107px;
+              padding: 24px 0 0 18px;
+              background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
+              display: flex;
+              .noise {
+                height: 60px;
+                width: 180px;
+                border-right: 1px solid #2c619c;
+                display: flex;
+                div {
+                  margin-left: 16px;
+                  font-size: 16px;
+                  color: #fff;
+                  p {
+                    margin: 2px;
+                  }
+                  span {
+                    color: #1ffefd;
+                    font-size: 24px;
+                  }
+                  p:nth-child(2) {
+                    color: rgba(255, 255, 255,.6)
+                  }
+                }
+              }
+              .raise-dust {
+                margin-left: 20px;
+                display: flex;
+                img {
+                  width: 60px;
+                  height: 60px;
+                }
+                div {
+                  margin-left: 16px;
+                  font-size: 16px;
+                  color: #fff;
+                  p {
+                    margin: 2px;
+                  }
+                  span {
+                    color: #1ffefd;
+                    font-size: 24px;
+                  }
+                  p:nth-child(2) {
+                    color: rgba(255, 255, 255,.6)
+                  }
+                }
+              }
+            }
+            .site-content-left-bottom {
+              width: 100%;
+              margin-top: 16px;
+              .filter-btn-typeSelect {
+                display: flex;
+                .typeSelect-btn {
+                  border-radius: 20px;
+                  border: 1px solid rgba(0, 255, 255, .6);
+                  background: rgba(2,51,87,.6);
+                  margin-right: 5px;
+                  padding: 4px 10px;
+                  font-size: 14px;
+                  color: #fff;
+                  cursor: pointer;
+                }
+                .typeSelect-btn-active {
+                  background: #005ea3;
+                  border: 1px solid #00ffff;
+                }
+              }
+              #chart {
+                width: 100%;
+                height: 206px;
+              }
+            }
+          }
+          .site-content-right {
+            width: 280px;
+            .video-table {
+              margin-top: 20px;
+              h4 {
+                color: #fff;
+              }
+              .el-table{
+                margin-top: 8px;
+                border: 1px solid #325d94;
+                .el-table__body-wrapper{
+                  height: 90px;
+                  overflow-y: auto;
+                  &::-webkit-scrollbar {
+                  width: 8px;
+                  background-color: #10335e;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #446dac !important;
+                  }
+                }
+                th,td {
+                  border-right: 1px solid #325d94;
+                }
+              }
+              .el-table::before {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+    }
+
+    .leaflet-popup-close-button {
+      color: #3afefc !important;
+      font-size: 12px;
+    }
+  }
+</style>
+<style lang='scss' scoped>
+.particulars {
+  position: absolute;
+  right: 5px;
+  width: 80px;
+  height: 40px;
+  bottom: 5px;
+}
+.List-Details-pop {
+  background-color: #fff;
+  font-size: 16px;
+  padding-bottom: 20px;
+  display: flex;
+  width: 400px;
+
+  .topContent {
+    background: #000;
+    padding: 14px;
+    width: 400px;
+  }
+  .content {
+    width: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    b {
+      color: #000;
+      font-size: 14px;
+    }
+    p {
+      color: #000;
+      font-size: 14px;
+    }
+  }
+  .title {
+    background-color: #000;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/pages/waterPoints/components/StatisticalAnalysis.vue b/src/views/pages/waterPoints/components/StatisticalAnalysis.vue
new file mode 100644
index 0000000..e530028
--- /dev/null
+++ b/src/views/pages/waterPoints/components/StatisticalAnalysis.vue
@@ -0,0 +1,706 @@
+<template>
+ <div>
+  <div id="StatisticalAnalysis">
+    <div class="title-bg"></div>
+    <div class="close-btn" @click="closeDialog"><i class="el-icon-close"></i></div>
+    <h4>统计分析</h4>
+    <div class="tabs-button">
+      <div class="tabs-button-box">
+        <div  class="tabs-button-btn"
+              @click="tabHandleClick(item)"
+              v-for="item in tabsButton" 
+              :key="item"
+              :class="tabsActiveName == item?'tabs-button-btn-active':''"
+              >
+          {{item}}
+        </div>
+      </div>
+    </div>
+    <div class="filter-btn-box">
+      <div class="filter-btn-typeSelect">
+        <div  class="typeSelect-btn" 
+              v-for="item in filterButton.typeSelect" 
+              :key="item" 
+              :class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
+              @click="typeSelect(item)"
+              >{{item}}</div>
+      </div>
+    </div>
+    <div key="video" v-if="tabsActiveName == '视频感知事件'">
+      <div class="event-num">
+        <span>000</span>件
+      </div>
+      <div class="line"></div>
+      <div id="event-type-chart"></div>
+      <div class="line"></div>
+      <div id="event-state-chart"></div>
+      <div class="line"></div>
+      <div id="event-time-chart"></div>
+    </div>
+    <div key="road" v-if="tabsActiveName == '出租车走航监测'">
+      <div class="event-num">
+        <span>000</span>件
+      </div>
+      <div class="line"></div>
+      <div id="road-time-chart"></div>
+      <div class="line"></div>
+      <el-table
+          :data="PollutionRoad"
+          height='356'
+          :cell-style="{
+            color: '#fff',
+            cursor: 'pointer',
+            'background-color': '#18304c',
+          }"
+          :header-cell-style="{
+            color: '#1ffefd',
+            'background-color': '#2b4b7a',
+          }"
+        >
+          <el-table-column label="Top" width="50" type="index">
+          </el-table-column>
+          <el-table-column  label="道路" prop="roadName" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="84" prop="start" label="路段开始" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="84" prop="end" label="路段结束" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column width="86" prop="times" label="告警次数">
+          </el-table-column>
+      </el-table>
+    </div>
+  </div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+ export default {
+   data () {
+     return {
+        tabsButton: ["视频感知事件","出租车走航监测"],
+        tabsActiveName: "视频感知事件",
+        filterButton:{
+          typeSelect:['全部','近7天','近30天'],
+          typeSelectActive:'全部',
+        },
+        PollutionRoad:[
+          {
+            roadName: '某某路',
+            start: '开始',
+            end: '结束',
+            times: '10',
+          }, 
+          {
+            roadName: '某某路',
+            start: '开始',
+            end: '结束',
+            times: '10',
+          },
+          {
+            roadName: '某某路',
+            start: '开始',
+            end: '结束',
+            times: '10',
+          },
+        ]
+     }
+   },
+   mounted() {
+    
+      this.$nextTick( () => {
+        this.initEventTypeCharts()
+        this.initEventStateCharts()
+        this.initEventTimeCharts()
+        // this.initRoadTimeCharts()
+      })
+    
+   },
+   methods: {
+    tabHandleClick(item) {
+      this.tabsActiveName = item
+      if(item == '视频感知事件') {
+        this.$nextTick( () => {
+          this.initEventTypeCharts()
+          this.initEventStateCharts()
+          this.initEventTimeCharts()
+        })
+      }
+      if(item == '出租车走航监测') {
+        this.$nextTick( () => {
+          this.initRoadTimeCharts()
+        })
+      }
+    },
+    typeSelect(item) {
+      this.filterButton.typeSelectActive = item
+    },
+    
+    closeDialog(){
+      this.$emit('closeDialog')
+    },
+
+    initEventTypeCharts () {
+      const option = {
+         title: {
+          text: "事件类型分布",
+          left: "left",
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: "normal"
+          },
+        },
+        grid: {
+          bottom: 34,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['非法运土', '工地扬尘', '其他'],
+          axisLabel: {
+            color: '#fff',
+            margin: 7,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(254, 125, 42,0.6)',
+            }
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+        },
+        series: [
+          {
+            data: [120, 200, 150],
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(254,125,42,1)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(254,125,42,0)'
+                }]),
+              borderWidth: 2,
+              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(255,211,107,1)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(255,211,107,0)'
+                }]),
+            },
+            barWidth : 23,
+            label: {
+              show: true,
+              position : 'top',
+              distance: 5,
+              color: 'fe982a',
+              fontSize: 18,
+            }
+          }
+        ]
+      }
+      const eventType = echarts.init(
+        document.getElementById('event-type-chart')
+      )
+      eventType.setOption(option)
+    },
+    initEventStateCharts () {
+      const option = {
+        title: [
+          {
+            text: "事件状态分布",
+            left: "left",
+            top: 15,
+            textStyle: {
+              fontSize: 16,
+              color: "#fff",
+              fontWeight: "normal"
+            },
+          },
+          { 
+            text: "事件处置率",
+            subtext: '     65%',
+            left: 35,
+            top: 'center',
+            textStyle: {
+              fontSize: 16,
+              color: "#fff",
+              fontWeight: "normal"
+            },
+            subtextStyle: {
+              fontSize: 16,
+              color: "#3bed82",
+              fontWeight: "normal",
+              left: 40,
+            },
+          }
+        ],
+        grid: {
+          bottom: 34,
+        },
+        legend: {
+          top: '36%',
+          left: '45%',
+          icon: 'rect',
+          itemHeight: 10,
+          itemWidth: 10,
+          textStyle: {
+            rich: {
+              name: {
+                color: 'rgba(255, 255, 255,0.8)',
+                fontSize: 16,
+              },
+              value: {
+                fontSize: 20,
+                color: '#1ef6f5'
+              }
+            }
+          },
+          formatter(name) {
+            let than = option.series[0].data;
+            let total = 0;
+            let tarValue;
+            for (let i = 0, l = than.length; i < l; i++) {
+              total += than[i].value;
+              if (than[i].name == name) {
+                tarValue = than[i].value;
+              }
+            }
+            let p = (tarValue / total) * 100;
+            return '{name|' + name + " " + " " + '}{value|' + tarValue + '件' + " " + " " + p + "%" + '}'
+          },
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['65%', '100%'],
+            left: 10,
+            top: 20,
+            width: 140,
+            hoverAnimation: false,
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            itemStyle: {
+              borderColor: 'rgba(24,51,76,0.95)',
+              borderWidth: 1,
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            tooltip: {
+              trigger: 'item'
+            },
+            labelLine: {
+              show: false
+            },
+            color:['#3bed82', '#fe7d2a','#bfbfbf'],
+            data: [
+              { value: 50, name: '已处置' },
+              { value: 25, name: '未处置' },
+              { value: 25, name: '已作废' },
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['65%', '80%'],
+            left: 10,
+            z: 22,
+            top: 20,
+            width: 140,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            color:['rgba(0,0,0,0.35)'],
+            data: [
+              { value: 100 },
+            ]
+          },
+        ]
+      }
+      const eventState = echarts.init(
+        document.getElementById('event-state-chart')
+      )
+      eventState.setOption(option)
+    },
+    initEventTimeCharts () {
+      const option = {
+         title: {
+          text: "事件时间趋势",
+          left: "left",
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: "normal"
+          },
+        },
+        grid: {
+          top: 80,
+          bottom: 34,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: 'rgba(255, 255, 255,0.8)',
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#345a99',
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          boundaryGap: ['2%', '2%'],
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+        },
+        yAxis: {
+          type: 'value',
+          name: '数量',
+          nameTextStyle: {
+            color: 'rgba(255, 255, 255.0.8)'
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255,0.8)',
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitArea: {
+            interval: '1',
+            show: true,
+            areaStyle: {
+              color: ['#1d3556','#18334c']
+            }
+          }
+        },
+        series: [
+          {
+            data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                          offset: 0,
+                          color: 'rgba(254, 152, 32, 0)'
+                      }, {
+                          offset: 1,
+                          color: 'rgba(254, 152, 32, 0.7)'
+                      }]),
+            },
+            lineStyle: {
+              width: 2,
+              color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#fdd033' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: '#fe9820' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      }
+            }
+          }
+        ]
+      }
+      const eventTime = echarts.init(
+        document.getElementById('event-time-chart')
+      )
+      eventTime.setOption(option)
+    },
+    initRoadTimeCharts () {
+      const option = {
+         title: {
+          text: "事件时间趋势",
+          left: "left",
+          top: 15,
+          textStyle: {
+            fontSize: 16,
+            color: "#fff",
+            fontWeight: "normal"
+          },
+        },
+        grid: {
+          top: 80,
+          bottom: 34,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: 'rgba(255, 255, 255,0.8)',
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#345a99',
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          boundaryGap: ['2%', '2%'],
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+        },
+        yAxis: {
+          type: 'value',
+          name: '数量',
+          nameTextStyle: {
+            color: 'rgba(255, 255, 255,0.8)'
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255,0.8)',
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitArea: {
+            interval: '1',
+            show: true,
+            areaStyle: {
+              color: ['#1d3556','#18334c']
+            }
+          }
+        },
+        series: [
+          {
+            data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                          offset: 0,
+                          color: 'rgba(254, 152, 32, 0)'
+                      }, {
+                          offset: 1,
+                          color: 'rgba(254, 152, 32, 0.7)'
+                      }]),
+            },
+            lineStyle: {
+              width: 2,
+              color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#fdd033' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: '#fe9820' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      }
+            }
+          }
+        ]
+      }
+      const roadTime = echarts.init(  
+        document.getElementById('road-time-chart')
+      )
+      roadTime.setOption(option)
+    },
+  },
+ }
+</script>
+
+<style lang="scss" scpoed>
+ #StatisticalAnalysis {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 12px 12px 18px;
+  .title-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 42px;
+    width: 100%;
+    opacity: .4;
+    background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+  }
+  .close-btn {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    color: #3afefc;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  h4 {
+    font-size: 18px;
+    color: #fff;
+    font-weight: normal;
+  }
+
+  .tabs-button {
+    position: relative;
+    margin-top: 20px;
+    .tabs-button-box {
+      padding-bottom: 11px;
+      border-bottom: 3px solid #2c619c;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .tabs-button-btn {
+        font-size: 18px;
+        color: rgba($color: #fff, $alpha: 0.6);
+        position: relative;
+        cursor: pointer;
+      }
+      .tabs-button-btn-active {
+        font-size: 20px;
+        color: #fff;
+      }
+      .tabs-button-btn-active::after {
+        content: '';
+        position: absolute;
+        bottom: -15px;
+        right: 24%;
+        width: 64px;
+        height: 5px;
+        border-radius: 5px;
+        background-color: #1ffffc;
+      }
+    }
+  }
+
+
+  .filter-btn-box {
+    margin-top: 14px;
+    .filter-btn-typeSelect {
+      display: flex;
+      .typeSelect-btn {
+        border-radius: 20px;
+        border: 1px solid rgba(0, 255, 255, .6);
+        background: rgba(2,51,87,.6);
+        margin-right: 5px;
+        padding: 4px 10px;
+        font-size: 14px;
+        color: #fff;
+        cursor: pointer;
+      }
+      .typeSelect-btn-active {
+        background: #005ea3;
+        border: 1px solid #00ffff;
+      }
+    }
+  }
+
+  .event-num {
+    width: 138px;
+    height: 45px;
+    margin: 10px auto;
+    background: url(../../../../assets/construction/StatisticalAnalysisEventNum.png) no-repeat;
+    color: #1ffefd;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 36px;
+      font-weight: bold;
+      background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-right: 8px;
+    }
+  }
+
+  .line {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg, rgba($color: #306db0, $alpha: 0) 0,rgba($color: #306db0, $alpha: 1) 50%, rgba($color: #306db0, $alpha: 0) 100%);
+  }
+
+  #event-type-chart,#event-state-chart {
+    width: 100%;
+    height: 207px;
+  }
+  #event-time-chart {
+    width: 100%;
+    height: 240px;
+  }
+  #road-time-chart {
+    height: 240px;
+    width: 100%;
+  }
+  ::v-deep .el-table {
+      border: 1px solid #325d94;
+      width: 100%;
+      th,td {
+          border-right: 1px solid #325d94 !important;
+        }
+    }
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: normal;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+    }
+    .el-table th.is-leaf {
+      border: 1px solid #1f557c;
+    }
+    .el-table td {
+      border: 0;
+      padding: 5px 0;
+    }
+    .el-table th {
+      padding: 5px 0;
+    }
+    .el-table::before {
+      height: 0px;
+    }
+    .el-table__row:nth-of-type(even) > td {
+      background-color: #113660 !important;
+    }
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 8px;
+        background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+ }
+</style>
diff --git a/src/views/pages/waterPoints/components/VideoList.vue b/src/views/pages/waterPoints/components/VideoList.vue
new file mode 100644
index 0000000..e68fe09
--- /dev/null
+++ b/src/views/pages/waterPoints/components/VideoList.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="box">
+
+    <div class="tabs-button">
+      <div class="tabs-button-box">
+        <div  class="tabs-button-btn"
+              @click="tabHandleClick(item)"
+              v-for="item in tabsButton" 
+              :key="item"
+              :class="tabsActiveName == item?'tabs-button-btn-active':''"
+              >
+          {{item}}
+        </div>
+      </div>
+    </div>
+
+    <div class="label-content">
+      <el-input
+        placeholder="请输入关键词"
+        prefix-icon="el-icon-search"
+        v-model="labelSearch"
+        @input="searchLabel"
+      >
+      </el-input>
+      <el-checkbox-group v-model="checkboxGroup">
+        <el-checkbox-button 
+          v-for="item in tabList" 
+          :label="item.labelName" 
+          :key="item.id"
+          @change="tabChange(item)"
+        >
+          {{item.labelName}}
+        </el-checkbox-button>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
+import bus from "@/views/layout/bus";
+
+export default {
+  data() {
+    return {
+      tabsButton: ["视频标签","视频列表"],
+      tabsActiveName: "视频标签",
+      tabList:[],
+      labelSearch:'',
+      checkboxGroup: [],
+      cameraAllData:[],
+    };
+  },
+  mounted() {
+    getCameraAllLabel().then((res) => {
+      this.tabList = res.data.data
+    });
+    getCameraAll().then((res) => {
+      this.cameraAllData = res.data
+      // this.addResourceTomap('cameraAll',res.data);
+    })
+  },
+  methods: {
+    tabHandleClick(item) {
+      this.tabsActiveName = item
+    },
+    tabChange(item){
+      if(this.checkboxGroup.indexOf(item.labelName) !== -1){
+          bus.$emit("removeCameraLayer",'全部')
+          getCameraLabel({labelCode:item.labelCode}).then((res) => {
+            bus.$emit("CameraSingleDataOnMap",item.labelName,res.data.data)
+
+            // this.addResourceTomap(item.labelName,res.data.data);
+            // res.data.data.forEach((item) => {
+            //   this.camreaTreeSingle.forEach((val) => {
+            //     if(item.nodeName == val.channelName){
+            //       val.children.push(item)
+            //     }
+            //   })
+            // })
+            // this.camreaTreeIsShow = false;
+          })
+      }else {
+        bus.$emit("removeCameraLayer",item.labelName)
+        // this.checkStatus = "2"
+        // this.camreaTreeIsShow = true
+        // getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        //   this.camreaTree = res.data.data
+        // })
+      }
+    },
+    searchLabel(value) {
+      const params = {
+        labelName:value
+      }
+      selectByLabelName(params).then((res) => {
+        console.log(res)
+        this.tabList = res.data.data
+      })
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../assets/construction/listTopBg.png) no-repeat,
+              url(../../../../assets/construction/videoTag.png) no-repeat 324px 17px;
+  padding: 30px 0 18px 18px;
+
+  .tabs-button {
+    position: relative;
+    .tabs-button-box {
+      width: 358px;
+      padding-bottom: 11px;
+      border-bottom: 3px solid #2c619c;
+      display: flex;
+      align-items: center;
+      .tabs-button-btn {
+        font-size: 18px;
+        color: rgba($color: #fff, $alpha: 0.6);
+        position: relative;
+        cursor: pointer;
+        margin-right: 28px;
+      }
+      .tabs-button-btn-active {
+        font-size: 20px;
+        color: #fff;
+      }
+      .tabs-button-btn-active::after {
+        content: '';
+        position: absolute;
+        bottom: -15px;
+        right: 6%;
+        width: 64px;
+        height: 5px;
+        border-radius: 5px;
+        background-color: #1ffffc;
+      }
+    }
+  }
+
+  ::v-deep .label-content {
+    margin-top: 16px;
+    .el-input {
+      width: 358px;
+    }
+    .el-input__inner {
+      border: 1px solid rgba(31,254,253,.9);
+      color: #fff;
+      border-radius: unset;
+      background: rgba($color: #203b5d, $alpha: .8);
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    .el-input__prefix {
+      color: rgba(31,254,253,.9);
+    }
+
+    .el-checkbox-group {
+      height: 316px;
+      width: 372px;
+      overflow-y: auto;
+      margin-top: 6px;
+      &::-webkit-scrollbar {
+      width: 8px;
+      background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+    .el-checkbox-button {
+      border-radius: 15px;
+      margin: 10px;
+      .el-checkbox-button__inner {
+        height: 30px;
+        line-height: 6px;
+        border-radius: 15px;
+        background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
+        border: 1px solid #1d98a0;
+        font-size: 16px;
+        color: #1ffefd;
+      }
+      .el-checkbox-button__inner:hover {
+        border: 1px solid #1ffefd;
+        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+      }
+    }
+    .el-checkbox-button.is-checked {
+      .el-checkbox-button__inner{
+        color: #fff;
+        border: 1px solid #1ffefd;
+        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/pages/waterPoints/components/tiledMap.vue b/src/views/pages/waterPoints/components/tiledMap.vue
new file mode 100644
index 0000000..057f810
--- /dev/null
+++ b/src/views/pages/waterPoints/components/tiledMap.vue
@@ -0,0 +1,52 @@
+<!--
+ * @Author: hisense.wuhongjian
+ * @Date: 2020-06-09 20:35:02
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2021-12-21 14:40:47
+ * @Description: 超图地图容器
+-->
+<template>
+  <div :id="mapId" class="tiled-map" />
+</template>
+<script>
+export default {
+  name: 'TiledMap',
+  props: {
+    mapId: {
+      // 地图容器的div的id
+      type: String,
+      default: () => 'map',
+    },
+    hiMap: {
+      // 调用该组件的父组件的v-model绑定的对象
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      map: '', // 地图对象
+    };
+  },
+  mounted() {
+    if (!this.map) {
+      this.initMap();
+    }
+  },
+  methods: {
+    initMap() {
+      // setTimeout(()=>{
+      this.map = this.hiMap.initMap(this.mapId, { type: 'remote' });
+      // },000);
+      // this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.tiled-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pages/waterPoints/index.vue b/src/views/pages/waterPoints/index.vue
new file mode 100644
index 0000000..9b2c214
--- /dev/null
+++ b/src/views/pages/waterPoints/index.vue
@@ -0,0 +1,520 @@
+<template>
+  <div>
+    <div id="contain">
+      <div class="map-box">
+        <div :id="mapId" class="normal-map-content">
+          <tiled-map :hi-map="hiMap" :map-id="mapId" />
+        </div>
+      </div>
+
+      <header>
+        <div class="title">青岛市积水点地图</div>
+        <div></div>
+      </header>
+
+      <div class="searchPoint">
+        <el-autocomplete
+          class="inline-input"
+          prefix-icon="el-icon-search"
+          v-model="state"
+          :fetch-suggestions="querySearchAsync"
+          placeholder="搜索地点"
+          :trigger-on-focus="false"
+          @select="handleSelect"
+          :popper-append-to-body="false"
+          popper-class="my-autocomplete"
+        >
+          <template slot-scope="{ item }">
+            <div style="margin-bottom: -10px" class="name">
+              {{ item.text || "" }}
+            </div>
+            <span style="font-size: 10px; color: #afbcc5">{{
+              item.detail.address || ""
+            }}</span>
+          </template>
+          <!-- <template slot="append">搜索</template> -->
+        </el-autocomplete>
+      </div>
+
+      <div class="eventNum">
+        累计事件数量
+        <p><span>1236</span>件</p>
+      </div>
+
+      <!-- 事件感知 -->
+      <div class="complaintContent">
+        <complaint-event ref="complaintEventRef"></complaint-event>
+      </div>
+
+      <!-- 视频标签、列表 -->
+      <div class="videoList">
+        <video-list ref="videoListRef"></video-list>
+      </div>
+
+      <!-- 工地列表 -->
+      <div class="siteList">
+        <site-list></site-list>
+      </div>
+
+      <div class="changeLayer">
+        <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-group>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { HieimpMap } from "@/supermap/map-init";
+import TiledMap from "./components/tiledMap";
+import { searchCamera } from "@/api/videoSurveillance/index";
+import bus from "@/views/layout/bus";
+import complaintEvent from "./components/ComplaintEvent";
+import VideoList from "./components/VideoList";
+import SiteList from "./components/SiteList";
+import { selectByJdWd } from "@/api/construction/index";
+import { createSiteListPop } from "@/supermap/createMarkerPopup";
+import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
+
+export default {
+  data() {
+    return {
+      hiMap: new HieimpMap(), // 地图全局对象
+      mapId: "map-single", // 地图容器的id
+
+      state: "",
+      constructionSiteData: [],
+      changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
+      changeLayerBtnGroup: [],
+    
+    };
+  },
+  components: {
+    TiledMap,
+    complaintEvent,
+    VideoList,
+    SiteList,
+  },
+  created() {},
+  mounted() {
+    this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
+    this.multiScreenFun = this.hiMap.multiScreenFun(
+      this.hiMap.mapObj,
+      this.hiMapFun
+    );
+
+  
+
+    // 根据经纬度查询半径内所有的工地
+    bus.$off("openCauseAnalysis");
+    bus.$on("openCauseAnalysis", (row) => {
+      // this.timeRegion = data.data.dt;
+      // this.hiMapFun.removerPolygon();
+      this.hiMapFun.removeLayerByLayerName("constructionSite");
+      // debugger
+      // this.circle(latLng);
+      this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
+      // this.WithinRadiusSite(latLng);
+      let dataEvent = [{
+          latLng: { lat: row.wd, lng: row.jd },
+          data: row,
+          type: "site",
+      }]
+      this.hiMapFun.addPointsToMap(
+        dataEvent,
+        "construction.png",
+        "constructionSite",
+        createSiteListPop
+      );
+    });
+  
+    bus.$off("roadOnMap");
+    bus.$on("roadOnMap",(roadData) => {
+      this.roadOnMap(roadData);
+    })
+
+    bus.$off("removeCameraLayer");
+    bus.$on("removeCameraLayer",(type) => {
+      this.hiMapFun.removeLayerByLayerName(type)
+    })
+  
+    bus.$off("CameraSingleDataOnMap");
+    bus.$on("CameraSingleDataOnMap",(labelName,data) => {
+      this.addResourceTomap(labelName,data);
+    })
+  },
+  methods: {
+    querySearchAsync(queryString, cb) {
+      if (queryString.length > 0) {
+        searchCamera(queryString).then((res) => {
+          cb(res.data.suggestions);
+        });
+      }
+    },
+    handleSelect(item) {
+      this.hiMapFun.clearAllLayers();
+      const arr = item.detail.location.split(",");
+      const searchDataDetail = [
+        {
+          latLng: { lat: arr[1], lng: arr[0] },
+          data: item,
+        },
+      ];
+      this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] });
+      this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]);
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        searchDataDetail,
+        "poi-red.png",
+        "address"
+      );
+      // this.timer = setTimeout(() => {
+      //   this.addResourceTomap("全部", this.cameraAllData);
+      // }, 1000);
+    },
+    // 圈选查询
+    circle(latlng) {
+      this.hiMapFun.addCircleToMap(latlng, 3500);
+    },
+    // 根据经纬度查半径内的工地
+    async WithinRadiusSite(data) {
+      const param = {
+        jd: data.lng,
+        radius: 3000,
+        wd: data.lat,
+      };
+      const res = await selectByJdWd(param);
+      this.constructionSiteData = res.data.data;
+      const dataEvent = [];
+      this.constructionSiteData.forEach((item) => {
+        const arr = [0, 0.0, "", "0", "0.0"];
+        if (arr.indexOf(item.wd) == -1) {
+          dataEvent.push({
+            latLng: { lat: Number(item.wd), lng: Number(item.jd) },
+            data: item,
+            type: "site",
+          });
+        }
+      });
+      this.hiMapFun.addPointsToMap(
+        dataEvent,
+        "construction.png",
+        "constructionSite",
+        createSiteListPop
+      );
+    },
+
+    //路网上图
+    roadOnMap(roadData) {
+      roadData.forEach((item) => {
+        let newPoint = JSON.parse(item.points);
+        newPoint[0].map((Point) => {
+          Point.reverse();
+        });
+        item.pm10 = Number(item.pm10);
+        switch (true) {
+          case 0 < item.pm10 && item.pm10 <= 50:
+            this.hiMapFun.addPathToMap(newPoint, "#36fe78");
+            break;
+          case 50 < item.pm10 && item.pm10 <= 150:
+            this.hiMapFun.addPathToMap(newPoint, "#fde202");
+            break;
+          case 150 < item.pm10 && item.pm10 <= 250:
+            this.hiMapFun.addPathToMap(newPoint, "#feb403");
+            break;
+          case 250 < item.pm10 && item.pm10 <= 350:
+            this.hiMapFun.addPathToMap(newPoint, "#fd8402");
+            break;
+          case 350 < item.pm10 && item.pm10 <= 420:
+            this.hiMapFun.addPathToMap(newPoint, "#fd4302");
+            break;
+          case 420 < item.pm10 && item.pm10 <= 500:
+            this.hiMapFun.addPathToMap(newPoint, "#fd0202");
+            break;
+          case 500 < item.pm10 && item.pm10 <= 600:
+            this.hiMapFun.addPathToMap(newPoint, "#a80101");
+            break;
+          case 600 < item.pm10 && item.pm10 <= 700:
+            this.hiMapFun.addPathToMap(newPoint, "#690000");
+            break;
+          default:
+            this.hiMapFun.addPathToMap(newPoint, "#36fe78");
+            break;
+        }
+      });
+    },
+
+    layerHandleChange(item) {
+      if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
+        switch (item) {
+          case "道路":
+            this.roadOnMap(this.$refs.complaintEventRef.roadData);
+            break;
+          case "AI事件":
+            break;
+          case "视频监控":
+            this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
+            break;
+          case "工地":
+
+            break;
+          default:
+            break;
+        }
+      } else {
+        switch (item) {
+          case "道路":
+            this.hiMapFun.removerPolyline();
+            break;
+          case "AI事件":
+            break;
+          case "视频监控":
+            this.hiMapFun.removeLayerByLayerName('全部')
+            break;
+          case "工地":
+
+            break;
+          default:
+            break;
+        }
+      }
+    },
+
+    addResourceTomap(type,data) {
+      const dataEvent = [];
+      data.forEach((item) => {
+        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'
+          });
+        }
+        
+      });
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
+    },
+  },
+  beforeDestroy() {},
+};
+</script>
+<style scoped lang="scss">
+@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
+
+@font-face {
+  font-family: 'Tensentype-ZhiHeiJ-W5';
+  src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
+}
+.map-box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  .normal-map-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+}
+
+#contain {
+  header {
+    position: relative;
+    z-index: 1000;
+    width: 100%;
+    height: 166px;
+    background: url("~@/assets/construction/title.png") no-repeat;
+    text-align: center;
+    .title {
+      font-size: 46px;
+      font-weight: bold;
+      background: linear-gradient(0deg, #99a8d0 0%, #ffffff 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-family: 'Tensentype-ZhiHeiJ-W5';
+    }
+    .title::before {
+      content: '青岛市积水点地图';
+      text-shadow: 0px 3px 10px rgba(0,0,0,.9);
+      position: absolute;
+      z-index: -1;
+    }
+  }
+
+  .searchPoint {
+    position: absolute;
+    z-index: 1000;
+    left: 496px;
+    top: 90px;
+    border: 1px solid rgba(31,254,253,.9);
+    ::v-deep .el-input__inner {
+      color: #fff;
+      background: rgba($color: #203b5d, $alpha: .8);
+      width: 226px;
+      height: 36px;
+      border:none;
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    ::v-deep .el-input__prefix {
+      top: -1px;
+      color: rgba(31,254,253,.9);
+    }
+    ::v-deep .el-input-group__append {
+      width: 54px;
+      height: 30px;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      line-height: 30px;
+      text-indent: -4px;
+      color: #5e9bbd;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    ::v-deep .my-autocomplete {
+      top: 29px !important;
+      z-index: -1 !important;
+      width: 226px !important;
+      left: 0px !important;
+      background: rgba(32,59,93,.8);
+      border: 1px solid #1ffefd;
+      li {
+        color: #fff;
+        &:hover {
+          background: #41738f;
+        }
+      }
+    }
+  }
+
+  .complaintContent {
+    position: absolute;
+    z-index: 1000;
+    left: 10px;
+    top: 90px;
+    height:908px;
+    width: 478px;
+    background: rgba($color: #05213b, $alpha: .85)
+  }
+
+  .eventNum {
+    width: 245px;
+    height: 92px;
+    position: absolute;
+    top: 87px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    background: url(../../../assets/construction/eventNumBg.png) no-repeat;
+    text-align: center;
+    padding: 6px 0 13px 0;
+    font-size: 16px;
+    color: #fff;
+    p {
+      line-height: 50px;
+      span {
+        font-size: 46px;
+        font-weight: bold;
+        background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .videoList {
+    position: absolute;
+    z-index: 1000;
+    right: 8px;
+    top: 92px;
+    width: 398px;
+    height:460px;
+    background: rgba($color: #05213b, $alpha: .85);
+  }
+
+  .siteList {
+    position: absolute;
+    z-index: 1000;
+    right: 8px;
+    top: 562px;
+    width: 398px;
+    height:500px;
+    background: rgba($color: #05213b, $alpha: .85);
+  }
+
+  .changeLayer {
+    width: 332px;
+    height: 67px;
+    background: rgba(7,26,44,.8);
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    z-index: 1000;
+    .title {
+      width: 96px;
+      height: 100%;
+      font-size: 16px;
+      color: rgba(255,255,255,.6);
+      text-align: center;
+      line-height: 67px;
+    }
+    .change-btn-box {
+      height: 42px;
+      width: 230px;
+      margin-top: 12px;
+      border-left: 1px solid #005ea3;
+      padding-left: 20px;
+
+      ::v-deep .el-checkbox-group {
+        .el-checkbox {
+          width: 70px;
+          color: #fff;
+          .el-checkbox__input {
+            .el-checkbox__inner {
+              border: 1px solid #1ffefd;
+              background: transparent;
+            }
+          }
+        }
+        .el-checkbox.is-checked {
+          .el-checkbox__label {
+            color: #1ffefd;
+          }
+          .el-checkbox__input {
+            .el-checkbox__inner {
+              border: 1px solid #1ffefd;
+              background: transparent;
+              &::after {
+                border: 1px solid #1ffefd;
+                border-left: 0;
+                border-top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang='scss'>
+// ::-webkit-scrollbar {
+//   width: 8px;
+//   background: rgba(255, 255, 255, 0.1);
+// }
+// ::-webkit-scrollbar-thumb {
+//   border-radius: 10px;
+//   background: rgba(255, 255, 255, 0.15);
+// }
+//
+</style>