From 7a271781850cfbee68b583a25eb88d0cc5c8f61e Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Thu, 24 Nov 2022 15:54:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |    1 -
 .../pages/area/components/VideoListLeft.vue   |   74 ++
 .../pages/area/components/VideoListRight.vue  | 1037 ++++++++---------
 3 files changed, 588 insertions(+), 524 deletions(-)
 create mode 100644 src/views/pages/area/components/VideoListLeft.vue

diff --git a/src/router/index.js b/src/router/index.js
index 9a13943..7dcd1c9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -202,7 +202,6 @@ const router = new Router({
 })
 
 router.beforeEach((to, from, next) => {
-  debugger
   const userName = Cookies.get('userCJZT')
   console.log(userName)
   if (to.path === '/login' || to.path === '/' || to.path === '/waterPoints') {
diff --git a/src/views/pages/area/components/VideoListLeft.vue b/src/views/pages/area/components/VideoListLeft.vue
new file mode 100644
index 0000000..11d1ef9
--- /dev/null
+++ b/src/views/pages/area/components/VideoListLeft.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="box">
+    <div class="list4">
+      <div class="inner-title">
+        重点点位视频监控
+        <span
+          style="
+            float: right;
+            font-size: 16px;
+            color: #fff;
+            margin-right: 10px;
+            font-weight: normal;
+          "
+          >查看点位列表
+          <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
+            @click="openVideoList">></span
+          ></span
+        >
+      </div>
+      <div class="video-List">放视频</div>
+    </div>
+  </div>
+</template>
+    <script>
+import bus from "@/views/layout/bus";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  components: {},
+  created() {},
+  mounted() {},
+  methods: {
+    //打开视频列表
+    openVideoList(){
+        
+    }
+  },
+  watch: {},
+};
+</script>
+    <style lang='scss' scoped>
+@font-face {
+  font-family: "Tensentype-ZhiHeiJ-W5";
+  src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
+}
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("../../../../assets/construction/DIN-Bold.otf");
+}
+.box {
+  position: relative;
+  .inner-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .list4 {
+    width: 100%;
+    .video-List {
+    //   background: red;
+      height: 146px;
+      margin-left: 40px;
+      margin-right: 40px;
+      margin-top: 10px;
+    }
+  }
+}
+</style>
+    
\ No newline at end of file
diff --git a/src/views/pages/area/components/VideoListRight.vue b/src/views/pages/area/components/VideoListRight.vue
index 22aac67..735705e 100644
--- a/src/views/pages/area/components/VideoListRight.vue
+++ b/src/views/pages/area/components/VideoListRight.vue
@@ -1,544 +1,535 @@
 <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> {{todayListNum}} </span>件</div>
+  <div class="box">
+    <header>
+      <div class="title">决策建议</div>
+    </header>
+    <div class="list1">
+      <el-date-picker
+        v-model="daterange"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+        :range-separator="$t('datePicker.range')"
+        :start-placeholder="$t('datePicker.start')"
+        :end-placeholder="$t('datePicker.end')"
+      >
+      </el-date-picker>
+      <!--人员聚集高发区域Top5-->
+      <div class="list1-people">
+        <div class="people-left">
+          <div class="inner-title">人员聚集高发区域Top5</div>
+          <div class="left-list" v-for="item in top5AreaList">
+            <div class="left-list1">{{ item.title }}</div>
+            <div
+              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              @click="chooseSelectArea(item)"
+            >
+              {{ item.areaName }}
+            </div>
+            <div class="left-list3">{{ item.num }}</div>
+          </div>
+        </div>
+        <div class="people-right">
+          <div class="inner-title">高发事件Top5</div>
+          <div class="top5EventStyle" id="top5-event-chart"></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" @click="openDetailsDialog(item)">
-            <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-size = 4
-            :total="total"
-            :current-page="currentPage"
-            >
-          </el-pagination> -->
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            @current-change="pageChange"
-            :page-size = 4
-            :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 { selectByAreaEvent, selectByNameAreaEvent, selectByDayAreaEvent } from "@/api/area";
-  import StatisticalAnalysis from "./StatisticalAnalysis.vue";
-  import bus from "@/views/layout/bus";
-  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: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
-  
-        todayListNum:0,
-      };
-    },
-    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,
-      };
-      selectByAreaEvent(params).then((res) => {
-        this.eventListData = res.data.data.events
-        this.total = res.data.data.sum
-        this.$parent.allListDataNum = res.data.data.sum;
-      });
-  
-      selectByDayAreaEvent().then((res)=>{
-        if(res.data.data.sum){
-          this.todayListNum = res.data.data.sum
-        }
-      })
-    },
-    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 == '全部'){
-          selectByAreaEvent({ pageSize: 4,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) => {
-            // 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 == '全部'){
-          selectByAreaEvent({ pageSize: 4,page: 1,}).then((res) => {
-            this.eventListData = res.data.data.events
-            this.total = res.data.data.sum
-          });
-        } else {
-          selectByNameAreaEvent({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
-          })
-        }
-      },
-  
-      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"
-        );
-      }
-    },
-  };
-  </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;
+    <!--相关性分析-->
+    <div class="list2">
+      <div class="inner-title">
+        相关性分析
+        <span
+          style="
             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;
