修改

src/api/area.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+export function selectKeyAreaList(params) {
+    return request({
+      url: 'api/project/keyArea/selectKeyAreaList',
+      method: 'get',
+      params
+    })
+  }
+  

src/api/waterPoints.js

@@ -24,3 +24,35 @@ export function selectCameraByName(params) {
     params
   })
 }
+
+export function selectReportOrigin(params) {
+  return request({
+    url: 'api/project/water/selectReportOrigin',
+    method: 'get',
+    params
+  })
+}
+
+export function selectCountWater(params) {
+  return request({
+    url: 'api/project/water/selectCountWater',
+    method: 'get',
+    params
+  })
+}
+
+export function selectCountWaters(params) {
+  return request({
+    url: 'api/project/water/selectCountWaters',
+    method: 'get',
+    params
+  })
+}
+
+export function selectCountLevel(params) {
+  return request({
+    url: 'api/project/water/selectCountLevel',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -95,6 +95,11 @@ export const pageRoutes = [{
     name: 'construction', 
     meta: { title: '在建工地综合监管平台' } 
 },
+{ path: '/area',
+    component: () => import('@/views/pages/area'), 
+    name: 'area', 
+    meta: { title: '重点区域监控平台' } 
+},
 { path: '/point',
     component: () => import('@/views/pages/civilizedCity/components/Point'), 
     name: 'point', 

src/supermap/map-showResource.js

@@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
   // layers = createMarkerClusterLayer(defaultStyle)
   const icon = createDefaultFeatureStyle({
     img: url || 'the-head.png',
-    iconSize: url == ('construction.png'||url == 'waterPoint.png')?[37,49]:[36, 36],
+    iconSize: url == ('construction.png'||url == 'waterPoint2.png'||url == 'waterPoint1.png'||url == 'waterPoint3.png')?[37,49]:[36, 36],
   })
   const arr = []
   features.map((feature, index) => {
@@ -583,14 +583,14 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
           const elementHtml = createPopupFun(feature)
           if (elementHtml) {
             if(feature.type=='road'){
-              L.popup({ className: 'roadGovernance-popup', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+              L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             } else if(feature.type=='site'){
-              L.popup({ className: 'site-popup', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+              L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             } 
             else if(feature.type=='waterPoint'){
-              L.popup({ className: 'water-point-pop', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+              L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             } else{
-              L.popup({ className: 'epidemic-address', keepInView: true, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+              L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
             }
           }
         })

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

@@ -0,0 +1,521 @@
+<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> -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link">
+          {{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown" class="dropdownCss">
+          <el-dropdown-item
+            v-for="(item, index) in EventBtns"
+            :key="index"
+            @click.native="EventBtnsClick(item)"
+            >{{ item }}
+          </el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+      <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.eventNewName||''}}</span>
+            <span>{{item.captureTime||''}}</span>
+            <!-- <span>未派发</span> -->
+          </div>
+          <div class="event-details-des">
+            <h5>事件地址:{{ item.district || ''}}</h5>
+            <p>摄像头名称:{{ item.cameraName || ''}}</p>
+            <p>事件描述:{{ item.eventCnName || ''}}</p>
+          </div>
+        </div>
+        <el-pagination
+          v-if="total==0"
+          background
+          layout="prev, pager, next"
+          @current-change="pageChange"
+          :page-count="pageCount"
+          :current-page="currentPage"
+          >
+        </el-pagination>
+        <el-pagination
+          v-else
+          background
+          layout="prev, pager, next"
+          @current-change="pageChange"
+          :total="total"
+          :current-page="currentPage"
+          >
+        </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 {
+  selectEvent,
+  selectByName,
+} from "@/api/civilizedCity";
+export default {
+  data() {
+    return {
+      tabsButton: ["视频感知",],
+      tabsActiveName: "视频感知",
+      statisticalAnalysisIsShow: false,
+      filterButton:{
+        typeSelect:['事件','事件1'],
+        typeSelectActive:'事件',
+        processStateSelect:['全部','未派发','未处置','已处置'],
+        processStateSelectActive:'全部',
+      },
+      eventListData: [],
+      preTime: "",
+      pageCount: 0,
+      total:0,
+      currentPage:1,
+      roadData:[],
+      listTypeSelect: "全部",
+      EventBtns: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
+    };
+  },
+  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() {
+    const params = {
+        page: 1,
+        pageSize: 4,
+    };
+    selectEvent(params).then((res) => {
+        this.eventListData = res.data.data.events
+        this.pageCount = res.data.data.page
+    });
+  },
+  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
+    },
+    //分页
+    pageChange(val) {
+      this.currentPage = val
+      if(this.listTypeSelect == '全部'){
+        selectEvent({ pageSize: 4,page: val,}).then((res) => {
+          this.eventListData = res.data.data.events
+          this.pageCount = res.data.data.page
+          this.total = 0
+        });
+      } else {
+        selectByName({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
+          // res.data.data.sort(this.compare("captureTime", "inverted"));
+          // console.log(res.data.data)
+          this.eventListData = res.data.data.events;
+          this.total = res.data.data.sum
+          this.pageCount = 0
+        })
+      }
+    },
+
+    EventBtnsClick(item) {
+      this.currentPage = 1
+      this.listTypeSelect = item;
+      if(item == '全部'){
+        selectEvent({ pageSize: 4,page: 1,}).then((res) => {
+          this.eventListData = res.data.data.events
+          this.pageCount = res.data.data.page
+          this.total = 0
+        });
+      } else {
+        selectByName({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
+          // res.data.data.sort(this.compare("captureTime", "inverted"));
+          // console.log(res.data.data)
+          this.eventListData = res.data.data.events;
+          this.total = res.data.data.sum
+          this.pageCount = 0
+        })
+      }
+    },
+  },
+};
+</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;
+      position: relative;
+
+      .event-details {
+        cursor: pointer;
+        margin-top: 16px;
+        // margin-top: 18px;
+        width: 100%;
+        max-height: 130px;
+        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);
+  }
+
+  ::v-deep .el-dropdown {
+    margin-top: 10px;
+    .el-dropdown-link {
+        cursor: pointer;
+        color: #fff;
+      }
+  }
+}
+</style>

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

@@ -0,0 +1,334 @@
+<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  prop="areaName" label="名称" show-overflow-tooltip>
+            
+          </el-table-column>
+          <el-table-column  prop="location" label="位置" show-overflow-tooltip>
+            
+          </el-table-column>
+          <el-table-column  prop="allNums" label="人数">
+            
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    </div>
+</template>
+<script>
+import bus from "@/views/layout/bus";
+import {
+  selectKeyAreaList
+} from "@/api/area";
+
+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: '窗口单位'
+        }, 
+      ],
+      selectValue: '公园广场'
+    };
+  },
+  mounted() {
+    selectKeyAreaList({type:"公园广场"}).then((res) => {
+      console.log(res.data.data)
+      this.siteData = res.data.data
+    })
+  
+  },
+  methods: {
+    
+    
+
+    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) {
+      selectKeyAreaList({type:val}).then((res) => {
+        this.siteData = res.data.data
+      })
+    },
+    // 行点击
+    analyse(row) {
+      bus.$emit("openCauseAnalysis", row);
+    },
+    // 关闭基本信息窗口
+    informationClose() {
+      this.informationShow = false;
+    },
+  },
+};
+</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%;
+      background: transparent;
+      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>

src/views/pages/area/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>

src/views/pages/area/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>

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

@@ -0,0 +1,351 @@
+<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 v-if="tabsActiveName == '视频标签'" 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 v-if="tabsActiveName == '视频列表'" class="label-content">
+      <el-input
+        placeholder="请输入关键词"
+        suffix-icon="el-icon-search"
+        v-model="labelSearch"
+        @input="searchCameraTree"  
+      >
+      </el-input>
+        <el-tree
+          v-show="cameraTreeIsShow"
+          id="tree"
+          :data="cameraTree"
+          :props="{label:'name',children:'children',isLeaf:'leaf',}"
+          :load="loadNode"
+          node-key="id"
+          @node-click="treeCameraClick"
+          empty-text="暂无数据"
+          :filter-node-method="filterNode"
+          lazy>
+          <!-- 是否离线checkStatus -->
+          <!-- <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
+            <!-- <span>{{ data.channelName || '' }}</span> -->
+          <!-- </span> -->
+        </el-tree>
+        <el-tree
+          v-show="!cameraTreeIsShow"
+          ref="tree"
+          :data="cameraTreeSingle" 
+          :props="{label:'channelName',children:'children'}"
+          :filter-node-method="filterNode"
+          @node-click="treeCameraClick"
+        >
+          <!-- <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
+            <!-- <span>{{ data.channelName || '' }}</span> -->
+          <!-- </span> -->
+        </el-tree>
+    </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:[],
+      cameraTreeIsShow:true,
+      cameraTreeSingle: [],
+      checkStatus: '2',
+      cameraTree:[],
+    };
+  },
+  mounted() {
+    getCameraAllLabel().then((res) => {
+      this.tabList = res.data.data
+    });
+    getCameraAll().then((res) => {
+      this.cameraAllData = res.data
+      // this.addResourceTomap('cameraAll',res.data);
+    })
+    getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+      this.cameraTree = res.data.data
+      console.log(this.cameraTree)
+      res.data.data.forEach((item) => {
+        this.cameraTreeSingle.push({
+          channelName: item.name,
+          children: []
+        })
+      })
+    })
+  },
+   watch: {
+    checkStatus(newV,oldV) {
+      console.log(newV)
+      this.$refs.tree.filter(newV)
+    }
+  },
+  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.cameraTreeSingle.forEach((val) => {
+            //     if(item.nodeName == val.channelName){
+            //       val.children.push(item)
+            //     }
+            //   })
+            // })
+            // this.cameraTreeIsShow = false;
+          })
+      }else {
+        bus.$emit("removeCameraLayer",item.labelName)
+        // this.checkStatus = "2"
+        // this.cameraTreeIsShow = true
+        // getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        //   this.cameraTree = res.data.data
+        // })
+      }
+    },
+    searchLabel(value) {
+      const params = {
+        labelName:value
+      }
+      selectByLabelName(params).then((res) => {
+        console.log(res)
+        this.tabList = res.data.data
+      })
+    },
+    searchCameraTree(value) {
+      if(value.length > 0){
+        const params = {
+        channelName:value
+      }
+        selectByChannelName(params).then((res) => {
+          console.log(res)
+          this.cameraTree = []
+          res.data.data.forEach((item) => {
+            this.cameraTree.push({
+              name: item.channelName,
+              gpsX: item.gpsX,
+              gpsY: item.gpsY,
+              channelCode:item.channelCode,
+              leaf:true,
+            })
+          })
+        })
+      }else {
+        getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+          this.cameraTree = res.data.data
+        })
+      }
+    },
+    reset() {
+      this.checkboxGroup = []
+      this.checkStatus = "2";
+      this.cameraTreeIsShow = true
+      getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
+        this.cameraTree = res.data.data
+      })
+      document.getElementById("tree").scrollTop = 0;
+    },
+    loadNode(node, resolve) {
+        // if (node.level === 0) {
+        //   return resolve([{ name: 'region' }]);
+        // }
+        console.log(node)
+        if (node.level > 0) {
+          let subData = []
+          getCameraAllOrgan({parentId:node.data.id}).then((res) => {
+            if(res.data.data.length == 0){
+              const params = {
+                parentId:node.data.id,
+                checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
+              }
+              getCameraByParentId(params).then((res) => {
+                res.data.data.forEach((item) => {
+                  subData.push({
+                    name: item.channelName,
+                    gpsX: item.gpsX,
+                    gpsY: item.gpsY,
+                    channelCode:item.channelCode,
+                    checkStatus:item.checkStatus,
+                    leaf:true,
+                  })
+                })
+                return resolve(subData);
+              })
+            }else{
+              subData = res.data.data
+              return resolve(subData);
+            }
+          })
+        }
+    },
+    treeCameraClick(data) {
+      console.log(data)
+      // if(data.channelCode){
+      //   const cameraTree = [{
+      //     latLng: { lat: data.gpsY, lng: data.gpsX },
+      //     data: data,
+      //     type:'cameraTree'
+      //   }]
+      //   this.hiMapFun.removeLayerByLayerName("cameraTree");
+      //   this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
+      //   const arr = [0,0.0,'','0','0.0']
+      //   if(arr.indexOf(data.gpsX) == -1){
+      //     this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
+      //     this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
+      //   }
+      // }
+    },
+    filterNode(value, data) {
+      if (value == "2") return true;
+      if (value == "0") {
+        return data.checkStatus == 0;
+      }
+      if (value == "1") {
+        return data.checkStatus == 1;
+      }
+    },
+  },
+};
+</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>

