[Feat 0000]蓝色预警监测页面优化 蓝色类型页面组件整合

src/views/vent/home/configurable/components/ModuleWarnMonitor.vue → src/views/vent/home/configurable/bule/components/ModuleWarnMonitor.vue

@@ -22,13 +22,13 @@
   </component>
 </template>
 <script lang="ts" setup>
-import Header from './header.vue';
+import Header from '../../components/header.vue';
 import Content from './content-warn.vue';
-import ModuleLeft from './original/moduleLeft-warn.vue';
-import ModuleBottom from './original/moduleBottom-warn.vue';
+import ModuleLeft from './moduleLeft-warn.vue';
+import ModuleBottom from './moduleBottom-warn.vue';
 import { computed, ref } from 'vue';
 import { openWindow } from '/@/utils';
-import { getFormattedText } from '../hooks/helper';
+import { getFormattedText } from '../../hooks/helper';
 // import { ModuleProps } from '../types';
 
 const props = defineProps<{

src/views/vent/home/configurable/components/center-area-warn.vue → src/views/vent/home/configurable/bule/components/center-area-warn.vue

@@ -57,11 +57,37 @@
         </div>
       </div>
     </div>
+    <div class="risk-echartbox">
+      <yjRisk :echartData="paramData.riskData"></yjRisk>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import yjRisk from './yj_risk.vue';
+import { reactive, watch } from 'vue';
+import { useGlobSetting } from '/@/hooks/setting';
+import { param } from '../../../../monitorManager/compreMonitor/compre.data';
+let props = defineProps({
+  echartData: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+let paramData = reactive<any>({});
+const { sysOrgCode, sysDataType } = useGlobSetting();
+
+watch(
+  () => props.echartData,
+  (newV, oldV) => {
+    paramData = newV;
+    console.log(paramData, '中间区域数据');
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
 <style lang="less" scoped>
@@ -206,5 +232,12 @@ import { ref } from 'vue';
     font-size: 22px;
     color: #fafafb;
   }
+  .risk-echartbox {
+    position: absolute;
+    left: 18px;
+    top: 60px;
+    width: 220px;
+    height: 170px;
+  }
 }
 </style>

src/views/vent/home/configurable/components/content-warn.vue → src/views/vent/home/configurable/bule/components/content-warn.vue

@@ -37,11 +37,16 @@
           <DzList :deviceType="deviceType" :listOption="config.config.listOption" :listData="config.data"></DzList>
         </template>
         <template v-if="config.name === 'dz_card'">
-          <DzCard :titleLeft="config.config.leftTitle" :titleRight="config.config.rightTitle" :paramData="config.data"></DzCard>
+          <DzCard
+            :deviceType="deviceType"
+            :titleLeft="config.config.leftTitle"
+            :titleRight="config.config.rightTitle"
+            :paramData="config.data"
+          ></DzCard>
         </template>
-        <template v-if="config.name === 'yj_risk'">
+        <!-- <template v-if="config.name === 'yj_risk'">
           <yjRisk :riskData="config.data"></yjRisk>
-        </template>
+        </template> -->
         <template v-if="config.name === 'yj_chart'">
           <yjChart :paramData="config.data"></yjChart>
         </template>
@@ -65,16 +70,16 @@ import {
   ModuleDataList,
   ModuleDataPreset,
   ModuleDataTable,
-} from '../../../deviceManager/configurationTable/types';
-import DzList from '../green/components/dz-list.vue';
-import DzCard from '../green/components/dz-card.vue';
+} from '../../../../deviceManager/configurationTable/types';
+import DzList from '../../green/components/dz-list.vue';
+import DzCard from '../../green/components/dz-card.vue';
 import yjRisk from './yj_risk.vue';
 import yjChart from './yj_chart.vue';
 import yjGas from './yj_gasWarn.vue';
 import MiniBoard from './detail/MiniBoard-Warn.vue';
 import yjVentWarn from './yj_ventWarn.vue';
 import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
+import { getData, getFormattedText } from '../../hooks/helper';
 
 const props = defineProps<{
   data: any;
@@ -332,11 +337,8 @@ const layoutConfig = computed(() => {
 }
 
 .content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
   width: 100%;
   height: 100%;
-  overflow-y: auto;
 }
 // .content__module:first-of-type {
 //   margin-top: 0;

src/views/vent/home/configurable/components/yj_chart.vue → src/views/vent/home/configurable/bule/components/yj_chart.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="dz-dust">
-    <div ref="chartDust" class="chartDust"></div>
+  <div class="yj-fire">
+    <div class="icon-fire">
+      <div class="fire-icon" v-for="(item, index) in yData" :key="index">{{ item }}</div>
+    </div>
+    <div ref="chartFire" class="chartFire"></div>
   </div>
 </template>
 
@@ -24,13 +27,13 @@ let props = defineProps({
 });
 
 //获取dom元素节点
-let chartDust = ref<any>();
+let chartFire = ref<any>();
 let xData = ref<any[]>([]);
 let yData = ref<any[]>([]);
 
 function getOption() {
   nextTick(() => {
-    let myChart = echarts.init(chartDust.value);
+    let myChart = echarts.init(chartFire.value);
 
     const colorList = [
       ['rgba(78, 8, 10, 1)', 'rgba(255, 0, 0, 1)'],
@@ -39,7 +42,7 @@ function getOption() {
       ['rgba(78, 73, 10, 1)', 'rgba(255, 214, 0, 1)'],
       ['rgba(24, 60, 76, 1)', 'rgba(78, 171, 217, 1)'],
     ];
-    const totalBlocks = 25;
+    const totalBlocks = 20;
     let option = {
       tooltip: {},
       grid: {
@@ -145,13 +148,47 @@ watch(
 </script>
 
 <style lang="less" scoped>
-.dz-dust {
+.yj-fire {
   position: relative;
   height: 100%;
-
-  .chartDust {
+  .icon-fire {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    top: 50px;
+    display: flex;
+    justify-content: flex-start;
+    .fire-icon {
+      text-align: center;
+      width: 40px;
+      height: 32px;
+      margin-left: 32px;
+    }
+    .fire-icon:nth-child(1) {
+      background: url('@/assets/images/home-warn/8-1.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+    .fire-icon:nth-child(2) {
+      background: url('@/assets/images/home-warn/8-2.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+    .fire-icon:nth-child(3) {
+      background: url('@/assets/images/home-warn/8-3.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+    .fire-icon:nth-child(4) {
+      background: url('@/assets/images/home-warn/8-4.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+    .fire-icon:nth-child(5) {
+      background: url('@/assets/images/home-warn/8-5.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+  }
+  .chartFire {
+    top: 65px;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 50px);
   }
 }
 </style>

src/views/vent/home/configurable/components/yj_risk.vue → src/views/vent/home/configurable/bule/components/yj_risk.vue

@@ -12,7 +12,7 @@ import { ref, nextTick, onMounted, watch } from 'vue';
 import * as echarts from 'echarts';
 
 let props = defineProps({
-  riskData: {
+  echartData: {
     type: Array,
     default: () => {
       return [];
@@ -92,20 +92,16 @@ function getOption() {
         {
           type: 'pie',
           center: ['50%', '50%'],
-          radius: ['48%', '70%'],
-          // clockwise: false,
-          // avoidLabelOverlap: true,
+          radius: ['30%', '50%'],
           emphasis: {
             label: {
               show: true,
             },
-            itemStyle: {
-              color: function (params) {
-                return colorList[params.dataIndex];
-              },
+            opacity: 1,
+            color: function (params) {
+              return colorList[params.dataIndex];
             },
           },
-          // hoverOffset: 0,
           itemStyle: {
             normal: {
               color: function (params) {
@@ -114,20 +110,24 @@ function getOption() {
             },
           },
           label: {
-            show: false,
+            show: true,
             position: 'outside',
             textStyle: {
               color: '#fff',
-              fontSize: 12,
+              fontSize: 10,
+            },
+            formatter: '{b}：{c}',
+            rich: {
+              a: {
+                padding: [-10, 5, -15, 5],
+              },
             },
-            formatter: '',
-            rich: {},
           },
 
           labelLine: {
             normal: {
-              length: 20,
-              length2: 20,
+              length: 10,
+              length2: 5,
               lineStyle: {
                 width: 1,
               },
@@ -145,7 +145,7 @@ function getOption() {
 }
 
 watch(
-  () => props.riskData,
+  () => props.echartData,
   (newV, oldV) => {
     echartData.value = newV;
     getOption();
@@ -174,14 +174,17 @@ watch(
       top: 50%;
       transform: translate(-50%, -50%);
       width: 100%;
-      height: 58px;
+      height: 60px;
       background: var(--image-model_risk-center) no-repeat center;
       background-size: auto 100%;
     }
 
     .risk-pie {
-      width: 100%;
-      height: 100%;
+      left: -28px;
+      top: -17px;
+      position: absolute;
+      width: 276px;
+      height: 205px;
     }
   }
 }

src/views/vent/home/configurable/components/yj_ventWarn.vue → src/views/vent/home/configurable/bule/components/yj_ventWarn.vue

@@ -30,7 +30,7 @@ const colorMap = {
 };
 
 const getProgressStyle = (item) => {
-  const maxValue = 5;
+  const maxValue = 10;
   const [startColor, endColor] = colorMap[item.name];
 
   return {

src/views/vent/home/configurable/warnMonitor.vue → src/views/vent/home/configurable/bule/warnMonitor.vue

@@ -19,31 +19,32 @@
     </template>
 
     <div class="center-area">
-      <CenterAreaWarn></CenterAreaWarn>
+      <CenterAreaWarn :echartData="paramData"></CenterAreaWarn>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleWarnMonitor.vue';
 import CenterAreaWarn from './components/center-area-warn.vue';
 import { useRoute } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigWarnMonitor } from './configurable.data';
-import NewNav from './components/originalNew/NewNavFire.vue';
-import { getTotal } from './configurable.api';
+import { testConfigWarnMonitor } from '../configurable.data';
+import NewNav from '../components/originalNew/NewNavFire.vue';
+import { getTotal, getDisasterProportion } from '../configurable.api';
 const { title = '智能通风管控系统' } = useGlobSetting();
 const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
-
+const paramData = reactive<any>({});
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag = false) {
   timer = setTimeout(
     async () => {
       getTotal({}).then(updateData);
+      getCenterList();
       if (timer) {
         timer = null;
       }
@@ -52,6 +53,32 @@ function getMonitor(flag = false) {
     flag ? 0 : 20000
   );
 }
+async function getCenterList() {
+  let res = await getTotal({});
+  paramData.fire = res.info.sysInfo.fireS.maxLevel;
+  paramData.tf = res.info.sysInfo.ventS.maxLevel;
+  paramData.ws = res.info.sysInfo.gasS.maxLevel;
+  paramData.sb = res.info.deviceWarnInfo.maxLevel;
+  paramData.fc = res.info.sysInfo.dustS.maxLevel;
+  paramData.riskLevel = res.info.riskLevel;
+  let Levels = Object.assign({}, await getDisasterProportion({}));
+  paramData.levels =
+    Levels.level > 0 && Levels.level <= 1
+      ? 101
+      : Levels.level > 1 && Levels.level <= 2
+      ? 102
+      : Levels.level > 2 && Levels.level <= 3
+      ? 103
+      : Levels.level > 3 && Levels.level <= 4
+      ? 104
+      : 0;
+  paramData.riskData = [
+    { name: '通风', value: Levels.vent },
+    { name: '火灾', value: Levels.fire },
+    { name: '瓦斯', value: Levels.gas },
+    { name: '粉尘', value: Levels.dust },
+  ];
+}
 onMounted(() => {
   fetchConfigs('fusion-warn-green').then(() => {
     configs.value = testConfigWarnMonitor;
@@ -82,7 +109,7 @@ onUnmounted(() => {
   .top-bg {
     width: 100%;
     height: 56px;
-    background: url('../../../../assets/images/home-warn/1-1.png') no-repeat center;
+    background: url('@/assets/images/home-warn/1-1.png') no-repeat center;
     position: absolute;
     z-index: 1;
     .main-title {
@@ -107,7 +134,7 @@ onUnmounted(() => {
   .main-container {
     width: 100%;
     height: 100%;
-    background: url('../../../../assets/images/home-warn/bg.png') no-repeat;
+    background: url('@/assets/images/home-warn/bg.png') no-repeat;
     background-size: 100% 100%;
     .left-area {
       position: absolute;

src/views/vent/home/configurable/configurable.data.ts

@@ -4023,7 +4023,7 @@ export const testConfigWarnMonitor: Config[] = [
     },
   },
   {
-    deviceType: 'fusionManageInfo',
+    deviceType: 'fireWarnInfo',
     moduleName: '火灾监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
@@ -4049,11 +4049,11 @@ export const testConfigWarnMonitor: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '35%',
+            basis: '30%',
           },
           {
             name: 'dz_card',
-            basis: '65%',
+            basis: '70%',
           },
         ],
       },
@@ -4172,57 +4172,57 @@ export const testConfigWarnMonitor: Config[] = [
       position: 'top:70px;right:15px',
     },
   },
-  {
-    deviceType: 'warnInfo',
-    moduleName: '风险权重比例',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'yj_risk',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: 'riskData',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:180px;height:180px;',
-      version: '原版',
-      position: 'top:70px;left:450px',
-    },
-  },
+  // {
+  //   deviceType: 'warnInfo',
+  //   moduleName: '风险权重比例',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       readFrom: '',
+  //       selector: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //       slot: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: {
+  //       direction: 'column',
+  //       items: [
+  //         {
+  //           name: 'yj_risk',
+  //           basis: '100%',
+  //         },
+  //       ],
+  //     },
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [
+  //       {
+  //         readFrom: 'riskData',
+  //       },
+  //     ],
+  //     // mock: BDfireMock,
+  //   },
+  //   showStyle: {
+  //     size: 'width:180px;height:180px;',
+  //     version: '原版',
+  //     position: 'top:70px;left:450px',
+  //   },
+  // },
   {
     deviceType: 'deviceManageInfo',
     moduleName: '设备监测预警',
@@ -4316,7 +4316,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'gate_close',
             },
             window: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('fc'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4473,7 +4473,7 @@ export const testConfigWarnMonitor: Config[] = [
         items: [
           {
             name: 'yj_chart',
-            basis: '100%',
+            basis: '90%',
           },
         ],
       },

src/views/vent/home/configurable/green/components/dz-card.vue

@@ -1,184 +1,278 @@
 <template>
-    <div class="dzCard">
-        <div class="gas-box">
-            <div class="gas-item">
-                <div class="detail-box">
-                    <div class="detail-container">
-                        <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
-                            <div class="item-box">
-                                <div class="item-box-label">{{ titleLeft.address }}</div>
-                                <div class="item-box-val">{{ item.value1 || '-' }}</div>
-                            </div>
-                            <div class="item-box">
-                                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
-                                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
-                            </div>
-                            <div class="item-box">
-                                <div class="item-box-label">{{ titleLeft.smoke }}</div>
-                                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  <div :class="props.deviceType == 'fireWarnInfo' ? 'dzCard1' : 'dzCard'">
+    <div class="gas-box">
+      <div class="gas-item">
+        <div class="detail-box">
+          <div class="detail-container">
+            <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
+              <div class="item-box">
+                <div class="item-box-label">{{ titleLeft.address }}</div>
+                <div class="item-box-val">{{ item.value1 || '-' }}</div>
+              </div>
+              <div class="item-box">
+                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
+                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
+              </div>
+              <div class="item-box">
+                <div class="item-box-label">{{ titleLeft.smoke }}</div>
+                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
+              </div>
             </div>
-            <div class="gas-item">
-                <div class="detail-box">
-                    <div class="detail-container">
-                        <div class="detail-item">
-                            <div class="item-box1">
-                                <div class="item-box-label">{{ titleRight.temp }}</div>
-                                <div class="item-box-val1">{{ infoData.tempVal }}</div>
-                            </div>
-                            <div class="item-box1">
-                                <div class="item-box-label">{{ titleRight.smokeing }}</div>
-                                <div class="item-box-val1">{{ infoData.smokeVal }}</div>
-                            </div>
-                            <div class="item-box1">
-                                <div class="item-box-label">{{ titleRight.fire }}</div>
-                                <div class="item-box-val1">{{ infoData.fireVal }}</div>
-                            </div>
-                            <div class="item-box1">
-                                <div class="item-box-label">{{ titleRight.comax }}</div>
-                                <div class="item-box-val1">{{ infoData.coVal }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+          </div>
+        </div>
+      </div>
+      <div class="gas-item">
+        <div class="detail-box">
+          <div class="detail-container">
+            <div class="detail-item">
+              <div class="item-box1">
+                <div class="item-box-label">{{ titleRight.temp }}</div>
+                <div class="item-box-val1">{{ infoData.tempVal }}</div>
+              </div>
+              <div class="item-box1">
+                <div class="item-box-label">{{ titleRight.smokeing }}</div>
+                <div class="item-box-val1">{{ infoData.smokeVal }}</div>
+              </div>
+              <div class="item-box1">
+                <div class="item-box-label">{{ titleRight.fire }}</div>
+                <div class="item-box-val1">{{ infoData.fireVal }}</div>
+              </div>
+              <div class="item-box1">
+                <div class="item-box-label">{{ titleRight.comax }}</div>
+                <div class="item-box-val1">{{ infoData.coVal }}</div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch } from 'vue';
 
 let props = defineProps({
-    titleLeft: {
-        type: Object,
-        default: () => {
-            return {}
-        }
+  titleLeft: {
+    type: Object,
+    default: () => {
+      return {};
     },
-    titleRight: {
-        type: Object,
-        default: () => {
-            return {}
-        }
+  },
+  titleRight: {
+    type: Object,
+    default: () => {
+      return {};
     },
-    paramData: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
+  },
+  paramData: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  deviceType: {
+    type: String,
+    default: '',
+  },
+});
 
-let infoData = reactive({})
+let infoData = reactive({});
 
-watch(() => props.paramData, (newV, oldV) => {
-    infoData = Object.assign({}, newV)
-}, { immediate: true })
+watch(
+  () => props.paramData,
+  (newV, oldV) => {
+    infoData = Object.assign({}, newV);
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
 @{theme-deepblue} {
-    .dzCard {
-        --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
-        --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
-    }
+  .dzCard {
+    --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
+    --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
+  }
 }
 
 .dzCard {
-    --image-model_gas_item: url('@/assets/images/home-green/900.png');
-    --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
-    width: 100%;
-    height: 72%;
-    position: absolute;
-    left: 0;
-    top: 86px;
-
-    .gas-box {
-        display: flex;
-        justify-content: center;
+  --image-model_gas_item: url('@/assets/images/home-green/900.png');
+  --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
+  --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
+  width: 100%;
+  height: 72%;
+  position: absolute;
+  left: 0;
+  top: 86px;
+  .gas-box {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+
+    .gas-item {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      margin: 0px 5px;
+
+      &:nth-child(1) {
+        background: var(--image-model_gas_item) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &:nth-child(2) {
+        background: var(--image-model_gas_item1) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .detail-box {
+        position: relative;
+        height: 100%;
+        padding-top: 68px;
+
+        .detail-container {
+          height: 100%;
+          overflow-y: auto;
+
+          .detail-item {
+            width: 100%;
+            height: 100%;
+
+            .item-box {
+              width: 100%;
+              padding: 0px 10px;
+              height: 60px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+
+            .item-box1 {
+              width: 100%;
+              padding: 0px 10px;
+              height: 42px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+
+            .item-box-label {
+              flex-shrink: 0;
+              width: 60px;
+              font-size: 12px;
+              text-align: left;
+              margin-right: 10px;
+            }
+
+            .item-box-val {
+              text-align: right;
+              color: #b9ffe5;
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
+
+            .item-box-val1 {
+              text-align: right;
+              color: #b9f1ff;
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.dzCard1 {
+  --image-model_gas_item: url('@/assets/images/home-green/900.png');
+  --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
+  --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
+  width: 100%;
+  height: 72%;
+  position: absolute;
+  left: 0;
+
+  .gas-box {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+
+    .gas-item {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      margin: 0px 5px;
+      &:nth-child(1) {
+        background: var(--image-model_fire_item) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &:nth-child(2) {
+        background: var(--image-model_fire_item) no-repeat;
+        background-size: 100% 100%;
+      }
+      .detail-box {
+        position: relative;
         height: 100%;
+        padding-top: 15px;
+
+        .detail-container {
+          height: 100%;
+          overflow-y: hidden;
+          &:hover {
+            overflow-y: auto;
+          }
 
-        .gas-item {
-            position: relative;
-            width: 50%;
+          .detail-item {
+            width: 100%;
             height: 100%;
-            margin: 0px 5px;
 
-            &:nth-child(1) {
-                background: var(--image-model_gas_item) no-repeat;
-                background-size: 100% 100%;
+            .item-box {
+              width: 100%;
+              padding: 0px 10px;
+              height: 60px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+
+            .item-box1 {
+              width: 100%;
+              padding: 0px 10px;
+              height: 42px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+
+            .item-box-label {
+              flex-shrink: 0;
+              width: 60px;
+              font-size: 12px;
+              text-align: left;
+              margin-right: 10px;
             }
 
-            &:nth-child(2) {
-                background: var(--image-model_gas_item1) no-repeat;
-                background-size: 100% 100%;
+            .item-box-val {
+              text-align: right;
+              color: #c0fbff;
+              font-family: 'douyuFont';
+              font-size: 12px;
             }
 
-            .detail-box {
-                position: relative;
-                height: 100%;
-                padding-top: 68px;
-
-                .detail-container {
-                    height: 100%;
-                    overflow-y: auto;
-
-                    .detail-item {
-                        width: 100%;
-                        height: 100%;
-
-                        .item-box {
-                            width: 100%;
-                            padding: 0px 10px;
-                            height: 60px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-
-                        }
-
-                        .item-box1 {
-                            width: 100%;
-                            padding: 0px 10px;
-                            height: 42px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-
-                        }
-
-                        .item-box-label {
-                            flex-shrink: 0;
-                            width: 60px;
-                            font-size: 12px;
-                            text-align: left;
-                            margin-right: 10px;
-                        }
-
-                        .item-box-val {
-                            text-align: right;
-                            color: #b9ffe5;
-                            font-family: 'douyuFont';
-                            font-size: 12px;
-                        }
-
-                        .item-box-val1 {
-                            text-align: right;
-                            color: #b9f1ff;
-                            font-family: 'douyuFont';
-                            font-size: 12px;
-
-                        }
-                    }
-                }
+            .item-box-val1 {
+              text-align: right;
+              color: #53f696;
+              font-family: 'douyuFont';
+              font-size: 12px;
             }
+          }
         }
+      }
     }
+  }
 }
 </style>