宝德灾害预警基金项目-火灾监测首页，粉尘监测首页界面修改提交

.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # Basic interface address SPA
 #VITE_GLOB_API_URL=http://182.92.126.35:9999
-VITE_GLOB_API_URL=http://182.92.126.35:8070/prevention
-
+# VITE_GLOB_API_URL=http://182.92.126.35:8070/prevention
+VITE_GLOB_API_URL=http://192.168.131.6:8070/prevention
 # File upload address， optional
 VITE_GLOB_UPLOAD_URL=/upload
 

src/App.vue

@@ -30,7 +30,7 @@
   // support Multi-language
   const { getAntdLocale } = useLocale();
   const width = ref(1920);
-  const height = ref(928);
+  const height = ref(1080);
   const { isDark, darkTheme } = useDarkModeTheme();
   const runSelf = ref(true);
 

src/layouts/default/header/index.less

@@ -198,7 +198,7 @@
 .vMonitor-layout .vMonitor-layout-header{
   border-color: #121717 !important;
   border-bottom-color: #3d464b !important; //lxh
-  background-color: #1B2327 !important;
+  background-color: #000723 !important;
 }
 
 .vMonitor-layout .vMonitor-menu {

src/views/vent/common/danelBd.vue

@@ -1,361 +1,274 @@
 <template>
-  <div class="dane-bd">
-    <div
-      v-if="moduleNames"
-      class="dane-title"
-      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '3px' }"
-    >
-      <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" />
-
-        <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> -->
-      </div>
+  <div class="dane-bd"
+    :class="bgSize == 'large' ? 'dane-l' : bgSize == 'middle' ? 'dane-m' : bgSize == 'small' ? 'dane-s' : 'dane-w'">
+    <div v-if="moduleNames" class="dane-title">
+      <div class='common-navL'>{{ moduleNames }}</div>
 
-      <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
+      <div class='common-navR'>
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="commonTitle == 'selected'">
-          <a-select
-            style="width: 140px"
-            :options="selectLists"
-            size="small"
-            placeholder="请选择"
-            v-model:value="selectVal"
-            allowClear
-            @change="changeSelect"
-          />
+          <a-select style="width: 140px" :options="selectLists" size="small" placeholder="请选择" v-model:value="selectVal"
+            allowClear @change="changeSelect" />
         </div>
         <!-- 日期组件 -->
         <div class="common-navR-date" v-if="commonTitle == 'datePikers'">
-          <a-range-picker
-            size="small"
-            style="width: 100%"
-            :show-time="{ format: 'HH:mm' }"
-            format="YYYY-MM-DD HH:mm"
-            :placeholder="['开始时间', '结束时间']"
-            @change="onChange"
-            @ok="onOk"
-          />
+          <a-range-picker 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'">
+        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
           <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
           <a-switch v-model:checked="checked" />
           <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
-        </div>
+        </div> -->
       </div>
     </div>
