定位图标显示隐藏面板

src/assets/icons/alarm-icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.732" height="37.752" viewBox="0 0 37.732 37.752">
+  <defs>
+    <filter id="路径_55427" x="0" y="0" width="37.732" height="37.752" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#路径_55427)">
+    <path id="路径_55427-2" data-name="路径 55427" d="M16.944,12.754h-1V8.142a4.74,4.74,0,1,1,9.48,0v4.612H16.945Zm4.087-7.442L18.693,9.163h1.87L20.1,12.051,22.433,8.2h-1.87l.468-2.888Zm3.586-4.23a.462.462,0,0,1,.168.629l-.84,1.461-.794-.46.84-1.461a.457.457,0,0,1,.624-.17h0ZM20.687,0a.481.481,0,0,1,.5.464V2.12H20.19V.463a.481.481,0,0,1,.5-.463ZM16.76,1.082a.458.458,0,0,1,.627.168l.84,1.461-.794.46L16.591,1.71a.461.461,0,0,1,.168-.628ZM13.884,3.97A.457.457,0,0,1,14.51,3.8l1.456.845-.458.8L14.052,4.6a.461.461,0,0,1-.168-.628Zm13.609,0a.462.462,0,0,1-.168.629l-1.456.844-.458-.8L26.866,3.8a.458.458,0,0,1,.625.166s0,0,0,0ZM14.324,12.754h12.73a.5.5,0,1,1,0,1H14.324a.5.5,0,1,1,0-1Z" transform="translate(-1.82 12)" fill="#b0d7ff"/>
+  </g>
+</svg>

src/assets/icons/file-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.006" height="18.692" viewBox="0 0 23.006 18.692">
+  <path id="路径_55450" data-name="路径 55450" d="M21.386,2.876h-10.4L10.42,1.122A1.61,1.61,0,0,0,8.886,0H1.62A1.62,1.62,0,0,0,0,1.62V17.072a1.62,1.62,0,0,0,1.62,1.62H21.386a1.62,1.62,0,0,0,1.62-1.62V4.5a1.62,1.62,0,0,0-1.62-1.62Zm-19.766,0V1.62H8.886l.4,1.256Z" fill="#aeb2b7"/>
+</svg>

src/assets/icons/file-open.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.384" height="18.692" viewBox="0 0 23.384 18.692">
+  <path id="路径_55449" data-name="路径 55449" d="M1.871,92.867,0,99.729V86.563a1.231,1.231,0,0,1,1.23-1.23H7.073a1.222,1.222,0,0,1,.87.36l2.519,2.519a.244.244,0,0,0,.174.072H19.43a1.231,1.231,0,0,1,1.23,1.23v1.722H4.007a2.218,2.218,0,0,0-2.135,1.631ZM23.131,92.7a1.221,1.221,0,0,0-.977-.483H4.007a1.233,1.233,0,0,0-1.186.907L.271,102.473a1.23,1.23,0,0,0,1.186,1.553H19.6a1.233,1.233,0,0,0,1.186-.907l2.549-9.346a1.221,1.221,0,0,0-.209-1.069Z" transform="translate(0 -85.334)" fill="#f3f3f3"/>
+</svg>

src/assets/icons/warning-icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.558" height="36.877" viewBox="0 0 38.558 36.877">
+  <defs>
+    <filter id="路径_55428" x="0" y="0" width="38.558" height="36.877" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feFlood flood-color="#006eff"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#路径_55428)">
+    <path id="路径_55428-2" data-name="路径 55428" d="M14.6,11.6,8.314.722a.994.994,0,0,0-1.726,0L.3,11.6a1,1,0,0,0,.867,1.5H13.735a1,1,0,0,0,.863-1.5ZM6.741,4.609a.716.716,0,1,1,1.432,0V8.344a.725.725,0,0,1-1.421,0Zm1.432,7.426H6.723v-1.45h1.45Z" transform="translate(11.83 11.78)" fill="#b0d7ff"/>
+  </g>
+</svg>

src/views/vent/monitorManager/chamberMonitor/components/chamberHome.vue

@@ -1,168 +1,171 @@
 <template>
