iframe 通信调整

src/api/sys/monitor.ts

@@ -54,8 +54,8 @@ export function getMonitorSite(params: MonitorSiteParams, mode: ErrorMessageMode
 export const monitorSiteOperationUrl = 'http://39.105.183.243:18224/valkyrja/';
 
 /** 发送测点操作指令 */
-export function postMonitorOperation(params: MonitorSiteOperationParams) {
-  window.postMessage(JSON.stringify(params), '*');
+export function postMonitorOperation(el, params: MonitorSiteOperationParams) {
+  el.postMessage(JSON.stringify(params), '*');
 }
 
 export function handleMonitorOperation(

src/router/guard/permissionGuard.ts

@@ -16,7 +16,6 @@ const ROOT_PATH = RootRoute.path;
 const whitePathList: PageEnum[] = [LOGIN_PATH];
 
 export function createPermissionGuard(router: Router) {
-  debugger;
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
   router.beforeEach(async (to, from, next) => {

src/router/helper/routeHelper.ts

@@ -70,7 +70,6 @@ function dynamicImport(
 // Turn background objects into routing objects
 // 将背景对象变成路由对象
 export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
-  debugger;
   routeList.forEach((route) => {
     const component = route.component as string;
     if (component) {

src/router/index.ts

@@ -27,7 +27,6 @@ export const router = createRouter({
 
 // reset router
 export function resetRouter() {
-  debugger;
   router.getRoutes().forEach((route) => {
     const { name } = route;
     if (name && !WHITE_NAME_LIST.includes(name as string)) {

src/router/menus/index.ts

@@ -13,8 +13,6 @@ import { pathToRegexp } from 'path-to-regexp';
 const modules = import.meta.globEager('./vent/**/*.ts');
 
 const menuModules: MenuModule[] = [];
-debugger;
-
 Object.keys(modules).forEach((key) => {
   const mod = (modules as Recordable)[key].default || {};
   const modList = Array.isArray(mod) ? [...mod] : [mod];

src/router/routes/vent/fire.ts

@@ -30,7 +30,7 @@ const fire: AppRouteModule = {
       },
       component: () => import('@/views/vent/fire/compositeWarn/index.vue'),
     },
-     {
+    {
       path: 'fire-atomizing',
       name: 'fireAtomizing',
       meta: {
@@ -78,12 +78,6 @@ const fire: AppRouteModule = {
       },
       component: () => import('@/views/vent/fire/fireDistributionPoint/index.vue'),
     },
-    
-  
-   
-   
-   
-   
   ],
 };
 

src/settings/designSetting.ts

@@ -4,7 +4,7 @@ export const prefixCls = 'vMonitor';
 
 export const multipleTabHeight = 30;
 
-export const darkMode = ThemeEnum.LIGHT;
+export const darkMode = ThemeEnum.DARK;
 
 // 页脚固定高度
 export const footerHeight = 75;

src/store/modules/permission.ts

@@ -182,8 +182,6 @@ export const usePermissionStore = defineStore({
 
         // 路由映射， 默认进入该case
         case PermissionModeEnum.ROUTE_MAPPING:
-          debugger;
-
           // 对非一级路由进行过滤
           routes = filter(asyncRoutes, routeFilter);
           // 对一级路由再次根据角色权限过滤
@@ -210,7 +208,6 @@ export const usePermissionStore = defineStore({
         //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
         //  如果确定不需要做后台动态权限，请在下方注释整个判断
         case PermissionModeEnum.BACK:
-          debugger;
           const { createMessage } = useMessage();
 
           createMessage.loading({

src/views/vent/common/basicCard2.vue

@@ -2,14 +2,14 @@
   <div class="basicCard2">
     <div class="card2-box" v-for="(item, index) in cardContentLists2">
       <div class="card2-item">
-        <img class="card2-box-img" :src="item.imgSrcL" alt="">
+        <img class="card2-box-img" :src="item.imgSrcL" alt="" //>
         <div class="card2-item-box">
           <div class="item-box-label">{{ item.labelL }}</div>
           <div class="item-box-val">{{ item.valL }}</div>
         </div>
       </div>
       <div class="card2-item">
-        <img v-if="item.imgSrcR" class="card2-box-img" :src="item.imgSrcR" alt="">
+        <img v-if="item.imgSrcR" class="card2-box-img" :src="item.imgSrcR" alt="" //>
         <div class="card2-item-box">
           <div class="item-box-label">{{ item.labelR }}</div>
           <div class="item-box-val">{{ item.valR }}</div>
@@ -20,91 +20,87 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, defineProps } from 'vue'
-
-
-let props = defineProps({
-  cardContentList2: {
-    type: Array,
-    default: () => {
-      return [];
+  import { ref, reactive, watch, defineProps } from 'vue';
+
+  let props = defineProps({
+    cardContentList2: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-  },
-})
-
-let cardContentLists2 = ref<any[]>([]);
+  });
 
-watch(
-  () => props.cardContentList2,
-  (newV, oldV) => {
-    console.log(newV, '火灾卡片-----');
-    cardContentLists2.value = newV;
-  },
-  { immediate: true, deep: true },
-);
+  let cardContentLists2 = ref<any[]>([]);
 
+  watch(
+    () => props.cardContentList2,
+    (newV, oldV) => {
+      console.log(newV, '火灾卡片-----');
+      cardContentLists2.value = newV;
+    },
+    { immediate: true, deep: true },
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../assets/font/douyuFont.otf');
-}
-
-.basicCard2 {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(41 49 53 / 80%);
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../assets/font/douyuFont.otf');
+  }
 
-  .card2-box {
+  .basicCard2 {
     display: flex;
-    flex: 1;
+    position: relative;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
+    width: 100%;
     height: 100%;
-    border-left: 2px solid;
-    border-image: linear-gradient(to bottom, transparent, rgb(2 70 136 / 100%), transparent) 1 1 1;
+    background-color: rgb(41 49 53 / 80%);
 
-    &:first-child {
-      border: none;
-    }
-
-    .card2-item {
+    .card2-box {
       display: flex;
       flex: 1;
       align-items: center;
-      justify-content: center;
+      justify-content: space-around;
       height: 100%;
+      border-left: 2px solid;
+      border-image: linear-gradient(to bottom, transparent, rgb(2 70 136 / 100%), transparent) 1 1 1;
 
-      .card2-box-img {
-        width: 94px;
-        height: 94px;
+      &:first-child {
+        border: none;
       }
 
-      .card2-item-box {
+      .card2-item {
         display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        height: 94px;
-        margin-left: 10px;
-
-        .item-box-label {
-          color: #fff;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+
+        .card2-box-img {
+          width: 94px;
+          height: 94px;
         }
 
-        .item-box-val {
-          color: #02bbe9;
-          font-family: douyuFont;
-          font-size: 20px;
+        .card2-item-box {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 94px;
+          margin-left: 10px;
+
+          .item-box-label {
+            color: #fff;
+          }
+
+          .item-box-val {
+            color: #02bbe9;
+            font-family: douyuFont;
+            font-size: 20px;
+          }
         }
       }
-
-
     }
   }
-}
-</style>
+</style>

src/views/vent/common/danelBd.vue

@@ -1,30 +1,58 @@
 <template>
-  <div class="danelBd">
-    <div v-if="moduleNames" class="dane-title"
-      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
+  <div class="dane-bd">
+    <div
+      v-if="moduleNames"
+      class="dane-title"
+      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }"
+    >
       <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
         <img src="@/assets/images/fire/firehome/title-2.png" alt="" />
         <span>{{ moduleNames }}</span>
-        <CaretDownOutlined v-if="moduleIndex && commonTitle == 'datePikers'" :size="18" @click="toggleModule" />
-        <CaretUpOutlined v-if="!moduleIndex && commonTitle == 'datePikers'" :size="18" @click="toggleModule" />
+        <CaretDownOutlined
+          v-if="moduleIndex && commonTitle == 'datePikers'"
+          :size="18"
+          @click="toggleModule"
+        />
+        <CaretUpOutlined
+          v-if="!moduleIndex && commonTitle == 'datePikers'"
+          :size="18"
+          @click="toggleModule"
+        />
 
         <div class="module-select" v-if="moduleIndex">
-          <div class="select-box" v-for="(item, index) in moduleSelects" :key="index" @click="toggleModuleName(item)">{{
-            item.label }}</div>
+          <div
+            class="select-box"
+            v-for="(item, index) in moduleSelects"
+            :key="index"
+            @click="toggleModuleName(item)"
+            >{{ item.label }}</div
+          >
         </div>
       </div>
 
       <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="commonTitle == 'selected'">
-
-          <Select style="width: 140px" :options="selectLists" size="small" placeholder="请选择" v-model:value="selectVal"
-            allowClear />
+          <Select
+            style="width: 140px"
+            :options="selectLists"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectVal"
+            allowClear
+          />
         </div>
         <!-- 日期组件 -->
         <div class="common-navR-date" v-if="commonTitle == 'datePikers'">
-          <RangePicker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-            :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
+          <RangePicker
+            size="small"
+            style="width: 100%"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']"
+            @change="onChange"
+            @ok="onOk"
+          />
         </div>
         <!-- 开关组件 -->
         <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
@@ -34,7 +62,11 @@
         </div>
       </div>
     </div>
-    <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH }">
+    <div
+      v-if="contentStyle.contentH != '0px'"
+      class="dane-content"
+      :style="{ height: contentStyle.contentH }"
+    >
       <div class="t-line"></div>
       <slot></slot>
     </div>
@@ -42,281 +74,283 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, defineProps, watch } from 'vue';
-import { Select, RangePicker, Switch } from 'ant-design-vue';
-import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
-
-let props = defineProps({
-  //标题
-  moduleName: {
-    type: String,
-    default: '',
-  },
-  //样式
-  contentStyle: {
-    type: Object,
-    default: () => {
-      return {
-        contentH: '0px',
-      };
+  import { ref, reactive, defineProps, watch } from 'vue';
+  import { Select, RangePicker, Switch } from 'ant-design-vue';
+  import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
+
+  let props = defineProps({
+    //标题
+    moduleName: {
+      type: String,
+      default: '',
     },
-  },
-
-  commonTitle: {
-    type: String,
-    default: '',
-  },
-  //下拉列表数据
-  selectList: {
-    type: Array,
-    default: () => {
-      return []
-    }
-  },
-  moduleSelect:{
-    type:Array,
-    default:()=>{
-      return []
-    }
+    //样式
+    contentStyle: {
+      type: Object,
+      default: () => {
+        return {
+          contentH: '0px',
+        };
+      },
+    },
+
+    commonTitle: {
+      type: String,
+      default: '',
+    },
+    //下拉列表数据
+    selectList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    moduleSelect: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
+
+  let moduleNames = ref('');
+  let selectVal = ref('全部');
+  let selectLists = ref<any[]>([]);
+
+  let checked = ref(false);
+
+  let moduleIndex = ref(false);
+
+  let moduleSelects = ref<any[]>([]);
+
+  //模块选项弹窗状态切换
+  function toggleModule() {
+    moduleIndex.value = !moduleIndex.value;
+  }
+  //切换模块选项名称
+  function toggleModuleName(item) {
+    moduleNames.value = item.label;
+    moduleIndex.value = false;
+  }
+
+  //切换时间选项
+  function onChange(value, dateString) {
+    console.log('Selected Time: ', value);
+    console.log('Formatted Selected Time: ', dateString);
+  }
+  function onOk(val) {
+    console.log('onOk: ', val);
   }
-});
-
-let moduleNames = ref('')
-let selectVal = ref('全部');
-let selectLists = ref<any[]>([])
-
-let checked = ref(false);
-
-let moduleIndex = ref(false)
-
-let moduleSelects=ref<any[]>([])
-
-
-//模块选项弹窗状态切换
-function toggleModule() {
-  moduleIndex.value = !moduleIndex.value
-
-}
-//切换模块选项名称
-function toggleModuleName(item) {
-  moduleNames.value = item.label
-  moduleIndex.value = false
-}
-
-//切换时间选项
-function onChange(value, dateString) {
-  console.log('Selected Time: ', value);
-  console.log('Formatted Selected Time: ', dateString);
-}
-function onOk(val) {
-  console.log('onOk: ', val);
-}
-
-watch(() => props.selectList, (newV, oldV) => {
-  console.log(newV, '下拉列表------')
-  selectLists.value = newV
-}, { immediate: true, deep: true })
-watch(() => props.moduleName, (newM, oldM) => {
-  moduleNames.value = newM
-}, { immediate: true })
-watch(()=>props.moduleSelect,(newS,oldS)=>{
-  console.log(newS,'newS--------')
-  moduleSelects.value=newS
-},{immediate:true,deep:true})
+
+  watch(
+    () => props.selectList,
+    (newV, oldV) => {
+      console.log(newV, '下拉列表------');
+      selectLists.value = newV;
+    },
+    { immediate: true, deep: true },
+  );
+  watch(
+    () => props.moduleName,
+    (newM, oldM) => {
+      moduleNames.value = newM;
+    },
+    { immediate: true },
+  );
+  watch(
+    () => props.moduleSelect,
+    (newS, oldS) => {
+      console.log(newS, 'newS--------');
+      moduleSelects.value = newS;
+    },
+    { immediate: true, deep: true },
+  );
 </script>
 
 <style scoped lang="less">
-.danelBd {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .dane-title {
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: space-between;
+  .dane-bd {
+    position: relative;
     width: 100%;
-    height: 43px;
-    padding: 0 10px;
-    background: url('@/assets/images/fire/firehome/title-1.png') no-repeat center;
-    background-size: 100% 100%;
+    height: 100%;
 
-    .common-navL {
+    .dane-title {
       display: flex;
-      position: relative;
+      box-sizing: border-box;
       align-items: center;
-      width: 70%;
+      justify-content: space-between;
+      width: 100%;
+      height: 43px;
+      padding: 0 10px;
+      background: url('@/assets/images/fire/firehome/title-1.png') no-repeat center;
+      background-size: 100% 100%;
 
-      img {
-        width: 18px;
-        height: 18px;
-      }
+      .common-navL {
+        display: flex;
+        position: relative;
+        align-items: center;
+        width: 70%;
 
-      span {
-        margin-left: 10px;
-        color: #a1dff8;
-        font-size: 18px;
+        img {
+          width: 18px;
+          height: 18px;
+        }
+
+        span {
+          margin-left: 10px;
+          color: #a1dff8;
+          font-size: 18px;
+        }
       }
-    }
 
-    .common-navL1 {
-      display: flex;
-      position: relative;
-      align-items: center;
-      width: 50%;
+      .common-navL1 {
+        display: flex;
+        position: relative;
+        align-items: center;
+        width: 50%;
 
-      img {
-        width: 18px;
-        height: 18px;
-      }
+        img {
+          width: 18px;
+          height: 18px;
+        }
 
-      span {
-        margin-left: 10px;
-        color: #a1dff8;
-        font-size: 18px;
+        span {
+          margin-left: 10px;
+          color: #a1dff8;
+          font-size: 18px;
+        }
       }
-    }
 
-    .module-select {
-      display: flex;
-      position: absolute;
-      z-index: 9999;
-      top: 33px;
-      left: 16px;
-      box-sizing: border-box;
-      flex-direction: column;
-      justify-content: flex-start;
-      width: 214px;
-      height: 136px;
-      padding: 10px;
-      overflow-y: auto;
-      border: 1px solid rgb(15 63 88);
-      border-radius: 10px;
-      background-color: #fff;
-
-      .select-box {
-        width: 100%;
-        height: 28px;
-        color: #000;
-        line-height: 28px;
-        text-align: center;
-        cursor: pointer;
-
-        &:hover {
-          background-color: rgb(161 223 248 / 20%);
+      .module-select {
+        display: flex;
+        position: absolute;
+        z-index: 9999;
+        top: 33px;
+        left: 16px;
+        box-sizing: border-box;
+        flex-direction: column;
+        justify-content: flex-start;
+        width: 214px;
+        height: 136px;
+        padding: 10px;
+        overflow-y: auto;
+        border: 1px solid rgb(15 63 88);
+        border-radius: 10px;
+        background-color: #fff;
+
+        .select-box {
+          width: 100%;
+          height: 28px;
+          color: #000;
+          line-height: 28px;
+          text-align: center;
+          cursor: pointer;
+
+          &:hover {
+            background-color: rgb(161 223 248 / 20%);
+          }
         }
       }
 
-    }
-
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      width: 30%;
-    }
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 30%;
+      }
 
-    .common-navR1 {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      width: 50%;
-    }
+      .common-navR1 {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 50%;
+      }
 
-    .common-navR-switch {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      width: 70%;
+      .common-navR-switch {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 70%;
 
-      .status-text {
-        color: #1fb3f7;
-      }
+        .status-text {
+          color: #1fb3f7;
+        }
 
-      .status-text1 {
-        color: #a1dff8;
+        .status-text1 {
+          color: #a1dff8;
+        }
       }
     }
-  }
 
-  .dane-content {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 10px 15px;
-    background: url('@/assets/images/fire/firehome/title-3.png') no-repeat center;
-    background-size: 100% 100%;
-
-    .t-line {
-      position: absolute;
-      top: 0;
-      left: 0;
+    .dane-content {
+      position: relative;
+      box-sizing: border-box;
       width: 100%;
-      height: 20px;
-      background: url('@/assets/images/fire/firehome/title-4.png') no-repeat center;
+      padding: 10px 15px;
+      background: url('@/assets/images/fire/firehome/title-3.png') no-repeat center;
       background-size: 100% 100%;
-    }
-  }
-}
-
-
 
+      .t-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        padding: 10px 15px;
+        background: url('@/assets/images/fire/firehome/title-3.png') no-repeat center;
+        background-size: 100% 100%;
 
+        .t-line {
+        }
+      }
+    }
+  }
 
+  :deep(.vMonitor-select-selector) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    color: #a1dff8 !important;
+  }
 
-:deep(.vMonitor-select-selector) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  color: #a1dff8 !important;
-}
-
-
-:deep(.vMonitor-select-selection-placeholder) {
-  color: #a1dff8 !important;
-}
-
-:deep(.vMonitor-select-arrow) {
-  color: #a1dff8 !important;
-}
-
-:deep(.vMonitor-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
-
-:deep(.vMonitor-picker-input >input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
+  :deep(.vMonitor-select-selection-placeholder) {
+    color: #a1dff8 !important;
+  }
 
+  :deep(.vMonitor-select-arrow) {
+    color: #a1dff8 !important;
+  }
 
+  :deep(.vMonitor-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
 
-:deep(.vMonitor-picker-separator) {
-  color: #a1dff8 !important;
-}
+  :deep(.vMonitor-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
 
-:deep(.vMonitor-picker-active-bar) {
-  display: none !important;
-}
+  :deep(.vMonitor-picker-separator) {
+    color: #a1dff8 !important;
+  }
 
-:deep(.vMonitor-picker-suffix) {
-  color: #a1dff8 !important;
-}
+  :deep(.vMonitor-picker-active-bar) {
+    display: none !important;
+  }
 
-:deep(.vMonitor-switch){
-  min-width: 55px !important;
-  
-}
+  :deep(.vMonitor-picker-suffix) {
+    color: #a1dff8 !important;
+  }
 
-:deep(.vMonitor-switch-checked)  {
-  background-color: rgb(15 64 89) !important;
-}
+  :deep(.vMonitor-switch) {
+    min-width: 55px !important;
+  }
 
-:deep(.vMonitor-switch-handle::before)  {
-  background-color: rgb(33 179 247) !important;
-}
+  :deep(.vMonitor-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
 
+  :deep(.vMonitor-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
+  }
 </style>

src/views/vent/dust/dustHome/index.vue

@@ -3,7 +3,7 @@
     <!-- 模型区域 -->
     <!-- <div class="moduleArea"></div> -->
     <div class="main-container">
-
+      <Select ref="select" v-model:value="value1" style="width: 120px" :options="options1" />
       <div class="left-area">
         <!-- 左上区域 -->
         <div class="left-t">
@@ -14,232 +14,234 @@
               <div>监测区域</div>
             </div>
             <div class="tcontent-c">
-              <div style=" color: #1fb3f7;font-size: 24px;">低风险</div>
+              <div style="color: #1fb3f7; font-size: 24px">低风险</div>
             </div>
             <div class="tcontent-r">粉尘灾害</div>
           </div>
         </div>
         <!-- 左中区域 -->
         <div class="left-c">
-          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '596px' }">
-            <workJc :heightT="'26%'" :heightB="'74%'"></workJc>
+          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '570px' }">
+            <workJc :heightT="'26%'" :heightB="'74%'" />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
         <div class="left-f">
-          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs">
-          </DanelBd>
+          <DanelBd
+            :moduleName="'GIS重点区域风险监测'"
+            :contentStyle="{ contentH: '0px' }"
+            commonTitle="switchs"
+          />
         </div>
       </div>
       <div class="center-area">
         <div class="center-b">
-          <DanelBd :moduleName="'81202综放工作面粉尘浓度'" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '332px' }" :selectList="selectList" :commonTitle="'datePikers'">
-            <multipleDust></multipleDust>
+          <DanelBd
+            :moduleName="'81202综放工作面粉尘浓度'"
+            :contentStyle="{ contentH: '332px' }"
+            :commonTitle="'datePikers'"
+          >
+            <multipleDust />
           </DanelBd>
         </div>
       </div>
       <div class="right-area">
         <!-- 右上区域 -->
         <div class="right-t">
-          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '290px' }">
-            <dustFallDevice></dustFallDevice>
+          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '280px' }">
+            <dustFallDevice />
           </DanelBd>
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '230px' }" >
-            <dustGlzb></dustGlzb>
+          <DanelBd
+            :moduleName="'粉尘关联指标'"
+            :contentStyle="{ contentH: '220px' }"
+            commonTitle="selected"
+          >
+            <dustGlzb />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '140px' }" >
-            <dustJtzb></dustJtzb>
+          <DanelBd
+            :moduleName="'粉尘静态指标'"
+            :contentStyle="{ contentH: '135px' }"
+            commonTitle="selected"
+          >
+            <dustJtzb />
           </DanelBd>
         </div>
-
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import DanelBd from '../../common/danelBd.vue'
-import workJc from '../../fire/fireHome/components/workJc.vue'
-import multipleDust from './components/multipleDust.vue'
-import dustFallDevice from './components/dustFallDevice.vue'
-import dustGlzb from './components/dustGlzb.vue'
-import dustJtzb from './components/dustJtzb.vue'
-
-let selectList = reactive([
-  { label: '全部', value: '全部' },
-  {
-    value: 'jack',
-    label: 'Jack',
-  },
-  {
-    value: 'lucy',
-    label: 'Lucy',
-  },
-  {
-    value: 'disabled',
-    label: 'Disabled',
-    disabled: true,
-  },
-  {
-    value: 'yiminghe',
-    label: 'Yiminghe',
-  },
-]);
-
-let moduleSelect = reactive([
-  { label: '81202综放工作面粉尘浓度' },
-  { label: '81203综放工作面' },
-  { label: '81206胶' },
-  { label: '81205主撤通道' },
-  { label: '81205辅撤通道' },
-])
-
-
+  import { ref, reactive, onMounted } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import DanelBd from '../../common/danelBd.vue';
+  import workJc from '../../fire/fireHome/components/workJc.vue';
+  import multipleDust from './components/multipleDust.vue';
+  import dustFallDevice from './components/dustFallDevice.vue';
+  import dustGlzb from './components/dustGlzb.vue';
+  import dustJtzb from './components/dustJtzb.vue';
+
+  let value1 = ref('lucy');
+  const options1 = ref<any[]>([
+    {
+      value: 'jack',
+      label: 'Jack',
+    },
+    {
+      value: 'lucy',
+      label: 'Lucy',
+    },
+    {
+      value: 'disabled',
+      label: 'Disabled',
+      disabled: true,
+    },
+    {
+      value: 'yiminghe',
+      label: 'Yiminghe',
+    },
+  ]);
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.dustHome {
-  position: relative;
-  width: calc(100% - 20px);
-  height: calc(100vh - 82px);
-  margin: 50px 10px 15px;
-
-  .moduleArea {
-    width: 100%;
-    height: calc(100% - 15px);
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .main-container {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-    padding-top: 15px;
-
-    .left-area {
+  .dustHome {
+    position: relative;
+    width: calc(100% - 20px);
+    height: calc(100vh - 128px);
+    margin: 15px 10px;
+
+    .moduleArea {
+      width: 100%;
+      height: calc(100% - 15px);
+    }
+
+    .main-container {
       display: flex;
-      flex-direction: column;
-      align-items: center;
+      position: absolute;
+      top: 0;
+      left: 0;
       justify-content: space-between;
-      width: 30%;
+      width: 100%;
       height: 100%;
-      margin-right: 15px;
-
-      .left-t {
-        position: relative;
-        width: 100%;
-        height: 121px;
-        background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .tcontent-area {
-          display: flex;
-          position: absolute;
-          top: 50%;
-          left: 0;
-          box-sizing: border-box;
-          align-items: center;
-          justify-content: space-around;
-          width: 100%;
-          height: 90px;
-          padding: 0 20px;
-          transform: translate(0, -50%);
 
-          .tcontent-l {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #9da5aa;
-            font-size: 16px;
-            letter-spacing: 3px;
-          }
-
-          .tcontent-c {
-            display: flex;
-            flex: 3;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-          }
+      .left-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: 30%;
+        height: 100%;
+        margin-right: 15px;
+
+        .left-t {
+          position: relative;
+          width: 100%;
+          height: 121px;
+          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+          background-size: 100% 100%;
 
-          .tcontent-r {
+          .tcontent-area {
             display: flex;
-            flex: 1;
-            flex-direction: column;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            box-sizing: border-box;
             align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #9da5aa;
-            font-size: 16px;
-            letter-spacing: 3px;
+            justify-content: space-around;
+            width: 100%;
+            height: 90px;
+            padding: 0 20px;
+            transform: translate(0, -50%);
+
+            .tcontent-l {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #9da5aa;
+              font-size: 16px;
+              letter-spacing: 3px;
+            }
+
+            .tcontent-c {
+              display: flex;
+              flex: 3;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+            }
+
+            .tcontent-r {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #9da5aa;
+              font-size: 16px;
+              letter-spacing: 3px;
+            }
           }
         }
-      }
 
-      .left-c {
-        width: 100%;
-      }
+        .left-c {
+          width: 100%;
+        }
 
-      .left-f {
-        width: 100%;
+        .left-f {
+          width: 100%;
+        }
       }
-    }
 
-    .center-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: flex-end;
-      width: calc(40% - 40px);
-      height: 100%;
+      .center-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+        width: calc(40% - 40px);
+        height: 100%;
 
-      .center-b {
-        width: 100%;
+        .center-b {
+          width: 100%;
+        }
       }
-    }
 
-    .right-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: 30%;
-      height: 100%;
-      margin-left: 15px;
+      .right-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: 30%;
+        height: 100%;
+        margin-left: 15px;
 
-      .right-t {
-        width: 100%;
-      }
+        .right-t {
+          width: 100%;
+        }
 
-      .right-c {
-        width: 100%;
-      }
+        .right-c {
+          width: 100%;
+        }
 
-      .right-b {
-        width: 100%;
+        .right-b {
+          width: 100%;
+        }
       }
-
     }
   }
-}
-</style>
+</style>

src/views/vent/fire/fireAtomizing/index.vue

@@ -1,23 +1,33 @@
 <template>
   <div class="fireAtomizing">
     <div class="dustAto-left-box">
-      <basicTree :treeData="treeData"></basicTree>
+      <basicTree :treeData="treeData" />
     </div>
     <div class="dustAto-right-box">
       <div class="search-area">
         <Form :model="formState" :label-col="{ span: 1.5 }">
           <FormItem label="设备名称 : ">
-            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
-              style="width:240px;margin-right: 20px;" />
+            <a-input
+              v-model:value="formState.devicename"
+              clearable
+              placeholder="请输入..."
+              style="width: 240px; margin-right: 20px"
+            />
           </FormItem>
           <FormItem label="">
-            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+            <a-button
+              type="primary"
+              style="height: 30px; margin: 0 10px; padding: 2px 15px; background-color: #227fad"
+            >
               <template #icon>
                 <SearchOutlined />
               </template>
               查询
             </a-button>
-            <a-button type="primary" style="height: 30px; padding: 2px 15px;background-color: #227fad;">
+            <a-button
+              type="primary"
+              style="height: 30px; padding: 2px 15px; background-color: #227fad"
+            >
               <template #icon>
                 <PlusOutlined />
               </template>
@@ -27,8 +37,15 @@
         </Form>
       </div>
       <div class="content-area">
-        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
-          :pagination="false" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+        <Table
+          class="ant-table-striped"
+          size="small"
+          :dataSource="dataSource"
+          :columns="columns"
+          :scroll="{ y: 720 }"
+          :pagination="false"
+          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+        >
           <template #action="{ record }">
             <a-button type="link">
               <template #icon>
@@ -50,358 +67,366 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import basicTree from '../../common/basicTree.vue'
-import { Form, FormItem, Table } from 'ant-design-vue';
-import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { ref, reactive } from 'vue';
+  import basicTree from '../../common/basicTree.vue';
+  import { Form, FormItem, Table } from 'ant-design-vue';
+  import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
 
-//查询条件
-let formState = reactive({
-  devicename: ''
-})
+  //查询条件
+  let formState = reactive({
+    devicename: '',
+  });
 
-//table 数据
-let dataSource = reactive([
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-])
+  //table 数据
+  let dataSource = reactive([
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ]);
 
-//table 列
-let columns = reactive([
-  {
-    title: '序号',
-    dataIndex: 'Index',
-    key: 'Index',
-    width: 60,
-    align: 'center',
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'name',
-    key: 'name',
+  //table 列
+  let columns = reactive([
+    {
+      title: '序号',
+      dataIndex: 'Index',
+      key: 'Index',
+      width: 60,
+      align: 'center',
+    },
+    {
+      title: '设备名称',
+      dataIndex: 'name',
+      key: 'name',
 
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'age',
-    key: 'age',
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '安装位置',
+      dataIndex: 'age',
+      key: 'age',
 
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '喷雾状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '链接状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '设备状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '使用状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '控制状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '粉尘浓度',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '电池电量',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '是否定时',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'address',
-    key: 'address',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 200,
-    slots: { customRender: 'action' },
-    align: 'center',
-  },
-])
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '喷雾状态',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '链接状态',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '设备状态',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '使用状态',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '控制状态',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '粉尘浓度',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '电池电量',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '是否定时',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80,
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '时间',
+      dataIndex: 'address',
+      key: 'address',
+      align: 'center',
+      ellipsis: true,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      slots: { customRender: 'action' },
+      align: 'center',
+    },
+  ]);
 
-//数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
+  //数据随便写的，不符合实际情况，因为懒得改
+  const treeData = reactive([
+    { name: '81203综放工作面', value: '111', id: '1', pid: null },
+    { name: '束管监测系统', value: '222', id: '1-2', pid: '1' },
+    { name: '81203综放工作面', value: '458', id: '2', pid: null },
+    { name: '束管监测系统', value: '445', id: '2-1', pid: '2' },
+    { name: '束管监测系统', value: '456', id: '2-2', pid: '2' },
+    { name: '束管监测系统', value: '647', id: '2-3', pid: '2' },
+    { name: '81203综放工作面', value: '189', id: '3', pid: null },
+    { name: '束管监测系统', value: '664', id: '3-1', pid: '3' },
+    { name: '束管监测系统', value: '652', id: '3-2', pid: '3' },
+    { name: '束管监测系统', value: '732', id: '3-3', pid: '3' },
+    { name: '束管监测系统', value: '852', id: '3-3-1', pid: '3-3' },
+  ]);
 </script>
 
 <style lang="less" scoped>
-.fireAtomizing {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  width: calc(100% - 20px);
-  height: calc(100vh - 82px);
-  margin: 50px 10px 15px;
-  background: #282828;
+  .fireAtomizing {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+    width: calc(100% - 20px);
+    height: calc(100vh - 82px);
+    margin: 50px 10px 15px;
+    background: #282828;
 
-  .dustAto-left-box {
-    width: 220px;
-    height: 100%;
-    background-color: rgb(27 35 39 / 80%);
-  }
-
-  .dustAto-right-box {
-    box-sizing: border-box;
-    width: calc(100% - 230px);
-    height: 100%;
-    margin-left: 10px;
-    padding: 15px 10px;
-    background-color: rgb(27 35 39 / 80%);
+    .dustAto-left-box {
+      width: 220px;
+      height: 100%;
+      background-color: rgb(27 35 39 / 80%);
+    }
 
-    .search-area {
-      display: flex;
+    .dustAto-right-box {
       box-sizing: border-box;
-      align-items: center;
-      height: 70px;
-      padding: 0 20px;
-
-    }
+      width: calc(100% - 230px);
+      height: 100%;
+      margin-left: 10px;
+      padding: 15px 10px;
+      background-color: rgb(27 35 39 / 80%);
 
-    .content-area {
-      height: calc(100% - 70px);
+      .search-area {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        height: 70px;
+        padding: 0 20px;
+      }
 
+      .content-area {
+        height: calc(100% - 70px);
+      }
     }
-
   }
-}
-
-:deep(.vMonitor-form) {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
 
-:deep(.vMonitor-form-item-label >label) {
-  color: #fff;
-}
+  :deep(.vMonitor-form) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
 
-:deep(.vMonitor-input) {
-  padding: 2px 11px;
-  border-color: #227fad;
-  background-color: rgb(38 74 96 20%);
-  color: #fff;
-}
+  :deep(.vMonitor-form-item-label > label) {
+    color: #fff;
+  }
 
+  :deep(.vMonitor-input) {
+    padding: 2px 11px;
+    border-color: #227fad;
+    background-color: rgb(38 74 96 20%);
+    color: #fff;
+  }
 
-:deep(.vMonitor-table) {
-  background-color: transparent;
-  color: #fff;
-}
+  :deep(.vMonitor-table) {
+    background-color: transparent;
+    color: #fff;
+  }
 
-:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
-  padding: 4px 0;
-  border-bottom: none;
-  background: rgb(34 127 173/ 50%);
-  color: #04ffdb;
-}
+  :deep(.vMonitor-table-wrapper .vMonitor-table-thead > tr > th) {
+    padding: 4px 0;
+    border-bottom: none;
+    background: rgb(34 127 173/ 50%);
+    color: #04ffdb;
+  }
 
-:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
-  background: transparent;
-}
+  :deep(
+      .vMonitor-table-thead
+        > tr
+        > th:not(:last-child):not(.vMonitor-table-selection-column):not(
+          .vMonitor-table-row-expand-icon-cell
+        ):not([colspan])::before
+    ) {
+    background: transparent;
+  }
 
-:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
-  box-shadow: none;
-}
+  :deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
+    box-shadow: none;
+  }
 
-:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
-  border-top: none;
-}
+  :deep(
+      .vMonitor-table-wrapper
+        .vMonitor-table:not(.vMonitor-table-bordered)
+        .vMonitor-table-tbody
+        > tr
+        > td
+    ) {
+    border-top: none;
+  }
 
-:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
-  padding: 4px 8px;
-}
+  :deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody > tr > td) {
+    padding: 4px 8px;
+  }
 
-:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
-  background: rgb(38 74 96) !important;
-}
+  :deep(.vMonitor-table-wrapper .vMonitor-table-tbody > tr > td.vMonitor-table-cell-row-hover) {
+    background: rgb(38 74 96) !important;
+  }
 
-:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
-  background: rgb(38 74 96) !important;
-}
+  :deep(.vMonitor-table-wrapper .vMonitor-table-tbody > tr.vMonitor-table-row:hover > td) {
+    background: rgb(38 74 96) !important;
+  }
 
-:deep(.table-striped td){
-  background-color: rgb(3 58 85 / 36%) !important;
-}
-</style>
+  :deep(.table-striped td) {
+    background-color: rgb(3 58 85 / 36%) !important;
+  }
+</style>

src/views/vent/monitor/site/index.vue

@@ -11,7 +11,12 @@
     </div>
     <!-- 右侧内容 主要内容 -->
     <div class="h-full flex-grow-1 relative">
-      <IFrame class="w-full h-full" :frame-src="monitorSiteOperationUrl" @message="handleMessage" />
+      <IFrame
+        ref="frameRef"
+        class="w-full h-full"
+        :frame-src="monitorSiteOperationUrl"
+        @message="handleMessage"
+      />
       <SiteForm class="absolute w-full bg-#0960bd44 p-10px top-0" :site="selectedSite" />
     </div>
   </div>
@@ -34,6 +39,8 @@
   } from '@/api/sys/monitor';
   import IFrame from '@/views/sys/iframe/index.vue';
 
+  const frameRef = ref();
+
   // 测点树相关，包含了刷新、请求的内容
   const treeData = ref<MonitorSiteTreeNode>();
   function refreshTree(params: MonitorSiteTreeParams) {
@@ -47,10 +54,10 @@
 
   // 测点操作（iframe）相关，包括下发指令及处理消息
 
-  // 聚焦到测点上
+  // 聚焦到测点上;
   function focusOnSite(site: MonitorSite) {
     selectedSite.value = site;
-    postMonitorOperation({
+    postMonitorOperation(frameRef.value!, {
       clickType: 'treePoint',
       id: site.mineCode,
       data: {},
@@ -58,6 +65,7 @@
       from: 'tank',
     });
   }
+
   function handleMessage(msg: any) {
     handleMonitorOperation(msg, (d) => {
       console.log(d);