-    <div
-      v-if="contentStyle.contentH != '0px'"
-      class="dane-content"
-      :style="{ height: contentStyle.contentH }"
-    >
-      <div class="t-line"></div>
+    <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH }">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, defineProps, watch, defineEmits } from 'vue';
-  import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
-
-  let props = defineProps({
-    //标题
-    moduleName: {
-      type: String,
-      default: '',
-    },
-    //样式
-    contentStyle: {
-      type: Object,
-      default: () => {
-        return {
-          contentH: '0px',
-        };
-      },
-    },
-
-    commonTitle: {
-      type: String,
-      default: '',
-    },
-    //下拉列表数据
-    selectList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    moduleSelect: {
-      type: Array,
-      default: () => {
-        return [];
-      },
+import { ref, reactive, defineProps, watch, defineEmits } from 'vue';
+
+let props = defineProps({
+  bgSize: {
+    type: String,
+    default: ''
+  },
+  //标题
+  moduleName: {
+    type: String,
+    default: '',
+  },
+  //样式
+  contentStyle: {
+    type: Object,
+    default: () => {
+      return {
+        contentH: '0px',
+      };
     },
-    selectValue: {
-      type: String,
-      default: () => {
-        return '';
-      },
-    },
-  });
-  const emit = defineEmits(['changeSelect']);
-
-  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);
-  }
-
-  //下拉框选项切换
-  function changeSelect(val) {
-    console.log(val, moduleNames, '下拉框选项切换---');
-    emit('changeSelect', { label: moduleNames.value, value: val });
-  }
-
-  watch(
-    () => props.selectList,
-    (newV, oldV) => {
-      console.log(newV, '下拉列表------');
-      if (newV.length != 0) {
-        selectLists.value = newV;
-        console.log(selectLists.value, '====----');
-        selectVal.value = props.selectValue;
-      }
+  },
+  commonTitle: {
+    type: String,
+    default: '',
+  },
+  //下拉列表数据
+  selectList: {
+    type: Array,
+    default: () => {
+      return [];
     },
-    { immediate: true, deep: true },
-  );
-  watch(
-    () => props.moduleName,
-    (newM, oldM) => {
-      moduleNames.value = newM;
+  },
+  moduleSelect: {
+    type: Array,
+    default: () => {
+      return [];
     },
-    { immediate: true },
-  );
-  watch(
-    () => props.moduleSelect,
-    (newS, oldS) => {
-      console.log(newS, 'newS--------');
-      moduleSelects.value = newS;
+  },
+  selectValue: {
+    type: String,
+    default: () => {
+      return '';
     },
-    { immediate: true, deep: true },
-  );
+  },
+});
+const emit = defineEmits(['changeSelect']);
+
+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);
+}
+
+//下拉框选项切换
+function changeSelect(val) {
+  console.log(val, moduleNames, '下拉框选项切换---');
+  emit('changeSelect', { label: moduleNames.value, value: val });
+}
+
+watch(
+  () => props.selectList,
+  (newV, oldV) => {
+    console.log(newV, '下拉列表------');
+    if (newV.length != 0) {
+      selectLists.value = newV;
+      console.log(selectLists.value, '====----');
+      selectVal.value = props.selectValue;
+    }
+  },
+  { 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">
-  .dane-bd {
-    position: relative;
+.dane-bd {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .dane-title {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
-    height: 100%;
+    height: 34px;
+    padding: 0 30px 0 50px;
+   
 
-    .dane-title {
+    .common-navL {
       display: flex;
-      box-sizing: border-box;
+      position: relative;
       align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      // height: 43px;
-      height: 32px;
-      padding: 0 10px;
-      background: url('../../../assets/images/fire/firehome/title-1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      .common-navL {
-        display: flex;
-        position: relative;
-        align-items: center;
-        width: 70%;
-
-        img {
-          width: 14px;
-          height: 14px;
-        }
-
-        span {
-          margin-left: 10px;
-          color: #a1dff8;
-          font-size: 14px;
-        }
-      }
-
-      .common-navL1 {
-        display: flex;
-        position: relative;
-        align-items: center;
-        width: 50%;
-
-        img {
-          width: 14px;
-          height: 14px;
-        }
-
-        span {
-          margin-left: 10px;
-          color: #a1dff8;
-          font-size: 14px;
-        }
-      }
-
-      .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-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: 90%;
-
-        .status-text {
-          color: #1fb3f7;
-          font-size: 14px;
-        }
-
-        .status-text1 {
-          color: #a1dff8;
-          font-size: 14px;
-        }
-      }
+      color: #fff;
+      font-size: 14px;
     }
 
-    .dane-content {
-      position: relative;
-      box-sizing: border-box;
-      width: 100%;
-      padding: 10px;
-      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-4.png') no-repeat center;
-        background-size: 100% 100%;
-      }
+    .common-navR {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
     }
-  }
 
-  :deep(.vMonitor-select-selector) {
-    height: 22px !important;
-    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;
-  }
+    // .common-navR-switch {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: space-around;
+    //   width: 90%;
 
-  :deep(.vMonitor-picker) {
-    border: none !important;
-    background-color: rgb(15 64 88) !important;
-    box-shadow: none;
-    color: #a1dff8 !important;
-  }
+    //   .status-text {
+    //     color: #1fb3f7;
+    //     font-size: 14px;
+    //   }
 
-  :deep(.vMonitor-picker-input > input) {
-    color: #a1dff8 !important;
-    text-align: center !important;
+    //   .status-text1 {
+    //     color: #a1dff8;
+    //     font-size: 14px;
+    //   }
+    // }
   }
 
-  :deep(.vMonitor-picker-separator) {
-    color: #a1dff8 !important;
-  }
-
-  :deep(.vMonitor-picker-active-bar) {
-    display: none !important;
-  }
-
-  :deep(.vMonitor-picker-suffix) {
-    color: #a1dff8 !important;
-  }
-
-  :deep(.vMonitor-switch) {
-    min-width: 48px !important;
-  }
-
-  :deep(.vMonitor-switch-checked) {
-    background-color: rgb(15 64 89) !important;
-  }
-
-  :deep(.vMonitor-switch-handle::before) {
-    background-color: rgb(33 179 247) !important;
+  .dane-content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px;
   }
+}
+
+.dane-l {
+  background: url('../../../assets/images/fire/firehome/common-border.png') no-repeat;
+  background-size: 100% auto;
+}
+
+.dane-m {
+  background: url('../../../assets/images/fire/firehome/common-border1.png') no-repeat;
+  background-size: 100% auto;
+}
+
+.dane-s {
+  background: url('../../../assets/images/fire/firehome/common-border2.png') no-repeat;
+  background-size: 100% auto;
+}
+
+.dane-w {
+  background: url('../../../assets/images/fire/firehome/common-border3.png') no-repeat;
+  background-size: 100% auto;
+}
+
+:deep(.vMonitor-select-selector) {
+  height: 22px !important;
+  border: none !important;
+  // background-color: rgb(15 64 88) !important;
+  background-color: transparent !important;
+  color: #8087a1 !important;
+  
+}
+
+:deep(.vMonitor-select-selection-placeholder) {
+  color: #8087a1 !important;
+}
+
+:deep(.vMonitor-select-arrow) {
+  color: #8087a1 !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-picker-separator) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-picker-active-bar) {
+  display: none !important;
+}
+
+:deep(.vMonitor-picker-suffix) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-switch) {
+  min-width: 48px !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/components/dustFallDevice.vue

@@ -1,49 +1,33 @@
 <template>
     <div class="dustFallDevice">
         <div class="fall-left-box">
-            <div class="box-c"></div>
             <div class="box-left-t">
+                <img src="../../../../../assets/images/dust/dusthome/sbzs.png" class="item-icon"  alt="">
                 <div class="item-label">设备总数</div>
                 <div class="item-val">{{ deviceTotal }}</div>
             </div>
             <div class="box-left-b">
+                <img src="../../../../../assets/images/dust/dusthome/pwkqs.png" class="item-icon"  alt="">
                 <div class="item-label">喷雾开启数</div>
                 <div class="item-val">{{ pwTotal }}</div>
             </div>
             <div class="box-right-t">
+                <img src="../../../../../assets/images/dust/dusthome/lwsl.png" class="item-icon"  alt="">
                 <div class="item-label">联网数量</div>
                 <div class="item-val">{{ interTotal }}</div>
             </div>
             <div class="box-right-b">
+                <img src="../../../../../assets/images/dust/dusthome/dwsl.png" class="item-icon"  alt="">
                 <div class="item-label">断网数量</div>
                 <div class="item-val">{{ unInterTotal }}</div>
             </div>
         </div>
-        <!-- <div class="fall-right-box">
-            <div class="fall-table-head">
-                <div class="fall-head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.title }}</div>
-            </div>
-            <div class="fall-table-content">
-                <vue3-seamless-scroll hover-stop="true" :list="tabContentList" :hover="true" :step="0.15"
-                    class="seamless-warp">
-                    <div class="fall-content-item" v-for="(item, ind) in tabContentList" :key="ind">
-                        <span class="content-item-val">{{ `${ind + 1}` }}</span>
-                        <span class="content-item-val">{{ item.deviceName }}</span>
-                        <span class="content-item-val">{{ item.stateConn }}</span>
-                        <span class="content-item-val">{{ item.stateSpray }}</span>
-                    </div>
-                </vue3-seamless-scroll>
-
-
-
-            </div>
-        </div> -->
+       
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, defineProps, watch } from 'vue'
-// import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 
 let props = defineProps({
     deviceTotal: {
@@ -70,222 +54,103 @@ let props = defineProps({
     }
 })
 
-//table头
-// let tabHeadList = reactive([
-//     { title: '编号' },
-//     { title: '名称' },
-//     { title: '连接状态' },
-//     { title: '喷雾状态' },
-// ])
-//table content
-// let tabContentList = ref<any[]>([])
-
-// watch(() => props.pwData, (newP, oldP) => {
-//     console.log(newP, 'newP------')
-//     if (newP.length != 0) {
-//         tabContentList.value = newP
-//     }
-// }, {
-//     immediate: true,
-//     deep: true
-// })
 
 
 </script>
 
 <style lang="less" scoped>
 .dustFallDevice {
-    // display: flex;
     position: relative;
     justify-content: space-between;
     width: 100%;
     height: 100%;
+    background: url('../../../../../assets/images/dust/dusthome/img-8.png') no-repeat center;
+    background-size: auto 100%;
 
     .fall-left-box {
         position: relative;
-        // width: calc(50% - 10px);
         width: 100%;
         height: 100%;
-        // margin-right: 10px;
-
-        .box-c {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 224px;
-            height: 203px;
-            transform: translate(-50%, -45%);
-            background: url('../../../../../assets/images/dust/dusthome/left-box1.png') no-repeat center;
-            background-size: 100% 100%;
-        }
 
         .box-left-t {
+            display: flex;
             position: absolute;
             top: 10px;
             left: 30px;
+            flex-direction: column;
             align-items: center;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box2.png') no-repeat center;
+            justify-content:flex-start;
+            width: 100px;
+            height: 105px;
+            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
             background-size: 100% 100%;
 
 
         }
 
         .box-left-b {
+            display: flex;
             position: absolute;
             top: 10px;
             right: 30px;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box3.png') no-repeat center;
+            flex-direction: column;
+            align-items: center;
+            justify-content:flex-start;
+            width: 100px;
+            height: 105px;
+            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
             background-size: 100% 100%;
         }
 
         .box-right-t {
+            display: flex;
             position: absolute;
             bottom: 10px;
             left: 30px;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box4.png') no-repeat center;
+            flex-direction: column;
+            align-items: center;
+            justify-content:flex-start;
+            width: 100px;
+            height: 105px;
+            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
             background-size: 100% 100%;
         }
 
         .box-right-b {
+            display: flex;
             position: absolute;
             right: 30px;
             bottom: 10px;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box5.png') no-repeat center;
+            flex-direction: column;
+            align-items: center;
+            justify-content:flex-start;
+            width: 100px;
+            height: 105px;
+            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
             background-size: 100% 100%;
         }
 
+        .item-icon{
+            width: 30px;
+            height: 30px;
+            margin-bottom: 12px;
+        }
+
         .item-label {
-            position: absolute;
-            top: 2px;
             width: 100%;
-            color: #9da5aa;
+            margin-bottom: 20px;
+            color: #fff;
             font-size: 12px;
             text-align: center;
         }
 
         .item-val {
-            position: absolute;
-            top: 20px;
             width: 100%;
-            color: #1fb3f7;
-            // font-family: douyuFont;
-            font-size: 14px;
+            color: #009BFF;
+            font-size: 16px;
             font-weight: bold;
             text-align: center;
         }
-
-
     }
-
-    // .fall-right-box {
-    //     width: 50%;
-    //     height: 100%;
-
-    //     .fall-table-head {
-    //         display: flex;
-    //         align-items: center;
-    //         justify-content: space-between;
-    //         width: 100%;
-    //         height: 32px;
-    //         border-bottom: 2px solid #1f8bb2;
-    //         background: linear-gradient(to bottom, rgb(12 40 55 / 30%), rgb(19 90 124 / 90%));
-
-    //         .fall-head-item {
-    //             display: flex;
-    //             justify-content: center;
-    //             height: 32px;
-    //             color: #1fb3f7;
-    //             font-size: 12px;
-    //             line-height: 32px;
-
-    //             &:nth-child(1) {
-    //                 width: 20%;
-
-    //             }
-
-    //             &:nth-child(2) {
-    //                 width: 30%;
-    //             }
-
-    //             &:nth-child(3) {
-    //                 width: 25%;
-    //             }
-
-    //             &:nth-child(4) {
-    //                 width: 25%;
-    //             }
-    //         }
-    //     }
-
-    //     .fall-table-content {
-    //         position: relative;
-    //         width: 100%;
-    //         height: calc(100% - 32px);
-    //         overflow: hidden;
-
-    //         .seamless-warp {
-    //             width: 100%;
-    //             height: 100%;
-
-    //             .fall-content-item {
-    //                 display: flex;
-    //                 align-items: center;
-    //                 justify-content: space-between;
-    //                 height: 34px;
-
-    //                 &:nth-child(odd) {
-    //                     background-color: #0b202e;
-    //                 }
-
-    //                 &:nth-child(even) {
-    //                     background-color: #0d3144;
-    //                 }
-
-    //                 .content-item-val {
-    //                     display: inline-block;
-    //                     height: 34px;
-    //                     overflow: hidden;
-    //                     color: #fff;
-    //                     font-size: 12px;
-    //                     line-height: 34px;
-    //                     text-align: center;
-    //                     text-overflow: ellipsis;
-    //                     white-space: nowrap;
-
-    //                     &:nth-child(1) {
-    //                         width: 20%;
-    //                     }
-
-    //                     &:nth-child(2) {
-    //                         width: 30%;
-
-    //                     }
-
-    //                     &:nth-child(3) {
-    //                         width: 25%;
-    //                         color: #00ff91;
-    //                     }
-
-    //                     &:nth-child(4) {
-    //                         width: 25%;
-    //                     }
-
-    //                 }
-
-    //             }
-    //         }
-
-
-
-    //     }
-    // }
 }
 </style>

src/views/vent/dust/dustHome/components/dustGlzb.vue

@@ -1,3 +1,156 @@
+<!-- <template>
+    <div class="dustGlzb">
+        <div class="safety-head">
+            <div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{
+                item.label
+                }}</div>
+        </div>
+        <div class="safety-content">
+            <vue3-seamless-scroll hover-stop="true" :list="safetyList" :hover="true" :step="0.15" class="seamless-warp">
+                <div class="safety-content-box" v-for="(ite, ind) in safetyList" :key="ind">
+                    <span>{{ ite.wd }}</span>
+                    <span>{{ ite.sd }}</span>
+                    <span>{{ ite.fs }}</span>
+                    <span>{{ ite.sy }}</span>
+                </div>
+            </vue3-seamless-scroll>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, defineProps, watch } from 'vue'
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+
+let props = defineProps({
+    dustGlzbData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+let dustZbList = ref<any[]>([])
+let safetyHeadList = ref<any[]>([
+    { label: '温度(­°C)' },
+    { label: '湿度(%)' },
+    { label: '风速(m/s)' },
+    { label: '水压(MPa)' },
+])
+let safetyList = ref<any[]>([
+    { wd: 10, sd: 10, fs: 10, sy: 10 },
+    { wd: 10, sd: 10, fs: 10, sy: 10 },
+    { wd: 10, sd: 10, fs: 10, sy: 10 },
+    { wd: 10, sd: 10, fs: 10, sy: 10 },
+])
+
+watch(() => props.dustGlzbData, (newD, oldD) => {
+    console.log(newD, 'newD--------')
+    if (newD.length != 0) {
+        dustZbList.value = newD
+    }
+}, {
+    immediate: true,
+    deep: true
+})
+
+</script>
+
+<style lang="less" scoped>
+.dustGlzb {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .safety-head {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        padding: 0 15px;
+        background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+        background-size: 100% 100%;
+
+        .safety-head-item {
+            display: inline-block;
+            width: 25%;
+            height: 50px;
+            background: url("/src/assets/images/fire/firehome/list-head.png") no-repeat center;
+            background-position: 50% 0%;
+            background-size: 85% 64%;
+            color: #fff;
+            font-size: 14px;
+            line-height: 30px;
+            text-align: center;
+
+       
+        }
+    }
+
+    .safety-content {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        height: calc(100% - 50px);
+        overflow: hidden;
+
+        .seamless-warp {
+            width: 100%;
+
+            .safety-content-box {
+                display: flex;
+                box-sizing: border-box;
+                align-items: center;
+                justify-content: space-between;
+                height: 40px;
+                padding: 0 15px;
+                background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+                background-size: 100% 100%;
+
+                span {
+                    display: inline-block;
+                    width: 25%;
+                    height: 40px;
+                    overflow: hidden;
+
+                    /* 超出部分隐藏 */
+                    color: #fff;
+                    font-size: 12px;
+                    line-height: 38px;
+                    text-align: center;
+                    text-overflow: ellipsis;
+
+                    /* 超出部分显示省略号 */
+                    white-space: nowrap;
+
+                    &:nth-child(2) {
+                        color: #089dff;
+                        font-size: 14px;
+                    }
+
+                    &:nth-child(3) {
+                        color: #089dff;
+                        font-size: 14px;
+                    }
+
+                    &:nth-child(4) {
+                        color: #089dff;
+                        font-size: 14px;
+                    }
+
+                }
+
+            }
+        }
+    }
+}
+</style> -->
+
+
 <template>
     <div class="dustGlzb">
         <div class="dust-gl-box" v-for="(item, index) in dustZbList" :key="index">
@@ -73,7 +226,7 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
                 top: 50%;
                 right: 24px;
                 transform: translate(0, -48%);
-                color: #1fb3f7;
+                color: #089dff;
                 // font-family: douyuFont;
                 font-size: 14px;
                 font-weight: bold;

src/views/vent/dust/dustHome/components/dustJtzb.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="dustJtzb">
-        <div class="jt-title-box">
-            <div class="title-item" v-for="(item, index) in titleList" :key="index">
-                <span>{{ item.label }}</span>
-                <span>{{ item.dw }}</span>
+      
+        <div class="zb-box" v-for="(item,index) in titleList" :key="index" >
+            <div class="box-item-icon"></div>
+            <div class="box-item-label">
+                <div style="margin-bottom: 5px;">{{ item.label }}</div>
+                <div>{{ item.dw }}</div>
             </div>
-        </div>
-        <div class="jt-content-box">
-            <div class="content-item" v-for="(ite, ind) in contentList" :key="ind">{{ ite.value }}</div>
+            <div class="box-item-val">{{ item.value }}</div>
         </div>
 
     </div>
@@ -17,102 +17,72 @@
 import { ref, reactive } from 'vue'
 
 let titleList = reactive<any[]>([
-    { label: '火焰长度', dw: '(mm)' },
-    { label: '抑制煤层爆炸最低岩粉量', dw: '(%)' },
-    { label: '鉴定结论', dw: '' },
+    { label: '火焰长度', dw: '(mm)', value: '>400' },
+    { label: '抑制煤层爆炸最低岩粉量', dw: '(%)',value: '75'  },
+    { label: '鉴定结论', dw: '',value: '有煤层爆炸性' },
 ])
 
-let contentList = reactive<any[]>([
-    { value: '>400' },
-    { value: '75' },
-    { value: '有煤层爆炸性' },
-])
 
 </script>
 
 <style lang="less" scoped>
 .dustJtzb {
     display: flex;
-    position: relative;
-    flex-direction: column;
+    position: absolute;
+    top: 10px;
+    left: 0;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     width: 100%;
     height: 100%;
 
-    .jt-title-box {
+    .zb-box{
         display: flex;
+        flex-direction: column;
         align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        height: 35px;
-        border: 1px solid #1d7995;
-
-        .title-item {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            background: linear-gradient(to bottom, rgb(19 93 128 / 20%), rgb(19 93 128 / 90%));
-            color: #1da5e3;
-            font-size: 12px;
-
-            &:nth-child(1) {
-                flex: 1;
-            }
-
-            &:nth-child(2) {
-                flex: 2;
-                border-right: 1px solid #1d7995;
-                border-left: 1px solid #1d7995;
-            }
-
-            &:nth-child(3) {
-                flex: 1;
-            }
-
+        justify-content: space-around;
+        width: 32%;
+        height: 100%;
+        background: url('../../../../../assets/images/dust/dusthome/img-5.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .box-item-icon{
+            width: 32px;
+            height: 32px;
         }
 
-    }
-
-    .jt-content-box {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        height: 60px;
-        border-right: 1px solid #1d7995;
-        border-bottom: 1px solid #1d7995;
-        border-left: 1px solid #1d7995;
-
-        .content-item {
+        .box-item-label{
             display: flex;
+            flex-direction: column;
             align-items: center;
-            justify-content: center;
-            height: 100%;
+            width: 80%;
             color: #fff;
             font-size: 12px;
+            word-wrap: break-word; /* 允许在长单词内部换行 */
+            word-break: break-all; /* 允许在任意位置换行 */
+        }
 
-            &:nth-child(1) {
-                flex: 1;
-            }
-
-            &:nth-child(2) {
-                flex: 2;
-                border-right: 1px solid #1d7995;
-                border-left: 1px solid #1d7995;
-            }
+        .box-item-val{
+            width: 80%;
+            color: #089dff;
+            font-size: 14px;
+            text-align: center;
+        }
 
-            &:nth-child(3) {
-                flex: 1;
-            }
+        &:nth-child(1) .box-item-icon{
+            background: url('../../../../../assets/images/dust/dusthome/hycd.png') no-repeat center;
+            background-size: 100% 100%
+        }
 
+        &:nth-child(2) .box-item-icon{
+            background: url('../../../../../assets/images/dust/dusthome/dyfl.png') no-repeat center;
+            background-size: 100% 100%
         }
 
+        &:nth-child(3) .box-item-icon{
+            background: url('../../../../../assets/images/dust/dusthome/jdjl.png') no-repeat center;
+            background-size: 100% 100%
+        }
     }
-
-
-
-
 }
 </style>

src/views/vent/dust/dustHome/components/dustTimeNow.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="dustGlzb">
+    <div class="safety-head">
+      <div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{
+        item.label
+      }}</div>
+    </div>
+    <div class="safety-content">
+      <vue3-seamless-scroll hover-stop="true" :list="dustZbList" :hover="true" :step="0.15" class="seamless-warp">
+        <div class="safety-content-box" v-for="(ite, ind) in dustZbList" :key="ind">
+          <span>{{ ite.label }}</span>
+          <span>{{ ite.temperature }}</span>
+          <span>{{ ite.windSpeed }}</span>
+          <span>{{ ite.dust }}</span>
+
+        </div>
+      </vue3-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, defineProps, watch } from 'vue'
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+
+let props = defineProps({
+  timeNowData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
+let dustZbList = ref<any[]>([])
+let safetyHeadList = ref<any[]>([
+  { label: '名称' },
+  { label: '温度(­°C)' },
+  // { label: '湿度(%)' },
+  { label: '风速(m/s)' },
+  { label: '粉尘浓度' }
+  // { label: '水压(MPa)' },
+])
+
+
+watch(() => props.timeNowData, (newT, oldT) => {
+  console.log(newT, 'newT--------')
+  if (newT.length != 0) {
+    dustZbList.value = newT
+  }
+}, {
+  immediate: true,
+  deep: true
+})
+
+</script>
+
+<style lang="less" scoped>
+.dustGlzb {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .safety-head {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 0 15px;
+    background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+    background-size: 100% 100%;
+
+    .safety-head-item {
+      display: inline-block;
+      width: 25%;
+      height: 50px;
+      background: url("/src/assets/images/fire/firehome/list-head.png") no-repeat center;
+      background-position: 50% 0%;
+      background-size: 85% 64%;
+      color: #fff;
+      font-size: 14px;
+      line-height: 30px;
+      text-align: center;
+
+
+    }
+  }
+
+  .safety-content {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: calc(100% - 50px);
+    overflow: hidden;
+
+    .seamless-warp {
+      width: 100%;
+
+      .safety-content-box {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 15px;
+        background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+        background-size: 100% 100%;
+
+        span {
+          display: inline-block;
+          width: 25%;
+          height: 40px;
+          overflow: hidden;
+
+          /* 超出部分隐藏 */
+          color: #fff;
+          font-size: 12px;
+          line-height: 38px;
+          text-align: center;
+          text-overflow: ellipsis;
+
+          /* 超出部分显示省略号 */
+          white-space: nowrap;
+
+          &:nth-child(2) {
+            color: #089dff;
+            font-size: 14px;
+          }
+
+          &:nth-child(3) {
+            color: #089dff;
+            font-size: 14px;
+          }
+
+          &:nth-child(4) {
+            color: #089dff;
+            font-size: 14px;
+          }
+        }
+
+      }
+    }
+  }
+}
+</style>

src/views/vent/dust/dustHome/components/dustWork.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="workJc">
+    <div class="echart-workJc" :style="{ height: heightT }">
+
+      <div class="workJc-l">{{ echartDatas || 0 }}</div>
+      <div class="workJc-r">
+        <div class="workJc-r-box" v-for="(item, index) in fxLenged" :key="index">
+          <div class="r-box-label">{{ item.name }}</div>
+          <div class="r-box-val">{{ item.value || 0 }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="card-workJc" :style="{ height: heightB }">
+      <vue3-seamless-scroll hover-stop="true" :list="cardList" :hover="true" :step="0.15" :copy-num="3"
+        class="seamless-warp">
+        <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
+          <div class="card-l-label">{{ ite.title }}</div>
+          <div class="card-l-val">{{ ite.val || 0 }}</div>
+          <div class="card-r-label">{{ ite.label }}</div>
+         
+          <div class="card-r-des">
+            <span>最大值：</span>
+            <span style="color:#089dff">{{ ite.val1 || 0 }}</span>
+          </div>
+        </div>
+      </vue3-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+
+let props = defineProps({
+  heightT: {
+    type: String,
+    default: '0%',
+  },
+  heightB: {
+    type: String,
+    default: '0%',
+  },
+  cardData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  echartData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+});
+
+//获取dom节点
+let ring = ref();
+
+let fxLenged = reactive<any[]>([]);//图表数据
+let echartDatas = ref(0)
+let cardList = ref<any[]>([]);
+
+watch(() => props.cardData, (newC, oldC) => {
+  console.log(newC, 'newC-------')
+  cardList.value = newC
+}, { immediate: true, deep: true })
+
+watch(() => props.echartData, (newV, oldV) => {
+  console.log(newV, '图表数据------')
+  if (newV.length != 0) {
+    fxLenged.length = 0
+    newV.forEach(el => {
+      fxLenged.push({ name: el.label, value: el.value })
+    })
+    let maxValue = fxLenged.sort((a, b) => b.value - a.value)
+    echartDatas.value=maxValue[0].value
+  }
+}, { immediate: true, deep: true })
+
+
+</script>
+
+<style lang="less" scoped>
+.workJc {
+  width: 100%;
+  height: 100%;
+
+  .echart-workJc {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+
+    .workJc-l {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 110px;
+      height: 110px;
+      background: url('../../../../../assets/images/dust/dusthome/img-7.png') no-repeat center;
+      background-size: 100% 100%;
+      color: #089dff;
+      font-size: 16px
+    }
+
+    .workJc-r {
+      display: flex;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: calc(100% - 110px);
+      height: 110px;
+      padding: 0 30px;
+
+      .workJc-r-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: calc(50% - 10px);
+        height: calc(50% - 10px);
+        padding-left: 20px;
+        background: url('../../../../../assets/images/fire/firehome/img-1.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .r-box-label {
+          margin-bottom: 5px;
+          color: #fff;
+          font-size: 12px;
+        }
+
+        .r-box-val {
+          color: #089dff;
+          font-size: 16px;
+        }
+      }
+    }
+
+
+  }
+
+  .card-workJc {
+    position: relative;
+    overflow: hidden;
+
+    .seamless-warp {
+      width: 100%;
+      height: 100%;
+
+      .card-box {
+        position: relative;
+        width: 100%;
+        height: 155px;
+        margin-bottom: 10px;
+        background: url('../../../../../assets/images/fire/firehome/img-3.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .card-l-label {
+          position: absolute;
+          top: 22px;
+          left: 38px;
+          color: #fff;
+          font-size: 14px;
+          letter-spacing: 2px;
+        }
+
+        .card-l-val {
+          position: absolute;
+          top: 48%;
+          left: 50px;
+          color: #089dff;
+          font-size: 36px;
+          font-weight: bold
+        }
+
+        .card-r-label {
+          position: absolute;
+          top: 22px;
+          left: 150px;
+          color: #fff;
+          font-size: 14px;
+        }
+
+        .card-r-des {
+          position: absolute;
+          top: 88px;
+          left: 150px;
+          width: 220px;
+          color: #fff;
+          font-size: 14px;
+        }
+      }
+    }
+
+
+
+  }
+}
+</style>

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

@@ -1,9 +1,5 @@
 <template>
   <div class="dustHome">
-    <!-- 模型区域 -->
-    <!-- <div class="moduleArea">
-      <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
-    </div> -->
     <div class="main-container">
       <transition name="fade" mode="out-in">
         <div class="left-area" v-if="isShow">
@@ -16,50 +12,49 @@
                 <div>监测区域</div>
               </div>
               <div class="tcontent-c">
-                <div style="color: #1fb3f7; font-size: 24px;font-weight:bolder;letter-spacing:10px">低风险</div>
+                <div style="color: #009BFF; font-size: 28px;font-weight:bolder;letter-spacing:10px;">低风险</div>
               </div>
               <div class="tcontent-r">粉尘灾害</div>
             </div>
           </div>
           <!-- 左中区域 -->
           <div class="left-c">
-            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '746px' }">
-              <workJc :heightT="'18%'" :heightB="'82%'" :cardData="cardData" :echartData="echartDataWork" />
+            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '526px' }" :bgSize="'large'">
+              <workJc :heightT="'25%'" :heightB="'75%'" :cardData="cardData" :echartData="echartDataWork" />
             </DanelBd>
           </div>
           <!-- 左底部区域 -->
-          <!-- <div class="left-f">
-            <DanelBd
-              :moduleName="'GIS重点区域风险监测'"
-              :contentStyle="{ contentH: '0px' }"
-              commonTitle="switchs"
-            />
-          </div> -->
+          <div class="left-f">
+            <DanelBd :moduleName="'粉尘实时浓度监测'" :contentStyle="{ contentH: '224px' }" 
+              :bgSize="'middle'">
+              <dustTimeNow :timeNowData="selectListBd1"></dustTimeNow>
+            </DanelBd>
+          </div>
         </div>
       </transition>
 
       <div :class="isShow ? 'center-area' : 'center-area1'">
         <div :class="isShow ? 'center-t' : 'center-t1'">
           <div class="center-scalc" @click="getScalc">
-            <div  :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
-            <div  :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
-            <div  :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
+            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
             <div :class="toggleOpen ? 'scalc-btn1' : 'scalc-btn'" @click="getScalc1">
-            <ExpandOutlined  class="scalc-icon" />
+              <ExpandOutlined class="scalc-icon" />
             </div>
             <div :class="toggleOpen ? 'scalc-btn2' : 'scalc-btn'">
-              <InfoCircleOutlined  class="scalc-icon" />
+              <InfoCircleOutlined class="scalc-icon" />
             </div>
           </div>
-           
+
 
           <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe>
           <!-- <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe> -->
         </div>
         <transition name="fade" mode="out-in">
           <div class="center-b" v-if="isShow">
-            <DanelBd :moduleName="'工作面粉尘浓度'" :contentStyle="{ contentH: '245px' }" :commonTitle="'selected'"
-              :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect">
+            <DanelBd :moduleName="'工作面粉尘浓度'" :contentStyle="{ contentH: '222px' }" :commonTitle="'selected'"
+              :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect" :bgSize="''">
               <multipleDust :echartData="echartData" />
             </DanelBd>
           </div>
@@ -70,21 +65,21 @@
         <div class="right-area" v-if="isShow">
           <!-- 右上区域 -->
           <div class="right-t">
-            <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '306px' }">
+            <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '330px' }" :bgSize="'large'">
               <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
                 :unInterTotal="unInterTotal" :pwData="pwData" />
             </DanelBd>
           </div>
           <!-- 右中区域 -->
           <div class="right-c">
-            <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '280px' }">
+            <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '328px' }" :bgSize="'middle'">
               <dustGlzb :dustGlzbData="dustGlzbData" />
             </DanelBd>
           </div>
           <!-- 右下区域 -->
           <div class="right-b">
             <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
-              :selectList="selectListJt" :selectValue="jtzbCode">
+              :selectList="selectListJt" :selectValue="jtzbCode" :bgSize="'middle'">
               <dustJtzb />
             </DanelBd>
           </div>
@@ -98,11 +93,12 @@
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import { ExpandOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
 import DanelBd from '../../common/danelBd.vue';
-import workJc from '../../fire/fireHome/components/workJc.vue';
+import workJc from './components/dustWork.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';
+import dustTimeNow from './components/dustTimeNow.vue'
 import {
   getAreaTypeList,
   getRealSensorDataByType,
@@ -124,6 +120,7 @@ let areaType = ref('');
 
 //综采工作面粉尘浓度数据
 let selectListBd = reactive<any[]>([]);
+let selectListBd1 = reactive<any[]>([]);
 let sensorCode = ref('');
 let echartData = reactive({
   xData: [],
@@ -160,7 +157,7 @@ let jtzbCode = ref('0');
 function getScalc() {
   toggleOpen.value = !toggleOpen.value
 }
-function getScalc1(){
+function getScalc1() {
   isShow.value = !isShow.value;
 }
 
@@ -185,6 +182,7 @@ function changeSelect(data) {
   getDustInfosList();
 }
 
+
 //获取工作面风险监测图表数据
 async function getDustWarningCntByTypeList() {
   let res = await getDustWarningCntByType({ areaType: 2 })
@@ -222,9 +220,11 @@ async function getFireAreaInfoList() {
 }
 //获取粉尘选项数据
 async function getRealSensorDataByTypeList() {
-  let res = await getRealSensorDataByType({ areaType: areaType.value });
+  // let res = await getRealSensorDataByType({ areaType: areaType.value });
+  let res = await getRealSensorDataByType({ areaType: 2 });
   if (res.length != 0) {
     selectListBd.length = 0;
+    selectListBd1.length = 0;
     res.forEach((el) => {
       selectListBd.push({
         label: el.name,
@@ -234,6 +234,18 @@ async function getRealSensorDataByTypeList() {
         windSpeed: el.windSpeed,
         waterPressure: el.waterPressure,
       });
+      if (el.displayStatus) {
+        selectListBd1.push({
+          label: el.name,
+          value: el.code,
+          temperature: el.temperature,
+          humidity: el.humidity,
+          windSpeed: el.windSpeed,
+          waterPressure: el.waterPressure,
+          dust:el.dust
+        });
+      }
+
     });
     sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
     //获取单项数据
@@ -334,42 +346,30 @@ onUnmounted(() => {
 .dustHome {
   position: relative;
   width: 100%;
-  height: 928px;
-
-  .moduleArea {
-    width: 100%;
-    height: 100%;
-  }
+  height: 1032px;
+  background: url('../../../../assets/images/fire/firehome/bg.png') no-repeat center;
+  background-size: 100% 100%;
 
   .main-container {
     display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
     box-sizing: border-box;
     justify-content: space-between;
     width: 100%;
     height: 100%;
-    padding: 15px 10px;
+    padding: 15px 30px 35px;
 
     .left-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: calc((100% - 1010px - 40px) / 2);
       height: 100%;
-      margin-right: 15px;
 
       .left-t {
         position: relative;
-        width: 100%;
-        // height: 121px;
-        height: 100px;
+        height: 115px;
+        margin-bottom: 25px;
         background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
         background-size: 100% 100%;
 
+
         .tcontent-area {
           display: flex;
           position: absolute;
@@ -379,9 +379,9 @@ onUnmounted(() => {
           align-items: center;
           justify-content: space-around;
           width: 100%;
-          height: 90px;
+          height: 70px;
           padding: 0 15px;
-          transform: translate(0, -50%);
+          transform: translate(0, -40%);
 
           .tcontent-l {
             display: flex;
@@ -422,25 +422,24 @@ onUnmounted(() => {
 
       .left-c {
         width: 100%;
+        margin-bottom: 25px;
       }
 
-      // .left-f {
-      //   width: 100%;
-      // }
+      .left-f {
+        width: 100%;
+      }
     }
 
     .center-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: calc(100% - 814px);
+      width: 1010px;
+      height: 100%;
+      margin: 0 20px;
 
       .center-t {
         position: relative;
         width: 100%;
-        height: calc(100% - 295px);
-        margin-bottom: 15px;
+        height: 698px;
+        margin-bottom: 25px;
         overflow: hidden;
 
         .center-scalc {
@@ -586,7 +585,7 @@ onUnmounted(() => {
 
       .center-b {
         width: 100%;
-        height: 280px;
+        height: calc(100% - 723px)
       }
     }
 
@@ -747,21 +746,17 @@ onUnmounted(() => {
     }
 
     .right-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: calc((100% - 1010px - 40px) / 2);
       height: 100%;
-      margin-left: 15px;
 
       .right-t {
         width: 100%;
+        margin-bottom: 25px;
       }
 
       .right-c {
         width: 100%;
+        margin-bottom: 25px;
       }
 
       .right-b {

src/views/vent/fire/fireHome/components/emptyJc.vue

@@ -43,56 +43,56 @@ watch(() => props.emptyData, (newE, oldE) => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: url('../../../../../assets/images/fire/firehome/empty-qp.png') no-repeat center;
+    background: url('../../../../../assets/images/fire/firehome/img-4.png') no-repeat center;
     background-size: 100% 100%;
 
     &:nth-child(1) {
-      top: 32px;
-      left: 0;
-      width: 100px;
-      height: 100px;
+      top: 52px;
+      left: 132px;
+      width: 130px;
+      height: 130px;
     }
 
     &:nth-child(2) {
-      top: 100px;
-      left: 45px;
-      width: 80px;
-      height: 80px;
+      top: 5px;
+      left: 55px;
+      width: 85px;
+      height: 85px;
     }
 
     &:nth-child(3) {
-      top: 70px;
-      left: 120px;
-      width: 90px;
-      height: 90px;
+      top: 80px;
+      left: 10px;
+      width: 100px;
+      height: 100px;
     }
 
     &:nth-child(4) {
-      top: 40px;
-      left: 185px;
-      width: 100px;
-      height: 100px;
+      bottom: 0;
+      left: 90px;
+      width: 70px;
+      height: 70px;
     }
 
     &:nth-child(5) {
-      top: 60px;
-      left: 290px;
-      width: 80px;
-      height: 80px;
+      top: 20px;
+      right: 50px;
+      width: 85px;
+      height: 85px;
     }
 
     &:nth-child(6) {
-      top: -7px;
-      left: 298px;
-      width: 80px;
-      height: 80px
+      top: 90px;
+      right: 10px;
+      width: 100px;
+      height: 100px;
     }
 
     &:nth-child(7) {
-      top: 30px;
-      left: 420px;
-      width: 90px;
-      height: 90px;
+      right: 90px;
+      bottom: 5px;
+      width: 70px;
+      height: 70px;
     }
 
     .empty-label {

src/views/vent/fire/fireHome/components/fiberBunbleJc.vue

@@ -33,7 +33,8 @@ let props = defineProps({
 let fiberBunbleJcList = ref<any[]>([]);
 
 watch(() => props.bunbleData, (newB, oldB) => {
-  if (newB.length != 0) {
+  console.log(newB,'newB---------')
+  if (newB.length == 0) {
     fiberBunbleJcList.value = newB
   }
 }, { immediate: true, deep: true })
@@ -52,8 +53,8 @@ watch(() => props.bunbleData, (newB, oldB) => {
   .fiberBunbleJc-box {
     position: relative;
     width: 100%;
-    height: 58px;
-    background: url('../../../../../assets/images/fire/firehome/fiber-jc.png') no-repeat center;
+    height: 65px;
+    background: url('../../../../../assets/images/fire/firehome/img-7.png') no-repeat center;
     background-size: 100% 100%;
 
     .jc-title {
@@ -61,33 +62,32 @@ watch(() => props.bunbleData, (newB, oldB) => {
       top: 50%;
       transform: translate(0, -50%);
       color: #fff;
-      // font-family: douyuFont;
       font-size: 14px;
       font-weight: bolder;
     }
 
     &:nth-child(1) .jc-title {
-      left: 112px;
+      left: 54px;
     }
 
     &:nth-child(2) .jc-title {
-      left: 92px;
+      left: 50px;
     }
 
     &:nth-child(3) .jc-title {
-      left: 92px;
+      left: 54px;
     }
 
     &:nth-child(4) .jc-title {
-      left: 112px;
+      left: 50px;
     }
 
     &:nth-child(5) .jc-title {
-      left: 112px;
+      left: 46px;
     }
 
     &:nth-child(6) .jc-title {
-      left: 112px;
+      left: 46px;
     }
 
     &:nth-child(7) .jc-title {
@@ -95,36 +95,43 @@ watch(() => props.bunbleData, (newB, oldB) => {
     }
 
     .jc-item {
+      display: flex;
       position: absolute;
-      top: 10%;
-      left: 30%;
+      left: 20%;
+      align-items: center;
+      height: 100%;
     }
 
     .jc-item1 {
+      display: flex;
       position: absolute;
-      top: 10%;
-      left: 60%;
+      left: 40%;
+      align-items: center;
+      height: 100%
     }
 
     .jc-item2 {
+      display: flex;
       position: absolute;
-      top: 50%;
-      left: 30%;
+      left: 70%;
+      align-items: center;
+      height: 100%
     }
 
     .item-label {
-      color: #9da5aa;
+      color: #fff;
       font-size: 12px;
     }
 
     .item-val {
-      color: #fff;
-      font-size: 12px;
+      margin-left: 10px;
+      color: #089dff;
+      font-size: 14px;
     }
 
     .item-dw {
       margin-left: 5px;
-      color: #fff;
+      color: #089dff;
     }
   }
 }

src/views/vent/fire/fireHome/components/outFireJc.vue

@@ -1,24 +1,16 @@
 <template>
   <div class="outFireJc">
-    <vue3-seamless-scroll hover-stop="true" :list="outFireList" :hover="true" :step="0.15" :direction="'left'"
-      limitMoveNum="3" :copy-num="1" :single-line="true" class="seamless-warp1">
-      <div class="outFire-box" v-for="(item, index) in outFireList" :key="index">
-        <div class="outFire-icon"></div>
-        <div class="outFire-title">{{ item.title }}</div>
-        <div class="outFire-val">
-          <span>{{ item.val }}</span>
-          <span>{{ item.dw }}</span>
-        </div>
-        <div class="outFire-label">{{ item.label }}</div>
-      </div>
-    </vue3-seamless-scroll>
+    <div class="outFire-box" v-for="(item, index) in outFireList" :key="index">
+      <div class="outFire-title">{{ item.title }}</div>
+      <div class="outFire-label">{{ item.label }}</div>
+      <div class="outFire-val">{{ `${item.val}${item.dw}` }}</div>
+    </div>
 
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, defineProps, watch } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 
 let props = defineProps({
   outFireData: {
@@ -41,109 +33,48 @@ watch(() => props.outFireData, (newO, oldO) => {
 
 <style lang="less" scoped>
 .outFireJc {
-  // display: flex;
+  display: flex;
   position: relative;
-  // align-items: center;
-  // justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
 
-  .seamless-warp1 {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .outFire-box {
-      position: relative;
-      width: 105px;
-      height: 145px;
-      margin: 0 9px;
-      background: url('../../../../../assets/images/fire/firehome/miehuo.png') no-repeat center;
-      background-size: 100% 100%;
-
-      .outFire-title {
-        position: absolute;
-        top: 20px;
-        width: 100%;
-        color: #fff;
-        font-size: 12px;
-        text-align: center;
-      }
-
-      .outFire-val {
-        position: absolute;
-        top: 68px;
-        width: 100%;
-        text-align: center;
-
-        span {
-          color: #1fb3f7;
-          font-size: 20px;
-          font-weight: bold;
-        }
-      }
-
-      .outFire-label {
-        position: absolute;
-        top: 114px;
-        width: 100%;
-        color: #9da5aa;
-        font-size: 12px;
-        text-align: center;
-      }
-
-      &:nth-child(1) .outFire-icon {
-        position: absolute;
-        top: 54px;
-        left: 28px;
-        width: 53px;
-        height: 77px;
-        background: url('../../../../../assets/images/fire/firehome/temp.png') no-repeat center;
-        background-size: 100% 100%;
-      }
-
-      &:nth-child(2) .outFire-icon {
-        position: absolute;
-        top: 65px;
-        left: 13px;
-        width: 80px;
-        height: 58px;
-        background: url('../../../../../assets/images/fire/firehome/co1.png') no-repeat center;
-        background-size: 100% 100%;
-      }
-
-      &:nth-child(3) .outFire-icon {
-        position: absolute;
-        top: 61px;
-        left: 16px;
-        width: 74px;
-        height: 74px;
-        background: url('../../../../../assets/images/fire/firehome/smoke.png') no-repeat center;
-        background-size: 100% 100%;
-      }
+  .outFire-box {
+    display: flex;
+    box-sizing: border-box;
+    width: 90%;
+    height: 145px;
+    padding-top: 10px;
+    background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+    background-size: 100% 100%;
+      color: #fff;
+    font-size: 14px;
+
+    .outFire-title{
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      height: 100%;
+      font-size: 12px;
+    }
 
-      &:nth-child(4) .outFire-icon {
-        position: absolute;
-        top: 65px;
-        left: 13px;
-        width: 80px;
-        height: 58px;
-        background: url('../../../../../assets/images/fire/firehome/co1.png') no-repeat center;
-        background-size: 100% 100%;
-      }
+    .outFire-label{
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      height: 100%;
+      font-size: 12px;
+    }
 
-      &:nth-child(5) .outFire-icon {
-        position: absolute;
-        top: 61px;
-        left: 16px;
-        width: 74px;
-        height: 74px;
-        background: url('../../../../../assets/images/fire/firehome/smoke.png') no-repeat center;
-        background-size: 100% 100%;
-      }
+    .outFire-val{
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      height: 100%;
+      color: #089dff;
     }
   }
-
-
 }
 </style>

src/views/vent/fire/fireHome/components/safetyJc.vue

@@ -75,100 +75,72 @@ watch(() => props.safetyList, (newL, oldL) => {
     box-sizing: border-box;
     align-items: center;
     justify-content: space-between;
-    height: 30px;
-    padding: 0 7px;
+    height: 50px;
+    padding: 0 15px;
+    background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+    background-size: 100% 100%;
 
     .safety-head-item {
-      height: 30px;
-      color: #1fb3f7;
-      font-size: 12px;
-      font-weight: bold;
+      display: inline-block;
+      width: 25%;
+      height: 50px;
+      background: url("/src/assets/images/fire/firehome/list-head.png") no-repeat center;
+      background-position: 50% 0%;
+      background-size: 85% 64%;
+      color: #fff;
+      font-size: 14px;
       line-height: 30px;
       text-align: center;
 
-      &:nth-child(1) {
-        display: inline-block;
-        width: 30%;
+      // &:nth-child(1) {
+      //   display: inline-block;
+      //   width: 30%;
 
-      }
+      // }
 
-      &:nth-child(2) {
-        display: inline-block;
-        width: 20%;
+      // &:nth-child(2) {
+      //   display: inline-block;
+      //   width: 20%;
 
-      }
+      // }
 
-      &:nth-child(3) {
-        display: inline-block;
-        width: 20%;
-      }
+      // &:nth-child(3) {
+      //   display: inline-block;
+      //   width: 20%;
+      // }
 
-      &:nth-child(4) {
-        display: inline-block;
-        width: 30%;
-      }
+      // &:nth-child(4) {
+      //   display: inline-block;
+      //   width: 30%;
+      // }
 
     }
 
     .safety-head-item0 {
-      height: 30px;
-      color: #1fb3f7;
-      font-size: 12px;
-      font-weight: bold;
+      display: inline-block;
+      width: 33.3%;
+      height: 50px;
+      background: url("/src/assets/images/fire/firehome/list-head.png") no-repeat center;
+      background-position: 50% 0%;
+      background-size: 62% 64%;
+      color: #fff;
+      font-size: 14px;
       line-height: 30px;
       text-align: center;
 
-      &:nth-child(1) {
-        display: inline-block;
-        width: 50%;
-
-      }
-
-      &:nth-child(2) {
-        display: inline-block;
-        width: 20%;
-
-      }
-
-      &:nth-child(3) {
-        display: inline-block;
-        width: 30%;
-      }
     }
 
     .safety-head-item1 {
-      height: 30px;
-      color: #1fb3f7;
-      font-weight: bold;
+      display: inline-block;
+      width: 20%;
+      height: 50px;
+      background: url("/src/assets/images/fire/firehome/list-head.png") no-repeat center;
+      background-position: 50% 0%;
+      background-size: 62% 64%;
+      color: #009BFF;
+      font-size: 14px;
       line-height: 30px;
       text-align: center;
-
-      &:nth-child(1) {
-        display: inline-block;
-        width: 20%;
-      }
-
-      &:nth-child(2) {
-        display: inline-block;
-        width: 20%;
-
-      }
-
-      &:nth-child(3) {
-        display: inline-block;
-        width: 20%;
-      }
-
-      &:nth-child(4) {
-        display: inline-block;
-        width: 20%;
-      }
-
-      &:nth-child(5) {
-        display: inline-block;
-        width: 20%;
-      }
-
     }
   }
 
@@ -178,7 +150,7 @@ watch(() => props.safetyList, (newL, oldL) => {
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    height: calc(100% - 30px);
+    height: calc(100% - 50px);
     overflow: hidden;
 
     .seamless-warp {
@@ -189,51 +161,44 @@ watch(() => props.safetyList, (newL, oldL) => {
         box-sizing: border-box;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
-        height: 24px;
-        margin-bottom: 10px;
-        padding: 0 7px;
-        background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
+        height: 40px;
+        padding: 0 15px;
+        background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
         background-size: 100% 100%;
 
         span {
-          height: 24px;
+          display: inline-block;
+          width: 25%;
+          height: 40px;
           overflow: hidden;
 
           /* 超出部分隐藏 */
           color: #fff;
           font-size: 12px;
-          line-height: 24px;
+          line-height: 38px;
           text-align: center;
           text-overflow: ellipsis;
 
           /* 超出部分显示省略号 */
           white-space: nowrap;
 
-          /* 不换行 */
-
-          &:nth-child(1) {
-            display: inline-block;
-            width: 30%;
-            background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
           &:nth-child(2) {
-            display: inline-block;
-            width: 20%;
+            color: #089dff;
+            font-size: 14px;
           }
 
           &:nth-child(3) {
-            display: inline-block;
-            width: 20%;
+            color: #089dff;
+            font-size: 14px;
           }
 
           &:nth-child(4) {
-            display: inline-block;
-            width: 30%;
+            color: #089dff;
+            font-size: 14px;
           }
+
         }
+
       }
 
       .safety-content-box0 {
@@ -241,45 +206,37 @@ watch(() => props.safetyList, (newL, oldL) => {
         box-sizing: border-box;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
-        height: 24px;
-        margin-bottom: 10px;
-        padding: 0 7px;
-        background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
+        height: 40px;
+        padding: 0 15px;
+        background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
         background-size: 100% 100%;
 
         span {
-          height: 24px;
+          display: inline-block;
+          width: 33.3%;
+          height: 40px;
           overflow: hidden;
 
           /* 超出部分隐藏 */
           color: #fff;
           font-size: 12px;
-          line-height: 24px;
+          line-height: 38px;
           text-align: center;
           text-overflow: ellipsis;
 
           /* 超出部分显示省略号 */
           white-space: nowrap;
 
-          /* 不换行 */
-
-          &:nth-child(1) {
-            display: inline-block;
-            width: 50%;
-            background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
           &:nth-child(2) {
-            display: inline-block;
-            width: 20%;
+            color: #089dff;
+            font-size: 14px;
           }
 
           &:nth-child(3) {
-            display: inline-block;
-            width: 30%;
+            color: #089dff;
+            font-size: 14px;
           }
+
         }
       }
 
@@ -288,61 +245,42 @@ watch(() => props.safetyList, (newL, oldL) => {
         box-sizing: border-box;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
-        height: 24px;
-        margin-bottom: 10px;
-        padding: 0 7px;
-        background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
+        height: 40px;
+        padding: 0 15px;
+        background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
         background-size: 100% 100%;
 
         span {
-          height: 24px;
+          display: inline-block;
+          width: 20%;
+          height: 40px;
           overflow: hidden;
 
           /* 超出部分隐藏 */
           color: #fff;
-          font-size: 14px;
-          line-height: 24px;
+          font-size: 12px;
+          line-height: 38px;
           text-align: center;
           text-overflow: ellipsis;
 
           /* 超出部分显示省略号 */
           white-space: nowrap;
 
-          /* 不换行 */
-
-          &:nth-child(1) {
-            display: inline-block;
-            width: 20%;
-            background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
           &:nth-child(2) {
-            display: inline-block;
-            width: 20%;
+            color: #089dff;
+            font-size: 14px;
           }
 
           &:nth-child(3) {
-            display: inline-block;
-            width: 20%;
+            color: #089dff;
+            font-size: 14px;
           }
 
-          &:nth-child(4) {
-            display: inline-block;
-            width: 20%;
-          }
 
-          &:nth-child(5) {
-            display: inline-block;
-            width: 20%;
-          }
         }
+
       }
     }
-
-
-
   }
 }
 </style>

src/views/vent/fire/fireHome/components/substationJc.vue

@@ -1,221 +1,80 @@
 <template>
   <div class="substationJc">
-    <div class="substation-box" ref="substation"></div>
+    <div class="substation-box" v-for="(item, index) in substationList" :key="index">
+      <div class="substation-title">{{ item.title }}</div>
+      <div class="substation-label">{{ item.label }}</div>
+      <div class="substation-val">{{ `${item.val}${item.dw}` }}</div>
+    </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, reactive, defineProps, watch } from 'vue'
-import * as echarts from 'echarts';
+import { ref, reactive, defineProps, watch } from 'vue';
 
 let props = defineProps({
-  echartDatas: {
-    type: Object,
+  substationData: {
+    type: Array,
     default: () => {
-      return {}
+      return []
     }
   }
 })
-//获取dom节点
-let substation = ref()
-
-let echartData = reactive({
-  xData: [],
-  yData: [],
-  yData1: []
-})
-
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(substation.value);
-    let option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'cross',
-        },
-      },
-
-      legend: {
-        align: 'left',
-        right: '4%',
-        top: '0%',
-        type: 'plain',
-        textStyle: {
-          color: '#7ec7ff',
-          fontSize: 12,
-        },
-        // icon:'rect',
-        itemGap: 25,
-        itemWidth: 18,
-        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-        data: [
-          {
-            name: '实时值',
-          },
-          {
-            name: '监测值',
-          },
-          // {
-          //   name: '工作面需风'
-          // }
-        ],
-      },
-
-      grid: {
-        top: '20%',
-        left: '6%',
-        right: '6%',
-        bottom: '0%',
-        containLabel: true,
-      },
-
-      xAxis: [
-        {
-          type: 'category',
-          // boundaryGap: false,
-          axisLine: {
-            //坐标轴轴线相关设置。数学上的x轴
-            show: true,
-            lineStyle: {
-              color: 'rgba(62, 103, 164)',
-            },
-          },
-          axisLabel: {
-            //坐标轴刻度标签的相关设置
-            textStyle: {
-              color: '#b3b8cc',
-              padding: 0,
-              fontSize: 12,
-            },
-            formatter: function (data) {
-              return data;
-            },
-          },
-          splitLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false,
-          },
-          data: echartData.xData,
-        },
-      ],
-
-      yAxis: [
-        {
-          name: 'm³/min',
-          nameTextStyle: {
-            color: '#b3b8cc',
-            fontSize: 12,
-            padding: 0,
-          },
-          min: 0,
-          splitNumber: 3,
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(62, 103, 164,.4)',
-            },
-          },
-          axisLine: {
-            show: false,
-            // lineStyle: {
-            //   color: 'rgba(62, 103, 164)',
-            // },
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#b3b8cc',
-              padding: 0,
-              fontSize: 12,
-            },
-            formatter: function (value) {
-              if (value === 0) {
-                return value;
-              }
-              return value;
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-        },
-      ],
-      series: [
-        {
-          name: '实时值',
-          type: 'line',
-          yAxisIndex: 0,
-          symbolSize: 6,
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: 'orange', // 线条颜色
-            },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: 'orange',
-            borderColor: '#646ace',
-            borderWidth: 0,
-          },
-          data: echartData.yData,
-        },
-        {
-          name: '监测值',
-          type: 'line',
-          yAxisIndex: 0,
-          symbolSize: 6,
-
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: '#1891de', // 线条颜色
-            },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: '#1891de',
-            borderColor: '#646ace',
-            borderWidth: 0,
-          },
-          data: echartData.yData1,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
-watch(() => props.echartDatas, (newE, oldE) => {
-  console.log(newE, 'newE-------')
-  echartData.xData = newE.xData
-  echartData.yData = newE.yData
-  echartData.yData1 = newE.yData1
-  getOption()
-}, {
-  immediate: true,
-  deep: true
-})
-
 
+let substationList = ref<any[]>([]);
 
+watch(() => props.substationData, (newS, oldS) => {
+  console.log(newS, 'newS--------')
+  if (newS.length != 0) {
+    substationList.value = newS
+  }
+}, { immediate: true, deep: true })
 </script>
 
 <style lang="less" scoped>
 .substationJc {
+  display: flex;
   position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
 
   .substation-box {
-    width: 100%;
-    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    width: 90%;
+    height: 145px;
+    padding-top: 30px;
+    background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
+    background-size: 100% 100%;
+    color: #fff;
+    font-size: 14px;
+
+    .substation-title {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      height: 100%;
+      font-size: 12px;
+    }
+
+    .substation-label {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      height: 100%;
+      font-size: 12px;
+    }
+
+    .substation-val {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      height: 100%;
+      color: #089dff;
+    }
   }
 }
-</style>
+</style>

src/views/vent/fire/fireHome/components/systemJc.vue

@@ -1,30 +1,32 @@
 <template>
   <div class="systemJc">
     <div class="systemJc-box" v-for="(item, index) in systemJcList" :key="index" @click="getDetail(index)">
-      <div class="system-label">{{ item.label }}</div>
+      <div class="system-icon"></div>
+      <div class="system-label-t">{{ item.labelT }}</div>
+      <div class="system-label-b">{{ item.labelB }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import {useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 let router = useRouter(); //路由
 
-let systemJcList = reactive([{ label: '智能灌浆系统' }, { label: '智能注氮系统' }]);
+let systemJcList = reactive([{ labelT: '智能', labelB: '灌浆系统' }, { labelT: '智能', labelB: '注氮系统' }]);
 
 function getDetail(index) {
   switch (index) {
     case 0:
-    router.push({
-      path: '/fire/fire-zhuj',
-    });
+      router.push({
+        path: '/fire/fire-zhuj',
+      });
       break;
     case 1:
-    router.push({
-      path: '/fire/fire-zhud',
-    });
+      router.push({
+        path: '/fire/fire-zhud',
+      });
       break;
   }
 }
@@ -40,21 +42,44 @@ function getDetail(index) {
   height: 100%;
 
   .systemJc-box {
+    display: flex;
     position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
     width: 168px;
     height: 100%;
-    background: url('../../../../../assets/images/fire/firehome/zu-14578.png') no-repeat center;
+    background: url('../../../../../assets/images/fire/firehome/img-5.png') no-repeat center;
     background-size: 100% 100%;
     cursor: pointer;
 
-    .system-label {
-      position: absolute;
-      top: 14px;
-      left: 50%;
-      transform: translate(-50%, 0);
+    .system-icon {
+      width: 24px;
+      height: 32px;
+      margin-bottom: 5px;
+    }
+
+    .system-label-t {
+      margin-bottom: 25px;
+      color: #fff;
+      font-size: 16px;
+    }
+
+    .system-label-b {
       color: #fff;
-      font-size: 12px;
+      font-size: 16px;
+    }
+
+    &:nth-child(1) .system-icon {
+      background: url('../../../../../assets/images/fire/firehome/zjxt.png') no-repeat center;
+      background-size: 100% 100%
+    }
+
+    &:nth-child(2) .system-icon {
+      background: url('../../../../../assets/images/fire/firehome/ggxt.png') no-repeat center;
+      background-size: 100% 100%
     }
   }
+
 }
 </style>

src/views/vent/fire/fireHome/components/workJc.vue

@@ -2,21 +2,11 @@
   <div class="workJc">
     <div class="echart-workJc" :style="{ height: heightT }">
       <div class="workJc-l">
-        <div class="echart-yh"></div>
-        <div class="echart-line"></div>
-        <div class="echart-boxs" ref="ring"></div>
+        <img src="../../../../../assets//images/fire/firehome/img-2.png" alt="">
       </div>
       <div class="workJc-r">
-        <div class="fx-box" v-for="(item, index) in fxLenged" :key="index">
-          <div class="fx-label">
-            <div class="fx-label-l">
-              <div class="bg-pie"></div>
-            </div>
-            <div class="fx-label-r">{{ item.name }}</div>
-          </div>
-          <div class="fx-val">{{ item.value }}</div>
-          <div class="fx-unit" v-if="!item.value"></div>
-        </div>
+        <div class="workJc-r-level">低风险</div>
+        <div class="workJc-r-val">{{ echartDatas.value || 0 }}</div>
       </div>
     </div>
     <div class="card-workJc" :style="{ height: heightB }">
@@ -25,17 +15,23 @@
         <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
           <div class="card-l-label">{{ ite.title }}</div>
           <div class="card-l-val">{{ ite.val }}</div>
-
           <div class="card-r-label">{{ ite.label }}</div>
           <div class="card-r-content">
-            <span>{{ `${ite.title1} : ` }}</span>
-            <span>{{ `${ite.val1} 摄氏度` }}</span>
+            <div class="content-r-item">
+              <div class="item-label">{{ ite.temp || 0 }}</div>
+              <div class="item-val">{{ `${ite.tempVal}℃` || 0 }}</div>
+            </div>
+            <div class="content-r-item">
+              <div class="item-label">{{ ite.zb || 0 }}</div>
+              <div class="item-val">{{ ite.zbVal || 0 }}</div>
+            </div>
+          </div>
+          <div class="card-r-des">
+            <span>预测风险区域：</span>
+            <span>整个掘进面</span>
           </div>
-          <!-- <div class="card-r-content1">
-            <span>{{ `${ite.title2} : ` }}</span>
-            <span>{{ ite.val2 }}</span>
-          </div> -->
         </div>
+
       </vue3-seamless-scroll>
 
 
@@ -46,7 +42,6 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick, defineProps, watch } from 'vue';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
-import * as echarts from 'echarts';
 
 let props = defineProps({
   heightT: {
@@ -71,87 +66,9 @@ let props = defineProps({
   }
 });
 
-//获取dom节点
-let ring = ref();
-
-let fxLenged = reactive<any[]>([]);//图表数据
-let echartDatas = reactive<any[]>([])
-
+let echartDatas = ref<any>(0)
 let cardList = ref<any[]>([]);
 
-function getOption() {
-  nextTick(() => {
-    let color = ['#1fb3f7'];
-    let myChart = echarts.init(ring.value);
-    let option = {
-      color: color,
-      tooltip: {
-        trigger: 'item',
-        backgroundColor: 'rgba(0, 0, 0, .6)',
-        formatter: '{b}:{c}',
-        textStyle: {
-          color: '#fff',
-          fontSize: 14,
-        },
-      },
-      grid: {
-        top: '15%',
-        left: 0,
-        right: '1%',
-        bottom: 5,
-        containLabel: true,
-      },
-
-      series: [
-        {
-          name: '',
-          type: 'pie',
-          center: ['50%', '50%'],
-          radius: ['70%', '88%'],
-          label: {
-            normal: {
-              show: true,
-              position: 'center',
-              // formatter: '{value|{c}}\n{label|{b}}',
-              formatter: '{value|{c}}',
-              rich: {
-                value: {
-                  padding: 5,
-                  align: 'center',
-                  verticalAlign: 'middle',
-                  fontSize: 18,
-                  color: '#fff',
-                },
-                label: {
-                  align: 'center',
-                  verticalAlign: 'middle',
-                  fontSize: 14,
-                },
-              },
-            },
-            // emphasis: {
-            //   show: true,
-            //   textStyle: {
-            //     fontSize: '10',
-            //   },
-            // },
-          },
-          labelLine: {
-            show: false,
-            length: 0,
-            length2: 0,
-          },
-          data: echartDatas,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
 watch(() => props.cardData, (newC, oldC) => {
   console.log(newC, 'newC-------')
   cardList.value = newC
@@ -159,16 +76,9 @@ watch(() => props.cardData, (newC, oldC) => {
 
 watch(() => props.echartData, (newV, oldV) => {
   console.log(newV, '图表数据------')
-
   if (newV.length != 0) {
-    fxLenged.length = 0
-    echartDatas.length = 0
-    newV.forEach(el => {
-      fxLenged.push({ name: el.label, value: el.value })
-    })
-    let maxValue = fxLenged.sort((a, b) => b.value - a.value)
-    echartDatas.push(maxValue[0])
-    getOption();
+    let maxValue = newV.sort((a, b) => b.value - a.value)
+    echartDatas.value = maxValue[0].value
   }
 }, { immediate: true, deep: true })
 
@@ -176,134 +86,56 @@ watch(() => props.echartData, (newV, oldV) => {
 </script>
 
 <style lang="less" scoped>
-// @font-face {
-//   font-family: douyuFont;
-//   src: url('../../../../../assets/font/douyuFont.otf');
-// }
-
 .workJc {
   width: 100%;
   height: 100%;
 
   .echart-workJc {
-    // height: 45%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     width: 100%;
 
     .workJc-l {
-      @keyframes rotationLine {
-        0% {
-          transform: rotate(0deg);
-        }
-
-        100% {
-          transform: rotate(360deg);
-        }
-      }
+      width: 110px;
+      height: 110px;
 
-      position: relative;
-      width: 140px;
-      height: 100%;
-
-      .echart-yh {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 90px;
-        height: 90px;
-        transform: translate(-50%, -50%);
-        background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
-        background-size: 100% 100%;
-      }
-
-      .echart-line {
-        position: absolute;
-        top: 7%;
-        left: 10%;
-        width: 110px;
-        height: 110px;
-        animation: rotationLine 10s linear infinite;
-        background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
-        background-size: 100% 100%;
-      }
-
-      .echart-boxs {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 90px;
-        height: 90px;
-        transform: translate(-50%, -50%);
+      img {
+        width: 100%;
+        height: 100%;
       }
     }
 
     .workJc-r {
       display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: flex-start;
-      width: calc(100% - 140px);
-      height: 100%;
-      // padding-left: 10px;
-      // box-sizing: border-box;
-
-      .fx-box {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        height: 50%;
-        color: #9da5aa;
-
-        .fx-label {
-          display: flex;
-          align-items: center;
-          height: 28px;
-
-          .fx-label-l {
-            position: relative;
-            box-sizing: border-box;
-            width: 12px;
-            height: 12px;
-            margin-right: 5px;
-            padding: 1px;
-            border: 1px solid #1fb3f7;
-
-            .bg-pie {
-              width: 100%;
-              height: 100%;
-              border-radius: 50%;
-              background-color: #1fb3f7;
-            }
-          }
-
-          .fx-label-r {
-            font-size: 12px;
-          }
-        }
-
-        .fx-val {
-          // font-family: douyuFont; 
-          font-size: 20px;
-          font-weight: bold;
-        }
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: calc(100% - 110px);
+      height: 110px;
+      padding-left: 45px;
+      background: url('../../../../../assets/images/fire/firehome/img-1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .workJc-r-level {
+        margin-bottom: 15px;
+        color: #fff;
+        font-size: 16px;
+        font-weight: bold;
+      }
 
-        .fx-unit {
-          width: 20px;
-          height: 1px;
-          margin: 2px;
-          background-color: #a1b6c2;
-        }
+      .workJc-r-val {
+        color: #089dff;
+        font-size: 36px;
+        font-weight: bold;
       }
     }
+
+
   }
 
   .card-workJc {
     position: relative;
-    // height: 55%;
     overflow: hidden;
 
     .seamless-warp {
@@ -313,56 +145,78 @@ watch(() => props.echartData, (newV, oldV) => {
       .card-box {
         position: relative;
         width: 100%;
-        height: 84px;
-        background: url('../../../../../assets/images/fire/firehome/work-jc.png') no-repeat center;
+        height: 155px;
+        margin-bottom: 10px;
+        background: url('../../../../../assets/images/fire/firehome/img-3.png') no-repeat center;
         background-size: 100% 100%;
 
         .card-l-label {
           position: absolute;
-          top: 12%;
-          left: 5.5%;
-          color: #9da5aa;
-          font-size: 12px;
+          top: 22px;
+          left: 38px;
+          color: #fff;
+          font-size: 14px;
           letter-spacing: 2px;
         }
 
         .card-l-val {
           position: absolute;
-          top: 50%;
-          left: 24px;
-          color: #a3d5e5;
-          font-size: 16px;
+          top: 48%;
+          left: 50px;
+          color: #089dff;
+          font-size: 36px;
+          font-weight: bold
         }
 
         .card-r-label {
           position: absolute;
-          top: 11%;
-          left: 20%;
-          border-bottom: 1px solid #d0d2d3;
-          color: #d0d2d3;
-          font-size: 12px;
+          top: 22px;
+          left: 150px;
+          color: #fff;
+          font-size: 14px;
         }
 
         .card-r-content {
+          display: flex;
           position: absolute;
-          // top: 42%;
-          top: 54%;
-          left: 20%;
-          color: #9da5aa;
-          font-size: 12px;
+          top: 53px;
+          left: 150px;
+          align-items: center;
+          justify-content: space-between;
+          width: 220px;
+          height: 65px;
+
+          .content-r-item {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            width: 50%;
+            height: 100%;
+
+            .item-label {
+              margin-bottom: 10px;
+              color: #fff;
+              font-size: 12px;
+            }
+
+            .item-val {
+              color: #089dff;
+              font-size: 14px;
+            }
+          }
         }
 
-        .card-r-content1 {
+        .card-r-des {
           position: absolute;
-          top: 68%;
-          left: 20%;
-          color: #9da5aa;
+          bottom: 18px;
+          left: 150px;
+          width: 220px;
+          color: #fff;
+          font-size: 12px;
         }
       }
     }
-
-
-
   }
 }
 </style>

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

@@ -1,9 +1,6 @@
 <template>
   <div class="fireHome">
     <!-- 模型区域 -->
-    <!-- <div class="moduleArea">
-      <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
-    </div> -->
     <div class="main-container">
       <transition>
         <div class="left-area" v-if="isShow">
@@ -16,7 +13,7 @@
               </div>
               <div class="tcontent-c">
                 <div
-                  style="margin-bottom: 15px;color: #1fb3f7; font-size: 24px;font-weight:bolder;letter-spacing:10px;">
+                  style="margin-bottom: 15px;color: #009BFF; font-size: 24px;font-weight:bolder;letter-spacing:10px;">
                   低风险</div>
                 <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
               </div>
@@ -25,14 +22,14 @@
           </div>
           <!-- 左中区域 -->
           <div class="left-c">
-            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '450px' }">
-              <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
+            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '524px' }" :bgSize="'large'">
+              <workJc :heightT="'25%'" :heightB="'75%'" :echartData="echartDataWork" :cardData="cardData" />
             </DanelBd>
           </div>
           <!-- 左下区域 -->
           <div class="left-b">
-            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '245px' }" commonTitle="selected"
-              :selectValue="areaCodeMb" :selectList="selectListMb" @change-select="changeSelect">
+            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '222px' }" commonTitle="selected"
+              :selectValue="areaCodeMb" :selectList="selectListMb" @change-select="changeSelect" :bgSize="'middle'">
               <emptyJc :emptyData="emptyData" />
             </DanelBd>
           </div>
@@ -57,14 +54,14 @@
             </div>
           </div>
 
-          <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe> 
+          <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe>
           <!-- <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe> -->
         </div>
         <transition>
           <div class="center-b" v-if="isShow">
             <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect"
-              :contentStyle="{ contentH: '245px' }" commonTitle="selected" :selectList="selectList"
-              @change-select="changeSelect">
+              :contentStyle="{ contentH: '222px' }" commonTitle="selected" :selectList="selectList"
+              @change-select="changeSelect" :bgSize="''">
               <fiberBunbleJc :bunbleData="bunbleData" />
             </DanelBd>
           </div>
@@ -75,28 +72,28 @@
         <div class="right-area" v-if="isShow">
           <!-- 右上区域 -->
           <div class="right-t">
-            <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
+            <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
               <systemJc />
             </DanelBd>
           </div>
           <!-- 右中区域 -->
           <div class="right-c">
-            <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
-              :selectList="selectListDs" :selectValue="dsCode" @change-select="changeSelect">
+            <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '228px' }" commonTitle="selected"
+              :selectList="selectListDs" :selectValue="dsCode" @change-select="changeSelect" :bgSize="'middle'">
               <outFireJc :outFireData="outFireData" />
             </DanelBd>
           </div>
           <!-- 右下区域 -->
           <div class="right-b">
-            <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '195px' }" commonTitle="">
+            <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '228px' }" commonTitle="" :bgSize="'middle'">
               <!-- <substationJc :echartDatas="echartDatas" /> -->
-              <outFireJc :outFireData="substationData" />
+              <substationJc :substationData="substationData"/>
             </DanelBd>
           </div>
           <!-- 右底部区域 -->
           <div class="right-f">
-            <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '245px' }" commonTitle="selected"
-              :selectList="selectListAq" :selectValue="pointCodeAq" @change-select="changeSelect">
+            <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '222px' }" commonTitle="selected"
+              :selectList="selectListAq" :selectValue="pointCodeAq" @change-select="changeSelect" :bgSize="'middle'">
               <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
             </DanelBd>
           </div>
@@ -171,7 +168,7 @@ let echartDatas = reactive({
   yData: [],
   yData1: [],
 });
-let substationData=reactive<any[]>([])
+let substationData = reactive<any[]>([])
 
 
 //安全监控
@@ -343,7 +340,7 @@ async function getFireAreaInfoListDs() {
   if (res.length != 0) {
     selectListDs.length = 0;
     outFireData.length = 0;
-    substationData.length=0
+    substationData.length = 0
     let dataDs = res.filter((m) => m.areaType == 4);
     dataDs.forEach((el) => {
       selectListDs.push({ label: el.areaName, value: el.areaName });
@@ -376,7 +373,7 @@ async function getFireAreaInfoListDs() {
       // },
       { title: '烟雾预警', val: 10, dw: '', label: '数量' },
       { title: '火焰预警', val: 10, dw: '', label: '数量' },
-      { title: '电磁阀', val: 10, dw: '', label: '开关量' },
+      { title: '电磁阀', val: 10, dw: '', label: '数量' },
     )
 
   }
@@ -506,7 +503,7 @@ async function getMainTrafficYwList() {
   );
   if (res.length != 0) {
     res.forEach((el) => {
-     el.detectValue= el.sensorType=='M0104' ? '0ppm' : el.sensorType=='K0007' ? el.detectValue=='0' ? '无烟雾' : el.detectValue=='1' ? '有烟雾' : '-' : '-'
+      el.detectValue = el.sensorType == 'M0104' ? '0ppm' : el.sensorType == 'K0007' ? el.detectValue == '0' ? '无烟雾' : el.detectValue == '1' ? '有烟雾' : '-' : '-'
       safetyList.push({
         address: el.nodePlacement,
         temp: el.detectValue,
@@ -573,39 +570,26 @@ onUnmounted(() => {
 .fireHome {
   position: relative;
   width: 100%;
-  height: 928px;
-
-  .moduleArea {
-    width: 100%;
-    height: 100%;
-  }
+  height: 1032px;
+  background: url('../../../../assets/images/fire/firehome/bg.png') no-repeat center;
+  background-size: 100% 100%;
 
   .main-container {
     display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
     box-sizing: border-box;
     justify-content: space-between;
     width: 100%;
     height: 100%;
-    padding: 15px 10px;
+    padding: 15px 30px 35px; 
 
     .left-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: calc((100% - 1010px - 40px) / 2);
       height: 100%;
-      margin-right: 15px;
 
       .left-t {
         position: relative;
-        width: 100%;
-        // height: 121px;
-        height: 100px;
+        height: 115px;
+        margin-bottom: 25px;
         background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
         background-size: 100% 100%;
 
@@ -618,9 +602,9 @@ onUnmounted(() => {
           align-items: center;
           justify-content: space-around;
           width: 100%;
-          height: 90px;
+          height: 70px;
           padding: 0 15px;
-          transform: translate(0, -50%);
+          transform: translate(0, -40%);
 
           .tcontent-l {
             display: flex;
@@ -661,23 +645,18 @@ onUnmounted(() => {
 
       .left-c {
         width: 100%;
+        margin-bottom: 25px;
       }
 
       .left-b {
         width: 100%;
       }
-
-      // .left-f {
-      //   width: 100%;
-      // }
     }
 
     .center-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: calc(100% - 814px);
+      width: 1010px;
+      height: 100%;
+      margin: 0 20px;
 
       .center-t {
         @keyframes harlem-data {
@@ -708,8 +687,8 @@ onUnmounted(() => {
 
         position: relative;
         width: 100%;
-        height: calc(100% - 295px);
-        margin-bottom: 15px;
+        height:698px;
+        margin-bottom: 25px;
         overflow: hidden;
 
         .center-scalc {
@@ -855,7 +834,7 @@ onUnmounted(() => {
 
       .center-b {
         width: 100%;
-        height: 280px;
+        height: calc(100% - 723px)
       }
     }
 
@@ -1016,25 +995,22 @@ onUnmounted(() => {
     }
 
     .right-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: calc((100% - 1010px - 40px) / 2);
       height: 100%;
-      margin-left: 15px;
 
       .right-t {
         width: 100%;
+        margin-bottom: 25px;
       }
 
       .right-c {
         width: 100%;
+        margin-bottom: 25px;
       }
 
       .right-b {
         width: 100%;
+        margin-bottom: 25px;
       }
 
       .right-f {