-  <div class="monitor-container">
-    <div class="lr left-box">
-      <div class="monitor-info item-box">
-        <ventBox1>
-          <template #title>
-            <div>光纤测温实时监测</div>
-          </template>
-          <template #container>
-            <div class="temperature-group">
-              <div class="light-group">
-                <div class="light-bg"></div>
-                <div class="temperature-item">
-                  <SvgIcon class="icon" size="25" name="aveg-temperature" />
-                  <div class="temperature">
-                    <div class="temperature-icon"></div>
-                    <div class="temperature-title">平均温度</div>
-                    <div class="temperature-val-box">
-                      <div class="temperature-val-icon"></div>
-                      <div class="temperature-val">56.99</div>
+  <a-spin tip="Loading..." :spinning="loading">
+    <div class="monitor-container">
+      <div class="lr left-box">
+        <div class="monitor-info item-box">
+          <ventBox1>
+            <template #title>
+              <div>光纤测温实时监测</div>
+            </template>
+            <template #container>
+              <div class="temperature-group">
+                <div class="light-group">
+                  <div class="light-bg"></div>
+                  <div class="temperature-item">
+                    <SvgIcon class="icon" size="25" name="aveg-temperature" />
+                    <div class="temperature">
+                      <div class="temperature-icon"></div>
+                      <div class="temperature-title">平均温度</div>
+                      <div class="temperature-val-box">
+                        <div class="temperature-val-icon"></div>
+                        <div class="temperature-val">56.99</div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="temperature-item">
-                  <SvgIcon class="icon" size="25" name="max-temperature" />
-                  <div class="temperature">
-                    <div class="temperature-icon"></div>
-                    <div class="temperature-title">最高温度</div>
-                    <div class="temperature-val-box">
-                      <div class="temperature-val-icon"></div>
-                      <div class="temperature-val">56.99</div>
+                  <div class="temperature-item">
+                    <SvgIcon class="icon" size="25" name="max-temperature" />
+                    <div class="temperature">
+                      <div class="temperature-icon"></div>
+                      <div class="temperature-title">最高温度</div>
+                      <div class="temperature-val-box">
+                        <div class="temperature-val-icon"></div>
+                        <div class="temperature-val">56.99</div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="temperature-item">
-                  <SvgIcon class="icon" size="25" name="min-temperature" />
-                  <div class="temperature">
-                    <div class="temperature-icon"></div>
-                    <div class="temperature-title">最低温度</div>
-                    <div class="temperature-val-box">
-                      <div class="temperature-val-icon"></div>
-                      <div class="temperature-val">56.99</div>
+                  <div class="temperature-item">
+                    <SvgIcon class="icon" size="25" name="min-temperature" />
+                    <div class="temperature">
+                      <div class="temperature-icon"></div>
+                      <div class="temperature-title">最低温度</div>
+                      <div class="temperature-val-box">
+                        <div class="temperature-val-icon"></div>
+                        <div class="temperature-val">56.99</div>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
               
-            </div>
-          </template>
-        </ventBox1>
-      </div>
-      <div class="warning-group">
-        <ventBox1>
-          <template #title>
-            <div>近一月报警情况</div>
-          </template>
-          <template #container>
-            <div class="monitor-box">
-              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>报警信息</span></div>
-              <div class="item-group">
-                <div class="item-col">
-                  <SvgIcon class="icon" size="24" name="alarm-fire" />
-                  <span class="title">火焰传感器</span>
-                  <span class="value">无</span>
-                </div>
-                <div class="item-col">
-                  <SvgIcon class="icon" size="24" name="alarm-smoke" />
-                  <span class="title">烟雾传感器</span>
-                  <span class="value" style="color: #FF3823; font-weight: 600;">15</span>
-                </div>
-                <div class="item-col">
-                  <SvgIcon class="icon" size="24" name="alarm-CO" />
-                  <span class="title">CO传感器</span>
-                  <span class="value">无</span>
-                </div>
-                <div class="item-col">
-                  <SvgIcon class="icon" size="24" name="alarm-temperature" />
-                  <span class="title">温度传感器</span>
-                  <span class="value">无</span>
-                </div>
               </div>