src/views/pages/area/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>

src/views/pages/area/index.vue

@@ -0,0 +1,534 @@
+<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 class="title">重点区域</div>
+        <div class="change-btn-box" style="width:230px">
+          <el-checkbox-group v-model="changeLayerBtnGroup">
+            <el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <div class="title">人流热力</div>
+        <div class="change-btn-box">
+          <el-checkbox-group v-model="changeLayerBtnGroup">
+            <el-checkbox v-for="item in changeLayerBtnListHot" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
+          </el-checkbox-group>
+        </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事件','视频监控','工地','道路'],
+      changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
+      changeLayerBtnListHot: ['全市','本市','外地',],
+      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: 99px;
+    }
+    .change-btn-box {
+      height: 92px;
+      width: 134px;
+      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>

src/views/pages/civilizedCity/index.vue

@@ -1128,9 +1128,9 @@ export default {
           };
           selectByName(params).then((res) => {
             console.log(res);
-            res.data.data.sort(this.compare("captureTime", "inverted"));
+            res.data.data.events.sort(this.compare("captureTime", "inverted"));
             // console.log(res.data.data)
-            this.EventTypeData = res.data.data;
+            this.EventTypeData = res.data.data.events;
           });
         }
       }

src/views/pages/construction/components/VideoList.vue

