提交新版本

src/views/vent/common/basicCard.vue

@@ -78,12 +78,13 @@
 
         .item-labels {
           color: #fff;
+          font-size: 14px;
         }
 
         .item-vals {
           color: #02bbe9;
           font-family: douyuFont;
-          font-size: 20px;
+          font-size: 16px;
         }
       }
     }

src/views/vent/common/basicCard3.vue

@@ -104,10 +104,11 @@
 
       .card3-box-title {
         position: absolute;
-        top: 11px;
+        top: 14px;
         width: 100%;
         color: #fff;
-        font-size: 18px;
+        font-size: 16px;
+        font-weight: bolder;
         text-align: center;
       }
 
@@ -168,21 +169,24 @@
 
         .card3-box-item {
           position: absolute;
-          top: 52%;
-          left: 7%;
+          top: 54%;
+          left: 10%;
           transform: rotate(45deg);
           color: #fff;
+          font-size: 12px;
         }
       }
 
       .card3-box-label {
         width: 40px;
         color: #fff;
+        font-size: 14px;
       }
 
       .card3-box-val {
         color: #0097db;
         font-family: douyuFont;
+        font-size: 14px;
       }
     }
 
@@ -202,10 +206,11 @@
 
       .card3-box-title {
         position: absolute;
-        top: 11px;
+        top: 14px;
         width: 100%;
         color: #fff;
-        font-size: 18px;
+        font-size: 16px;
+        font-weight: bolder;
         text-align: center;
       }
 
@@ -266,21 +271,24 @@
 
         .card3-box-item {
           position: absolute;
-          top: 36%;
-          left: 8%;
+          top: 38%;
+          left: 10%;
           transform: rotate(45deg);
           color: #fff;
+          font-size: 12px;
         }
       }
 
       .card3-box-label {
         width: 40px;
         color: #fff;
+        font-size: 14px;
       }
 
       .card3-box-val {
         color: #0097db;
         font-family: douyuFont;
+        font-size: 14px;
       }
     }
   }

src/views/vent/common/basicCard4.vue

@@ -91,6 +91,7 @@
         width: 100%;
         color: #fff;
         font-size: 14px;
+        font-weight: bold;
         text-align: center;
       }
 
@@ -123,6 +124,7 @@
             &:last-child {
               color: #01fefc;
               font-family: douyuFont;
+              font-size: 14px;
             }
           }
         }
@@ -162,7 +164,8 @@
         left: 0;
         width: 100%;
         color: #fff;
-        font-size: 16px;
+        font-size: 14px;
+        font-weight: bold;
         text-align: center;
       }
 
@@ -189,7 +192,7 @@
           span {
             &:first-child {
               color: #fff;
-              font-size: 12px;
+              font-size: 14px;
             }
 
             &:last-child {

src/views/vent/common/basicEchartLine.vue

@@ -208,26 +208,26 @@ function getOption() {
             borderWidth: 1
 
           },
-          areaStyle: {
-            //区域填充样式
-            normal: {
-              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  { offset: 0, color: 'rgba(31, 174, 240, 0.7)' },
-                  { offset: 0.7, color: 'rgba(31, 174, 240, 0)' },
-                ],
-                false,
-              ),
+          // areaStyle: {
+          //   //区域填充样式
+          //   normal: {
+          //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          //     color: new echarts.graphic.LinearGradient(
+          //       0,
+          //       0,
+          //       0,
+          //       1,
+          //       [
+          //         { offset: 0, color: 'rgba(31, 174, 240, 0.7)' },
+          //         { offset: 0.7, color: 'rgba(31, 174, 240, 0)' },
+          //       ],
+          //       false,
+          //     ),
 
-              shadowColor: 'rgba(31, 174, 240, 0.6)', //阴影颜色
-              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-            },
-          },
+          //     shadowColor: 'rgba(31, 174, 240, 0.6)', //阴影颜色
+          //     shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          //   },
+          // },
           data: echartDatas.yData.length != 0 ? echartDatas.yData : [],
         },
         {
@@ -247,26 +247,26 @@ function getOption() {
             borderWidth: 1
 
           },
-          areaStyle: {
-            //区域填充样式
-            normal: {
-              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  { offset: 0, color: 'rgba(31, 237, 155, 0.7)' },
-                  { offset: 0.7, color: 'rgba(31, 237, 155, 0)' },
-                ],
-                false,
-              ),
+          // areaStyle: {
+          //   //区域填充样式
+          //   normal: {
+          //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          //     color: new echarts.graphic.LinearGradient(
+          //       0,
+          //       0,
+          //       0,
+          //       1,
+          //       [
+          //         { offset: 0, color: 'rgba(31, 237, 155, 0.7)' },
+          //         { offset: 0.7, color: 'rgba(31, 237, 155, 0)' },
+          //       ],
+          //       false,
+          //     ),
 
-              shadowColor: 'rgba(31, 237, 155, 0.6)', //阴影颜色
-              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-            },
-          },
+          //     shadowColor: 'rgba(31, 237, 155, 0.6)', //阴影颜色
+          //     shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          //   },
+          // },
           data: echartDatas.yData1.length != 0 ? echartDatas.yData1 : [],
         },
       ],