-            </div>
-            <div class="monitor-box">
-              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="warning-icon"/><span>预警信息</span></div>
-              <div class="item-group">
-                <div class="item-col">
-                  <SvgIcon class="icon" size="22" name="warning-fire" />
-                  <span class="title">火焰传感器</span>
-                  <span class="value">无</span>
-                </div>
-                <div class="item-col">
-                  <SvgIcon class="icon" size="22" name="warning-smoke" />
-                  <span class="title">烟雾传感器</span>
-                  <span class="value" style="color: #FF9B17; font-weight: 600;">15</span>
+            </template>
+          </ventBox1>
+        </div>
+        <div class="warning-group">
+          <ventBox1>
+            <template #title>
+              <div>近一月报警情况</div>
+            </template>
+            <template #container>
+              <div class="monitor-box">
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>报警信息</span></div>
+                <div class="item-group">
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="24" name="alarm-fire" />
+                    <span class="title">火焰传感器</span>
+                    <span class="value">无</span>
+                  </div>
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="24" name="alarm-smoke" />
+                    <span class="title">烟雾传感器</span>
+                    <span class="value" style="color: #FF3823; font-weight: 600;">15</span>
+                  </div>
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="24" name="alarm-CO" />
+                    <span class="title">CO传感器</span>
+                    <span class="value">无</span>
+                  </div>
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="24" name="alarm-temperature" />
+                    <span class="title">温度传感器</span>
+                    <span class="value">无</span>
+                  </div>
                 </div>
-                <div class="item-col">
-                  <SvgIcon class="icon" size="22" name="warning-CO" />
-                  <span class="title">CO传感器</span>
-                  <span class="value">无</span>
+              </div>
+              <div class="monitor-box">
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="warning-icon"/><span>预警信息</span></div>
+                <div class="item-group">
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="22" name="warning-fire" />
+                    <span class="title">火焰传感器</span>
+                    <span class="value">无</span>
+                  </div>
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="22" name="warning-smoke" />
+                    <span class="title">烟雾传感器</span>
+                    <span class="value" style="color: #FF9B17; font-weight: 600;">15</span>
+                  </div>
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="22" name="warning-CO" />
+                    <span class="title">CO传感器</span>
+                    <span class="value">无</span>
+                  </div>
+                  <div class="item-col">
+                    <SvgIcon class="icon" size="22" name="warning-temperature" />
+                    <span class="title">温度传感器</span>
+                    <span class="value">无</span>
+                  </div>
                 </div>
-                <div class="item-col">
-                  <SvgIcon class="icon" size="22" name="warning-temperature" />
-                  <span class="title">温度传感器</span>
-                  <span class="value">无</span>
+                <div class="alarm-box">
+                  <dv-scroll-board ref="scrollBoard" :config="warningConfig"
+                    style="width: 100%; height: 240px; overflow-y: auto; " />
                 </div>
               </div>
-              <div class="alarm-box">
-                <dv-scroll-board ref="scrollBoard" :config="warningConfig"
-                  style="width: 100%; height: 240px; overflow-y: auto; " />
-              </div>
-            </div>
               
           
-          </template>
-        </ventBox1>
+            </template>
+          </ventBox1>
+        </div>
       </div>
-    </div>
-    <div class="lr right-box">
-      <div class="item-box sensor-container">
-        <ventBox1>
-          <template #title>
-            <div>烟雾传感器实时监测</div>
-          </template>
-          <template #container>
-            <a-table :columns="sensorColumns" :data-source="smokeDataSource" :pagination="false" size="small" maxWidth="340"
-              :scroll="{ x: 'max-content', y: 240 }">
-              <template #bodyCell="{ column, record }">
-                <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
-                  <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
-                </template>
-              </template>
-            </a-table>
-          </template>
-        </ventBox1>
-        <ventBox1 class="vent-margin-t-10">
-          <template #title>
-            <div>{{ groupNum }}喷粉监控</div>
-          </template>
-          <template #container>
-            <a-table :columns="dustColumns" :data-source="dustDataSource" :pagination="false" size="small" maxWidth="340"
-              :scroll="{ x: 'max-content', y: 240 }">
-              <template #bodyCell="{ column, record }">
-                <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">链接</span>
-                  <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+      <div class="lr right-box">
+        <div class="item-box sensor-container">
+          <ventBox1>
+            <template #title>
+              <div>烟雾传感器实时监测</div>
+            </template>
+            <template #container>
+              <a-table :columns="sensorColumns" :data-source="smokeDataSource" :pagination="false" size="small" maxWidth="340"
+                :scroll="{ x: 'max-content', y: 240 }">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.dataIndex === 'warnFlag'">
+                    <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                    <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+                  </template>
                 </template>
