重构安保力量的 布局

components.d.ts

@@ -12,12 +12,16 @@ declare module 'vue' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACascader: typeof import('ant-design-vue/es')['Cascader']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    ALayout: typeof import('ant-design-vue/es')['Layout']
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     ASegmented: typeof import('ant-design-vue/es')['Segmented']

src/components/iconfont/IconFont.vue

@@ -4,17 +4,14 @@
 
 <script setup lang="ts">
 interface IconFontProps {
-  fontClass: string,
+  fontClass: string
-  size?: number,
+  size?: number
   title?: string
 }
 
 withDefaults(defineProps<IconFontProps>(), {
-  size: 25,
+  size: 25
-});
+})
-
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-
-</style>

src/views/page/offLineMap.vue

@@ -1,15 +1,8 @@
 <template>
-  <div class="indexx" :id="state.id">
+  <a-layout class="layout">
-    <Transition name="slide-fade">
+    <!-- 左侧区域 -->
-      <div class="left-cont" :style="{width: show3 ? '412px' : '0px', border: show3 ? '10px solid #f2f3f5' : '0px'}">
+    <a-layout-sider :collapsed="collapsed.left" width="22%">
-        <el-button @click="show3 = !show3" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
+      <div class="left-cont">
-          <el-icon v-if="show3">
-            <d-arrow-left />
-          </el-icon>
-          <el-icon v-else>
-            <d-arrow-right />
-          </el-icon>
-        </el-button>
         <h2 class="title" v-show="show3">资源数量</h2>
         <div class="elBtns" v-show="show3">
           <div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div>
@@ -68,18 +61,37 @@
           </a-tree>
         </div>
       </div>
-    </Transition>
+    </a-layout-sider>
-
+    <!-- 中间地图区域 -->
-    <Transition name="slide-fade1">
+    <a-layout-content>
-      <div class="right-cont" :style="{width: show4 ? '412px' : '0px', border: show4 ? '10px solid #f2f3f5' : '0px'}">
+      <div :id="state.id" class="indexx">
-        <el-button @click="show4 = !show4" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar1" type="info" circle>
+        <!-- 左边缩进按钮 -->
-          <el-icon v-if="show4">
+        <div class="left-close-icon">
+          <el-button @click="collapsed.left = !collapsed.left" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
+            <el-icon v-if="!collapsed.left">
+              <d-arrow-left />
+            </el-icon>
+            <el-icon v-else>
+              <d-arrow-right />
+            </el-icon>
+          </el-button>
+        </div>
+        <!-- 右边缩进按钮 -->
+        <div class="right-close-icon">
+          <el-button @click="collapsed.right = !collapsed.right" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar" type="info" circle>
+            <el-icon v-if="!collapsed.right">
               <d-arrow-right />
             </el-icon>
             <el-icon v-else>
               <d-arrow-left />
             </el-icon>
           </el-button>
+        </div>
+      </div>
+    </a-layout-content>
+    <!-- 右侧区域 -->
+    <a-layout-sider :collapsed="collapsed.right" width="22%">
+      <div class="right-cont">
         <h2 class="title">系统数据</h2>
         <div class="panelBox">
           <div>
@@ -182,193 +194,10 @@
           </ul>
         </div>
       </div>
-    </Transition>
+    </a-layout-sider>
-
+  </a-layout>
-    <div v-show="dialogTableVisible" class="dialogTableVisibleClass">
-      <el-popover :visible="visible" :show-arrow="false" placement="left" :width="400" :popper-style="{background: '#06325F', border: '1px solid #60626654'}">
-        <template #reference>
-          <el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC">
-            <DArrowLeft />
-          </el-icon>
 </template>