src/views/vent/common/basicWorkBtn.vue

@@ -104,13 +104,13 @@
 
       .work-btn-text {
         position: absolute;
-        top: 26px;
+        top: 32px;
         // left: 50%;
         // transform: translate(-50%, 0);
         width: 100%;
         color: #fff;
         font-family: douyuFont;
-        font-size: 18px;
+        font-size: 16px;
         text-align: center;
       }
     }

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

@@ -199,22 +199,26 @@ watch(() => props.pwData, (newP, oldP) => {
             .fall-head-item {
                 display: flex;
                 justify-content: center;
+                height: 32px;
                 color: #1fb3f7;
+                font-size: 12px;
+                line-height: 32px;
 
                 &:nth-child(1) {
-                    flex: 1;
+                    width: 20%;
+
                 }
 
                 &:nth-child(2) {
-                    flex: 3;
+                    width: 30%;
                 }
 
                 &:nth-child(3) {
-                    flex: 2;
+                    width: 25%;
                 }
 
                 &:nth-child(4) {
-                    flex: 2;
+                    width: 25%;
                 }
             }
         }
@@ -227,6 +231,7 @@ watch(() => props.pwData, (newP, oldP) => {
 
             .seamless-warp {
                 width: 100%;
+                height: 100%;
 
                 .fall-content-item {
                     display: flex;
@@ -243,26 +248,32 @@ watch(() => props.pwData, (newP, oldP) => {
                     }
 
                     .content-item-val {
-                        display: flex;
-                        justify-content: center;
+                        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) {
-                            flex: 1;
+                            width: 20%;
                         }
 
                         &:nth-child(2) {
-                            flex: 3;
+                            width: 30%;
 
                         }
 
                         &:nth-child(3) {
-                            flex: 2;
+                            width: 25%;
                             color: #00ff91;
                         }
 
                         &:nth-child(4) {
-                            flex: 2;
+                            width: 25%;
                         }
 
                     }

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

@@ -75,7 +75,7 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
                 transform: translate(0, -40%);
                 color: #1fb3f7;
                 font-family: douyuFont;
-                font-size: 14px;
+                font-size: 12px;
             }
         }
 

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

@@ -15,7 +15,7 @@
               <div>监测区域</div>
             </div>
             <div class="tcontent-c">
-              <div style="color: #1fb3f7; font-size: 24px">低风险</div>
+              <div style="color: #1fb3f7; font-size: 20px">低风险</div>
             </div>
             <div class="tcontent-r">粉尘灾害</div>
           </div>

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

@@ -44,36 +44,8 @@ watch(() => props.emptyData, (newE, oldE) => {
     background-size: 100% 100%;
 
     &:nth-child(1) {
-      // animation: fdOne 16s linear infinite;
       top: 10px;
       left: 0;
-      // @keyframes fdOne {
-      //   0% {
-      //     top: 0%;
-      //     left: 10%;
-      //   }
-
-      //   20% {
-      //     top: 10%;
-      //     left: 30%;
-      //   }
-
-      //   60% {
-      //     top: 20%;
-      //     left: 50%;
-      //   }
-
-      //   80% {
-      //     top: 30%;
-      //     left: 70%;
-      //   }
-
-      //   100% {
-      //     top: 15%;
-      //     left: 80%;
-      //   }
-      // }
-
       width: 100px;
       height: 100px;
     }
@@ -81,211 +53,43 @@ watch(() => props.emptyData, (newE, oldE) => {
     &:nth-child(2) {
       top: 70px;
       left: 50px;
-      // @keyframes fdTwo {
-      //   0% {
-      //     top: 0%;
-      //     left: 30%;
-      //   }
-
-      //   20% {
-      //     top: 20%;
-      //     left: 50%;
-      //   }
-
-      //   60% {
-      //     top: 60%;
-      //     left: 80%;
-      //   }
-
-      //   80% {
-      //     top: 40%;
-      //     left: 40%;
-      //   }
-
-      //   100% {
-      //     top: 10%;
-      //     left: 20%;
-      //   }
-      // }
-
       width: 80px;
       height: 80px;
-      // animation: fdTwo 10s linear infinite;
     }
 
     &:nth-child(3) {
       top: 30px;
       left: 130px;
-      // @keyframes fdThree {
-      //   0% {
-      //     top: 50%;
-      //     left: 45%;
-      //   }
-
-      //   20% {
-      //     top: 35%;
-      //     left: 20%;
-      //   }
-
-      //   60% {
-      //     top: 15%;
-      //     left: 50%;
-      //   }
-
-      //   80% {
-      //     top: 40%;
-      //     left: 70%;
-      //   }
-
-      //   100% {
-      //     top: 55%;
-      //     left: 90%;
-      //   }
-      // }
-
       width: 90px;
       height: 90px;
-      // animation: fdThree 13s linear infinite;
     }
 
     &:nth-child(4) {
       top: 0;
       left: 190px;
-      // @keyframes fdFour {
-      //   0% {
-      //     top: 60%;
-      //     left: 50%;
-      //   }
-
-      //   20% {
-      //     top: 50%;
-      //     left: 35%;
-      //   }
-
-      //   60% {
-      //     top: 40%;
-      //     left: 20%;
-      //   }
-
-      //   80% {
-      //     top: 10%;
-      //     left: 0%;
-      //   }
-
-      //   100% {
-      //     top: 35%;
-      //     left: 50%;
-      //   }
-      // }
-
       width: 100px;
       height: 100px;
-      // animation: fdFour 16s linear infinite;
     }
 
     &:nth-child(5) {
       top: 60px;
       left: 290px;
-      // @keyframes fdFive {
-      //   0% {
-      //     top: 50%;
-      //     left: 70%;
-      //   }
-
-      //   20% {
-      //     top: 35%;
-      //     left: 85%;
-      //   }
-
-      //   60% {
-      //     top: 25%;
-      //     left: 65%;
-      //   }
-
-      //   80% {
-      //     top: 40%;
-      //     left: 20%;
-      //   }
-
-      //   100% {
-      //     top: 65%;
-      //     left: 50%;
-      //   }
-      // }
-
       width: 80px;
       height: 80px;
-      // animation: fdFive 10s linear infinite;
     }
 
     &:nth-child(6) {
-      top: 20px;
-      left: 370px;
-      // @keyframes fdSix {
-      //   0% {
-      //     top: 60%;
-      //     left: 15%;
-      //   }
-
-      //   20% {
-      //     top: 45%;
-      //     left: 30%;
-      //   }
-
-      //   60% {
-      //     top: 30%;
-      //     left: 45%;
-      //   }
-
-      //   80% {
-      //     top: 15%;
-      //     left: 60%;
-      //   }
-
-      //   100% {
-      //     top: 30%;
-      //     left: 40%;
-      //   }
-      // }
-
-      width: 100px;
-      height: 100px;
-      // animation: fdSix 16s linear infinite;
+      top: -7px;
+      left: 298px;
+      width: 80px;
+      height: 80px
     }
 
     &:nth-child(7) {
       top: 30px;
       left: 420px;
-      // @keyframes fdSev {
-      //   0% {
-      //     top: 10%;
-      //     left: 80%;
-      //   }
-
-      //   20% {
-      //     top: 30%;
-      //     left: 65%;
-      //   }
-
-      //   60% {
-      //     top: 50%;
-      //     left: 50%;
-      //   }
-
-      //   80% {
-      //     top: 70%;
-      //     left: 35%;
-      //   }
-
-      //   100% {
-      //     top: 50%;
-      //     left: 20%;
-      //   }
-      // }
-
       width: 90px;
       height: 90px;
-      // animation: fdSev 13s linear infinite;
     }
 
     .empty-label {

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

@@ -4,7 +4,8 @@
       <div class="jc-title">{{ item.type }}</div>
       <div class="jc-item">
         <span class="item-label">{{ `${item.label} : ` }}</span>
-        <span class="item-val">{{ `${item.val}%` }}</span>
+        <span class="item-val">{{ `${item.val}` }}</span>
+        <span class="item-dw">mg/m3</span>
       </div>
       <div class="jc-item1">
         <span class="item-label">{{ `${item.label1} : ` }}</span>
@@ -63,7 +64,7 @@
         transform: translate(0,-50%);
         color: #fff;
         // font-family: douyuFont;
-        font-size: 24px;
+        font-size: 20px;
         font-weight: bolder;
       }
 
@@ -118,10 +119,17 @@
 
       .item-label {
         color: #9da5aa;
+        font-size: 14px;
       }
 
       .item-val {
         color: #fff;
+        font-size: 14px;
+      }
+
+      .item-dw{
+        margin-left: 5px;
+        color: #fff;
       }
     }
   }

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

@@ -1,52 +1,62 @@
 <template>
   <div class="outFireJc">
-    <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>
+    <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>
-      <div class="outFire-label">{{ item.label }}</div>
-    </div>
+    </vue3-seamless-scroll>
+
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive,defineProps,watch } from 'vue';
+import { ref, reactive, defineProps, watch } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 
-  let props=defineProps({
-    outFireData:{
-      type:Array,
-      default:()=>{
-        return []
-      }
+let props = defineProps({
+  outFireData: {
+    type: Array,
+    default: () => {
+      return []
     }
-  })
+  }
+})
 
-  let outFireList = ref<any[]>([]);
+let outFireList = ref<any[]>([]);
 
-  watch(()=>props.outFireData,(newO,oldO)=>{
-    console.log(newO,'newO--------')
-    if(newO.length!=0){
-      outFireList.value=newO
-    }
-  },{immediate:true,deep:true})
+watch(() => props.outFireData, (newO, oldO) => {
+  console.log(newO, 'newO--------')
+  if (newO.length != 0) {
+    outFireList.value = newO
+  }
+}, { immediate: true, deep: true })
 </script>
 
 <style lang="less" scoped>
-  .outFireJc {
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: space-around;
+.outFireJc {
+  // display: flex;
+  position: relative;
+  // align-items: center;
+  // justify-content: space-around;
+  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%;
 
@@ -60,20 +70,20 @@
 
       .outFire-val {
         position: absolute;
-        top: 70px;
+        top: 68px;
         width: 100%;
         text-align: center;
 
         span {
           color: #1fb3f7;
-          font-size: 24px;
+          font-size: 20px;
           font-weight: bold;
         }
       }
 
       .outFire-label {
         position: absolute;
-        top: 120px;
+        top: 110px;
         width: 100%;
         color: #9da5aa;
         text-align: center;
@@ -110,4 +120,7 @@
       }
     }
   }
+
+
+}
 </style>

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

@@ -1,13 +1,15 @@
 <template>
   <div class="safetyJc">
     <div class="safety-head">
-      <div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{
-        item.label
-      }}</div>
+      <div :class="safetyHeadList.length == 4 ? 'safety-head-item' : 'safety-head-item1'"
+        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">
+        <div :class="safetyHeadList.length == 4 ? 'safety-content-box' : 'safety-content-box1'"
+          v-for="(ite, ind) in safetyList" :key="ind">
           <span v-if="ite.address">{{ ite.address }}</span>
           <span v-if="ite.nd">{{ ite.nd }}</span>
           <span v-if="ite.temp">{{ ite.temp }}</span>
@@ -75,43 +77,69 @@ watch(() => props.safetyList, (newL, oldL) => {
     padding: 0 7px;
 
     .safety-head-item {
+      height: 30px;
       color: #1fb3f7;
       font-weight: bold;
+      line-height: 30px;
+      text-align: center;
+
+      &:nth-child(1) {
+        display: inline-block;
+        width: 30%;
 
-      &:first-child {
-        display: flex;
-        flex: 2.5;
-        align-items: center;
-        justify-content: center;
       }
 
       &:nth-child(2) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
+        display: inline-block;
+        width: 20%;
+
       }
 
       &:nth-child(3) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
+        display: inline-block;
+        width: 20%;
       }
 
       &:nth-child(4) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
+        display: inline-block;
+        width: 30%;
       }
 
-      &:last-child {
-        display: flex;
-        flex: 2;
-        align-items: center;
-        justify-content: center;
+    }
+
+    .safety-head-item1 {
+      height: 30px;
+      color: #1fb3f7;
+      font-weight: bold;
+      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%;
+      }
+
     }
   }
 
@@ -124,71 +152,120 @@ watch(() => props.safetyList, (newL, oldL) => {
     height: calc(100% - 30px);
     overflow: hidden;
 
-    .seamless-warp{
+    .seamless-warp {
       width: 100%;
 
       .safety-content-box {
-      display: flex;
-      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;
-      background-size: 100% 100%;
-
-      span {
-        color: #fff;
-
-        &:first-child {
-          display: flex;
-          flex: 2.5;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
-          background-size: 100% 100%;
-        }
+        display: flex;
+        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;
+        background-size: 100% 100%;
 
-        &:nth-child(2) {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-        }
+        span {
+          height: 24px;
+          overflow: hidden;
 
-        &:nth-child(3) {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-        }
+          /* 超出部分隐藏 */
+          color: #fff;
+          font-size: 14px;
+          line-height: 24px;
+          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(4) {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
+          &:nth-child(2) {
+            display: inline-block;
+            width: 20%;
+          }
+
+          &:nth-child(3) {
+            display: inline-block;
+            width: 20%;
+          }
+
+          &:nth-child(4) {
+            display: inline-block;
+            width: 30%;
+          }
         }
+      }
 
-        &:last-child {
-          display: flex;
-          flex: 2;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
+      .safety-content-box1 {
+        display: flex;
+        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;
+        background-size: 100% 100%;
+
+        span {
+          height: 24px;
+          overflow: hidden;
+
+          /* 超出部分隐藏 */
+          color: #fff;
+          font-size: 14px;
+          line-height: 24px;
+          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%;
+          }
+
+          &:nth-child(3) {
+            display: inline-block;
+            width: 20%;
+          }
+
+          &:nth-child(4) {
+            display: inline-block;
+            width: 20%;
+          }
+
+          &:nth-child(5) {
+            display: inline-block;
+            width: 20%;
+          }
         }
       }
     }
-    }
 
-    
+
 
   }
-}
-</style>
+}</style>

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

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="card-workJc" :style="{ height: heightB }">
-      <vue3-seamless-scroll hover-stop="true" :list="cardList" :hover="true" :step="0.15" class="seamless-warp">
+      <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 }}</div>
@@ -139,12 +139,12 @@ function getOption() {
                 },
               },
             },