-                <template v-if="column.dataIndex === 'action'">
-                  <a-switch v-model:checked="openDust" @change="handleDust" />
+              </a-table>
+            </template>
+          </ventBox1>
+          <ventBox1 class="vent-margin-t-10">
+            <template #title>
+              <div>{{ groupNum }}喷粉监控</div>
+            </template>
+            <template #container>
+              <a-table :columns="dustColumns" :data-source="dustDataSource" :pagination="false" size="small" maxWidth="340"
+                :scroll="{ x: 'max-content', y: 240 }">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.dataIndex === 'warnFlag'">
+                    <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">链接</span>
+                    <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+                  </template>
+                  <template v-if="column.dataIndex === 'action'">
+                    <a-switch v-model:checked="openDust" @change="handleDust" />
+                  </template>
                 </template>
-              </template>
-            </a-table>
-          </template>
-        </ventBox1>        
-      </div>
-      <div class="item-box" >
-        <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+              </a-table>
+            </template>
+          </ventBox1>        
+        </div>
+        <div class="item-box" >
+          <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+        </div>
       </div>
     </div>
-  </div>
+  </a-spin>
+
 </template>
 
 <script setup lang="ts">
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, shallowReactive, defineProps, watch } from 'vue';
+import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
 // import MonitorTable from '../comment/MonitorTable.vue';
 import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
 import ventBox1 from '/@/components/vent/ventBox1.vue'
@@ -173,7 +176,6 @@ import { warningConfig, sensorColumns, dustColumns } from '../chamber.data'
 import { list } from '../chamber.api';
 import LivePlayer from '@liveqing/liveplayer-v3';
 
-
 const props = defineProps({
   deviceId: {
     type: String,
@@ -181,7 +183,6 @@ const props = defineProps({
   }
 })
 
-
 const loading = ref(false);
 
 // 默认初始是第一行
@@ -213,6 +214,7 @@ function getMonitor() {
         timer = null;
       }
       await getMonitor();
+      loading.value = false
     }, 1000);
   }
 };
@@ -268,12 +270,16 @@ async function getDataSource(systemID) {
   })
 }
 
-
 // 喷粉操作
 function handleDust() {
   //
 }
 
+watch(() => props.deviceId, () => {
+  setModelType('chamberBase')
+  loading.value = true
+})
+
 onBeforeMount(() => {
 
 });
@@ -287,6 +293,7 @@ onMounted(() => {
     await getMonitor()
   });
 });