+            margin-left: 8px;
+            padding: 2px 20px;
+            background: #015478;
+            border-radius: 4px;
+          "
+          >分析过程</span
+        >
+      </div>
+      <div class="list2-conclusion">
+        结论：<span>{{ relevanceName1 }}</span
+        >、<span>{{ relevanceName2 }}</span
+        >、<span>{{ relevanceName1 }}</span> 与<span>{{ areaName }}</span
+        >人员聚集较强相关。
+      </div>
+      <div class="relevanceChart" id="relevance-chart"></div>
+    </div>
+    <!--管理力量分析建议-->
+    <div class="list3"> 
+       <div class="inner-title">管理力量分析建议</div>
+       <div class="list3-analysis">
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>管理人员</div>
+          <div>{{analysis.manageNum}}人</div>
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>环卫人员</div>
+          <div>{{analysis.sanitationNum}}人</div>
+          </div>
+          </div>
+     
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>垃圾运送</div>
+          <div>{{analysis.garbageNum}}次/天</div>
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="item-div">
+          <div>机械化作业</div>
+          <div>{{analysis.mechanNum}}次/天</div>
+        </div>
+        </div>
+       </div>
+       <div class="analysis-advice">
+        <span style=" font-size: 14px;color: #fff;">决策建议：</span>
+        预测<span style=" font-size: 14px;
+        color: rgb(0 255 255);
+        cursor: pointer;
+        text-decoration: underline;" >{{analysis.area}}</span>
+        下周人流量较高，建议增加环卫人员数量、垃圾收运频次
+       </div>
+      </div>
+    
+  </div>
+</template>
+  <script>
+import bus from "@/views/layout/bus";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+     
+      daterange: null,
+      dataForm: {
+        title: "",
+        startDate: "",
+        endDate: "",
+      },
+      //人员聚集高发区域TOP5list
+      top5AreaList: [],
+      //选中的高发区域
+      selectArea: "",
+       //相关性
+       relevanceName1: "垃圾桶满溢",
+      relevanceName2: "路面不洁",
+      relevanceName3: "违规停车",
+      areaName: "第一海水浴场",
+      //管理力量分析
+      analysis:{
+        manageNum:3,
+        sanitationNum:14,
+        garbageNum:2,
+        mechanNum:1,
+        advice:'',
+        area:'第一海水浴场'
+      }
+    };
+  },
+  components: {},
+  created() {},
+  mounted() {
+    //获取高发区域
+    this.getTop5Area();
+    //获取高发事件
+    this.getTop5EventCharts();
+    //获取相关性分析
+    this.getRelevanceCharts();
+  },
+  methods: {
+    //选择选中的高发区域
+    chooseSelectArea(item) {
+      this.selectArea = item.areaId;
+    },
+    //获取高发区域
+    getTop5Area() {
+      this.top5AreaList = [
+        {
+          title: "TOP1",
+          areaName: "第一海水浴场",
+          areaId: "1",
+          num: "223",
+        },
+        {
+          title: "TOP2",
+          areaName: "石老人海水浴场",
+          areaId: "2",
+          num: "123",
+        },
+        {
+          title: "TOP3",
+          areaName: "金沙滩海水浴场",
+          areaId: "3",
+          num: "111",
+        },
+        {
+          title: "4",
+          areaName: "第一海水浴场",
+          areaId: "4",
+          num: "65",
+        },
+        {
+          title: "5",
+          areaName: "第一海水浴场",
+          areaId: "5",
+          num: "32",
+        },
+      ];
+    },
+    //获取高发事件
+    getTop5EventCharts() {
+      let eventChart = echarts.init(
+        document.getElementById("top5-event-chart")
+      );
+      let option = {
+        backgroundColor: "rgba(32, 33, 36,.7)",
+        grid: {
+          top: "20px",
+          left: "40px",
+          bottom: "20px",
+        },
+        tooltip: {
+          // 鼠标悬浮提示框显示 X和Y 轴数据
+          trigger: "axis",
+          backgroundColor: "rgba(32, 33, 36,.7)",
+          borderColor: "rgba(32, 33, 36,0.20)",
+          borderWidth: 1,
+          textStyle: {
+            color: "#fff",
+            fontSize: "12",
+          },
+          shadowStyle: {
+            color: "rgba(74, 211, 164, 0.15)",
+            width: "20",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+        },
+        series: [
+          {
+            data: [250, 200, 150, 110, 100, 50],
+            type: "bar",
+            itemStyle: {
+              normal: {
+                //这里是重点
+                color: "#fe8463",
+              },
+            },
+          },
+        ],
+      };
+      eventChart.setOption(option);
+    },
+    //获取相关性分析
+    getRelevanceCharts() {
+      let eventChart = echarts.init(document.getElementById("relevance-chart"));
+      let option = {
+        backgroundColor: "rgba(32, 33, 36,.7)",
+        grid: {
+          top: "20px",
+          right: "40px",
+          left: "40px",
+          bottom: "20px",
+        },
+        tooltip: {
+          // 鼠标悬浮提示框显示 X和Y 轴数据
+          trigger: "axis",
+          backgroundColor: "rgba(32, 33, 36,.7)",
+          borderColor: "rgba(32, 33, 36,0.20)",
+          borderWidth: 1,
+          textStyle: {
+            // 文字提示样式
+            color: "#fff",
+            fontSize: "12",
+          },
+          shadowStyle: {
+            color: "rgba(74, 211, 164, 0.15)",
+            width: "20",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["11.04", "11.05", "11.06", "11.07", "11.08","11.09","11.10"],
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              fontSize: 10,
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+                fontSize: 10,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            data: [25, 20, 15, 11, 10, 5,6,3],
+            type: "bar",
+            itemStyle: {
+              normal: {
+  
+                color: "rgb(89 166 190)",
+              },
+            },
+          },
+          {
+            type: "line",
+            yAxisIndex: 1,
+            data: [59, 10, 140, 40, 30, 40,160,50],
+            itemStyle: {
+              color: 'green',
+              showSymbol: false,
+            },
+          },
+          {
+            type: "line",
+            yAxisIndex: 1,
+            data: [20, 30, 49, 57, 120, 28,40,60],
+            itemStyle: {
+              color: 'yellow',
+              showSymbol: false,
+            },
+          },
+          {
+            type: "line",
+            yAxisIndex: 1,
+            data: [60, 80, 100, 100, 150, 126,100,160],
+            itemStyle: {
+              color: 'orange',
+              showSymbol: false,
+            },
+          },
+          
+        ],
+      };
+      eventChart.setOption(option);
+    },
+  },
+  watch: {
+    daterange(val) {
+      if (val == null) {
+        this.dataForm.startDate = null;
+        this.dataForm.endDate = null;
+      } else {
+        this.dataForm.startDate = val[0];
+        this.dataForm.endDate = val[1];
+      }
+    },
+  },
+};
+</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;
+
+  ::v-deep .el-input__inner {
+    margin-top: 7px;
+    width: 96%;
+    margin-left: 2%;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 1px;
+    background: #9000;
+    color: #ffffff;
+  }
+  ::v-deep .el-date-editor .el-range__icon {
+    line-height: 14px;
+    color: #ffffff;
+  }
+  ::v-deep .el-date-editor .el-range-separator {
+    line-height: 14px;
+    color: #ffffff;
+  }
+  ::v-deep .el-date-editor .el-range-input {
+    background: #9000;
+    color: #ffffff;
+    font-size: 12px;
+  }
+  .inner-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .list1 {
+    width: 100%;
+    .list1-people {
+      width: 100%;
+
+      display: table;
+      .people-left {
+        width: 50%;
+        height: 140px;
+        display: table-cell;
+        .left-list {
+          text-align: center;
           color: #fff;
-          .processStateSelect-btn {
-            display: flex;
-            align-items: center;
-            margin-left: 24px;
+          width: 100%;
+          height: 24px;
+          margin-left: 10px;
+          margin-top: 5px;
+          .left-list1 {
+            font-size: 12x;
+            float: left;
+            width: 20%;
+          }
+          .left-list2 {
             cursor: pointer;
-            .select-circle {
-              width: 16px;
-              height: 16px;
-              border-radius: 50%;
-              border: 1px solid #00ffff;
-              position: relative;
-            }
-            .processStateSelect {
-              margin-left: 8px;
+            font-size: 14px;
+            float: left;
+            width: 50%;
+            &:hover {
+              color: rgb(0 255 255);
             }
           }
-          .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%;
-            }
+          .active-item {
+            font-size: 14px;
+            float: left;
+            width: 50%;
+            color: rgb(0 255 255);
+            font-weight: bold;
+            text-decoration: underline;
+          }
+          .left-list3 {
+            font-size: 14px;
+            float: left;
+            width: 24%;
           }
         }
       }
-  
-      .event-list {
-        // margin-top: 12px;
-        // margin-top: 30px;
-        width: 100%;
-        height: 670px;
-        position: relative;
-  
-        .event-details {
-          cursor: pointer;
-          margin-top: 16px;
-          // margin-top: 18px;
+      .people-right {
+        width: 50%;
+        height: 140px;
+        display: table-cell;
+        .top5EventStyle {
+          float: left;
+          margin-right:10px;
+          margin-left: 0px;
           width: 100%;
           height: 140px;
-          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);
+  }
+  .list2 {
+    width: 100%;
+    .list2-conclusion {
+      color: #fff;
+      border: 1px solid #fff;
+      margin: 10px;
+      padding: 0px 3px;
+      font-size: 14px;
+      span {
+        font-size: 14px;
+        color: rgb(0 255 255);
+      }
     }
-  
-    ::v-deep .el-dropdown {
-      margin-top: 10px;
-      .el-dropdown-link {
-          cursor: pointer;
-          color: #fff;
-        }
+    .relevanceChart {
+      margin-left: 10px;
+      height: 160px;
+      margin-right:10px;
     }
   }
-  </style>
+  .list3 {
+    width: 100%;    
+    .list3-analysis{
+      display: table;
+      width: 98%;
+      margin-left: 10px;
+    
+      .analysis-item{
+        text-align: center;
+        display: table-cell;
+        width:25%;
+        color:#fff;
+        .item-div{
+          background: #5f676c;
+          margin: 10px 10px;
+        }
+      }
+    }
+ .analysis-advice{
+  color: rgb(0 255 255);
+  font-size: 14px;
+  margin-left: 10px;
+ }
+
+  }
+  .list4 {
+    width: 100%;
+   
+  }
+  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;
+    }
+  }
+}
+</style>
   
\ No newline at end of file