From 04cb3a0f910d8f62beef5a191d8f23ec16219fbf Mon Sep 17 00:00:00 2001
From: wangwei <707714829@qq.com>
Date: Thu, 24 Nov 2022 15:25:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=82=B9=E5=8C=BA=E5=9F=9F=E6=A3=80?=
 =?UTF-8?q?=E6=B5=8B=E5=B9=B3=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/area/components/EarlyWarning.vue    | 429 +++++++++++++++++
 .../pages/area/components/SiteListMore.vue    | 435 ++++++++++++++++++
 src/views/pages/area/index.vue                |  49 +-
 3 files changed, 901 insertions(+), 12 deletions(-)
 create mode 100644 src/views/pages/area/components/EarlyWarning.vue
 create mode 100644 src/views/pages/area/components/SiteListMore.vue

diff --git a/src/views/pages/area/components/EarlyWarning.vue b/src/views/pages/area/components/EarlyWarning.vue
new file mode 100644
index 0000000..6fe0b7a
--- /dev/null
+++ b/src/views/pages/area/components/EarlyWarning.vue
@@ -0,0 +1,429 @@
+<!--  -->
+<template>
+    <div class="early-warning">
+        <header>
+            <div class="title">监测预警</div>
+        </header>
+        <div class="select-date">
+            <div
+                @click="tabsHandleClick(item)"
+                v-for="item in dateTabs"
+                :key="item.index"
+            >
+                <p>{{ item.name }}</p>
+                <p>{{ item.dataNum || "71" }}</p>
+            </div>
+        </div>
+        <div class="event-source">
+            <div class="event-source-title">事件来源</div>
+            <div>
+                <el-radio v-model="checkStatus" label="0">全部</el-radio>
+                <el-radio v-model="checkStatus" label="1"
+                    >数据智能监测</el-radio
+                >
+                <el-radio v-model="checkStatus" label="2">视频感知</el-radio>
+            </div>
+        </div>
+        <div class="type-status">
+            <span>日期：</span>
+            <el-date-picker
+                v-model="dataValue"
+                type="date"
+                placeholder="选择日期"
+            >
+            </el-date-picker>
+        </div>
+        <div class="type-status">
+            <span>重点区域类型：</span>
+            <el-select
+                v-model="typevalue"
+                class="selectclass"
+                placeholder="请选择"
+            >
+                <el-option
+                    v-for="item in typeoptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+            </el-select>
+            <span>事件状态：</span>
+            <el-select
+                v-model="statusvalue"
+                class="selectclass"
+                placeholder="请选择"
+            >
+                <el-option
+                    v-for="item in statusoptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+            </el-select>
+        </div>
+        <div class="event-list">
+            <div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
+                <div class="event-details-title">
+                    <p>{{item.eventNewName||''}}</p>
+                    <span>数据智能检测</span>
+                    <span>城市广场</span>
+                    <span>已下发</span>
+                </div>
+                <div class="event-details-des">
+                    <p>人数:12</p>
+                    <p>{{ item.captureTime || ''}}</p>
+                </div>
+            </div>
+            <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="pageChange"
+                :page-size = "pageSize"
+                :total="total"
+                :current-page="currentPage"
+            >
+            </el-pagination>
+      </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import {
+    selectByAreaEvent,
+    selectByNameAreaEvent,
+    selectByDayAreaEvent,
+} from "@/api/area";
+
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: {},
+    data() {
+        //这里存放数据
+        return {
+            dateTabs: [
+                {
+                    name: "今日事件",
+                    data: [],
+                    dataNum: "",
+                },
+                {
+                    name: "数据智能监测",
+                    data: [],
+                    dataNum: "",
+                },
+                {
+                    name: "视频感知",
+                    data: [],
+                    dataNum: "",
+                },
+            ],
+            checkStatus: "2",
+            dataValue: "",
+            typevalue: "",
+            typeoptions: [
+                {
+                    value: "1",
+                    label: "全部",
+                },
+                {
+                    value: "2",
+                    label: "海水浴场",
+                },
+                {
+                    value: "3",
+                    label: "城市广场",
+                },
+                {
+                    value: "4",
+                    label: "商业街区",
+                },
+            ],
+            statusvalue: "",
+            statusoptions: [
+                {
+                    value: "1",
+                    label: "全部",
+                },
+                {
+                    value: "2",
+                    label: "待下发",
+                },
+                {
+                    value: "3",
+                    label: "已下发",
+                },
+                {
+                    value: "4",
+                    label: "已忽略",
+                },
+            ],
+            eventListData: [],
+            total:0,
+            pageSize:6,
+            currentPage:1,
+
+
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {
+        checkStatus(newV, oldV) {
+            console.log(newV);
+            // this.$refs.tree.filter(newV);
+        },
+    },
+    //方法集合
+    methods: {
+        tabsHandleClick(item) {
+            // debugger
+            // this.hiMapFun.removeLayerByLayerName('roadPoint')
+            this.tableData = item.data;
+            // this.addToMap(item.data)
+        },
+          //分页
+        pageChange(val) {
+            this.currentPage = val
+            // if(this.listTypeSelect == '全部'){
+                selectByAreaEvent({ pageSize: this.pageSize,page: val,}).then((res) => {
+                this.eventListData = res.data.data.events
+                this.total = res.data.data.sum
+                });
+            // } else {
+            //     selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
+            //     this.eventListData = res.data.data.events;
+            //     this.total = res.data.data.sum
+            //     // this.pageCount = 0
+            //     })
+            // }
+        },
+        openDetailsDialog(data) {
+            this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
+            const EventListDetail = [
+                {
+                latLng: { lat: data.latitude, lng: data.longitude },
+                data: data,
+                type: "eventList",
+                },
+            ];
+            this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
+            this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
+            this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+                EventListDetail,
+                "poi-event.png",
+                "EventListDetail"
+            );
+        }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted() {
+        // 查询检测预警。
+        const params = {
+            page: 1,
+            pageSize: this.pageSize,
+        };
+        selectByAreaEvent(params).then((res) => {
+            this.eventListData = res.data.data.events;
+            this.total = res.data.data.sum;
+            this.$parent.allListDataNum = res.data.data.sum;
+        });
+    },
+    beforeCreate() {}, //生命周期 - 创建之前
+    beforeMount() {}, //生命周期 - 挂载之前
+    beforeUpdate() {}, //生命周期 - 更新之前
+    updated() {}, //生命周期 - 更新之后
+    beforeDestroy() {}, //生命周期 - 销毁之前
+    destroyed() {}, //生命周期 - 销毁完成
+    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.early-warning {
+    display: flex;
+    flex-direction: column;
+    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: 0.6);
+            position: absolute;
+            z-index: -1;
+        }
+    }
+    .select-date {
+        margin: 20px 0;
+        display: flex;
+        justify-content: space-evenly;
+        div {
+            width: 100px;
+            height: 68px;
+            background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            cursor: pointer;
+            p:nth-child(1) {
+                color: #fff;
+                margin-top: 10px;
+                font-size: 16px;
+            }
+            p:nth-child(2) {
+                margin-top: 4px;
+                font-size: 18px;
+                font-weight: bold;
+                color: #66ffff;
+            }
+        }
+        div:nth-child(2) {
+            margin: 0 20px;
+        }
+    }
+    .event-source {
+        display: flex;
+        color: #fff;
+        align-items: center;
+        .event-source-title {
+            margin: 0 20px 0 10px;
+            font-size: 16px;
+        }
+        ::v-deep .el-radio {
+            color: #fff;
+        }
+    }
+    .type-status {
+        display: flex;
+        padding: 5px 0px;
+        color: #fff;
+        align-items: center;
+        span {
+            font-size: 16px;
+            margin-left: 10px;
+        }
+        .selectclass {
+            width: 125px;
+        }
+        ::v-deep .el-input__inner {
+            background-color: transparent !important;
+            border-color: #107bb0;
+            box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
+            height: 30px;
+            color: #fff;
+        }
+        ::v-deep .el-input__icon {
+            line-height: 30px;
+        }
+    }
+
+    .event-list {
+      // margin-top: 12px;
+      // margin-top: 30px;
+      width: 100%;
+      padding:0px 10px;
+      height: 670px;
+      position: relative;
+
+      .event-details {
+        cursor: pointer;
+        margin-top: 16px;
+        // margin-top: 18px;
+        width: 100%;
+        height: 80px;
+        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;
+          p {
+            width: auto;
+            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{
+            width: auto;
+            padding:0px 10px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            border-radius: 2px;
+            font-size: 14px;
+            color: #fff;
+          }
+          span:nth-child(1) {
+            background: #ae761c;
+          }
+          span:nth-child(2) {
+            background: #3B5E6E;
+          }
+          span:nth-child(3) {
+            background: #022587;
+          }
+          span:nth-child(4) {
+            background: #ae761c;
+          }
+        }
+        .event-details-des {
+          padding: 8px 0 0 12px;
+          font-size: 16px;
+          display: flex;
+          p {
+            width:50%;
+            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);
+        }
+      }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pages/area/components/SiteListMore.vue b/src/views/pages/area/components/SiteListMore.vue
new file mode 100644
index 0000000..7f8c0e0
--- /dev/null
+++ b/src/views/pages/area/components/SiteListMore.vue
@@ -0,0 +1,435 @@
+<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="selectAreaValue" placeholder="全部" @change="fliterSiteByArea">
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <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="areaName" label="区域类型" show-overflow-tooltip>
+            </el-table-column>
+            <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-column  prop="allNums" label="联系电话">
+              
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      </div>
+  </template>
+  <script>
+  import bus from "@/views/layout/bus";
+  import {
+    selectKeyAreaList,
+    selectKeyArea,
+    selectByAreaName,
+    selectByLikeName
+  } from "@/api/area";
+  import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
+  import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
+  
+  export default {
+    data() {
+      return {
+        searchValue: "",
+        siteData: [],
+        siteDataAll: [],
+        selectSiteData: [],
+        InformationActiveName: "基本信息",
+        informationShow: false,
+        detailedInfToday: [],
+        detailedInfWeek: [],
+        detailedInfMonth: [],
+        dustActiveName: "今日",
+        areaOptions: [
+          {
+            value: "全部",
+            label: '全部'
+          },{
+            value: "公园广场",
+            label: '公园广场'
+          },{
+            value: "商业街区",
+            label: '商业街区'
+          }, {
+            value: "景区景点",
+            label: '景区景点'
+          }, {
+            value: "海水浴场",
+            label: '海水浴场'
+          }, {
+            value: "窗口单位",
+            label: '窗口单位'
+          }, 
+        ],
+        selectAreaValue:"全部",
+        options: [
+          {
+            value: "全部",
+            label: '全部'
+          },{
+            value: "公园广场",
+            label: '公园广场'
+          },{
+            value: "商业街区",
+            label: '商业街区'
+          }, {
+            value: "景区景点",
+            label: '景区景点'
+          }, {
+            value: "海水浴场",
+            label: '海水浴场'
+          }, {
+            value: "窗口单位",
+            label: '窗口单位'
+          }, 
+        ],
+        selectValue: "全部",
+        siteDataAll: []
+      };
+    },
+    mounted() {
+      let params = {
+        type1: "'公园广场','窗口单位'",
+        type2: "'景区景点','海水浴场'",
+        type3: "'商业街区'"
+      }
+      selectKeyAreaList(params).then((res) => {
+        this.siteDataAll = res.data.data
+        this.siteData = res.data.data
+      })
+    },
+    methods: {
+      searchSite() {
+        if (!this.searchValue && this.selectValue !== '全部') {
+           selectKeyArea({ type: this.selectValue }).then((res) => {
+            this.siteData = res.data.data
+          })
+        } else if (!this.searchValue) {
+          this.siteData = this.siteDataAll;
+        }else {
+          const params = {
+            areaName: this.searchValue,
+          };
+          selectByLikeName(params).then((res) => {
+            this.siteData = res.data.data
+          });
+        }
+      },
+  
+      fliterSiteByArea(val) {
+        if(val === '全部') {
+          let params = {
+            type1: "'公园广场','窗口单位'",
+            type2: "'景区景点','海水浴场'",
+            type3: "'商业街区'"
+          }
+          selectKeyAreaList(params).then((res) => {
+            this.siteData = res.data.data
+          })
+        } else {
+          selectKeyArea({ type: val}).then((res) => {
+            this.siteData = res.data.data
+          })
+        }
+        
+      },
+      // 行点击
+      analyse(row) {
+        // bus.$emit("openCauseAnalysis", row);
+        this.$parent.hiMapFun.removerPolygon()
+        this.$parent.removeRoadCauseAnalysis()
+        if(row.latitude && row.longitude) {
+          this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
+          this.$parent.hiMap.mapObj.map.flyTo({ lat: row.latitude, lng: row.longitude });
+          let dataEvent = [{
+              latLng: { lat: row.latitude, lng: row.longitude },
+              data: row,
+              type: "site",
+          }]
+          this.$parent.hiMapFun.addPointsToMap(
+            dataEvent,
+            "poi-red.png",
+            "roadPoint",
+            createImportantAreaPop
+          );
+        } else if(row.point) {
+          let arr = JSON.parse(row.point)
+          let areaLatLng = []
+          arr.forEach((item) => {
+            let lonLat = gcjLL2wgs84LL(item[0], item[1]);
+            areaLatLng.push([lonLat[1],lonLat[0]])
+          })
+          this.$parent.hiMapFun.addAreaToMap(areaLatLng)
+        }
+        // else {
+        //   selectByAreaName({areaName:row.areaName}).then((res) => {
+        //     if(res.data.data){
+        //       let areaLatLng = []
+        //       res.data.data.forEach((item) => {
+        //         let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
+        //         areaLatLng.push([lonLat[1],lonLat[0]])
+        //       })
+        //       this.$parent.hiMapFun.removerPolygon()
+        //       this.$parent.removeRoadCauseAnalysis()
+        //       this.$parent.hiMapFun.addAreaToMap(areaLatLng)
+        //     }
+        //   })
+        // }  
+      },
+      // 关闭基本信息窗口
+      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 507px 17px;
+    padding: 30px 0 18px 14px;
+    .title {
+      color: #fff;
+      font-size: 20px;
+    }
+    ::v-deep .eventData {
+      width: 544px;
+      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>
+  
\ No newline at end of file
diff --git a/src/views/pages/area/index.vue b/src/views/pages/area/index.vue
index f6ad44f..0fe8324 100644
--- a/src/views/pages/area/index.vue
+++ b/src/views/pages/area/index.vue
@@ -43,18 +43,21 @@
 
       <!-- 事件感知 -->
       <div class="complaintContent">
-        <complaint-event ref="complaintEventRef"></complaint-event>
+        <!-- <complaint-event ref="complaintEventRef"></complaint-event> -->
+        <early-warning> </early-warning>
       </div>
 
       <!-- 视频标签、列表 -->
       <div class="complaintContent1">
         <video-list-right ref="videoListRef"></video-list-right>
       </div>
-
+      <div class="keyAreas" @click="handleKeyArea">
+         重点区域
+      </div>
       <!-- 工地列表 -->
-      <!-- <div class="siteList">
-        <site-list></site-list>
-      </div> -->
+      <div class="siteList" v-if="keyAreasShow">
+        <site-list-more></site-list-more>
+      </div>
       <!-- 热力图图例 -->
       <div class="legend"></div>
 
@@ -109,9 +112,10 @@ import TiledMap from "./components/tiledMap";
 import { searchCamera } from "@/api/videoSurveillance/index";
 import bus from "@/views/layout/bus";
 import complaintEvent from "./components/ComplaintEvent";
+import EarlyWarning from "./components/EarlyWarning";
 import VideoPlay from './components/VideoPlay'
 import VideoListRight from "./components/VideoListRight";
-import SiteList from "./components/SiteList";
+import SiteListMore from "./components/SiteListMore";
 import { selectByJdWd } from "@/api/construction/index";
 import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
 import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
@@ -143,16 +147,18 @@ export default {
       // 时间轴
       timelineData: [],
       // 热力图当日数据
-      hotDataAll: {}
+      hotDataAll: {},
+      keyAreasShow:false, //是否显示重点区域。
     };
   },
   components: {
     TiledMap,
     complaintEvent,
     VideoListRight,
-    SiteList,
+    SiteListMore,
     VideoPlay,
-    HorizonTimeLine
+    HorizonTimeLine,
+    EarlyWarning,
   },
   created() {},
   mounted() {
@@ -632,6 +638,10 @@ export default {
       this.hiMapFun.removeLayerByLayerName('景区景点')
       this.hiMapFun.removeLayerByLayerName('海水浴场')
       this.hiMapFun.removeLayerByLayerName('窗口单位')
+    },
+    //点击是否显示重点区域。
+    handleKeyArea(){
+      this.keyAreasShow=!this.keyAreasShow;
     }
   },
   beforeDestroy() {},
@@ -773,6 +783,21 @@ export default {
       }
     }
   }
+  .keyAreas {
+    width: 100px;
+    height: 40px;
+    position: absolute;
+    cursor: pointer;
+    top: 110px;
+    left: 498px;
+    z-index: 1000;
+    background-color: #1A69B2;
+    text-align: center;
+    padding: 6px 0 13px 0;
+    font-size: 16px;
+    color:#fff;
+  }
+
 
   .videoList {
     position: absolute;
@@ -787,9 +812,9 @@ export default {
   .siteList {
     position: absolute;
     z-index: 10;
-    right: 8px;
-    top: 562px;
-    width: 398px;
+    left: 498px;
+    top: 175px;
+    width: 574px;
     height:500px;
     background: rgba($color: #05213b, $alpha: .85);
   }