+
 onUnmounted(() => {
   destroy();
   if (timer) {
@@ -294,6 +301,7 @@ onUnmounted(() => {
     timer = undefined;
   }
 });
+
 </script>
 <style lang="less" scoped>
 @import '/@/design/vent/modal.less';
@@ -304,7 +312,8 @@ onUnmounted(() => {
   height: 100%;
   // height: 550px;
   // border: 1px solid #fff;
-  margin-top: 40px;
+  margin-top: 20px;
+  padding-top: 20px;
   display: flex;
   justify-content: space-between;
 

src/views/vent/monitorManager/compressor/components/nitrogenHome.vue

@@ -51,7 +51,7 @@
                       <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
                         >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
                     </div>
-                    <div class="item-col">
+                    <div class="item-col" v-if="Object.keys(data)[1]">
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
                         >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
@@ -66,7 +66,7 @@
                       <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
                         >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
                     </div>
-                    <div class="item-col">
+                    <div class="item-col" v-if="Object.keys(data)[1]">
                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
                       <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
                         >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
@@ -291,9 +291,11 @@ onUnmounted(() => {
     position: absolute;
     left: 0px;
     top: 0px;
+    
   }
   &:deep(.win) {
     margin: 0 !important;
+    background: #00000044;
   }
 
 }
@@ -343,7 +345,9 @@ onUnmounted(() => {
         pointer-events: auto;
         color: #fff;
         overflow: hidden;
-        
+        &:first-child{
+          margin-top: 0px;
+        }
         
         .base-title {
           color: #fff;
@@ -544,7 +548,7 @@ onUnmounted(() => {
       }
 
       .left-box {
-        width: 385px;
+        width: 365px;
         
       }
     }

src/views/vent/monitorManager/deviceMonitor/device.data.ts

@@ -1,5 +1,47 @@
 export const chartsColumns = (deviceType) => {
-  if(deviceType === ''){
-    return []
+  if (deviceType === '') {
+    return [];
   }
-}
+};
+export const locationList = [
+  {
+    title: '风门',
+    deviceType: 'gate',
+    isVisible: 0,
+  },
+  {
+    title: '风窗',
+    deviceType: 'gate1',
+    isVisible: 0,
+  },
+  {
+    title: '测风装置',
+    deviceType: 'gate2',
+    isVisible: 0,
+  },
+  {
+    title: '传感器',
+    deviceType: 'gate3',
+    isVisible: 0,
+  },
+  {
+    title: '局部风机',
+    deviceType: 'gate4',
+    isVisible: 0,
+  },
+  {
+    title: '主风机',
+    deviceType: 'gate5',
+    isVisible: 0,
+  },
+  {
+    title: '风筒',
+    deviceType: 'gate6',
+    isVisible: 0,
+  },
+  {
+    title: '密闭墙',
+    deviceType: 'gate7',
+    isVisible: 0,
+  },
+];

src/views/vent/monitorManager/deviceMonitor/index.vue

@@ -3,17 +3,43 @@
     <!-- <div class="scene-box"> -->
     <div class="device-header">智能通风管控系统</div>
     <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }">
-      <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" @click="showTree(true)" />
+      <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" @click="showTree('treeShow', true)" />
       <span class="title">{{ treeNodeTitle }}</span>
     </div>
     <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow, }">
-      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree(false)" />
+      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree('treeShow', false)" />
       <div class="device-select-box">
         <a-tree :show-line="true" :tree-data="treeData" v-model:selectedKeys="selectedKeys"
           v-model:expandedKeys="expandedKeys" @select="onSelect">
         </a-tree>
       </div>
     </div>
+    <div class="location-icon" :class="{  'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow, }">
+      <SvgIcon size="18" name="put-away" @click="showTree('location', true)" />
+      <span class="location-text">定位图标显示</span>
+    </div>
+    <div class="location-select" :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow, }">
+      <div class="location-select-box">
+        <div class="location-top-title" >
+          <SvgIcon class="is-expansion-icon location-expansion-icon" size="28" name="expansion" @click="showTree('location', false)" />
+          <div class="title">定位图标显示</div>
+        </div>
+        <div class="location-container">
+          <template v-for="location in locationList" :key="location.deviceType">
+            <div  class="location-item">
+              <div class="item-title">{{ location.title }}&nbsp;:</div>
+              <div>
+                <a-radio-group v-model:value="location.isVisible" :name="location.deviceType">
+                  <a-radio :value="1">是</a-radio>
+                  <a-radio :value="0">否</a-radio>
+                </a-radio-group>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+   
     <div class="bottom-tabs-box" @mousedown="setDivHeight" id="monitorBox">
       <div class="to-small" @click="toHome"></div>
       <div class="device-button-group" v-if="deviceList.length > 0">
@@ -81,6 +107,7 @@
 import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, nextTick } from 'vue'
 import { SendOutlined } from '@ant-design/icons-vue';
 import { list, getDeviceList, getDeviceTypeList } from './device.api'
+import { locationList } from './device.data'
 import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
 import HistoryTable from '../comment/HistoryTable.vue';
 import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
@@ -115,6 +142,7 @@ const modalVisible = ref<Boolean>(false); // 模态框是否可见
 //
 const drawerHeight = ref(240) // 监测框最小高度
 const treeShow = ref(true) //是否显示树形菜单
+const locationSettingShow = ref(false) //是否显示树形菜单
 const treeNodeTitle = ref('') // 选中的树形标题
 
 const deviceList = ref<DeviceType[]>([])
@@ -164,8 +192,9 @@ function tabChange(activeKeyVal) {
   activeKey.value = activeKeyVal;
 };
 
-function showTree(flag) {
-  treeShow.value = flag
+function showTree(flag, value) {
+  if(flag == 'treeShow') treeShow.value = value
+  if (flag == 'location') locationSettingShow.value = value
 }
 
 async function getDeviceType() {
@@ -430,13 +459,25 @@ onUnmounted(() => {
   color: #fff;
   display: flex;
   justify-content: center;
-  font-size: 24px;
+  font-size: 22px;
 
   .title {
     margin-left: 10px;
   }
 }
 
+.expansion-icon {
+  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
+  background-size: contain;
+  position: absolute;
+  left: 190px;
+  top: 25px;
+  &:hover {
+    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+    background-size: contain;
+  }
+}
+
 .device-select {
   width: 250px;
   height: 500px;
@@ -447,29 +488,12 @@ onUnmounted(() => {
   background-size: contain;
   pointer-events: auto;
   padding: 20px 10px 30px 10px;
-
-  .expansion-icon {
-    position: absolute;
-    left: 190px;
-    top: 25px;
-  }
+  
 }
-
 .is-expansion-icon {
-  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
-  background-size: contain;
   padding: 5px;
   pointer-events: auto;
   z-index: 999;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
-    background-size: contain;
-  }
-}
-
-.put-away-icon {
-  display: inline-block;
 }
 
 .device-select-show {
@@ -478,6 +502,7 @@ onUnmounted(() => {
   /* 持续时间 */
   animation-duration: 1s;
   transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  
 }
 
 .device-select-hide {
@@ -489,13 +514,29 @@ onUnmounted(() => {
 }
 
 .node-select-show {
+  width: 276px;
+  height: 44px;
+  background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
   left: 10px;
   animation-name: treeShow;
   /* 持续时间 */
   animation-duration: 1s;
   transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
+  display: flex;
+  align-items: center;
+  margin-left: 0;
+  justify-content: flex-start;
+  pointer-events: auto;
 
+  &:hover{
+    background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
+  }
+  .put-away-icon {
+    position: relative;
+    display: inline-block;
+    left: 4px;
+  }
+}
 .node-select-hide {
   left: -400px;
   animation-name: treeHide;
@@ -543,7 +584,142 @@ onUnmounted(() => {
     background: #4288A444;
   }
 }
+.location-icon{
+  width: 46px;
+  height: 178px;
+  position: absolute;
+  top: 60px;
+  // right: 0;
+  background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
+  background-size: contain;
+  writing-mode: vertical-lr;
+  line-height: 46px;
+  color: #fff;
+  padding-top: 10px;
+  pointer-events: auto;
+  cursor: pointer;
+
+  &:hover{
+    background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
+  }
+  .location-text{
+    padding-top: 20px;
+    letter-spacing: 3px;
+    font-size: 16px;
+  }
+}
+.location-select{
+  position: fixed;
+  top: 60px;
+  // right: 240px;
+  pointer-events: auto;
+  .location-select-box{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    &::before{
+      content: "";
+      position: absolute;
+      width: 230px;
+      height: 500px;
+      top: 0;
+      left: 0;
+      background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
+      background-size: contain;
+      transform: rotateY(180deg);
+      z-index: -1;
+      // &:hover {
+      //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+      //   background-size: contain;
+      // }
+    }
+    .location-top-title{
+      color: #fff;
+      position: absolute;
+      width: 225px;
+      height: 68px;
+      background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
+      background-size: contain;
+      top: 5px;
+      left: 5px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-end;
+      .title{
+        font-size: 18px;
+        position: relative;
+        top: -14px;
+        right: 15px;
+      }
+    }
+    .location-expansion-icon {
+      background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
+      background-size: contain;
+      position: relative;
+      left: 10px;
+      top: -15px;
+      padding: 5px;
+      &:hover {
+        background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
+        background-size: contain;
+      }
+    }
+  }
+  .location-container{
+    width: 200px;
+    height: 390px;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: 80px;
+    left: 18px;
+    overflow-y: auto;
+    .location-item{
+      color: #fff;
+      line-height: 30px;
+      display: flex;
+      justify-content: space-between;
+      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
+      margin: 3px 0;
+      .item-title{
+        width: 80px;
+        text-align: right;
+        color: #87f1ff;
+      }
+    }
+  }
+}
+.location-select-show{
+  right: 240px;
+  animation-name: locationShow;
+  /* 持续时间 */
+  animation-duration: 1s;
+  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+}
 
+.location-select-hide{
+  right: -2px;
+  animation-name: locationHide;
+  /* 持续时间 */
+  animation-duration: 1s;
+  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+}
+
+.location-btn-show{
+  right: -0px;
+  animation-name: locationBtnShow;
+  /* 持续时间 */
+  animation-duration: 1s;
+  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+}
+.location-btn-hide{
+  right: -240px;
+  animation-name: locationBtnHide;
+  /* 持续时间 */
+  animation-duration: 1s;
+  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+}
 .bottom-tabs-box {
 
   position: relative;
@@ -568,45 +744,70 @@ onUnmounted(() => {
 
   .device-button-group {
     position: absolute;
-    top: -30px;
+    top: -27px;
     left: 30px;
     display: flex;
     width: 100%;
 
     .device-button {
-      padding: 4px 15px;
-      position: relative;
+      width: 148px;
+      height: 26px;
+      background: url('/@/assets/images/vent/home/tab21.png');
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 14px;
-
-      color: #fff;
+      color: #FFF;
+      position: relative;
       cursor: pointer;
-      margin: 0 3px;
+      
+      &:nth-child(1){
+        left: calc(-8px * 1);
+      }
+      &:nth-child(2){
+        left: calc(-8px * 2);
+      }
+      &:nth-child(3){
+        left: calc(-8px * 3);
+      }
+      &:nth-child(4){
+        left: calc(-8px * 4);
+      }
+      &:nth-child(5){
+        left: calc(-8px * 5);
+      }
+      &:nth-child(6){
+        left: calc(-8px * 6);
+      }
+      &:nth-child(7){
+        left: calc(-8px * 7);
+      }
+      &:nth-child(8){
+        left: calc(-8px * 8);
+      }
+      &:nth-child(9){
+        left: calc(-8px * 9);
+      }
 
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border: 1px solid #6176AF;
-        transform: skewX(-38deg);
-        background-color: rgba(0, 77, 103, 85%);
-        z-index: -1;
+      &:first-child
+      {
+        background: url('/@/assets/images/vent/home/tab11.png');
       }
+      
     }
-
     .device-active {
-
+      background: url('/@/assets/images/vent/home/tab2-active.png');
+      &:first-child
+      {
+        background: url('/@/assets/images/vent/home/tab1-active.png');
+      }
       // color: #0efcff;
       &::before {
         border-color: #0efcff;
         box-shadow: 1px 1px 3px 1px #0efcff inset;
       }
     }
+
+    
   }
 
   .enter-detail {
@@ -694,6 +895,52 @@ onUnmounted(() => {
   }
 }
 
+@keyframes locationShow {
+  0% {
+    right: 0px;
+    opacity: 0;
+  }
+
+  100% {
+    right: 240px;
+    opacity: 1;
+  }
+}
+
+@keyframes locationHide {
+  0% {
+    right: 240px;
+    opacity: 1;
+  }
+  100% {
+    right: 0;
+    opacity: 0;
+  }
+}
+@keyframes locationBtnShow {
+  0% {
+    right: -240px;
+    opacity: 0;
+  }
+
+  100% {
+    right: -2px;
+    opacity: 1;
+  }
+}
+
+@keyframes locationBtnHide {
+  0% {
+    right: -2px;
+    opacity: 1;
+  }
+
+  100% {
+    right: -240px;
+    opacity: 0;
+  }
+}
+
 :deep(.@{ventSpace}-tabs-tabpane-active) {
   overflow: auto;
   // height: 100%;

src/views/vent/monitorManager/groutMonitor/components/groutHome.vue

@@ -26,6 +26,9 @@
           </template>
         </ventBox1>
       </div>
+      <div class="item-box vent-margin-t-10">
+        <LivePlayer id="fm-player1" style="height: 220px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+      </div>
     </div>
     <div class="lr right-box">
       <div class="control-container item-box">
@@ -107,9 +110,7 @@
           </template>
         </ventBox1>
       </div>
-      <!-- <div class="item-box" >
-        <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
-      </div> -->
+
     </div>
   </div>
   <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
@@ -273,9 +274,9 @@ onUnmounted(() => {
 
   .right-box {
     width: 320px;
+    margin-top: 30px;
     .control-group{
       display: flex;
-      // justify-content: space-around;
       flex-wrap: wrap;
       .control-item {
         

src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue

@@ -109,7 +109,7 @@
                   </div>
                   
                   <a-divider style="height: 1px; background-color: #d7d7d755" />
-                  <div class="control-btn-group">
+                  <div class="control-btn-group vent-margin-b-20">
                     <div class="control-left-box">
                       <div class="btn-box">
                         <span @click="handlerDevice({ remote: true })">远程</span>

src/views/vent/performance/fileDetail/index.vue

@@ -7,8 +7,10 @@
           @change-name="onChangeName" @addNode="onAddNode">
           <template #icon="{ item }">
             <template v-if="item.isFolder">
-              <icon v-if="item.expanded" class="iconfont" iconName="icon-24gf-folderOpen" />
-              <icon v-else class="iconfont" iconName="icon-bg-folder" />
+              <!-- <icon v-if="item.expanded" class="iconfont" iconName="icon-24gf-folderOpen" /> -->
+              <SvgIcon v-if="item.expanded" size="18" name="file-open"/>
+              <!-- <icon v-else class="iconfont" iconName="icon-bg-folder" /> -->
+              <SvgIcon v-else size="18" name="file-close"/>
             </template>
             <treeIcon class="iconfont" :title="item.title" v-else />
           </template>
@@ -44,7 +46,7 @@
             <a-radio value="false">否</a-radio>
           </a-radio-group>
         </a-form-item>
-        <a-form-item label="文件类型">
+        <a-form-item label="文件类型" style="width: 500px;">
           <JDictSelectTag v-model:value="formState.fileType" placeholder="请选择文件类型" dictCode="file_type" />
         </a-form-item>
         <a-form-item label="文件类型">
@@ -60,15 +62,14 @@
 import { useMessage } from '/@/hooks/web/useMessage';
 import fileSystem from './commen/fileSystem.vue';
 import icon from './commen/Icon/index.vue';
+import { SvgIcon } from '/@/components/Icon';
 import treeIcon from './commen/Icon/treeIcon.vue';
 import { ref, onMounted, reactive, nextTick } from 'vue';
 import NormalTable from '../comment/NormalTable.vue';
 import { columns } from './fileDetail.data';
 import { getTree, createFile, editMenu, delMenu, uploadApi, downLoad, deleteById } from './fileDetail.api';
 import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-components: {
-  fileSystem;
-}
+
 const { createMessage } = useMessage();
 let fileName = ref('');
 let fileList = reactive<any[]>([]); //上传文件列表
@@ -253,14 +254,24 @@ onMounted(() => {
     align-items: flex-start;
 
     .left-box {
+      // width: 15%;
+      // height: calc(100% - 20px);
+      // margin-bottom: 20px;
+      // padding: 20px;
+      // border: 1px solid #91e9fe;
+      //   box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      // -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      // -webkit-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
       width: 15%;
       height: calc(100% - 20px);
       margin-bottom: 20px;
       padding: 20px;
-      border: 1px solid #91e9fe;
-        box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      border: 1px solid #99e8ff66;
+      background: #27546e4a;
+      box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
       -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-      -webkit-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
+
       // border: 2px solid #268bc1;
       // box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
       // -moz-box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
@@ -284,8 +295,8 @@ onMounted(() => {
         height: 34px;
         line-height: 34px;
         margin-bottom: 15px;
-        background: url(../../../../assets/images/files/details/cz-b.png) no-repeat;
-        background-size: 100% 100%;
+        // background: url(../../../../assets/images/files/details/cz-b.png) no-repeat;
+        // background-size: 100% 100%;
       }
     }
 

src/views/vent/performance/fileIndex/index.vue

@@ -79,8 +79,10 @@ onMounted(() => {
     height: calc(100% - 30px);
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
+    // justify-content: flex-start;
+    // align-items: flex-start;
+    justify-content: center;
+    align-items: center;
     flex-wrap: wrap;
 
     .card {