From b1cc5f735deb86445b8ca72018cd629ca22449fb Mon Sep 17 00:00:00 2001
From: wangwei <wangwei124@hisense.com>
Date: Wed, 23 Nov 2022 16:01:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=82=B9=E5=8C=BA=E5=9F=9F=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E5=B9=B3=E5=8F=B0=20--=E5=8F=B3=E4=BE=A7=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/area/components/VideoListRight.vue  | 544 ++++++++++++++++++
 src/views/pages/area/index.vue                |  22 +-
 2 files changed, 559 insertions(+), 7 deletions(-)
 create mode 100644 src/views/pages/area/components/VideoListRight.vue

diff --git a/src/views/pages/area/components/VideoListRight.vue b/src/views/pages/area/components/VideoListRight.vue
new file mode 100644
index 0000000..22aac67
--- /dev/null
+++ b/src/views/pages/area/components/VideoListRight.vue
@@ -0,0 +1,544 @@
+<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>
+      </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;
+            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: 670px;
+        position: relative;
+  
+        .event-details {
+          cursor: pointer;
+          margin-top: 16px;
+          // margin-top: 18px;
+          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);
+    }
+  
+    ::v-deep .el-dropdown {
+      margin-top: 10px;
+      .el-dropdown-link {
+          cursor: pointer;
+          color: #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 66807f8..ca978e8 100644
--- a/src/views/pages/area/index.vue
+++ b/src/views/pages/area/index.vue
@@ -47,14 +47,14 @@
       </div>
 
       <!-- 视频标签、列表 -->
-      <div class="videoList">
-        <video-list ref="videoListRef"></video-list>
+      <div class="complaintContent1">
+        <video-list-right ref="videoListRef"></video-list-right>
       </div>
 
       <!-- 工地列表 -->
-      <div class="siteList">
+      <!-- <div class="siteList">
         <site-list></site-list>
-      </div>
+      </div> -->
       <!-- 热力图图例 -->
       <div class="legend"></div>
 
@@ -110,7 +110,7 @@ import { searchCamera } from "@/api/videoSurveillance/index";
 import bus from "@/views/layout/bus";
 import complaintEvent from "./components/ComplaintEvent";
 import VideoPlay from './components/VideoPlay'
-import VideoList from "./components/VideoList";
+import VideoListRight from "./components/VideoListRight";
 import SiteList from "./components/SiteList";
 import { selectByJdWd } from "@/api/construction/index";
 import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
@@ -149,7 +149,7 @@ export default {
   components: {
     TiledMap,
     complaintEvent,
-    VideoList,
+    VideoListRight,
     SiteList,
     VideoPlay,
     HorizonTimeLine
@@ -738,7 +738,15 @@ export default {
     width: 478px;
     background: rgba($color: #05213b, $alpha: .85)
   }
-
+  .complaintContent1 {
+    position: absolute;
+    z-index: 1000;
+    right: 10px;
+    top: 90px;
+    height:980px;
+    width: 478px;
+    background: rgba($color: #05213b, $alpha: .85)
+  }
   .eventNum {
     width: 245px;
     height: 92px;