-        <el-icon size="16px" style="margin-left: 350px" color="#409EFC" @click="visible = false">
-          <DArrowRight />
-        </el-icon>
-        <div>
-          <p style="color: rgb(179, 194, 208)">视频点位:</p>
-          <ul v-if="ingrssddata">
-            <li style="text-align: center; color: #fff" v-if="ingrssddata.ipcList.length < 1">暂无数据</li>
-            <li v-else style="margin-left: 20px; margin-top: 10px; color: rgb(1, 216, 226)" v-for="(item, index) in ingrssddata.ipcList" :key="index">{{ item.title }}</li>
-          </ul>
-        </div>
-        <div style="margin-top: 10px">
-          <p style="color: rgb(179, 194, 208)">安保点位:</p>
-          <ul v-if="ingrssddata">
-            <li style="text-align: center; color: #fff" v-if="ingrssddata.mobileList.length < 1">暂无数据</li>
-            <li style="margin-left: 20px; margin-top: 10px; color: rgb(1, 216, 226)" v-for="(item, index) in ingrssddata.mobileList" :key="index">{{ item.title }}</li>
-          </ul>
-        </div>
-        <div style="margin-top: 10px">
-          <p style="color: rgb(179, 194, 208)">文件列表:</p>
-          <ul v-if="ingrssddata">
-            <li style="text-align: center; color: #fff" v-if="ingrssddata.fileList.length < 1">暂无数据</li>
-            <li style="display: inline-block; margin-right: 5px" v-for="(item, index) in ingrssddata.fileList" :key="index">
-              <el-image
-                style="width: 150px; height: 150px"
-                v-if="item.type == 'image'"
-                :src="item.url"
-                :zoom-rate="1.2"
-                :max-scale="7"
-                :min-scale="0.2"
-                :preview-src-list="[item.url]"
-                :initial-index="4"
-                fit="cover"
-              />
-              <video width="150" height="150" v-if="item.type == 'video'" :src="item.url" autoplay="true" controls></video>
-            </li>
-          </ul>
-        </div>
-      </el-popover>
-      <el-icon @click="closee" style="position: absolute; left: 327px; top: 4px" size="23">
-        <close-bold />
-      </el-icon>
 
