From 9d9a3a2278453a1748b0d5387648e80c0d5347c1 Mon Sep 17 00:00:00 2001
From: wuhongjian <wuhongjian@hisense.com>
Date: Mon, 27 Jun 2022 18:53:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/DetailsPageconetent.vue  |   3 +-
 front/src/views/home/infrastructurePage.vue   |  23 ++-
 .../views/home/videoSurveillance/index.vue    | 180 ++++++++----------
 3 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index ba19f9a8..17616056 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -1605,8 +1605,9 @@
       }
       .top-content-father {
         width: 10.87rem;
-        padding-left: 0.2rem;
+        // padding-left: 0.2rem;
         // margin-bottom: .2rem;
+        padding: 0.16rem;
         background: #f3f5f9;
         .top-content-son {
           background: #fff;
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index 7450bbfa..b0af77d6 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -17,6 +17,10 @@
         </span>
       </div>
     </div>
+    <!-- 地图 -->
+    <div class="map-contain">
+      <video-surveillance></video-surveillance>
+    </div>
     <!-- 功能行 -->
     <div class="infrastructrue-content">
       <!-- 表格数据统计 -->
@@ -85,6 +89,7 @@
 </template>
 <script setup>
   import { ref } from 'vue'
+  import VideoSurveillance from '@/views/home/videoSurveillance'
   const tabList = ref([
     {
       title: '设施类型',
@@ -298,13 +303,15 @@
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {
-    width: 10.87rem;
     padding: 0.2rem;
-    background: #f3f5f9;
+    // background: #f3f5f9;
+    background: #ffffff;
+    /* padding: 0.16rem; */
+    border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
     .infrastructrue-tab {
-      background: #ffffff;
-      padding: 0.2rem;
-      border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
+      // background: #ffffff;
+      // padding: 0.2rem;
+      // border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
       span {
         display: inline-block;
         height: 0.24rem;
@@ -423,5 +430,11 @@
         background-color: #fafafa;
       }
     }
+    .map-contain {
+      // width: 9.46rem;
+      height: 4.1rem;
+      margin-left: 0.16rem;
+      position: relative;
+    }
   }
 </style>
diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue
index 17371681..e161113b 100644
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="ucs-leaflet-map">
     <div id="contain">
       <div class="map-box">
         <div :id="mapId" class="normal-map-content">
@@ -8,7 +8,32 @@
       </div>
 
       <div class="searchPoint">
-        <el-autocomplete
+        <a-auto-complete
+          v-model:value="value"
+          class="certain-category-search"
+          dropdown-class-name="certain-category-search-dropdown"
+          :dropdown-match-select-width="500"
+          style="width: 250px"
+          :options="dataSource"
+        >
+          <template #option="item">
+            <template>
+              <span>
+                {{ item.value }}
+                <a
+                  style="float: right"
+                  href="https://www.google.com/search?q=antd"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  more
+                </a>
+              </span>
+            </template>
+          </template>
+          <a-input-search placeholder="搜索地点" size="large"></a-input-search>
+        </a-auto-complete>
+        <!-- <el-autocomplete
           class="inline-input"
           prefix-icon="Search"
           v-model="state"
@@ -28,93 +53,26 @@
             </span>
           </template>
           <template v-slot:append>搜索</template>
-        </el-autocomplete>
+        </el-autocomplete> -->
       </div>
-
-      <aside class="tag-box">
-        <div class="refresh" @click="refresh">
-          <el-icon><Refresh /></el-icon>
-        </div>
-        <el-tabs type="border-card" class="border-card">
-          <el-tab-pane label="视频标签">
-            <el-input
-              placeholder="请输入关键词"
-              suffix-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>
-          </el-tab-pane>
-          <el-tab-pane label="视频列表">
-            <el-input
-              placeholder="请输入关键词"
-              suffix-icon="Search"
-              v-model="labelSearch"
-              @input="searchCameraTree"
-            ></el-input>
-            <!-- <el-radio-group v-model="checkStatus">
-              <el-radio  :label="2">全部</el-radio>
-              <el-radio  :label="1">正常</el-radio>
-              <el-radio  :label="0">异常</el-radio>
-            </el-radio-group>
-            <span class="reset-button" @click="reset">重置</span> -->
-            <el-tree
-              id="tree"
-              :data="camreaTree"
-              :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?.checkStatus == 0 ? `(离线)` : '' }}{{ data.name }}
-                </span>
-              </span> -->
-            </el-tree>
-            <!-- <el-tree
-              v-show="!camreaTreeIsShow"
-              ref="tree"
-              :data="camreaTreeSingle"
-              :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?.checkStatus == 0 ? `(离线)` : ''
-                  }}{{ data?.channelName }}
-                </span>
-              </span>
-            </el-tree> -->
-          </el-tab-pane>
-        </el-tabs>
-      </aside>
+      <svg
+        t="1656319660834"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1691"
+        width="0.48rem"
+        height="0.48rem"
+        @click="circleMode()"
+      >
+        <path
+          d="M736.21333333 638.08l69.76-54.08c5.22666667-4.05333333 8-10.45333333 7.46666667-17.06666667-0.53333333-6.61333333-4.37333333-12.48-10.24-15.57333333L450.02666666 361.38666666c-6.82666667-3.62666667-15.04-2.98666667-21.12 1.70666667-6.08 4.69333333-8.85333333 12.58666667-7.04 20.05333333l95.57333334 389.54666667c1.6 6.4 6.29333333 11.62666667 12.48 13.76 6.18666667 2.13333333 13.12 1.06666667 18.34666666-2.98666667l69.86666667-54.08L769.06666666 924.37333333c3.2 4.05333333 7.78666667 6.72 12.90666667 7.36 0.85333333 0.10666667 1.6 0.10666667 2.45333333 0.10666667 4.26666667 0 8.53333333-1.38666667 11.94666667-4.05333334l87.25333333-67.52c8.53333333-6.61333333 10.02666667-18.88 3.52-27.30666666L736.21333333 638.08zM178.24 282.02666666l-31.25333334-21.01333333c-14.61333333 21.76-27.30666667 44.90666667-37.86666666 68.90666667l34.56 15.14666666c9.6-21.86666667 21.22666667-43.09333333 34.56-63.04zM549.54666666 103.89333333l3.2-37.54666667c-26.02666667-2.24-52.69333333-2.13333333-78.50666666 0.21333334l3.41333333 37.54666666c23.57333333-2.13333333 48-2.24 71.89333333-0.21333333zM120.74666666 413.22666666l-36.69333333-8.74666666c-6.08 25.38666667-9.92 51.52-11.30666667 77.76l37.65333334 2.13333333c1.38666667-24 4.8-47.89333333 10.34666666-71.14666667zM112.64 556.26666666l-37.44 4.48c3.09333333 26.02666667 8.64 51.94666667 16.32 76.90666667l36.05333333-11.09333333c-7.04-22.82666667-12.05333333-46.50666667-14.93333333-70.29333334zM919.36 327.46666666c-10.66666667-23.89333333-23.46666667-46.93333333-38.29333334-68.58666666l-31.14666666 21.22666666c13.44 19.84 25.28 40.96 34.98666666 62.82666667l34.45333334-15.46666667zM831.36 197.97333333c-18.34666667-18.77333333-38.4-35.94666667-59.62666667-51.09333333L749.86666666 177.6c19.52 13.86666667 37.86666667 29.65333333 54.61333334 46.82666666l26.88-26.45333333zM703.89333333 107.09333333c-23.68-11.2-48.53333333-20.37333333-73.81333333-27.09333333l-9.81333334 36.37333333c23.14666667 6.18666667 45.86666667 14.61333333 67.52 24.85333333l16.10666667-34.13333333zM277.76 178.98666666l-22.08-30.50666666c-21.22666667 15.36-41.17333333 32.64-59.41333334 51.52l27.09333334 26.13333333c16.74666667-17.28 35.09333333-33.06666667 54.4-47.14666667zM348.90666666 918.08c24.32 9.81333333 49.6 17.49333333 75.2 22.82666666l7.68-36.90666666c-23.46666667-4.90666667-46.61333333-11.94666667-68.8-20.90666667l-14.08 34.98666667zM503.25333333 912.42666666l-1.06666667 37.65333334c4.16 0.10666667 8.42666667 0.21333333 12.58666667 0.21333333 21.97333333 0 44.16-1.6 65.81333333-4.90666667l-5.54666666-37.22666666c-23.57333333 3.52-47.89333333 4.90666667-71.78666667 4.26666666zM944.85333333 401.81333333l-36.58666667 8.96c5.65333333 23.14666667 9.28 47.14666667 10.77333334 71.04l37.65333333-2.34666667c-1.70666667-26.13333333-5.65333333-52.26666667-11.84-77.65333333zM396.8 80.64c-25.28 6.93333333-50.02666667 16.21333333-73.6 27.62666666l16.32 33.92c21.54666667-10.34666667 44.26666667-18.88 67.30666666-25.17333333L396.8 80.64zM121.17333333 710.4c11.94666667 23.25333333 26.13333333 45.54666667 42.13333333 66.34666666l29.86666667-22.93333333c-14.61333333-18.98666667-27.52-39.46666667-38.50666667-60.69333333L121.17333333 710.4zM216.42666666 834.66666666c19.30666667 17.70666667 40.42666667 33.70666667 62.50666667 47.68l20.05333333-31.89333333c-20.26666667-12.8-39.46666667-27.41333333-57.17333333-43.62666667l-25.38666667 27.84z"
+          p-id="1692"
+          fill="#1296db"
+          data-spm-anchor-id="a313x.7781069.0.i0"
+        ></path>
+      </svg>
     </div>
     <video-play
       v-if="openVideo"
@@ -146,9 +104,7 @@
       return {
         hiMap: new HieimpMap(), // 地图全局对象
         mapId: 'map-single', // 地图容器的id
-
         cameraAllData: [],
-
         checkboxGroup: [],
         tabList: [],
         state: '',
@@ -161,6 +117,7 @@
         timer: null,
         openVideo: false,
         channelCode: [],
+        circleModeFlag: false,
       }
     },
     components: {
@@ -209,6 +166,18 @@
       // })
     },
     methods: {
+      circleMode() {
+        // 转换圈选模式
+        this.circleModeFlag = !this.circleModeFlag
+        if(this.circleModeFlag){
+          // 打开圈选模式
+
+        }else {
+          // 关闭圈选模式，清空圈选内容，重新上图
+
+        }
+
+      },
       getCameraAllPage(page) {
         let params = {
           page: page,
@@ -327,8 +296,8 @@
             if (res.data.data.length == 0) {
               const params = {
                 parentId: node.data.id,
-                checkStatus:'1'
-                  // this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
+                checkStatus: '1',
+                // this.checkStatus == '2' ? ['0', '1'] : this.checkStatus,
               }
               getCameraByParentId(params).then((res) => {
                 res.data.data.forEach((item) => {
@@ -444,8 +413,8 @@
 <style scoped lang="less">
   .map-box {
     width: 100%;
-    // height: 100%;
-    height: 624px;
+    height: 100%;
+    // height: 624px;
     position: absolute;
     .normal-map-content {
       width: 100%;
@@ -453,14 +422,14 @@
       position: absolute;
     }
   }
-
   #contain {
     .searchPoint {
       position: absolute;
       z-index: 1000;
-      left: 100px;
+      top: 0.1rem;
+      right: 0.1rem;
       border-radius: 4px;
-      margin-top: 20px;
+      // margin-top: 20px;
       :deep(.el-input__wrapper) {
         background: #629ab8;
         border-radius: 20px;
@@ -642,3 +611,20 @@
     }
   }
 </style>
+<style lang="less">
+.ucs-leaflet-map {
+  .iclient-leaflet-logo {
+    display: none;
+  }
+  .leaflet-control-attribution {
+    display: none;
+  }
+  svg {
+    position: absolute;
+    bottom: 0.1rem;
+    right: 0.1rem;
+    z-index: 1001;
+    cursor: pointer;
+  }
+}
+</style>