@@ -7,7 +7,7 @@
               @click="tabHandleClick(item)"
               v-for="item in tabsButton" 
               :key="item"
-              :class="tabsActiveName == item?'tabs-button-btn-active':''"
+              :class="tabsActiveName == item ? 'tabs-button-btn-active' : '' "
               >
           {{item}}
         </div>
@@ -42,14 +42,10 @@
         @input="searchCameraTree"  
       >
       </el-input>
-      <el-radio v-model="checkStatus" label="2">全部</el-radio>
-      <el-radio v-model="checkStatus" label="1">正常</el-radio>
-      <el-radio v-model="checkStatus" label="0">异常</el-radio>
-      <span class="reset-button" @click="reset">重置</span>
         <el-tree
-          v-show="camreaTreeIsShow"
+          v-show="cameraTreeIsShow"
           id="tree"
-          :data="camreaTree"
+          :data="cameraTree"
           :props="{label:'name',children:'children',isLeaf:'leaf',}"
           :load="loadNode"
           node-key="id"
@@ -58,21 +54,21 @@
           :filter-node-method="filterNode"
           lazy>
           <!-- 是否离线checkStatus -->
-          <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
+          <!-- <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
-            <span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.name }}</span>
+            <!-- <span>{{ data.channelName || '' }}</span> -->
-          </span>
+          <!-- </span> -->
         </el-tree>
         <el-tree