-      <ul>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 事件类型: </span>
-          <span id="" class="p10c">
-            {{ infoData.alarmCode }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 上报时间: </span>
-          <span id="" class="p10c">
-            {{ infoData.timestamp }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 上报地点: </span>
-          <span id="" class="p10c">
-            {{ infoData.address }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 上报来源: </span>
-          <span id="" class="p10c">
-            {{ infoData.alarmSource }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 核验状态: </span>
-          <span id="" class="p10c">
-            {{ totypecn(infoData.fakeState) }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 转发模式: </span>
-          <span id="" class="p10c">
-            {{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 描述信息: </span>
-          <span id="" class="p10c">
-            {{ infoData.description }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 设备类型: </span>
-          <span id="" class="p10c">
-            {{ infoData.deviceType }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 警报类型: </span>
-          <span id="" class="p10c">
-            {{ infoData.alarmCode }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px; display: flex">
-          <div style="flex: 1">
-            <span id="" class="c_b3c2d0"> 联系人1: </span>
-            <span id="" class="p10c">
-              {{ infoData.user1Name }}
-            </span>
-          </div>
-          <div style="flex: 1">
-            <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
-            <span id="" class="p10c">
-              {{ infoData.user1Phone }}
-            </span>
-          </div>
-        </li>
-        <li style="margin-bottom: 20px; display: flex">
-          <div style="flex: 1">
-            <span id="" class="c_b3c2d0"> 联系人2: </span>
-            <span id="" class="p10c">
-              {{ infoData.user2Name }}
-            </span>
-          </div>
-          <div style="flex: 1">
-            <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
-            <span id="" class="p10c">
-              {{ infoData.user2Phone }}
-            </span>
-          </div>
-        </li>
-        <li style="margin-bottom: 20px; display: flex">
-          <div style="flex: 1">
-            <span id="" class="c_b3c2d0"> 联系人3: </span>
-            <span id="" class="p10c">
-              {{ infoData.user3Name }}
-            </span>
-          </div>
-          <div style="flex: 1">
-            <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
-            <span id="" class="p10c">
-              {{ infoData.user3Phone }}
-            </span>
-          </div>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" class="c_b3c2d0"> 处置状态: </span>
-          <span id="" class="p10c">
-            {{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
-          </span>
-        </li>
-        <li style="margin-bottom: 20px">
-          <span id="" style="color: #01d8e2">
-            <div style="display: inline-block; margin-left: 3px">
-              <el-button @click="cz(infoData, upstatuslist)" type="primary" size="small">处置</el-button>
-            </div>
-            <div style="display: inline-block; margin-left: 3px" v-if="infoData.lockState == 'lock'">
-              <el-button @click="jiesuo(infoData)" type="info" size="small">解锁</el-button>
-            </div>
-
-            <div style="display: inline-block; margin-left: 3px" v-else>
-              <el-button @click="lock(infoData)" type="warning" size="small">锁定</el-button>
-            </div>
-            <div style="display: inline-block; margin-left: 3px">
-              <el-button type="danger" size="small" @click="close(infoData)">关闭</el-button>
-            </div>
-          </span>
-        </li>
-      </ul>
-      <div style="width: 100%; border-top: 1px solid #fff; margin-top: 10px"></div>
-      <a-timeline style="color: #beceda; overflow-y: auto; height: 248px; padding-top: 10px">
-        <a-timeline-item v-for="(item, index) in upstatuslist" :key="index">
-          <p>{{ toCn(item.operation) }}</p>
-          <p>时间:{{ item.timestamp }}</p>
-          <p>操作者: {{ item.operatorType }}</p>
-        </a-timeline-item>
-      </a-timeline>
-    </div>
-
-    <div v-if="showIframe" class="iframe-container">
-      <iframe :src="videoUrl" frameborder="0"></iframe>
-    </div>
-  </div>
-</template>
 <script lang="ts" setup>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
@@ -417,7 +246,10 @@ const isActive1 = ref('1')
 const qhzty2 = (data: any) => {
   isActive1.value = data
 }
-
+const collapsed = ref({
+  left: false,
+  right: false
+})
 watch(
   () => useUserStore().getsoketData,
   (newValue: any) => {
@@ -1381,6 +1213,29 @@ const initMap = () => {
 </script>
 
 <style scoped lang="scss">
+.indexx {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .left-close-icon {
+    z-index: 9999;
+    position: absolute;
+    margin-top: 10px;
+    left: 10px;
+  }
+
+  .right-close-icon {
+    z-index: 9999;
+    position: absolute;
+    margin-top: 10px;
+    right: 0;
+  }
+}
+
+.layout {
+  height: 100%;
+}
 .c_b3c2d0 {
   color: #b3c2d0;
 }
@@ -1389,7 +1244,7 @@ const initMap = () => {
   margin-left: 10px;
 }
 .scrollContainer {
-  margin: 10px 20px;
+  margin-top: 10px;
   height: 70%;
   overflow: auto;
   // position: absolute;
@@ -1669,25 +1524,15 @@ const initMap = () => {
   font-weight: 600;
 }
 
-.indexx {
+// overflow: hidden;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
 // position: absolute !important;
 
 .left-cont {
   box-sizing: border-box;
-    // width: 412px;
   height: 100%;
-    // background-color: rgb(9 45 84 / 80%);
+  width: 100%;
   background-color: #fff;
   z-index: 999;
-    // border: 10px solid #f2f3f5;
-    // border-top: 12px solid #f2f3f5;
-    // border-right: 12px solid #f2f3f5;
-    position: absolute;
-    // top: 0;
-    // left: 0;
   overflow: hidden;
 
   .titleLeftBg {
@@ -1702,15 +1547,11 @@ const initMap = () => {
 }
 
 .right-cont {
-    width: 412px;
+  width: 100%;
   height: 100%;
   background-color: #fff;
   z-index: 999;
-    position: absolute;
+  // border: 10px solid #f2f3f5;
-    right: 0;
-    border: 10px solid #f2f3f5;
-    // border-top: 12px solid #f2f3f5;
-    // border-left: 12px solid #f2f3f5;
 
   .titleLeftBg {
     width: 100%;
@@ -1721,7 +1562,6 @@ const initMap = () => {
     font-family: ysbth;
     font-weight: 600;
   }
-  }
 
   .gttex {
     color: #cde0f3;