-            emphasis: {
-              show: true,
-              textStyle: {
-                fontSize: '10',
-              },
-            },
+            // emphasis: {
+            //   show: true,
+            //   textStyle: {
+            //     fontSize: '10',
+            //   },
+            // },
           },
           labelLine: {
             show: false,
@@ -291,6 +291,7 @@ onMounted(() => {
 
     .seamless-warp {
       width: 100%;
+      height: 100%;
 
       .card-box {
         position: relative;
@@ -311,14 +312,14 @@ onMounted(() => {
         .card-l-val {
           position: absolute;
           top: 50%;
-          left: 6%;
+          left: 24px;
           color: #a3d5e5;
-          font-size: 18px;
+          font-size: 16px;
         }
 
         .card-r-label {
           position: absolute;
-          top: 4%;
+          top: 8%;
           left: 20%;
           border-bottom: 1px solid #d0d2d3;
           color: #d0d2d3;

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

@@ -14,7 +14,7 @@
               <div>监测区域</div>
             </div>
             <div class="tcontent-c">
-              <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
+              <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 20px">低风险</div>
               <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
             </div>
             <div class="tcontent-r">火灾风险</div>
@@ -29,7 +29,7 @@
         <!-- 左下区域 -->
         <div class="left-b">
           <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
-           :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
+            :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
             <emptyJc :emptyData="emptyData" />
           </DanelBd>
         </div>
@@ -43,8 +43,9 @@
           <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <div class="center-b">
-          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '289px' }"
-            commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
+          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect"
+            :contentStyle="{ contentH: '289px' }" commonTitle="selected" :selectList="selectList"
+            @changeSelect="changeSelect">
             <fiberBunbleJc :bunbleData="bunbleData" />
           </DanelBd>
         </div>
@@ -227,8 +228,8 @@ async function getFireAreaInfoListMb() {
     dataMb.forEach(m => {
       selectListMb.push({ label: m.areaName, value: m.areaCode })
     })
-   
-    areaCodeMb.value =areaCodeMb.value ?  areaCodeMb.value : selectListMb[0]['value']
+
+    areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value']
     //获取密闭监测实时信息
     getMbRealDataList()
   }
@@ -292,21 +293,30 @@ async function getFireAreaInfoListDs() {
     dataDs.forEach(el => {
       selectListDs.push({ label: el.areaName, value: el.areaName })
     })
-    if (dsCode.value) {
-      let dataName = dataDs.filter(v => v.areaName == dsCode.value)[0]
-      console.log(dataName, '0000000=======')
-      outFireData.push(
-        { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
-        { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
-        { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
-      )
-    } else {
-      outFireData.push(
-        { title: '光钎预警', val: dataDs[0].infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
-        { title: '一氧化碳预警', val: dataDs[0].infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
-        { title: '烟雾预警', val: dataDs[0].infoTypeTwo.hazard, dw: '', label: '状态' },
-      )
-    }
+    dsCode.value = dsCode.value ? dsCode.value : selectListDs[0]['value']
+    let dataName = dataDs.filter(v => v.areaName == dsCode.value)[0]
+    console.log(dataName, '0000000=======')
+    outFireData.push(
+      { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
+      { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
+      { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
+    )
+
+    // if (dsCode.value) {
+    //   let dataName = dataDs.filter(v => v.areaName == dsCode.value)[0]
+    //   console.log(dataName, '0000000=======')
+    //   outFireData.push(
+    //     { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
+    //     { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
+    //     { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
+    //   )
+    // } else {
+    //   outFireData.push(
+    //     { title: '光钎预警', val: dataDs[0].infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
+    //     { title: '一氧化碳预警', val: dataDs[0].infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
+    //     { title: '烟雾预警', val: dataDs[0].infoTypeTwo.hazard, dw: '', label: '状态' },
+    //   )
+    // }
   }
 }
 
@@ -334,7 +344,7 @@ async function getInfosByAreaCodeList() {
         value: el.pointCode
       })
     })
-    pointCodeBd.value =pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
+    pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
     //获取光钎测温图表数据
     getGxcwHistoryDataByPointCodeList()
   }