-          v-show="!camreaTreeIsShow"
+          v-show="!cameraTreeIsShow"
           ref="tree"
-          :data="camreaTreeSingle" 
+          :data="cameraTreeSingle" 
           :props="{label:'channelName',children:'children'}"
           :filter-node-method="filterNode"
           @node-click="treeCameraClick"
         >
-          <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
+          <!-- <span  :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
-            <span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.channelName }}</span>
+            <!-- <span>{{ data.channelName || '' }}</span> -->
-          </span>
+          <!-- </span> -->
         </el-tree>
     </div>
   </div>
@@ -91,10 +87,10 @@ export default {
       labelSearch:'',
       checkboxGroup: [],
       cameraAllData:[],
-      camreaTreeIsShow:true,
+      cameraTreeIsShow:true,
-      camreaTreeSingle: [],
+      cameraTreeSingle: [],
       checkStatus: '2',
-      camreaTree:[],
+      cameraTree:[],
     };
   },
   mounted() {
@@ -106,9 +102,10 @@ export default {
       // this.addResourceTomap('cameraAll',res.data);
     })
     getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
-      this.camreaTree = res.data.data
+      this.cameraTree = res.data.data
+      console.log(this.cameraTree)
       res.data.data.forEach((item) => {
-        this.camreaTreeSingle.push({
+        this.cameraTreeSingle.push({
           channelName: item.name,
           children: []
         })
@@ -133,20 +130,20 @@ export default {
 
             // this.addResourceTomap(item.labelName,res.data.data);
             // res.data.data.forEach((item) => {
-            //   this.camreaTreeSingle.forEach((val) => {
+            //   this.cameraTreeSingle.forEach((val) => {
             //     if(item.nodeName == val.channelName){
             //       val.children.push(item)
             //     }
             //   })
             // })
-            // this.camreaTreeIsShow = false;
+            // this.cameraTreeIsShow = false;
           })
       }else {
         bus.$emit("removeCameraLayer",item.labelName)
         // this.checkStatus = "2"
-        // this.camreaTreeIsShow = true
+        // this.cameraTreeIsShow = true
         // getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
-        //   this.camreaTree = res.data.data
+        //   this.cameraTree = res.data.data
         // })
       }
     },
@@ -166,9 +163,9 @@ export default {
       }
         selectByChannelName(params).then((res) => {
           console.log(res)
-          this.camreaTree = []
+          this.cameraTree = []
           res.data.data.forEach((item) => {
-            this.camreaTree.push({
+            this.cameraTree.push({
               name: item.channelName,
               gpsX: item.gpsX,
               gpsY: item.gpsY,
@@ -179,16 +176,16 @@ export default {
         })
       }else {
         getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
-          this.camreaTree = res.data.data
+          this.cameraTree = res.data.data
         })
       }
     },
     reset() {
       this.checkboxGroup = []
       this.checkStatus = "2";
-      this.camreaTreeIsShow = true
+      this.cameraTreeIsShow = true
       getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
-        this.camreaTree = res.data.data
+        this.cameraTree = res.data.data
       })
       document.getElementById("tree").scrollTop = 0;
     },

src/views/pages/waterPoints/components/ComplaintEvent.vue

@@ -7,7 +7,7 @@
       <div class="toady-list-content">
         <div class="toady-list-rotate"></div>
         <div class="toady-list-icon"></div>
-        <div class="toady-list-num">易积水点<span>{{list.length || 0}}  </span>个</div>
+        <div class="toady-list-num">易积水点<span>{{listAll.length || 0}}  </span>个</div>
       </div>
     </div>
     <div class="tab-box">
@@ -17,9 +17,9 @@
                 @click="tabHandleClick(item)"
                 v-for="item in tabsButton"
                 :key="item.index"
-                :class="tabsActiveName == item?'tabs-button-btn-active':''"
+                :class="tabsActiveName == item.title ? 'tabs-button-btn-active' : '' "
                 >
-            {{item}}
+            {{item.title}}
           </div>
         </div>
       </div>
@@ -28,7 +28,7 @@
           <div  class="processStateSelect-btn"
                 v-for="item in filterButton.type"
                 :key="item"
-                :class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active':''"
+                :class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active' :'' "
                 @click="selectType(item)"
                 >
             <div class="select-circle"></div>
@@ -41,14 +41,16 @@
           <div class="top">
             <div>
               <span class='name'>{{item.waterPointName}}</span>
-              <!-- <span class='topType'>物联感知</span> -->
+              <span class='topType' v-show="item.reportOrigin !== '2'">{{reportOrigin(item.reportOrigin)}}</span>
             </div>
             <div>
-              <!-- <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span> -->
+              <span class="img" :class=" item.pointLevel=='traffic' ? 'red' : item.pointLevel=='pedestrian' ? 'yellow' : 'green' "></span>
-              <span class="type"></span>
+              <span class="type">{{item.pointLevel=='traffic' ? '影响车辆(>30cm)' : item.pointLevel=='pedestrian' ? '影响行人(<30cm)' : '无积水(<10cm)' }}</span>
             </div>
           </div>
-          <div class="bottom"></div>
+          <div class="bottom">
+            <!-- 液位： -->
+          </div>
         </div>
       </div>
     </div>
@@ -57,7 +59,7 @@
 </template>
 <script>
 import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
-import { selectWaterPoint,selectWaterCamera } from '@/api/waterPoints'
+import { selectWaterPoint,selectWaterCamera,selectReportOrigin } from '@/api/waterPoints'
 import StatisticalAnalysis from './StatisticalAnalysis.vue'
 import bus from '@/views/layout/bus'
 import {
@@ -68,7 +70,32 @@ import {
 export default {
   data () {
     return {
-      tabsButton: ['全部', '物联感知', '视频感知', '市民上报', '巡查上报'],
+      tabsButton: [
+        {
+          title:'全部',
+          id:'all'
+        },
+        {
+          title:'水务局',
+          id:'null'
+        },
+        {
+          title:'城管局',
+          id:'case'
+        },
+        {
+          title:'智能算法识别',
+          id:'video'
+        },
+        {
+          title:'水务集团',
+          id:'auditorReport'
+        },
+        {
+          title:'群众上报',
+          id:'commonReport'
+        },
+      ],
       tabsActiveName: '全部',
       statisticalAnalysisIsShow: false,
       filterButton: {
@@ -91,7 +118,8 @@ export default {
         //   type: '影响车辆(>30cm)',
         //   text: '液位：12cm'
         // }, 
-      ]
+      ],
+      listAll:[]
     }
   },
   components: {
@@ -111,14 +139,15 @@ export default {
       '00:00:00'
   },
   mounted () {
-    this.getRoadData()
+    // this.getRoadData()
-    this.selectRoadData()
+    // this.selectRoadData()
-    this.selectRaise()
+    // this.selectRaise()
-    this.selectNoiceEvent()
+    // this.selectNoiceEvent()
 
     selectWaterPoint().then( (res) => {
       console.log(res)
       this.list = res.data.data
+      this.listAll = res.data.data
       bus.$emit('waterPoint',res.data.data)
     })
     // selectWaterCamera().then( (res) => {
@@ -131,22 +160,75 @@ export default {
     selectType (item) {
       if (this.filterButton.typeActive.indexOf(item) > -1) {
         this.filterButton.typeActive.splice(this.filterButton.typeActive.indexOf(item), 1)
+        if(this.filterButton.typeActive.length == 0){
+          this.list = []
+        } else{
+          switch(item){
+            case '影响车辆(>30cm)':
+              this.list = this.list.filter( v => v.pointLevel != 'traffic')
+            break;
+            case '影响行人(<30cm)':
+              this.list = this.list.filter( v => v.pointLevel != 'pedestrian')
+            break;
+            case '无积水(<10cm)':
+              this.list = this.list.filter( v => v.pointLevel != 'non')
+            break;
+          }
+        }
       } else {
         this.filterButton.typeActive.push(item)
+        if(this.filterButton.typeActive.length == 3){
+          this.list = this.listAll
+        } else {
+          switch(item){
+            case '影响车辆(>30cm)':
+              this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'traffic'))
+            break;
+            case '影响行人(<30cm)':
+              this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'pedestrian'))
+            break;
+            case '无积水(<10cm)':
+              this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'non'))
+            break;
+          }
+        }
       }
+
+      bus.$emit('waterPoint',this.list)
+      this.$parent.eventCheckList = this.filterButton.typeActive
     },
     tabHandleClick (item) {
-      this.tabsActiveName = item
+      this.tabsActiveName = item.title
-      if (item == '视频感知') {
+      this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
 
+      if (item.title == '全部') {
+        selectWaterPoint().then( (res) => {
+          
+          this.list = res.data.data
+          bus.$emit('waterPoint',res.data.data)
+        })
+      } else {
+        selectReportOrigin({reportOrigin:item.id}).then( (res) => {
+          
+          this.list = res.data.data
+          bus.$emit('waterPoint',res.data.data)
+        })
       }
-      if (item == '物联感知') {
+    },
-        this.filterButton.typeSelect = ['工地扬尘', '工地噪声']
+    reportOrigin(reportOrigin){
-        this.typeSelectActive = '工地扬尘'
+      switch (reportOrigin) {
-      }
+        case 'auditorReport':
-      if (item == '走航监测') {
+          return '水务集团上报'
-        this.selectRoadData()
+        case 'commonReport':
+          return '群众上报'
+        case 'case':
+          return '城管案例'
+        case 'video':
+          return '视频感知'
+        default:
+          return '未知'
       }
+      
     },
     openStatisticalAnalysis () {
       this.statisticalAnalysisIsShow = true
@@ -336,6 +418,7 @@ export default {
           color: rgba($color: #fff, $alpha: 0.6);
           position: relative;
           cursor: pointer;
+          // min-width: 50px;
         }
         .tabs-button-btn-active {
           font-size: 20px;
@@ -345,9 +428,8 @@ export default {
           content: "";
           position: absolute;
           bottom: -15px;
-          // right: 24%;
+          right: 24%;
-          right: 6%;
+          width: 60%;
-          width: 64px;
           height: 5px;
           border-radius: 5px;
           background-color: #1ffffc;
@@ -409,6 +491,21 @@ export default {
             margin-left: 8px;
           }
         }
+        .processStateSelect-btn:nth-child(1){
+          .select-circle {
+            border: 1px solid #f74b3f;
+          }
+        }
+        .processStateSelect-btn:nth-child(2){
+          .select-circle {
+            border: 1px solid #ffae2b;
+          }
+        }
+        .processStateSelect-btn:nth-child(3){
+          .select-circle {
+            border: 1px solid #31d779;
+          }
+        }
         .processStateSelect-btn-active {
           .select-circle::after {
             content: "";
@@ -424,6 +521,21 @@ export default {
             border-radius: 50%;
           }
         }
+        .processStateSelect-btn-active:nth-child(1){
+          .select-circle::after {
+            background: #f74b3f;
+          }
+        }
+        .processStateSelect-btn-active:nth-child(2){
+          .select-circle::after {
+            background: #ffae2b;
+          }
+        }
+        .processStateSelect-btn-active:nth-child(3){
+          .select-circle::after {
+            background: #31d779;
+          }
+        }
       }
     }
 
@@ -565,16 +677,16 @@ export default {
         height: 10px;
         border-radius: 10px;
         margin-right: 5px;
-        background: red;
+        background: #f74b3f;
       }
       .red {
-        background: red;
+        background: #f74b3f;
       }
       .yellow {
-        background: yellow;
+        background: #ffae2b;
       }
       .green {
-        background: green;
+        background: #31d779;
       }
     }
     .bottom {

src/views/pages/waterPoints/components/SiteList.vue

@@ -72,6 +72,7 @@ import {
   selectWeekAll,
   selectMonthAll
 } from '@/api/construction/index'
+import { selectCountWater } from '@/api/waterPoints'
 
 export default {
   data () {
@@ -126,12 +127,29 @@ export default {
     //   selectValue: ''
     // }
     return {
+      district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
+      districtData: [],
 
     }
+  },
+  created () {
+    
   },
   mounted () {
-    this.initEventTypeCharts()
+    selectCountWater().then((res) => {
-
+      this.district.map((district) => {
+        let eligibility = res.data.data.find((data) => {
+          return district == data.ssqy 
+        })
+        if(eligibility){
+          this.districtData.push(eligibility.count)
+        } else {
+          this.districtData.push(0)
+        }
+      })
+      this.initEventTypeCharts()
+    })
+    
     // this.selectSiteByName()
     // bus.$off("mainClick")
     // bus.$on("mainClick", (data) => {
@@ -170,7 +188,8 @@ export default {
           }
         },
         grid: {
-          bottom: 40
+          bottom: 40,
+          top:10,
         },
         xAxis: {
           type: 'category',
@@ -197,7 +216,7 @@ export default {
         },
         series: [
           {
-            data: [12, 10, 5, 8, 7, 9, 1, 2, 3, 2],
+            data: this.districtData,
             type: 'bar',
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

src/views/pages/waterPoints/components/VideoList.vue

@@ -3,7 +3,7 @@
     <div class="title">统计分析</div>
     <div class="water-points-content">
       <div class="time">更新时间：{{ time }}</div>
-      <div class="water-point-reporting-title">
+      <!-- <div class="water-point-reporting-title">
         <div class="water-point-reporting-title-top">积水点上报Top10</div>
         <div class="water-point-reporting-title-bottom"></div>
       </div>
@@ -28,27 +28,27 @@
             ><span>{{ item.number }}</span>
           </div>
         </div>
-      </div>
+      </div> -->
-      <div class="water-point-analysis">
         <div class="water-point-reporting-title">
           <div class="water-point-reporting-title-top">积水点来源分析</div>
           <div class="water-point-reporting-title-bottom"></div>
         </div>
+        <div id="analysis-of-water-source"></div>
         <div class="water-point-reporting-title">
           <div class="water-point-reporting-title-top">积水点级别分析</div>
           <div class="water-point-reporting-title-bottom"></div>
         </div>
-      </div>
-      <div class="water-point-analysis-eachars">
-        <div id="analysis-of-water-source"></div>
         <div id="analysis-of-water-level"></div>
-      </div>
+
+      
     </div>
   </div>
 </template>
 <script>
 import moment from 'moment'
 import * as echarts from 'echarts'
+import { selectCountWaters,selectCountLevel } from '@/api/waterPoints'
+
 export default {
   data () {
     return {
@@ -78,51 +78,119 @@ export default {
           name: '积水点位置666666666666',
           number: '15'
         }
+      ],
+      source: [
+        {
+          value: 0,
+          unit: '个',
+          name: '水务集团上报',
+          id:'auditorReport'
+        },
+        {
+          value: 0,
+          unit: '个',
+          name: '群众上报',
+          id:'commonReport'
+        },
+        {
+          value: 0,
+          unit: '个',
+          name: '城管局',
+          id:'case'
+        },
+        {
+          value: 0,
+          unit: '个',
+          name: '智能算法识别',
+          id:'video'
+        },
+        {
+          value: 0,
+          unit: '个',
+          name: '水务局',
+          id:'null'
+        }
+      ],
+      rank: [
+        {
+          value: 0,
+          unit: '个',
+          name: '无积水'
+        },
+        {
+          value: 0,
+          unit: '个',
+          name: '影响行人'
+        },
+        {
+          value: 0,
+          unit: '个',
+          name: '影响车辆'
+        },
       ]
     }
   },
   mounted () {
-    this.$nextTick(() => {
+    
-      // 积水点来源分析charts图
+
+    selectCountWaters().then((res) => {
+      res.data.data.forEach((item) => {
+        if(item.reportOrigin == 'auditorReport') {
+          this.source[0].value = item.count
+        }
+        if(item.reportOrigin == 'commonReport') {
+          this.source[1].value = item.count
+        }
+        if(item.reportOrigin == 'case') {
+          this.source[2].value = item.count
+        }
+        if(item.reportOrigin == 'video') {
+          this.source[3].value = item.count
+        }
+      })
       this.initEventTypeCharts()
+    })
+
+    selectCountLevel().then((res) => {
+      res.data.data.forEach((item) => {
+        //无积水
+        if(item.pointLevel == 'non') {
+          this.rank[0].value = item.count
+        }
+        //影响行人
+        if(item.pointLevel == 'pedestrian') {
+          this.rank[1].value = item.count
+        }
+        //影响车辆
+        if(item.pointLevel == 'traffic') {
+          this.rank[2].value = item.count
+        }
+      })
       this.initEventTypeCharts2()
     })
+
   },
   methods: {
     // 积水点来源分析charts图
     initEventTypeCharts () {
-      const inner = [
+      const legend1 = this.source.map((v) => v.name)
-        {
-          value: 2,
-          unit: '个',
-          name: '物联感知'
-        },
-        {
-          value: 2,
-          unit: '个',
-          name: '视频感知'
-        },
-        {
-          value: 4,
-          unit: '个',
-          name: '市民上报'
-        },
-        {
-          value: 2,
-          unit: '个',
-          name: '巡查上报'
-        }
-      ]
-      const legend1 = inner.map((v) => v.name)
       const legendData = [...legend1]
       const option = {
-        color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
+        color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'],
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
         grid: {
-          height: '10px'
+          // height: '10px'
+        },
+        legend: {
+          width: '30%',
+          left: 'left',
+          top: 'center',
+          textStyle: {
+            color: '#fff',
+          },
         },
         // itemStyle: {
         //   normal: {
@@ -146,20 +214,22 @@ export default {
         },
         series: [
           {
-            name: '访问来源',
+            name: '',
             type: 'pie',
             radius: ['0%', '80%'],
             label: {
               normal: {
-                position: 'inner'
+                position: 'inner',
-              }
+                show: false
+              },
             },
             labelLine: {
               normal: {
                 show: false
               }
             },
-            data: inner
+            // data: this.source.filter( v => v.value > 0)
+            data: this.source
           }
         ]
       }
@@ -169,38 +239,24 @@ export default {
       eventType.setOption(option)
     },
     initEventTypeCharts2 () {
-      const inner = [
+      const legend1 = this.rank.map((v) => v.name)
-        {
-          value: 2,
-          unit: '个',
-          name: '物联感知'
-        },
-        {
-          value: 2,
-          unit: '个',
-          name: '视频感知'
-        },
-        {
-          value: 4,
-          unit: '个',
-          name: '市民上报'
-        },
-        {
-          value: 2,
-          unit: '个',
-          name: '巡查上报'
-        }
-      ]
-      const legend1 = inner.map((v) => v.name)
       const legendData = [...legend1]
       const option = {
-        color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
+        color: ['#31d779', '#ffae2b', '#f74b3f'],
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
         grid: {
-          height: '10px'
+          // height: '10px'
+        },
+        legend: {
+          width: '30%',
+          left: 'left',
+          top: 'center',
+          textStyle: {
+            color: '#fff',
+          },
         },
         // itemStyle: {
         //   normal: {
@@ -224,11 +280,14 @@ export default {
         },
         series: [
           {
-            name: '访问来源',
+            name: '',
             type: 'pie',
             radius: ['45%', '80%'],
             label: {
               normal: {
+                show: function(value) {
+                  if(value == 0) return false
+                }(),
                 position: 'inner'
               }
             },
@@ -237,7 +296,7 @@ export default {
                 show: false
               }
             },
-            data: inner
+            data: this.rank
           }
         ]
       }
@@ -346,5 +405,10 @@ export default {
       height: 165px;
     }
   }
+  #analysis-of-water-source,#analysis-of-water-level {
+    width: 100%;
+    height: 165px;
+    margin: 22px;
+  }
 }
 </style>

src/views/pages/waterPoints/components/WaterPointPop.vue

@@ -8,7 +8,7 @@
       所属区市: {{ feature.data.ssqy || "" }}
     </div>
     <div>
-      积水级别: 
+      积水级别: {{feature.data.pointLevel=='traffic' ? '影响车辆(>30cm)' : feature.data.pointLevel=='pedestrian' ? '影响行人(<30cm)' : '无积水(<10cm)' }}
     </div>
     <div>
       液位:
@@ -25,7 +25,7 @@
             cursor: pointer;
           "
         >
-          <img @click="show" style="width:100%;height:100%;" :src="`http://15.72.183.90:7004`+feature.data.videoCapture||''" alt="">
+          <img @click="show" style="width:100%;height:100%;" :src="feature.data.videoCapture||''" alt="">
         </div>
         <div class="video-table">
           <h4>周边监控</h4>
@@ -43,6 +43,7 @@
               borderColor: '#325d94',
               'background-color': '#2b4b7a',
             }"
+            style="background:transparent !important"
           >
             <el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
             </el-table-column>
@@ -63,8 +64,8 @@
 import bus from "@/views/layout/bus";
 import 'viewerjs/dist/viewer.css'
 import { directive as viewer } from "v-viewer"
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
-import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
+// import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
 import { selectCameraByName } from '@/api/waterPoints'
 export default {
   name: "",
@@ -78,6 +79,7 @@ export default {
   },
   mounted() {
   selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
+    if(res.data.data){
       this.feature.data.channelCode = res.data.data[0].channelCode
       this.feature.data.channelName = res.data.data[0].channelName
       this.feature.data.ssqy = res.data.data[0].ssqy
@@ -87,14 +89,15 @@ export default {
         cameraName: this.feature.data.channelName,
         channelCode: this.feature.data.channelCode
       })
+    }
   })
     
-    selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+    // selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
-      console.log(res)
+    //   console.log(res)
-    })
+    // })
-    selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
+    // selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
-      console.log(res)
+    //   console.log(res)
-    })
+    // })
   },
   data() {
     return {

src/views/pages/waterPoints/index.vue

@@ -46,27 +46,30 @@
         <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="eventSelection">
+      <div class="eventSelection">
         <el-checkbox-group v-model="eventCheckList">
-          <el-checkbox label="影响车辆(>30cm)"></el-checkbox>
+          <el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox>
-          <el-checkbox label="影响行人(<30cm)"></el-checkbox>
+          <el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox>
-          <el-checkbox label="无积水(<10cm)"></el-checkbox>
+          <el-checkbox label="无积水(<10cm)" @change="selectType('无积水(<10cm)')"></el-checkbox>
         </el-checkbox-group>
         <i class="eventSelectionIcon"></i>
         <i class="eventSelectionIcon"></i>
         <i class="eventSelectionIcon"></i>
-      </div> -->
+      </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>
@@ -109,7 +112,7 @@ export default {
       // changeLayerBtnList: ['视频监控', '易积水点'],
       changeLayerBtnList: ['易积水点'],
       changeLayerBtnGroup: [],
-      eventCheckList: [],
+      eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
       openVideo: false,
       channelCode:[]
 
@@ -326,18 +329,49 @@ export default {
     },
 
     waterPointOnMap (data) {
-      const dataEvent = []
+      console.log(data)
+      this.hiMapFun.removeLayerByLayerName('waterPoint1')
+      this.hiMapFun.removeLayerByLayerName('waterPoint2')
+      this.hiMapFun.removeLayerByLayerName('waterPoint3')
+      const dataEvent1 = []
+      const dataEvent2 = []
+      const dataEvent3 = []
+
       data.forEach((item) => {
         const arr = [0, 0.0, '', '0', '0.0']
         if (arr.indexOf(item.longitude) == -1) {
-          dataEvent.push({
+          switch(item.pointLevel){
-            latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+            case 'non':
-            data: item,
+              dataEvent1.push({
-            type: 'waterPoint'
+                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
-          })
+                data: item,
+                type: 'waterPoint'
+              })
+            break;
+            case 'pedestrian':
+              dataEvent2.push({
+                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+                data: item,
+                type: 'waterPoint'
+              })
+            break;
+            case 'traffic':
+                dataEvent3.push({
+                latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
+                data: item,
+                type: 'waterPoint'
+              })
+            break;
+          }
         }
       })
-      this.hiMapFun.addPointsToMap(dataEvent, 'waterPoint.png', 'waterPoint', createWaterPointPop)
+      this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop)
+      this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop)
+      this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop)
+    },
+
+    selectType(item){
+      this.$refs.complaintEventRef.selectType(item)
     }
   },
   beforeDestroy () {}