灾害预警系统接口对接提交

package.json

@@ -79,7 +79,9 @@
     "vue-i18n": "^9.6.4",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.2.3",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-types": "^5.1.0",
+    "vue3-seamless-scroll": "^2.0.1",
     "vuedraggable": "^4.1.0",
     "vxe-table": "^4.4.5",
     "vxe-table-plugin-export-xlsx": "^3.0.4",

src/utils/http/axios/Axios.ts

@@ -229,7 +229,6 @@ export class VAxios {
           if (transformResponseHook && isFunction(transformResponseHook)) {
             try {
               const ret = transformResponseHook(res, opt);
-              debugger;
               resolve(ret);
             } catch (err) {
               reject(err || new Error('request error!'));

src/utils/http/axios/index.ts

@@ -34,7 +34,6 @@ const transform: AxiosTransform = {
    * @description: 处理响应数据。如果数据不是预期格式，可直接抛出错误
    */
   transformResponseHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
-    debugger;
     const { t } = useI18n();
     const { isTransformResponse, isReturnNativeResponse } = options;
     // 是否返回原生响应头 比如：需要获取响应头时使用该属性

src/views/vent/common/basicCard2.vue

@@ -2,14 +2,14 @@
   <div class="basicCard2">
     <div class="card2-box" v-for="(item, index) in cardContentLists2">
       <div class="card2-item">
-        <img class="card2-box-img" :src="item.imgSrcL" alt="" //>
+        <img class="card2-box-img" :src="item.imgSrcL" alt="" />
         <div class="card2-item-box">
           <div class="item-box-label">{{ item.labelL }}</div>
           <div class="item-box-val">{{ item.valL }}</div>
         </div>
       </div>
       <div class="card2-item">
-        <img v-if="item.imgSrcR" class="card2-box-img" :src="item.imgSrcR" alt="" //>
+        <img v-if="item.imgSrcR" class="card2-box-img" :src="item.imgSrcR" alt="" />
         <div class="card2-item-box">
           <div class="item-box-label">{{ item.labelR }}</div>
           <div class="item-box-val">{{ item.valR }}</div>

src/views/vent/common/basicCard3.vue

@@ -73,10 +73,12 @@ watch(() => props.card3List, (newV, oldV) => {
 .basicCard3 {
   display: flex;
   position: relative;
+  box-sizing: border-box;
   align-items: flex-end;
   justify-content: flex-start;
   width: 100%;
   height: 100%;
+  padding-bottom: 15px;
   overflow-x: auto;
   transform: scaleY(-1);
 
@@ -160,8 +162,8 @@ watch(() => props.card3List, (newV, oldV) => {
 
       .card3-box-item {
         position: absolute;
-        top: 50%;
-        left: 29%;
+        top: 52%;
+        left: 7%;
         transform: rotate(45deg);
         color: #fff;
       }
@@ -260,8 +262,8 @@ watch(() => props.card3List, (newV, oldV) => {
 
       .card3-box-item {
         position: absolute;
-        top: 38%;
-        left: 32%;
+        top: 36%;
+        left: 8%;
         transform: rotate(45deg);
         color: #fff;
       }

src/views/vent/common/basicCard4.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="basicCard4">
+    <div :class="activeIndex == index ? 'card4-box1' : 'card4-box'" v-for="(item, index) in card4List" :key="index"
+      @click="toggleDustCard(index, item)">
+      <div class="card4-title">{{ item.title }}</div>
+      <div class="card4-content">
+        <div class="content-item" v-for="(items, ind) in item.list" :key="ind">
+          <span>{{ items.label }}</span>
+          <span>{{ items.value }}</span>
+        </div>
+      </div>
+      <div class="card4-level">
+        <div class="level-text">{{ warningLevel }}</div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineProps, watch,defineEmits } from 'vue'
+
+let props = defineProps({
+  cardData4: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  warningLevel:{
+    type:String,
+    default:''
+  }
+})
+
+let emit=defineEmits(['toggleDustCards'])
+let activeIndex = ref(0)
+let card4List = ref<any[]>([])
+
+function toggleDustCard(index, item) {
+  activeIndex.value = index
+  emit('toggleDustCards',item.sensorCode)
+}
+
+watch(() => props.cardData4, (newC, oldC) => {
+  console.log(newC, 'newC------')
+  if (newC.length != 0) {
+    card4List.value = newC
+  }
+}, {
+  immediate: true,
+  deep: true
+})
+
+</script>
+
+<style lang="less" scoped>
+.basicCard4 {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: flex-end;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 10px;
+  overflow-x: auto;
+  transform: scaleY(-1);
+  background-color: rgb(41 49 53 / 80%);
+
+  .card4-box {
+    position: relative;
+    flex-shrink: 0;
+    width: 338px;
+    height: 147px;
+    margin: 0 10px;
+    transform: scaleY(-1);
+    background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
+    background-size: 100% 100%;
+
+    .card4-title {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 100%;
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    .card4-content {
+      display: flex;
+      position: absolute;
+      top: 26px;
+      left: 0;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: 100%;
+      height: 120px;
+
+      .content-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 50%;
+        height: 50%;
+        background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
+        background-size: 95% 50%;
+
+        span {
+          &:first-child {
+            color: #fff;
+            font-size: 14px;
+          }
+
+          &:last-child {
+            color: #01fefc;
+            font-family: douyuFont;
+          }
+        }
+      }
+    }
+
+    .card4-level{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 75px;
+      height: 75px;
+
+      .level-text{
+        position: absolute;
+        top: 65%;
+        left: 10%;
+        transform: rotate(45deg);
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .card4-box1 {
+    position: relative;
+    flex-shrink: 0;
+    width: 338px;
+    height: 170px;
+    margin: 0 10px;
+    transform: scaleY(-1);
+    background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
+    background-size: 100% 100%;
+
+    .card4-title {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 100%;
+      color: #fff;
+      font-size: 16px;
+      text-align: center;
+    }
+
+    .card4-content {
+      display: flex;
+      position: absolute;
+      top: 26px;
+      left: 0;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: 100%;
+      height: 120px;
+
+      .content-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 50%;
+        height: 50%;
+        background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
+        background-size: 95% 50%;
+
+        span {
+          &:first-child {
+            color: #fff;
+            font-size: 12px;
+          }
+
+          &:last-child {
+            color: #01fefc;
+            font-family: douyuFont;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    .card4-level{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 75px;
+      height: 75px;
+
+      .level-text{
+        position: absolute;
+        top: 36%;
+        left: 10%;
+        transform: rotate(45deg);
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>

src/views/vent/common/basicCard5.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="basicCard5">
+    <div class="card5-top">
+      <div class="top-item" v-for="(item, index) in topList" :key="index">
+        <div class="item-text">{{ item.label }}</div>
+      </div>
+    </div>
+    <div class="card5-bottom">
+      <div class="bottom-item" v-for="(items, ind) in botList" :key="ind">
+        <div class="item-val">{{ items.val}}</div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineProps, watch } from 'vue'
+
+let props = defineProps({
+  cardData5: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
+let topList = reactive([
+  { id: 0, label: '粉尘浓度(mg/m³)' },
+  { id: 1, label: '总尘浓度(mg/m³)' },
+  { id: 2, label: '呼尘加权容许浓度(mg/m³)' },
+  { id: 3, label: '爆炸浓度(mg/m³)' },
+])
+let botList = ref<any[]>([])
+
+watch(() => props.cardData5, (newC, oldC) => {
+  console.log(newC, 'newC1---------')
+  if (newC.length != 0) {
+    botList.value = newC
+  }
+}, {
+  immediate: true,
+  deep: true
+})
+</script>
+
+<style lang="less" scoped>
+.basicCard5 {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(41 49 53 / 80%);
+
+  .card5-top {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 50%;
+    padding: 0 68px;
+    background: url('../../../assets/images/dust/dusthome/dz.png') no-repeat bottom;
+    background-size: 100% 50%;
+
+    .top-item {
+      position: relative;
+      width: 218px;
+      height: 97px;
+      background: url('../../../assets/images/dust/dusthome/dz1.png') no-repeat center;
+
+      .item-text {
+        position: absolute;
+        top: 10px;
+        width: 100%;
+        color: #fff;
+        text-align: center;
+      }
+    }
+
+  }
+
+  .card5-bottom {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 50%;
+    padding: 0 68px;
+
+    .bottom-item {
+      width: 169px;
+      height: 42px;
+      background: url('../../../assets/images/dust/dusthome/dz2.png') no-repeat center;
+      background-size: 100% 100%;
+      line-height: 42px;
+      text-align: center;
+
+      .item-val {
+        color: #01fefc;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/vent/common/basicEchartLine.vue

@@ -35,10 +35,10 @@ let gridVs = reactive({
 })
 
 let echartDatas = reactive({
-  xData:[],
-    yData:[],
-    yData1:[],
-    legendName:[]
+  xData: [],
+  yData: [],
+  yData1: [],
+  legendName: []
 })
 
 function getOption() {
@@ -96,10 +96,10 @@ function getOption() {
         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: echartDatas.legendName.length!=0 ? echartDatas.legendName[0] : '',
+            name: echartDatas.legendName.length != 0 ? echartDatas.legendName[0] : '',
           },
           {
-            name: echartDatas.legendName.length>1 ? echartDatas.legendName[1] : '',
+            name: echartDatas.legendName.length > 1 ? echartDatas.legendName[1] : '',
           },
         ],
       },
@@ -119,16 +119,48 @@ function getOption() {
           },
           axisLabel: {
             fontSize: 14,
-            // margin: 10,
+            margin: 10,
             textStyle: {
               color: '#b3b8cc',
             },
+            formatter: function (params) {
+              let newParamsName = ref('')  // 最终拼接成的字符串
+              let paramsNameNumber = ref(params.length) // 实际标签的个数
+              let provideNumber = ref(10)  // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber.value > provideNumber.value) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = '' // 表示每一次截取的字符串
+                  var start = p * provideNumber.value // 开始截取的位置
+                  var end = start + provideNumber.value // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber.value)
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n'
+                  }
+                  newParamsName.value += tempStr // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName.value = params
+              }
+              //将最终的字符串返回
+              return newParamsName.value
+            }
           },
           axisTick: { show: true }, //刻度点数轴
           splitLine: {
             show: false,
           },
-          data: echartDatas.xData.length!=0 ? echartDatas.xData : [],
+          data: echartDatas.xData.length != 0 ? echartDatas.xData : [],
         },
       ],
       yAxis: [
@@ -160,7 +192,7 @@ function getOption() {
       ],
       series: [
         {
-          name:echartDatas.legendName.length!=0 ? echartDatas.legendName[0] : '',
+          name: echartDatas.legendName.length != 0 ? echartDatas.legendName[0] : '',
           type: 'line', //统计图类型为折线图
           smooth: false, //是否平滑曲线显示
           symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
@@ -196,10 +228,10 @@ function getOption() {
               shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
             },
           },
-          data: echartDatas.yData.length!=0 ? echartDatas.yData : [],
+          data: echartDatas.yData.length != 0 ? echartDatas.yData : [],
         },
         {
-          name: echartDatas.legendName.length>1 ? echartDatas.legendName[1] : '',
+          name: echartDatas.legendName.length > 1 ? echartDatas.legendName[1] : '',
           type: 'line', //统计图类型为折线图
           smooth: false, //是否平滑曲线显示
           symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
@@ -235,7 +267,7 @@ function getOption() {
               shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
             },
           },
-          data: echartDatas.yData1.length!=0 ? echartDatas.yData1 : [],
+          data: echartDatas.yData1.length != 0 ? echartDatas.yData1 : [],
         },
       ],
     };
@@ -258,8 +290,8 @@ watch(() => props.echartData, (newE, oldE) => {
   console.log(newE, 'echartData---------')
   echartDatas.xData = newE.xData
   echartDatas.yData = newE.yData
-  echartDatas.yData1=newE.yData1
-  echartDatas.legendName=newE.legendName
+  echartDatas.yData1 = newE.yData1
+  echartDatas.legendName = newE.legendName
   getOption();
 }, { immediate: true, deep: true })
 

src/views/vent/common/basicSensor.vue

@@ -7,145 +7,191 @@
     <div class="sensor-content">
       <div class="sensor-content-item" v-for="(items, ind) in sensorLists" :key="ind">
         <div class="content-item-bg" :style="{ width: `${widthV}%` }"></div>
-        <span>{{ items.name }}</span>
-        <span>{{ items.status }}</span>
-        <span>{{ items.warn }}</span>
-        <span>{{ items.times }}</span>
+        <span class="item-text" v-if="items.name">{{ items.name }}</span>
+        <span class="item-text1" v-if="items.nd">{{ items.nd }}</span>
+        <span class="item-text2" v-if="items.status">{{ items.status }}</span>
+        <span class="item-text3" v-if="items.warn">{{ items.warn }}</span>
+        <span class="item-text4" v-if="items.times">{{ items.times }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, defineProps, computed, watch } from 'vue';
-
-  let props = defineProps({
-    //标题
-    sensorTitle: {
-      type: String,
-      default: () => {
-        return '烟雾传感器';
-      },
+import { ref, reactive, defineProps, computed, watch } from 'vue';
+
+let props = defineProps({
+  //标题
+  sensorTitle: {
+    type: String,
+    default: () => {
+      return '烟雾传感器';
     },
-    sensorList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
+  },
+  sensorList: {
+    type: Array,
+    default: () => {
+      return [];
     },
-    headList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
+  },
+  headList: {
+    type: Array,
+    default: () => {
+      return [];
     },
-  });
+  },
+});
 
-  let sensorLists = ref<any[]>([]);
+let sensorLists = ref<any[]>([]);
 
-  let headLists = ref<any[]>([]);
+let headLists = ref<any[]>([]);
 
-  let widthV = computed(() => {
-    return 100 / headLists.value.length;
-  });
+let widthV = computed(() => {
+  return (100 / (headLists.value.length+1))*2;
+});
 
-  watch(
-    () => props.sensorList,
-    (newV, oldV) => {
-      console.log(newV, 'newV----------');
-      sensorLists.value = newV;
-    },
-    { immediate: true, deep: true },
-  );
-  watch(
-    () => props.headList,
-    (newN, oldN) => {
-      console.log(newN, 'newN-----------');
-      headLists.value = newN;
-    },
-    { immediate: true, deep: true },
-  );
+watch(
+  () => props.sensorList,
+  (newV, oldV) => {
+    console.log(newV, 'newV----------');
+    sensorLists.value = newV;
+  },
+  { immediate: true, deep: true },
+);
+watch(
+  () => props.headList,
+  (newN, oldN) => {
+    console.log(newN, 'newN-----------');
+    headLists.value = newN;
+  },
+  { immediate: true, deep: true },
+);
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: douyuFont;
+  src: url('../../../assets/font/douyuFont.otf');
+}
+
+.basicSensor {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow-y: auto;
+  background-color: rgb(41 49 53 / 80%);
+
+  .sensor-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    color: #fff;
     font-family: douyuFont;
-    src: url('../../../assets/font/douyuFont.otf');
+    font-size: 16px;
   }
 
-  .basicSensor {
-    position: relative;
-    box-sizing: border-box;
+  .sensor-table-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
     width: 100%;
-    height: 100%;
-    padding: 10px 15px;
-    overflow-y: auto;
-    background-color: rgb(41 49 53 / 80%);
+    height: 34px;
 
-    .sensor-title {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: 40px;
-      color: #fff;
-      font-family: douyuFont;
-      font-size: 16px;
-    }
+    .head-item {
+      &:nth-child(1) {
+        display: flex;
+        flex: 2;
+        align-items: center;
+        justify-content: center;
+        color: #1faef0;
+      }
 
-    .sensor-table-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      width: 100%;
-      height: 34px;
+      &:nth-child(2) {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        color: #1faef0;
+      }
+
+      &:nth-child(3) {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        color: #1faef0;
+      }
 
-      .head-item {
+      &:nth-child(4) {
         display: flex;
         flex: 1;
         align-items: center;
         justify-content: center;
         color: #1faef0;
       }
+
+      &:nth-child(5) {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        color: #1faef0;
+      }
+
     }
+  }
+
+  .sensor-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    height: calc(100% - 74px);
+    overflow-y: auto;
 
-    .sensor-content {
+    .sensor-content-item {
       display: flex;
-      flex-direction: column;
+      position: relative;
+      flex-shrink: 0;
       align-items: center;
-      justify-content: flex-start;
-      height: calc(100% - 74px);
-      overflow-y: auto;
+      justify-content: space-around;
+      width: 100%;
+      height: 32px;
+      margin-bottom: 15px;
+      background: url('../../../assets/images/workPlaceWarn/work-bot.png') no-repeat center;
+      background-size: 100% 100%;
 
-      .sensor-content-item {
-        display: flex;
-        position: relative;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: space-around;
-        width: 100%;
+      .content-item-bg {
+        position: absolute;
+        top: 0;
+        left: 8px;
+        // width: 168px;
         height: 32px;
-        margin-bottom: 15px;
-        background: url('../../../assets/images/workPlaceWarn/work-bot.png') no-repeat center;
+        background: url('../../../assets/images/workPlaceWarn/work-bot1.png') no-repeat center;
         background-size: 100% 100%;
+      }
+
+      .item-text {
+        display: flex;
+        flex: 2;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+      }
 
-        .content-item-bg {
-          position: absolute;
-          top: 0;
-          left: 8px;
-          // width: 168px;
-          height: 32px;
-          background: url('../../../assets/images/workPlaceWarn/work-bot1.png') no-repeat center;
-          background-size: 100% 100%;
-        }
-
-        span {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          justify-content: center;
-          color: #fff;
-        }
+      .item-text1,
+      .item-text2,
+      .item-text3,
+      .item-text4 {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
       }
     }
   }
-</style>
+}</style>

src/views/vent/common/basicWorkBtn.vue

@@ -6,13 +6,13 @@
       :key="index"
       @click="WorkBtnClick(index, item)"
     >
-      <div class="work-btn-text">{{ item.name }}</div>
+      <div class="work-btn-text">{{ item.label }}</div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
+  import { ref, reactive, defineProps, watch,defineEmits } from 'vue';
 
   let props = defineProps({
     workBtnList: {
@@ -27,10 +27,13 @@
 
   let activeIndex = ref(0); //当前按钮激活索引
 
+  const emit = defineEmits(['btnToggle']);
+
   //选项切换
   function WorkBtnClick(index, item) {
     console.log(index, 'index-----');
     activeIndex.value = index;
+    emit('btnToggle', item)
   }
 
   watch(
@@ -102,11 +105,13 @@
       .work-btn-text {
         position: absolute;
         top: 26px;
-        left: 50%;
-        transform: translate(-50%, 0);
+        // left: 50%;
+        // transform: translate(-50%, 0);
+        width: 100%;
         color: #fff;
         font-family: douyuFont;
         font-size: 18px;
+        text-align: center;
       }
     }
   }

src/views/vent/common/danelBd.vue

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

@@ -0,0 +1,14 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  realData = '/fire/show/realData',
+}
+/**
+ * 
+ * @param params
+ */
+export const realData = (params) => defHttp.post({ url: Api.realData,params });
+
+
+
+

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

@@ -1,8 +1,6 @@
 <template>
   <div class="dustAtomizing">
-    <div class="dustAto-left-box">
-      <basicTree :treeData="treeData"></basicTree>
-    </div>
+
     <div class="dustAto-right-box">
       <div class="search-area">
         <Form :model="formState" :label-col="{ span: 1.5 }">
@@ -11,36 +9,44 @@
               style="width:240px;margin-right: 20px;" />
           </FormItem>
           <FormItem label="">
-            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;"
+              @click="getSearch">
               <template #icon>
                 <SearchOutlined />
               </template>
               查询
             </a-button>
-            <a-button type="primary" style="height: 30px; padding: 2px 15px;background-color: #227fad;">
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
               <template #icon>
                 <PlusOutlined />
               </template>
               新增
             </a-button>
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              一键开启
+            </a-button>
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              一键关闭
+            </a-button>
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              自动启停
+            </a-button>
           </FormItem>
         </Form>
       </div>
       <div class="content-area">
         <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
-          :pagination="false" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+          :pagination="false">
+
           <template #action="{ record }">
-            <a-button type="link">
-              <template #icon>
-                <SearchOutlined />
-              </template>
-              编辑
+            <a-button type="link" style="color:#3DF6FF">
+              启动
             </a-button>
-            <a-button type="link">
-              <template #icon>
-                <SearchOutlined />
-              </template>
-              删除
+            <a-button type="link" style="color:#3DF6FF">
+              关闭
+            </a-button>
+            <a-button type="link" style="color:#3DF6FF">
+              自动
             </a-button>
           </template>
         </Table>
@@ -50,10 +56,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import basicTree from '../../common/basicTree.vue'
+import { ref, reactive, onMounted } from 'vue'
 import { Form, FormItem, Table } from 'ant-design-vue';
 import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { realData } from './dustAtomizing.api'
+import dayjs from 'dayjs'
 
 //查询条件
 let formState = reactive({
@@ -61,248 +68,140 @@ let formState = reactive({
 })
 
 //table 数据
-let dataSource = reactive([
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-])
+let dataSource = reactive<any[]>([])
 
 //table 列
-let columns = reactive([
+let columns = reactive<any[]>([
   {
     title: '序号',
-    dataIndex: 'Index',
-    key: 'Index',
     width: 60,
     align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
   },
   {
     title: '设备名称',
-    dataIndex: 'name',
-    key: 'name',
-
+    dataIndex: 'deviceName',
+    key: 'deviceName',
     align: 'center',
     ellipsis: true,
   },
   {
     title: '安装位置',
-    dataIndex: 'age',
-    key: 'age',
-
+    dataIndex: 'location',
+    key: 'location',
     align: 'center',
     ellipsis: true,
   },
   {
     title: '喷雾状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'stateSpray',
+    key: 'stateSpray',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '链接状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'stateConn',
+    key: 'stateConn',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '设备状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'deviceState',
+    key: 'deviceState',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '使用状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'stateEnable',
+    key: 'stateEnable',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '控制状态',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'stateManual',
+    key: 'stateManual',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '粉尘浓度',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'dust',
+    key: 'dust',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '电池电量',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'batteryLevel',
+    key: 'batteryLevel',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '是否定时',
-    dataIndex: 'address',
-    key: 'address',
-    width: 80,
+    dataIndex: 'timingSwitch',
+    key: 'timingSwitch',
+    width: 100,
     align: 'center',
     ellipsis: true,
   },
   {
     title: '时间',
-    dataIndex: 'address',
-    key: 'address',
+    dataIndex: 'time',
+    key: 'time',
     align: 'center',
     ellipsis: true,
   },
   {
     title: '操作',
     key: 'action',
-    width: 200,
+    width: 300,
     slots: { customRender: 'action' },
     align: 'center',
   },
 ])
 
-//数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
+
+
+//获取喷雾列表
+async function getList() {
+  dataSource.length = 0
+  let res = await realData({ deviceName: formState.devicename, type: "DustPw" })
+  console.log(res, '喷雾列表数据------')
+  if (res.length != 0) {
+    res.forEach(el => {
+      el.timingSwitch = el.timingSwitch == '1' ? '是' : '否'
+      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关'
+      el.stateConn = el.stateConn == '1' ? '链接' : '未链接'
+      el.deviceState = el.deviceState == '1' ? '喷雾打开' : el.deviceState == '0' ? '喷雾关闭' : '未连接'
+      el.stateEnable = el.stateEnable == '1' ? '使用' : '未使用'
+      el.stateManual = el.stateManual == '0' ? '自动控制' : '手动控制'
+      el.time = dayjs().format('YYYY-MM-DD HH:MM:ss')
+      dataSource.push(el)
+    })
+  }
+
+}
+
+//列表查询
+function getSearch() {
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style lang="less" scoped>
@@ -316,15 +215,11 @@ const treeData = reactive([
   margin: 50px 10px 15px;
   background: #282828;
 
-  .dustAto-left-box {
-    width: 220px;
-    height: 100%;
-    background-color: rgb(27 35 39 / 80%);
-  }
+
 
   .dustAto-right-box {
     box-sizing: border-box;
-    width: calc(100% - 230px);
+    width: 100%;
     height: 100%;
     margin-left: 10px;
     padding: 15px 10px;
@@ -400,8 +295,4 @@ const treeData = reactive([
 :deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
   background: rgb(38 74 96) !important;
 }
-
-:deep(.table-striped td){
-  background-color: rgb(3 58 85 / 36%) !important;
-}
 </style>

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

@@ -4,19 +4,19 @@
             <div class="box-c"></div>
             <div class="box-left-t">
                 <div class="item-label">设备总数</div>
-                <div class="item-val">10</div>
+                <div class="item-val">{{ deviceTotal }}</div>
             </div>
             <div class="box-left-b">
                 <div class="item-label">喷雾开启数</div>
-                <div class="item-val">10</div>
+                <div class="item-val">{{ pwTotal }}</div>
             </div>
             <div class="box-right-t">
                 <div class="item-label">联网数量</div>
-                <div class="item-val">10</div>
+                <div class="item-val">{{ interTotal }}</div>
             </div>
             <div class="box-right-b">
                 <div class="item-label">断网数量</div>
-                <div class="item-val">10</div>
+                <div class="item-val">{{ unInterTotal }}</div>
             </div>
         </div>
         <div class="fall-right-box">
@@ -24,14 +24,17 @@
                 <div class="fall-head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.title }}</div>
             </div>
             <div class="fall-table-content">
-                <div class="scroll-box">
+                <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">{{ item.code }}</span>
-                        <span class="content-item-val">{{ item.name }}</span>
-                        <span class="content-item-val">{{ item.ljzt }}</span>
-                        <span class="content-item-val">{{ item.status }}</span>
+                        <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>
-                </div>
+                </vue3-seamless-scroll>
+
+
 
             </div>
         </div>
@@ -39,7 +42,33 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, defineProps, watch } from 'vue'
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+
+let props = defineProps({
+    deviceTotal: {
+        type: Number,
+        default: 0
+    },
+    pwTotal: {
+        type: Number,
+        default: 0
+    },
+    interTotal: {
+        type: Number,
+        default: 0
+    },
+    unInterTotal: {
+        type: Number,
+        default: 0
+    },
+    pwData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
 
 //table头
 let tabHeadList = reactive([
@@ -49,24 +78,17 @@ let tabHeadList = reactive([
     { title: '喷雾状态' },
 ])
 //table content
-let tabContentList = reactive([
-    { code: 0, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 1, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 2, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 3, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 4, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 5, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 6, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 7, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 0, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 1, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 2, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 3, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 4, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 5, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 6, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 7, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-])
+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>
@@ -203,62 +225,53 @@ let tabContentList = reactive([
             height: calc(100% - 32px);
             overflow: hidden;
 
-            .scroll-box {
-                @keyframes scrollTop {
-                    0% {
-                        transform: translate3d(0, 0, 0);
-                    }
-
-                    100% {
-                        transform: translate3d(0, -250px, 0);
-                    }
-                }
-
+            .seamless-warp {
                 width: 100%;
-                animation: 10s scrollTop linear infinite normal;
 
+                .fall-content-item {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    height: 34px;
 
-            }
+                    &:nth-child(odd) {
+                        background-color: #0b202e;
+                    }
 
-            .fall-content-item {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                height: 34px;
+                    &:nth-child(even) {
+                        background-color: #0d3144;
+                    }
 
-                &:nth-child(odd) {
-                    background-color: #0b202e;
-                }
+                    .content-item-val {
+                        display: flex;
+                        justify-content: center;
+                        color: #fff;
 
-                &:nth-child(even) {
-                    background-color: #0d3144;
-                }
+                        &:nth-child(1) {
+                            flex: 1;
+                        }
 
-                .content-item-val {
-                    display: flex;
-                    justify-content: center;
-                    color: #fff;
+                        &:nth-child(2) {
+                            flex: 3;
 
-                    &:nth-child(1) {
-                        flex: 1;
-                    }
+                        }
 
-                    &:nth-child(2) {
-                        flex: 3;
-                    }
+                        &:nth-child(3) {
+                            flex: 2;
+                            color: #00ff91;
+                        }
 
-                    &:nth-child(3) {
-                        flex: 2;
-                        color: #00ff91;
-                    }
+                        &:nth-child(4) {
+                            flex: 2;
+                        }
 
-                    &:nth-child(4) {
-                        flex: 2;
                     }
 
                 }
-
             }
+
+
+
         }
     }
 }

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

@@ -10,16 +10,28 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { reactive, ref, defineProps, watch } from 'vue'
 
-let dustZbList = reactive([
-    { id: 0, label: '最高温度(℃)', val: 12 },
-    { id: 1, label: '环境湿度(%)', val: 12 },
-    { id: 2, label: '风速(m/s)', val: 12 },
-    { id: 3, label: '采煤机', val: 12 },
-    { id: 4, label: '水压(Mpa)', val: 12 },
-    { id: 5, label: '水阀', val: 12 },
-])
+let props = defineProps({
+    dustGlzbData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+let dustZbList = ref<any[]>([])
+
+watch(() => props.dustGlzbData, (newD, oldD) => {
+    console.log(newD, 'newD--------')
+    if (newD.length != 0) {
+        dustZbList.value = newD
+    }
+}, {
+    immediate: true,
+    deep: true
+})
 
 </script>
 
@@ -45,19 +57,19 @@ let dustZbList = reactive([
             width: 254px;
             height: 100%;
 
-            .gl-label{
+            .gl-label {
                 position: absolute;
                 top: 50%;
                 left: 74px;
-                transform: translate(0,-50%);
+                transform: translate(0, -50%);
                 color: #fff;
             }
 
-            .gl-val{
+            .gl-val {
                 position: absolute;
                 top: 50%;
                 right: 36px;
-                transform: translate(0,-40%);
+                transform: translate(0, -40%);
                 color: #1fb3f7;
                 font-family: douyuFont;
             }
@@ -93,4 +105,5 @@ let dustZbList = reactive([
             background-size: 100% 100%;
         }
     }
-}</style>
+}
+</style>

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

@@ -13,11 +13,11 @@
 import { ref, reactive } from 'vue'
 
 let jtzbList = reactive([
-    { id: 0, label: '游离二氧化硅', val: 53535 },
-    { id: 1, label: '分散度', val: 48485 },
-    { id: 2, label: '煤尘爆炸性', val: 48485 },
-    { id: 3, label: '火焰长度', val: 5878 },
-    { id: 4, label: '最低岩粉量', val: 48485 },
+    { id: 0, label: '游离二氧化硅', val: 0 },
+    { id: 1, label: '分散度', val: 0 },
+    { id: 2, label: '煤尘爆炸性', val: 0 },
+    { id: 3, label: '火焰长度', val: 0 },
+    { id: 4, label: '最低岩粉量', val: 0 },
 ])
 </script>
 

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

@@ -1,177 +1,45 @@
 <template>
     <div class="multipleDust">
-        <div class="multiple-box" ref="multiple"></div>
+        <basicEchartLine :gridV="gridV" :echartData="echartDatas"></basicEchartLine>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, nextTick } from 'vue'
-import * as echarts from 'echarts';
-
-//获取don元素节点
-let multiple = ref()
-
-
-function getOption() {
-    nextTick(() => {
-        let myChart = echarts.init(multiple.value);
-        let option = {
-            grid: {
-                top: '8%',
-                left: '5%',
-                right: '5%',
-                bottom: '8%',
-                // containLabel: true
-            },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    lineStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [{
-                                offset: 0,
-                                color: 'rgba(31, 179, 247,0)'
-                            }, {
-                                offset: 0.5,
-                                color: 'rgba(31, 179, 247,1)',
-                            }, {
-                                offset: 1,
-                                color: 'rgba(31, 179, 247,0)'
-                            }],
-                            global: false
-                        }
-                    },
-                },
-            },
-
-            xAxis: [
-                {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(100, 99, 99,.5)',
-                            type: 'dashed'
-                        },
-                    },
-                    // splitArea: {
-                    //     show: true,
-                    //     color: 'red',
-                    //     lineStyle: {
-                    //         color: 'red'
-                    //     },
-                    // },
-                    axisLabel: {
-                        fontSize: 14,
-                        // margin: 10,
-                        textStyle: {
-                            color: '#b3b8cc',
-                        },
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-
-                    data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06'],
-
-                }
-            ],
-
-            yAxis: [{
-                type: 'value',
-                min: 0,
-                // max: 140,
-                // splitNumber: 4,
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        color: 'rgba(100, 99, 99,.5)',
-                        type: 'dashed'
-                    }
-                },
-                axisLine: {
-                    show: false,
-                },
-                axisLabel: {
-                    show: false,
-                    margin: 20,
-                    textStyle: {
-                        color: '#d1e6eb',
-
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-            }],
-            series: [
-                {
-                    name: '粉尘浓度',
-                    type: 'line',
-                    smooth: true, //是否平滑
-                    showAllSymbol: true,
-                    // symbol: 'image://./static/images/guang-circle.png',
-                    symbol: 'circle',
-                    symbolSize: 10,
-                    lineStyle: {
-                        normal: {
-                            color: "#1fb3f7",
-                        },
-                    },
-                    label: {
-                        show: true,
-                        position: 'top',
-                        textStyle: {
-                            color: '#1fb3f7',
-                        }
-                    },
-                    itemStyle: {
-                        color: "#1fb3f7",
-                        borderColor: "#1fb3f7",
-                        borderWidth: 1,
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue'
+import basicEchartLine from '../../../common/basicEchartLine.vue';
+
+let props = defineProps({
+    echartData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
 
-                    },
-                    tooltip: {
-                        show: false
-                    },
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color: 'rgba(31, 179, 247,0.3)'
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(31, 179, 247,0)'
-                            }
-                            ], false),
-                            shadowColor: 'rgba(31, 179, 247, 0.9)',
-                            shadowBlur: 20
-                        }
-                    },
-                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
-                },
-            ]
-        };
-        myChart.setOption(option);
-        window.onresize = function () {
-            myChart.resize();
-        };
-    });
-}
+let gridV = reactive({
+    top: '8%',
+    left: '6%',
+    right: '4%',
+    bottom: '14%',
+})
 
-onMounted(() => {
-    getOption()
+let echartDatas = reactive({
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: []
 })
 
+watch(() => props.echartData, (newE, oldE) => {
+    console.log(newE, 'newE1--------')
+    echartDatas.xData = newE.xData
+    echartDatas.yData = newE.yData
+    echartDatas.legendName = newE.legendName
+}, {
+    immediate: true,
+    deep: true
+})
 </script>
 
 <style lang="less" scoped>
@@ -179,10 +47,5 @@ onMounted(() => {
     position: relative;
     width: 100%;
     height: 100%;
-
-    .multiple-box {
-        width: 100%;
-        height: 100%;
-    }
 }
 </style>

src/views/vent/dust/dustHome/dustHome.api.ts

@@ -0,0 +1,40 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getAreaTypeList = '/dust/dustDisasterApi/getAreaTypeList',
+  getRealSensorDataByType='/dust/dustDisasterApi/getRealSensorDataByType',
+  getDustInfos='/dust/dustDisasterApi/getDustInfos',
+  historyAndForecast='/dust/dustDisasterApi/historyAndForecast',
+  realData = '/fire/show/realData',
+ 
+
+}
+/**
+ * 粉尘菜单树
+ * @param params
+ */
+export const getAreaTypeList = () => defHttp.get({ url: Api.getAreaTypeList });
+
+/**
+ * 粉尘选项
+ * @param params
+ */
+export const getRealSensorDataByType = (params) => defHttp.get({ url: Api.getRealSensorDataByType,params });
+
+/**
+ * 获取粉尘单项数据
+ * @param params
+ */
+export const getDustInfos = (params) => defHttp.get({ url: Api.getDustInfos,params });
+
+/**
+ * 获取粉尘图表数据
+ * @param params
+ */
+export const historyAndForecast = (params) => defHttp.get({ url: Api.historyAndForecast,params });
+
+/**
+ * 智能喷雾降尘装置数据
+ * @param params
+ */
+export const realData = (params) => defHttp.post({ url: Api.realData,params });

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

@@ -3,7 +3,6 @@
     <!-- 模型区域 -->
     <!-- <div class="moduleArea"></div> -->
     <div class="main-container">
-      <Select ref="select" v-model:value="value1" style="width: 120px" :options="options1" />
       <div class="left-area">
         <!-- 左上区域 -->
         <div class="left-t">
@@ -22,26 +21,19 @@
         <!-- 左中区域 -->
         <div class="left-c">
           <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '570px' }">
-            <workJc :heightT="'26%'" :heightB="'74%'" />
+            <workJc :heightT="'26%'" :heightB="'74%'" :cardData="cardData" :echartData="echartDataWork" />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
         <div class="left-f">
-          <DanelBd
-            :moduleName="'GIS重点区域风险监测'"
-            :contentStyle="{ contentH: '0px' }"
-            commonTitle="switchs"
-          />
+          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
         </div>
       </div>
       <div class="center-area">
         <div class="center-b">
-          <DanelBd
-            :moduleName="'81202综放工作面粉尘浓度'"
-            :contentStyle="{ contentH: '332px' }"
-            :commonTitle="'datePikers'"
-          >
-            <multipleDust />
+          <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '332px' }" :commonTitle="'selected'"
+            :selectList="selectListBd" @changeSelect="changeSelect">
+            <multipleDust :echartData="echartData" />
           </DanelBd>
         </div>
       </div>
@@ -49,26 +41,20 @@
         <!-- 右上区域 -->
         <div class="right-t">
           <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '280px' }">
-            <dustFallDevice />
+            <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
+              :unInterTotal="unInterTotal" :pwData="pwData" />
           </DanelBd>
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd
-            :moduleName="'粉尘关联指标'"
-            :contentStyle="{ contentH: '220px' }"
-            commonTitle="selected"
-          >
-            <dustGlzb />
+          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '220px' }" commonTitle="selected"
+            :selectList="selectListBd" @changeSelect="changeSelect1">
+            <dustGlzb :dustGlzbData="dustGlzbData" />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd
-            :moduleName="'粉尘静态指标'"
-            :contentStyle="{ contentH: '135px' }"
-            commonTitle="selected"
-          >
+          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '135px' }" commonTitle="selected">
             <dustJtzb />
           </DanelBd>
         </div>
@@ -78,170 +64,292 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import DanelBd from '../../common/danelBd.vue';
-  import workJc from '../../fire/fireHome/components/workJc.vue';
-  import multipleDust from './components/multipleDust.vue';
-  import dustFallDevice from './components/dustFallDevice.vue';
-  import dustGlzb from './components/dustGlzb.vue';
-  import dustJtzb from './components/dustJtzb.vue';
-
-  let value1 = ref('lucy');
-  const options1 = ref<any[]>([
-    {
-      value: 'jack',
-      label: 'Jack',
-    },
-    {
-      value: 'lucy',
-      label: 'Lucy',
-    },
-    {
-      value: 'disabled',
-      label: 'Disabled',
-      disabled: true,
-    },
-    {
-      value: 'yiminghe',
-      label: 'Yiminghe',
-    },
-  ]);
+import { ref, reactive, onMounted } from 'vue';
+import DanelBd from '../../common/danelBd.vue';
+import workJc from '../../fire/fireHome/components/workJc.vue';
+import multipleDust from './components/multipleDust.vue';
+import dustFallDevice from './components/dustFallDevice.vue';
+import dustGlzb from './components/dustGlzb.vue';
+import dustJtzb from './components/dustJtzb.vue';
+import { getAreaTypeList, getRealSensorDataByType, getDustInfos, historyAndForecast, realData } from './dustHome.api'
+
+//工作面风险监测数据
+let cardData = reactive<any[]>([])
+let echartDataWork = reactive<any[]>([])
+let areaType = ref('')
+
+//综放工作面粉尘浓度数据
+let selectListBd = reactive<any[]>([])
+let sensorCode = ref('')
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  legendName: ['实时值']
+})
+
+//智能喷雾降尘装置数据
+let deviceTotal = ref(0)
+let pwTotal = ref(0)
+let interTotal = ref(0)
+let unInterTotal = ref(0)
+let pwData = reactive<any[]>([])
+
+//粉尘关联指标数据
+let dustGlzbData = reactive<any[]>([
+  { label: '最高温度(℃)', val: 0 },
+  { label: '环境湿度(%)', val: 0 },
+  { label: '风速(m/s)', val: 0 },
+  { label: '采煤机', val: 0 },
+  { label: '水压(Mpa)', val: 0 },
+  { label: '水阀', val: 0 },
+])
+
+
+//综放工作面下拉选项切换
+function changeSelect(data) {
+  console.log(data, '下拉选项-----')
+  sensorCode.value = data.value
+  getDustInfosList()
+}
+//粉尘关联指标下拉选项切换
+function changeSelect1(data) {
+  console.log(data, '下拉选项-----')
+  let param = selectListBd.filter(v => v.value == data.value)[0]
+  console.log(param, 'param------')
+  dustGlzbData[0].val = param['temperature'] || '--'
+  dustGlzbData[1].val = param['humidity'] || '--'
+  dustGlzbData[2].val = param['windSpeed'] || '--'
+  dustGlzbData[3].val = '--'
+  dustGlzbData[4].val = param['waterPressure'] || '--'
+  dustGlzbData[5].val = '--'
+}
+//获取工作面风险监测数据
+async function getFireAreaInfoList() {
+  cardData.length = 0
+  echartDataWork.length = 0
+  let res = await getAreaTypeList()
+  console.log(res, '工作面风险监测数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      cardData.push({
+        title: '风险',
+        val: el.warningLevel == 1 ? '低' : el.warningLevel == 2 ? '中' : el.warningLevel == 3 ? '较大' : el.warningLevel == 4 ? '重大' : '--',
+        label: el.typeName,
+        title1: '最大值',
+        val1: el.maxValue,
+      })
+    })
+    areaType.value = res[0]['areaType']
+    //获取粉尘选项数据
+    getRealSensorDataByTypeList()
+  }
+}
+//获取粉尘选项数据
+async function getRealSensorDataByTypeList() {
+  selectListBd.length = 0
+  let res = await getRealSensorDataByType({ areaType: areaType.value })
+  console.log(res, '下拉选项数据---')
+  if (res.length != 0) {
+    res.forEach(el => {
+      selectListBd.push({
+        label: el.name, value: el.code, temperature: el.temperature, humidity: el.humidity, windSpeed: el.windSpeed, waterPressure: el.waterPressure,
+      })
+    })
+    sensorCode.value = selectListBd[0]['value']
+    dustGlzbData[0].val = selectListBd[0]['temperature'] || '--'
+    dustGlzbData[1].val = selectListBd[0]['humidity'] || '--'
+    dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--'
+    dustGlzbData[3].val = '--'
+    dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--'
+    dustGlzbData[5].val = '--'
+
+    //获取单项数据
+    getDustInfosList()
+  }
+}
+//获取单项数据
+async function getDustInfosList() {
+  let res = await getDustInfos({ sensorCode: sensorCode.value })
+  console.log(res, '单项数据------')
+  //获取粉尘图表数据
+  historyAndForecastList(res.areaCode)
+}
+//获取粉尘图表数据
+async function historyAndForecastList(params) {
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+
+  let res = await historyAndForecast({ areaCode: params })
+  console.log(res, '粉尘图表数据----')
+  if (res.lineData.length != 0) {
+    res.lineData.forEach(el => {
+      echartData.xData.push(el.time)
+      echartData.yData.push(el.value || 0)
+    })
+  }
+}
+
+//获取智能喷雾降尘装置数据
+async function getRealDataList() {
+  pwData.length = 0
+  let res = await realData({ type: "DustPw" })
+  console.log(res, '智能喷雾降尘装置数据')
+  if (res.length != 0) {
+    deviceTotal.value = res.length
+    pwTotal.value = res.filter(v => v.deviceState == '1').length
+    interTotal.value = res.filter(v => v.stateConn == '1').length
+    unInterTotal.value = res.filter(v => v.stateConn != '1').length
+    res.forEach((el, index) => {
+      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关'
+      el.stateConn = el.stateConn == '1' ? '链接' : '未链接'
+      pwData.push(el)
+    })
+  }
+}
+
+
+onMounted(() => {
+  getFireAreaInfoList()
+  getRealDataList()
+})
+
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: douyuFont;
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
+@font-face {
+  font-family: douyuFont;
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
-  .dustHome {
-    position: relative;
-    width: calc(100% - 20px);
-    height: calc(100vh - 128px);
-    margin: 15px 10px;
+.dustHome {
+  position: relative;
+  width: calc(100% - 20px);
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
 
-    .moduleArea {
-      width: 100%;
-      height: calc(100% - 15px);
-    }
+  .moduleArea {
+    width: 100%;
+    height: calc(100% - 15px);
+  }
+
+  .main-container {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    padding-top: 15px;
 
-    .main-container {
+    .left-area {
       display: flex;
-      position: absolute;
-      top: 0;
-      left: 0;
+      flex-direction: column;
+      align-items: center;
       justify-content: space-between;
-      width: 100%;
+      width: 30%;
       height: 100%;
+      margin-right: 15px;
 
-      .left-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: 30%;
-        height: 100%;
-        margin-right: 15px;
-
-        .left-t {
-          position: relative;
+      .left-t {
+        position: relative;
+        width: 100%;
+        height: 121px;
+        background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .tcontent-area {
+          display: flex;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: space-around;
           width: 100%;
-          height: 121px;
-          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
-          background-size: 100% 100%;
+          height: 90px;
+          padding: 0 20px;
+          transform: translate(0, -50%);
 
-          .tcontent-area {
+          .tcontent-l {
             display: flex;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            box-sizing: border-box;
+            flex: 1;
+            flex-direction: column;
             align-items: center;
-            justify-content: space-around;
-            width: 100%;
-            height: 90px;
-            padding: 0 20px;
-            transform: translate(0, -50%);
-
-            .tcontent-l {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 16px;
-              letter-spacing: 3px;
-            }
-
-            .tcontent-c {
-              display: flex;
-              flex: 3;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-            }
-
-            .tcontent-r {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 16px;
-              letter-spacing: 3px;
-            }
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 16px;
+            letter-spacing: 3px;
           }
-        }
 
-        .left-c {
-          width: 100%;
-        }
+          .tcontent-c {
+            display: flex;
+            flex: 3;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          }
 
-        .left-f {
-          width: 100%;
+          .tcontent-r {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 16px;
+            letter-spacing: 3px;
+          }
         }
       }
 
-      .center-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
-        width: calc(40% - 40px);
-        height: 100%;
+      .left-c {
+        width: 100%;
+      }
 
-        .center-b {
-          width: 100%;
-        }
+      .left-f {
+        width: 100%;
       }
+    }
 
-      .right-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: 30%;
-        height: 100%;
-        margin-left: 15px;
+    .center-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      width: calc(40% - 40px);
+      height: 100%;
 
-        .right-t {
-          width: 100%;
-        }
+      .center-b {
+        width: 100%;
+      }
+    }
 
-        .right-c {
-          width: 100%;
-        }
+    .right-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: 30%;
+      height: 100%;
+      margin-left: 15px;
 
-        .right-b {
-          width: 100%;
-        }
+      .right-t {
+        width: 100%;
+      }
+
+      .right-c {
+        width: 100%;
+      }
+
+      .right-b {
+        width: 100%;
       }
     }
   }
+}
 </style>

src/views/vent/dust/dustWarnAnalysis/dustWarnAnalysis.api.ts

@@ -0,0 +1,33 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getAreaTypeList = '/dust/dustDisasterApi/getAreaTypeList',
+  getRealSensorDataByType='/dust/dustDisasterApi/getRealSensorDataByType',
+  getDustInfos='/dust/dustDisasterApi/getDustInfos',
+  historyAndForecast='/dust/dustDisasterApi/historyAndForecast'
+ 
+
+}
+/**
+ * 粉尘菜单树
+ * @param params
+ */
+export const getAreaTypeList = () => defHttp.get({ url: Api.getAreaTypeList });
+
+/**
+ * 粉尘选项
+ * @param params
+ */
+export const getRealSensorDataByType = (params) => defHttp.get({ url: Api.getRealSensorDataByType,params });
+
+/**
+ * 获取粉尘单项数据
+ * @param params
+ */
+export const getDustInfos = (params) => defHttp.get({ url: Api.getDustInfos,params });
+
+/**
+ * 获取粉尘图表数据
+ * @param params
+ */
+export const historyAndForecast = (params) => defHttp.get({ url: Api.historyAndForecast,params });

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

@@ -1,17 +1,22 @@
 <template>
   <div class="dustWarnAnalysis">
     <div class="dustWarn-left-box">
-      <basicTree :treeData="treeData"></basicTree>
+      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
     </div>
     <div class="dustWarn-right-box">
       <div class="warn-top-box">
-        <basicCard :cardContentList="cardContentList" />
+        <basicCard4 :cardData4="cardData4" :warningLevel="warningLevel" @toggleDustCards="toggleDustCards"></basicCard4>
       </div>
       <div class="warn-top-box1">
-        <basicCard1 :cardContentList1="cardContentList1"></basicCard1>
+        <basicCard5 :cardData5="cardData5"></basicCard5>
       </div>
       <div class="warn-bot-box">
-        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        <div class="search-area">
+          <div class="area-title">粉尘监测预警</div>
+        </div>
+        <div class="content-area">
+          <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        </div>
       </div>
     </div>
 
@@ -19,71 +24,126 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { getAssetURL } from '../../../../utils/ui';
+import { ref, reactive, onMounted } from 'vue';
 import basicTree from '../../common/basicTree.vue'
-import basicCard from '../../common/basicCard.vue';
-import basicCard1 from '../../common/basicCard1.vue';
+import basicCard4 from '../../common/basicCard4.vue';
+import basicCard5 from '../../common/basicCard5.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
+import { getAreaTypeList, getRealSensorDataByType, getDustInfos, historyAndForecast } from './dustWarnAnalysis.api'
 
-let cardContentList = reactive([
-  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(°C)', val: '25.0' },
-  { id: 1, imgSrc: getAssetURL('workPlaceWarn/dust-sd.png'), label: '环境湿度(%)', val: '11.8' },
-  { id: 2, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '风速(m/s)', val: '25.0' },
-  {
-    id: 3,
-    imgSrc: getAssetURL('workPlaceWarn/dust-cmj.png'),
-    label: '采煤机',
-    val: '运行',
-  },
-  {
-    id: 3,
-    imgSrc: getAssetURL('workPlaceWarn/dust-sy.png'),
-    label: '水压(Mpa)',
-    val: '25.0',
-  },
-  {
-    id: 3,
-    imgSrc: getAssetURL('workPlaceWarn/dust-sf.png'),
-    label: '水阀',
-    val: '关闭',
-  },
-]);
-
-let cardContentList1 = reactive([
-  { label: '粉尘浓度(mg/m³)', val: '2.7' },
-  { label: '总尘浓度(mg/m³)', val: '3.02' },
-  { label: '呼尘加权容许浓度(mg/m³)', val: '2.5' },
-  { label: '爆炸浓度(mg/m³)', val: '35.0' },
+
+let areaType = ref('')
+let sensorCode = ref('')
+
+let warningLevel=ref('')//风险等级
+
+let cardData4 = reactive<any[]>([])
+let cardData5 = reactive<any[]>([
+  {id:0,val:0},
+  {id:1,val:0},
+  {id:2,val:0},
+  {id:3,val:0},
 ])
 
+
 //数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-    { name: "81203综放工作面", value: "111", id: '1', pid: null },
-    { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-    { name: "81203综放工作面", value: "458", id: '2', pid: null },
-    { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-    { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-    { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-    { name: "81203综放工作面", value: "189", id: '3', pid: null },
-    { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-    { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-    { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-    { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
+const treeData = reactive<any[]>([])
 
-let gridV=reactive({
+let gridV = reactive({
   top: '8%',
-        left: '3%',
-        right: '3%',
-        bottom: '10%',
+  left: '5%',
+  right: '5%',
+  bottom: '10%',
+})
+
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  yData1: [],
+  legendName: ['实时值', '预测值']
 })
 
-let echartData=reactive({
-    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
-    yData:[90, 105, 84, 125, 110, 92, 98],
-    yData1:[140, 165, 134, 175, 160, 152, 158],
-    legendName:['实时值','预测值']
+//获取左侧菜单树
+async function getAreaTypeListd() {
+  let res = await getAreaTypeList()
+
+  if (res.length != 0) {
+    res.forEach((el, ind) => {
+      treeData.push({ name: el.typeName, value: ind, id: ind, pid: null, areaType: el.areaType, warningLevel: el.warningLevel, })
+    })
+    console.log(treeData, '粉尘左侧菜单树')
+    areaType.value = treeData[0]['areaType']
+    warningLevel.value=treeData[0]['warningLevel']==1 ? '低风险' : treeData[0]['warningLevel']==2 ? '中风险': treeData[0]['warningLevel']==3 ? '较高风险' : treeData[0]['warningLevel']==4 ? '重大风险' : '--'
+    //获取粉尘选项数据
+    getRealSensorDataByTypeList()
+  }
+}
+//点击左侧树节点
+function selectChange(treeNode) {
+  console.log(treeNode, 'treeNode--------')
+  areaType.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaType']
+  getRealSensorDataByTypeList()
+}
+
+//获取粉尘选项数据
+async function getRealSensorDataByTypeList() {
+  cardData4.length = 0
+  let res = await getRealSensorDataByType({ areaType: areaType.value })
+  console.log(res, '粉尘选项数据---')
+  if (res.length != 0) {
+    res.forEach(el => {
+      cardData4.push({
+        title: el.name, sensorCode: el.code, list: [
+          { label: "温度", value: el.temperature },
+          { label: "湿度", value: el.humidity },
+          { label: "粉尘浓度", value: el.dust },
+          { label: "喷雾水压", value: el.waterPressure },
+        ]
+      })
+    })
+    sensorCode.value = cardData4[0]['sensorCode']
+    //获取单项数据
+    getDustInfosList()
+  }
+}
+//粉尘选项切换
+function toggleDustCards(data) {
+  console.log(data, 'data------')
+  sensorCode.value = data
+  getDustInfosList()
+}
+
+//获取单项数据
+async function getDustInfosList() {
+  let res = await getDustInfos({ sensorCode: sensorCode.value })
+  console.log(res, '单项数据------')
+  cardData5[0].val=res.dustDensity
+  cardData5[1].val=res.dustDensityAverage
+  cardData5[2].val=res.dustDensityAverage40
+  cardData5[3].val=res.explodeDensity
+  
+  //获取粉尘图表数据
+  historyAndForecastList(res.areaCode)
+}
+
+//获取粉尘图表数据
+async function historyAndForecastList(params) {
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  let res = await historyAndForecast({ areaCode: params })
+  console.log(res, '粉尘图表数据----')
+  if (res.lineData.length != 0) {
+    res.lineData.forEach(el => {
+      echartData.xData.push(el.time)
+      echartData.yData.push(el.value || 0)
+      // echartData.yData1.push(el.valuePredict)
+    })
+  }
+}
+
+onMounted(() => {
+  getAreaTypeListd()
 })
 </script>
 
@@ -114,20 +174,40 @@ let echartData=reactive({
 
     .warn-top-box {
       width: 100%;
-      height: 110px;
+      height: 190px;
       margin-bottom: 15px;
     }
 
     .warn-top-box1 {
       width: 100%;
-      height: 130px;
+      height: 200px;
       margin-bottom: 15px;
     }
 
     .warn-bot-box {
+      box-sizing: border-box;
       width: 100%;
-      height: calc(100% - 270px);
+      height: calc(100% - 420px);
+      padding: 10px 15px;
       background-color: rgb(41 49 53 / 80%);
+
+      .search-area {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .area-title {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .content-area {
+        height: calc(100% - 30px);
+      }
     }
   }
 

src/views/vent/fire/compositeWarn/composite.api.ts

@@ -5,7 +5,8 @@ enum Api {
   getSgjcPointInfo= '/fire/fireDisasterApi/getSgjcPointInfo',
   getSgjcRealDataByPointCode='/fire/fireDisasterApi/getSgjcRealDataByPointCode',
   getSgjcHistoryData='/fire/fireDisasterApi/getSgjcHistoryData',
-
+  getInfosByAreaCode='/fire/fireDisasterApi/getInfosByAreaCode',
+  getGxcwHistoryDataByPointCode='/fire/fireDisasterApi/getGxcwHistoryDataByPointCode',
 
 }
 /**
@@ -16,6 +17,20 @@ export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInf
 
 /**
  * 
+ * 获取工作面光钎条数及测点编号
+ * @param params
+ */
+export const getInfosByAreaCode = (params) => defHttp.get({ url: Api.getInfosByAreaCode, params });
+
+/**
+ * 
+ * 获取光钎测温图表数据
+ * @param params
+ */
+export const getGxcwHistoryDataByPointCode = (params) => defHttp.get({ url: Api.getGxcwHistoryDataByPointCode, params });
+
+/**
+ * 
  * 获取工作面束管列表
  * @param params
  */

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

@@ -3,22 +3,39 @@
     <div class="composite-left-box">
       <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
     </div>
+    <!-- 光钎，束管 -->
     <div class="composite-right-box">
-      <div class="composite-top-box">
+      <div class="gx-top-box" v-if="flagShow == 'gx' || flagShow == 'all'">
+        <basicCard :cardContentList="cardContentList" />
+      </div>
+      <div :class="flagShow == 'gx' ? 'gx-center-box1' : 'gx-center-box'" v-if="flagShow == 'gx' || flagShow == 'all'">
+        <div class="gx-center-item-title">
+          <div class="item-left">光钎测温系统温度实时监测</div>
+          <Select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"
+            allowClear @change="pointChange" />
+
+        </div>
+        <div class="gx-center-item-content">
+          <basicEchartLine :gridV="gridV" :echartData="echartDataGx"></basicEchartLine>
+        </div>
+
+      </div>
+      <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
         <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
       </div>
-      <div class="composite-bot-box">
+      <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
         <div class="search-area">
-          <!-- <RangePicker  v-model="TimeRange" size="small" style="width: 260px"   :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            :placeholder="['开始时间', '结束时间']" @change="onDataChange"  /> -->
+          <div class="area-title">束管系统监测</div>
+          <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
         </div>
         <div class="content-area">
           <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
         </div>
-      
+
       </div>
     </div>
+
   </div>
 </template>
 
@@ -27,22 +44,19 @@ import { ref, reactive, onMounted } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicTree from '../../common/basicTree.vue'
-// import { Select, RangePicker,} from 'ant-design-vue';
-import moment from 'moment'
-import { getFireAreaInfo, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './composite.api'
+import { RangePicker, Select } from 'ant-design-vue';
+import basicCard from '../../common/basicCard.vue';
+import dayjs from 'dayjs';
+import { getAssetURL } from '../../../../utils/ui';
+import { getFireAreaInfo, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData, getInfosByAreaCode, getGxcwHistoryDataByPointCode } from './composite.api'
 
 let warningLevel = ref('')//风险等级
-let card3List = reactive<any[]>([
-  // { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  // { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-])
+let cardContentList = reactive([
+  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(℃)', val: '' },
+  { id: 1, imgSrc: getAssetURL('workPlaceWarn/jd-zdwd.png'), label: '最低温度(℃)', val: '' },
+  { id: 2, imgSrc: getAssetURL('workPlaceWarn/jd-pjwd.png'), label: '平均温度(℃)', val: '' },
+]);
+let card3List = reactive<any[]>([])
 
 //数据随便写的，不符合实际情况，因为懒得改
 const treeData = reactive<any[]>([
@@ -61,7 +75,8 @@ const treeData = reactive<any[]>([
 let areaCode = ref('')
 let gasType = ref('')
 let pointCode = ref('')
-let TimeRange=ref([moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
+let flagShow = ref('')
+let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
 
 
 let gridV = reactive({
@@ -79,26 +94,55 @@ let echartData = reactive(
     legendName: ['实时值', '预测值']
   }
 )
+let echartDataGx = reactive(
+  {
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: ['最高温度', '最低温度']
+  }
+)
 
- //时间选项切换
- function onDataChange(value, dateString) {
-    TimeRange = [dateString[0], dateString[1]]
-      console.log(TimeRange, 'TimeRange')
-    }
+let gxSelectList = reactive<any[]>([])
+let gxSelect = ref('')
+
+//时间选项切换
+function onDataChange(value, dateString) {
+  TimeRange.value = [dateString[0], dateString[1]]
+  console.log(TimeRange, 'TimeRange')
+}
 //获取左侧菜单树
 async function getFireAreaInfos() {
   const res = await getFireAreaInfo({ fireCauseType: 2 })
-  // treeData.length = 0
-  if (res.success) {
-    res.data.forEach((el, ind) => {
+  if (res.length != 0) {
+    res.forEach((el, ind) => {
       if (el.areaType == 2) {
-        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode })
+        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, gxcwCnt: el.gxcwCnt, sgjcCnt: el.sgjcCnt, infoTypeTwo: el.infoTypeTwo,warningLevel:el.warningLevel })
       }
     })
     areaCode.value = treeData[0]['areaCode']
-    warningLevel.value = treeData[0].warningLevel == 0 ? '正常' : treeData[0].warningLevel == 101 ? '较低风险' : treeData[0].warningLevel == 102 ? '低风险' : treeData[0].warningLevel == 103 ? '中风险' : treeData[0].warningLevel == 104 ? '高风险' : treeData[0].warningLevel == 105 ? '高风险' : '--'
+    warningLevel.value = treeData[0].warningLevel == 1 ? '低风险' : treeData[0].warningLevel == 2 ? '中风险' : treeData[0].warningLevel == 3 ? '较高风险' : treeData[0].warningLevel == 4 ? '重大风险' :   '--'
     console.log(treeData, 'treeData-------')
-    getSgjcPointInfoList()
+    cardContentList[0]['val'] = treeData[0].infoTypeTwo.maxTemperature
+    cardContentList[1]['val'] = treeData[0].infoTypeTwo.minTemperature
+    cardContentList[2]['val'] = treeData[0].infoTypeTwo.aveTemperature
+    if (treeData[0]['gxcwCnt'] > 0 && treeData[0]['sgjcCnt'] > 0) {
+      flagShow.value = 'all'
+      //获取工作面光钎条数及测点编号
+      getInfosByAreaCodeList()
+      //获取工作面束管测点编号列表
+      getSgjcPointInfoList()
+
+    } else if (treeData[0]['gxcwCnt'] > 0) {
+      flagShow.value = 'gx'
+      //获取工作面光钎条数及测点编号
+      getInfosByAreaCodeList()
+    } else if (treeData[0]['sgjcCnt'] > 0) {
+      flagShow.value = 'sg'
+      //获取工作面束管测点编号列表
+      getSgjcPointInfoList()
+    }
+
   }
 }
 //点击左侧树节点
@@ -106,30 +150,88 @@ function selectChange(treeNode) {
   console.log(treeNode, 'treeNode---')
   areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
   let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
-  warningLevel.value = level == 0 ? '正常' : level == 101 ? '较低风险' : level == 102 ? '低风险' : level == 103 ? '中风险' : level == 104 ? '高风险' : level == 105 ? '高风险' : '--'
-  card3List.length = 0
-  echartData.xData.length = 0
-  echartData.yData.length = 0
-  echartData.yData1.length = 0
-  getSgjcPointInfoList()
+  warningLevel.value = level == 1 ? '低风险' : level == 2 ? '中风险' : level == 3 ? '较高风险' : level == 4 ? '重大风险' : '--'
+  let data = treeData.filter((a) => a.name == treeNode.node.dataRef.title)[0]
+  cardContentList[0]['val'] = data.infoTypeTwo.maxTemperature
+  cardContentList[1]['val'] = data.infoTypeTwo.minTemperature
+  cardContentList[2]['val'] = data.infoTypeTwo.aveTemperature
+  let gxcwCnt = treeData.filter((g) => g.name == treeNode.node.dataRef.title)[0]['gxcwCnt']
+  let sgjcCnt = treeData.filter((s) => s.name == treeNode.node.dataRef.title)[0]['sgjcCnt']
+  if (gxcwCnt > 0 && sgjcCnt > 0) {
+    flagShow.value = 'all'
+    //获取工作面光钎条数及测点编号
+    getInfosByAreaCodeList()
+    //获取工作面束管测点编号列表
+    getSgjcPointInfoList()
+  } else if (gxcwCnt > 0) {
+    flagShow.value = 'gx'
+    //获取工作面光钎条数及测点编号
+    getInfosByAreaCodeList()
+
+  } else if (sgjcCnt > 0) {
+    flagShow.value = 'sg'
+    //获取工作面束管测点编号列表
+    getSgjcPointInfoList()
+  }
 }
 
+//获取工作面光钎条数及测点编号
+async function getInfosByAreaCodeList() {
+  gxSelectList.length = 0
+  let res = await getInfosByAreaCode({ areaCode: areaCode.value })
+  console.log(res, '工作面光钎条数及测点编号')
+  if (res.length != 0) {
+    res.forEach(el => {
+      gxSelectList.push({
+        label: el.pointName,
+        value: el.pointCode,
+      })
+    })
+    gxSelect.value = res[0]['pointCode']
+    //获取光钎测温图表数据
+    getGxcwHistoryDataByPointCodeList()
+  }
+}
+//工作面光钎测温测点编号选项切换
+function pointChange(val) {
+  console.log('选项切换----------', val)
+  gxSelect.value = val
+  getGxcwHistoryDataByPointCodeList()
+}
+//获取光钎测温图表数据
+async function getGxcwHistoryDataByPointCodeList() {
+  echartDataGx.xData.length = 0
+  echartDataGx.yData.length = 0
+  echartDataGx.yData1.length = 0
+  let res = await getGxcwHistoryDataByPointCode({ pointCode: gxSelect.value })
+  console.log(res, '光钎测温图表数据')
+  res.time.forEach(el => {
+    echartDataGx.xData.push(el)
+  })
+  res.maxValue.forEach(el => {
+    echartDataGx.yData.push(el)
+  })
+  res.minValue.forEach(el => {
+    echartDataGx.yData1.push(el)
+  })
+}
 //获取工作面束管测点编号列表
 async function getSgjcPointInfoList() {
   let res = await getSgjcPointInfo({ areaCode: areaCode.value })
   console.log(res, '工作面束管测点编号列表')
-  if (res.success) {
-    pointCode.value = res.data[0]['pointCode']
-    //获取工作面束管测点实时数据
+  if (res.length != 0) {
+    pointCode.value = res[0]['pointCode']
+    //获取工作面束管测点实时数据  
     getSgjcRealDataByPointCodeList()
   }
 }
 //获取工作面束管测点实时数据
 async function getSgjcRealDataByPointCodeList() {
+  card3List.length = 0
   let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
   console.log(res, '工作面束管测点实时数据======')
-  if (res.success) {
-    res.data.forEach(el => {
+  if (res.length != 0) {
+    res.forEach(el => {
       card3List.push({ title: el.type, ndLabel: '浓度', ndVal: el.currentValue, tLabel: '时间', tVal: el.time, aLabel: '位置', aVal: el.position })
     })
     gasType.value = card3List[0]['title']
@@ -140,26 +242,25 @@ async function getSgjcRealDataByPointCodeList() {
 //工作面束管选项切换
 function toggleChange(title) {
   gasType.value = title
-  echartData.xData.length = 0
-  echartData.yData.length = 0
-  echartData.yData1.length = 0
   getSgjcHistoryDataList()
 }
 //获取束管曲线数据
 async function getSgjcHistoryDataList() {
-  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value })
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
   console.log(res, '束管曲线数据-------')
-  if (res.success) {
-    res.data.time.forEach(el => {
-      echartData.xData.push(el)
-    })
-    res.data.value.forEach(el => {
-      echartData.yData.push(el)
-    })
-  }
+  res.time.forEach(el => {
+    echartData.xData.push(el)
+  })
+  res.value.forEach(el => {
+    echartData.yData.push(el)
+  })
 }
 
 onMounted(() => {
+
   getFireAreaInfos()
 })
 
@@ -188,32 +289,98 @@ onMounted(() => {
     height: 100%;
     margin-left: 10px;
     padding: 15px 10px;
+    overflow-y: auto;
     background-color: rgb(27 35 39 / 80%);
 
     .composite-top-box {
       width: 100%;
-      height: 235px;
+      height: 250px;
       margin-bottom: 15px;
     }
 
     .composite-bot-box {
+      box-sizing: border-box;
       width: 100%;
-      height: calc(100% - 250px);
+      height: calc(100% - 265px);
+      padding: 10px 15px;
       border: 1px solid #1e96cd;
       background-color: rgb(41 49 53 / 80%);
 
-      .search-area{
+      .search-area {
         display: flex;
         box-sizing: border-box;
         align-items: center;
-        height: 40px;
-        padding: 0 15px;
+        justify-content: space-between;
+        height: 30px;
+
+        .area-title {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .content-area {
+        height: calc(100% - 30px);
+      }
+
+    }
+
+    .gx-top-box {
+      width: 100%;
+      height: 110px;
+      margin-bottom: 15px;
+    }
+
+    .gx-center-box {
+      box-sizing: border-box;
+      width: 100%;
+      height: 242px;
+      margin-bottom: 15px;
+      padding: 10px 15px;
+      background-color: rgb(41 49 53 / 80%);
+
+      .gx-center-item-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .item-left {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
       }
 
-      .content-area{
-        height: calc(100% - 40px);
+      .gx-center-item-content {
+        height: calc(100% - 30px);
       }
+    }
+
+    .gx-center-box1 {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 125px);
+      padding: 10px 15px;
+      background-color: rgb(41 49 53 / 80%);
 
+      .gx-center-item-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .item-left {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .gx-center-item-content {
+        height: calc(100% - 30px);
+      }
     }
   }
 }
@@ -243,4 +410,18 @@ onMounted(() => {
 :deep(.vMonitor-picker-suffix) {
   color: #a1dff8 !important;
 }
+
+:deep(.vMonitor-select-selector) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-select-selection-placeholder) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-select-arrow) {
+  color: #a1dff8 !important;
+}
 </style>

src/views/vent/fire/fireDistributionPoint/firePoint.api.ts

@@ -0,0 +1,41 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getZcHfWd='/fire/fireDisasterApi/getZcHfWd',
+  getHeadingFace='/fire/fireDisasterApi/getHeadingFace',
+  getMainTrafficYw='/fire/fireDisasterApi/getMainTrafficYw',
+  getDsWd='/fire/fireDisasterApi/getDsWd',
+  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
+ 
+
+}
+/**
+ * 综采工作面
+ * @param params
+ */
+export const getZcHfWd = () => defHttp.get({ url: Api.getZcHfWd, });
+
+/**
+ * 掘进工作面
+ * @param params
+ */
+export const getHeadingFace = () => defHttp.get({ url: Api.getHeadingFace, });
+
+/**
+ * 运输系统烟雾传感器
+ * @param params
+ */
+export const getMainTrafficYw = () => defHttp.get({ url: Api.getMainTrafficYw, });
+
+/**
+ * 机电硐室传感器
+ * @param params
+ */
+export const getDsWd = () => defHttp.get({ url: Api.getDsWd, });
+
+/**
+ * 菜单树接口
+ * @param params
+ */
+export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+

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

@@ -1,29 +1,28 @@
 <template>
   <div class="fireDistributionPoint">
-    <div class="fireDis-left-box">
-      <basicTree :treeData="treeData"></basicTree>
-    </div>
+   
     <div class="fireDis-right-box">
       <div class="woke-item-box">
         <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
       </div>
       <div class="woke-item-box1">
-        <basicSensor :sensorTitle="sensorTitleJj" :sensorList="sensorList" :headList="headList" />
+        <basicSensor :sensorTitle="sensorTitleJj" :sensorList="sensorList1" :headList="headList1" />
       </div>
       <div class="woke-item-box2">
-        <basicSensor :sensorTitle="sensorTitleZys" :sensorList="sensorList" :headList="headList" />
+        <basicSensor :sensorTitle="sensorTitleZys" :sensorList="sensorList2" :headList="headList" />
       </div>
       <div class="woke-item-box3">
-        <basicSensor :sensorTitle="sensorTitleJD" :sensorList="sensorList" :headList="headList" />
+        <basicSensor :sensorTitle="sensorTitleJD" :sensorList="sensorList3" :headList="headList" />
       </div>
     </div>
 
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import basicSensor from '../../common/basicSensor.vue';
 import basicTree from '../../common/basicTree.vue'
+import { getFireAreaInfo, getZcHfWd, getHeadingFace, getDsWd, getMainTrafficYw } from './firePoint.api'
 
 let sensorTitle = ref('综放工作面传感器监测');
 let sensorTitleJj = ref('掘进工作面传感器监测');
@@ -32,37 +31,92 @@ let sensorTitleJD = ref('机电硐室及配电点传感器监测');
 
 let headList = reactive([
   { id: 0, title: '测点位置' },
-  { id: 1, title: '测点值' },
+  { id: 1, title: '温度' },
   { id: 2, title: '预警级别' },
   { id: 3, title: '时间' },
 ]);
-
-let sensorList = reactive([
-  { id: 0, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 1, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 2, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 0, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 1, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 2, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 0, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 1, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
-  { id: 2, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+let headList1 = reactive([
+  { id: 0, title: '测点位置' },
+  { id: 1, title: 'CO浓度(%)' },
+  { id: 2, title: '温度' },
+  { id: 3, title: '预警级别' },
+  { id: 4, title: '时间' },
 ]);
 
+
+let sensorList = reactive<any[]>([]);
+let sensorList1 = reactive<any[]>([])
+let sensorList2 = reactive<any[]>([])
+let sensorList3 = reactive<any[]>([])
+
 //数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
+const treeData = reactive<any[]>([])
+
+
+//获取左侧菜单树
+async function getFireAreaInfos() {
+  const res = await getFireAreaInfo({})
+  if (res.length != 0) {
+    res.forEach((el, ind) => {
+      treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, gxcwCnt: el.gxcwCnt, sgjcCnt: el.sgjcCnt, infoTypeTwo: el.infoTypeTwo })
+    })
+    console.log(treeData, 'treeData-------')
+    getZcHfWdList()
+    getHeadingFaceList()
+    getMainTrafficYwList()
+    getDsWdList()
+
+  }
+}
+
+//获取综放工作面传感器监测数据
+async function getZcHfWdList() {
+  let res = await getZcHfWd()
+  console.log(res, '综放工作面传感器监测数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      sensorList.push({ name: el.nodePlacement, status: el.detectValue + '', warn: el.warningMsg, times: el.dateTime })
+    })
+  }
+}
+
+//获取掘进工作面传感器监测数据
+async function getHeadingFaceList() {
+  let res = await getHeadingFace()
+  console.log(res, '掘进工作面传感器监测数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      sensorList1.push({ name: el.name, nd: el.co + '', status: el.wd + '', warn: el.warningMsg, times: el.dateTime })
+    })
+  }
+}
+
+//获取运输系统烟雾传感器数据
+async function getMainTrafficYwList() {
+  let res = await getMainTrafficYw()
+  console.log(res, '运输系统烟雾传感器数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      sensorList2.push({ name: el.nodePlacement, status: el.detectValue + '', warn: el.warningMsg, times: el.dateTime })
+    })
+  }
+}
+
+//获取机电硐室传感器数据
+async function getDsWdList() {
+  let res = await getDsWd()
+  console.log(res, '机电硐室传感器数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      sensorList3.push({ name: el.nodePlacement, status: el.detectValue + '', warn: el.warningMsg, times: el.dateTime })
+    })
+  }
+}
+
+onMounted(() => {
+  getFireAreaInfos()
+})
+
 </script>
 <style lang="less" scoped>
 .fireDistributionPoint {
@@ -75,11 +129,7 @@ const treeData = reactive([
   margin: 50px 10px 15px;
   background: #282828;
 
-  .fireDis-left-box {
-    width: 220px;
-    height: 100%;
-    background-color: rgb(27 35 39 / 80%);
-  }
+  
 
   .fireDis-right-box {
     display: flex;
@@ -87,7 +137,7 @@ const treeData = reactive([
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: flex-start;
-    width: calc(100% - 230px);
+    width: 100%;
     height: 100%;
     margin-left: 10px;
     padding: 15px 10px;

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

@@ -8,7 +8,17 @@
         <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
       </div>
       <div class="composite-bot-box">
-        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+       
+        <div class="search-area">
+          <div class="area-title">束管系统监测</div>
+          <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+        </div>
+
+        <div class="content-area">
+          <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        </div>
+       
       </div>
     </div>
   </div>
@@ -19,8 +29,12 @@ import { ref, reactive, onMounted } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicTree from '../../common/basicTree.vue'
-import { getFireAreaInfo, getMbRealData ,getMbHistoryData} from './goaf.api'
+import { RangePicker, } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { getFireAreaInfo, getMbRealData, getMbHistoryData } from './goaf.api'
 
+
+let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
 let card3List = reactive<any[]>([
   // { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
   // { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
@@ -37,7 +51,7 @@ let card3List = reactive<any[]>([
 const treeData = reactive<any[]>([])
 let areaCode = ref('')
 let warningLevel = ref('')//风险等级
-let type=ref('')
+let type = ref('')
 
 let gridV = reactive({
   top: '8%',
@@ -53,16 +67,18 @@ let echartData = reactive({
   legendName: ['实时值', '预测值']
 })
 
+//时间选项切换
+function onDataChange(value, dateString) {
+  TimeRange.value = [dateString[0], dateString[1]]
+  console.log(TimeRange, 'TimeRange')
+}
+
 //点击左侧树节点
 function selectChange(treeNode) {
   console.log(treeNode, 'treeNode---')
   areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
   let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
-  warningLevel.value = level == 0 ? '正常' : level == 101 ? '较低风险' : level == 102 ? '低风险' : level == 103 ? '中风险' : level == 104 ? '高风险' : level == 105 ? '高风险' : '--'
-  card3List.length = 0
-  echartData.xData.length = 0
-  echartData.yData.length = 0
-  echartData.yData1.length = 0
+  warningLevel.value = level == 1 ? '低风险' : level == 2 ? '中风险' : level == 3 ? '较高风险' : level == 4 ? '重大风险' : '--'
   getMbRealDataList()
 }
 
@@ -70,14 +86,14 @@ function selectChange(treeNode) {
 async function getFireAreaInfos() {
   const res = await getFireAreaInfo({ fireCauseType: 2 })
   // treeData.length = 0
-  if (res.success) {
-    res.data.forEach((el, ind) => {
+  if (res.length != 0) {
+    res.forEach((el, ind) => {
       if (el.areaType == 1) {
-        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode })
+        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode,warningLevel:el.warningLevel })
       }
     })
     areaCode.value = treeData[0]['areaCode']
-    warningLevel.value = treeData[0].warningLevel == 0 ? '正常' : treeData[0].warningLevel == 101 ? '较低风险' : treeData[0].warningLevel == 102 ? '低风险' : treeData[0].warningLevel == 103 ? '中风险' : treeData[0].warningLevel == 104 ? '高风险' : treeData[0].warningLevel == 105 ? '高风险' : '--'
+    warningLevel.value = treeData[0].warningLevel == 1 ? '低风险' : treeData[0].warningLevel == 2 ? '中风险' : treeData[0].warningLevel == 3 ? '较高风险' : treeData[0].warningLevel == 4 ? '重大风险' : '--'
     console.log(treeData, 'treeData-------')
     getMbRealDataList()
   }
@@ -85,43 +101,44 @@ async function getFireAreaInfos() {
 
 //获取密闭监测实时数据
 async function getMbRealDataList() {
-  let res = await getMbRealData({areaCode:areaCode.value})
-  console.log(res,'密闭监测实时数据------')
-  if (res.success) {
-    res.data.forEach(el=>{
-      card3List.push({title: el.type, ndLabel: '浓度 : ', ndVal: el.currentValue, tLabel: '时间 : ', tVal: el.time, aLabel: '位置 : ', aVal:el.position})
+  card3List.length=0
+  let res = await getMbRealData({ areaCode: areaCode.value })
+  console.log(res, '密闭监测实时数据------')
+  if (res.length != 0) {
+    res.forEach(el => {
+      card3List.push({ title: el.type, ndLabel: '浓度 : ', ndVal: el.currentValue, tLabel: '时间 : ', tVal: el.time, aLabel: '位置 : ', aVal: el.position })
     })
-    type.value=card3List[0]['title']
+    type.value = card3List[0]['title']
     //获取密闭图表数据
     getMbHistoryDataList()
   }
 }
 //密闭实时数据选项切换
-function toggleChange(title){
-  console.log(title,'title---------')
-  type.value=title
+function toggleChange(title) {
+  console.log(title, 'title---------')
+  type.value = title
+  getMbHistoryDataList()
+}
+//获取密闭图表数据
+async function getMbHistoryDataList() {
   echartData.xData.length = 0
   echartData.yData.length = 0
   echartData.yData1.length = 0
-  getMbHistoryDataList()
+  let res = await getMbHistoryData({ areaCode: areaCode.value, type: type.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  console.log(res, '密闭图表数据------')
+
+  res.time.forEach(el => {
+    echartData.xData.push(el)
+  })
+  res.value.forEach(el => {
+    echartData.yData.push(el)
+  })
+
 }
-//获取密闭图表数据
-async function getMbHistoryDataList(){
-      let res=await getMbHistoryData({areaCode:areaCode.value,type:type.value})
-      console.log(res,'密闭图表数据------')
-      if(res.success){
-        res.data.time.forEach(el => {
-      echartData.xData.push(el)
-    })
-    res.data.value.forEach(el => {
-      echartData.yData.push(el)
-    })
-      }
-    }
 
 onMounted(() => {
   getFireAreaInfos()
-  
+
 })
 </script>
 
@@ -152,19 +169,63 @@ onMounted(() => {
 
     .composite-top-box {
       width: 100%;
-      height: 235px;
+      height: 250px;
       margin-bottom: 15px;
     }
 
     .composite-bot-box {
+      box-sizing: border-box;
       width: 100%;
-      height: calc(100% - 250px);
+      height: calc(100% - 265px);
+      padding: 10px 15px;
       border: 1px solid #1e96cd;
       background-color: rgb(41 49 53 / 80%);
 
+      .search-area {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .area-title{
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .content-area {
+        height: calc(100% - 30px);
+      }
+
     }
   }
+}
+
+: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;
 }
 </style>

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

@@ -8,17 +8,23 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
-
-  let emptyList = reactive([
-    { label: '一氧化碳', val: 100 },
-    { label: '风速', val: 1 },
-    { label: '二氧化碳', val: 30 },
-    { label: '温度', val: 91 },
-    { label: '氧气', val: 37 },
-    { label: '环境瓦斯', val: 236 },
-    { label: '馈电器', val: 8 },
-  ]);
+  import { ref, reactive,defineProps,watch } from 'vue';
+
+  let props=defineProps({
+    emptyData:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  })
+
+  let emptyList = ref<any[]>([]);
+
+  watch(()=>props.emptyData,(newE,oldE)=>{
+    console.log(newE,'newE')
+    emptyList.value=newE
+  },{immediate:true,deep:true})
 </script>
 
 <style lang="less" scoped>
@@ -65,9 +71,9 @@
           }
         }
 
-        width: 120px;
-        height: 120px;
-        animation: fdOne 20s linear infinite;
+        width: 100px;
+        height: 100px;
+        animation: fdOne 16s linear infinite;
       }
 
       &:nth-child(2) {
@@ -98,8 +104,8 @@
           }
         }
 
-        width: 70px;
-        height: 70px;
+        width: 80px;
+        height: 80px;
         animation: fdTwo 10s linear infinite;
       }
 
@@ -197,8 +203,8 @@
           }
         }
 
-        width: 70px;
-        height: 70px;
+        width: 80px;
+        height: 80px;
         animation: fdFive 10s linear infinite;
       }
 
@@ -230,9 +236,9 @@
           }
         }
 
-        width: 120px;
-        height: 120px;
-        animation: fdSix 20s linear infinite;
+        width: 100px;
+        height: 100px;
+        animation: fdSix 16s linear infinite;
       }
 
       &:nth-child(7) {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="fiberBunbleJc">
     <div class="fiberBunbleJc-box" v-for="(item, index) in fiberBunbleJcList" :key="index">
-      <div class="jc-title"></div>
+      <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>
@@ -19,45 +19,28 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
-
-  let fiberBunbleJcList = reactive([
-    {
-      label: '最大浓度',
-      val: 20,
-      label1: '位置',
-      val1: '80212综采工作面',
-      label2: '时间',
-      val2: '2023-11-07 16:53:48',
-    },
-    {
-      label: '最大浓度',
-      val: 20,
-      label1: '位置',
-      val1: '80212综采工作面',
-      label2: '时间',
-      val2: '2023-11-07 16:53:48',
-    },
-    {
-      label: '最大浓度',
-      val: 20,
-      label1: '位置',
-      val1: '80212综采工作面',
-      label2: '时间',
-      val2: '2023-11-07 16:53:48',
-    },
-    {
-      label: '最大浓度',
-      val: 20,
-      label1: '位置',
-      val1: '80212综采工作面',
-      label2: '时间',
-      val2: '2023-11-07 16:53:48',
-    },
-  ]);
+  import { ref, reactive,defineProps,watch } from 'vue';
+
+  let props=defineProps({
+    bunbleData:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  })
+  let fiberBunbleJcList = ref<any[]>([]);
+
+  watch(()=>props.bunbleData,(newB,oldB)=>{
+    if(newB.length!=0){
+      fiberBunbleJcList.value=newB
+    }
+  },{immediate:true,deep:true})
 </script>
 
 <style lang="less" scoped>
+
+
   .fiberBunbleJc {
     display: flex;
     position: relative;
@@ -76,44 +59,45 @@
 
       .jc-title {
         position: absolute;
+        top: 50%;
+        transform: translate(0,-50%);
+        color: #fff;
+        // font-family: douyuFont;
+        font-size: 24px;
+        font-weight: bolder;
+      }
+
+      &:nth-child(1)  .jc-title {
+        left: 66px;
+      }
+
+      &:nth-child(2)  .jc-title {
+        left: 66px;
       }
 
-      &:nth-child(1) .jc-title {
-        top: 8%;
-        left: 10%;
-        width: 36px;
-        height: 46px;
-        background: url('@/assets/images/fire/firehome/O₂.png') no-repeat center;
-        background-size: 100% 100%;
+      &:nth-child(3)  .jc-title {
+        left: 58px;
       }
 
-      &:nth-child(2) .jc-title {
-        top: 9%;
-        left: 9%;
-        width: 56px;
-        height: 46px;
-        background: url('@/assets/images/fire/firehome/CH₄.png') no-repeat center;
-        background-size: 100% 100%;
+      &:nth-child(4)  .jc-title {
+        left: 58px;
       }
 
-      &:nth-child(3) .jc-title {
-        top: 24%;
-        left: 9%;
-        width: 42px;
-        height: 34px;
-        background: url('@/assets/images/fire/firehome/CO.png') no-repeat center;
-        background-size: 100% 100%;
+      &:nth-child(5)  .jc-title {
+        left: 52px;
       }
 
-      &:nth-child(4) .jc-title {
-        top: 6%;
-        left: 9%;
-        width: 56px;
-        height: 46px;
-        background: url('@/assets/images/fire/firehome/CO₂.png') no-repeat center;
-        background-size: 100% 100%;
+      &:nth-child(6)  .jc-title {
+        left: 52px;
       }
 
+    
+
+     
+     
+
+   
+
       .jc-item {
         position: absolute;
         top: 10%;

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

@@ -13,13 +13,25 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
+  import { ref, reactive,defineProps,watch } from 'vue';
 
-  let outFireList = reactive([
-    { title: '光钎预警', val: 38, dw: '℃', label: '最高温度' },
-    { title: '一氧化碳预警', val: 24, dw: 'ppm', label: '最高浓度' },
-    { title: '烟雾预警', val: '无烟', dw: '', label: '状态' },
-  ]);
+  let props=defineProps({
+    outFireData:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  })
+
+  let outFireList = ref<any[]>([]);
+
+  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>

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

@@ -6,61 +6,150 @@
       }}</div>
     </div>
     <div class="safety-content">
-      <div class="scroll-contents">
+      <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 class="address-text">{{ ite.address }}</span>
-          <span class="temp-text">{{ ite.temp }}</span>
-          <span class="grade-text">{{ ite.grade }}</span>
-          <span class="time-text">{{ ite.time }}</span>
+          <span v-if="ite.address">{{ ite.address }}</span>
+          <span v-if="ite.nd">{{ ite.nd }}</span>
+          <span v-if="ite.temp">{{ ite.temp }}</span>
+          <span v-if="ite.grade">{{ ite.grade }}</span>
+          <span v-if="ite.time">{{ ite.time }}</span>
         </div>
-      </div>
+      </vue3-seamless-scroll>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref } from 'vue';
-
-  let safetyHeadList = reactive([
-    { label: '测点位置' },
-    { label: '温度(°C)' },
-    { label: '预警级别' },
-    { label: '时间' },
-  ]);
-
-  let safetyList = reactive([
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-  ]);
+import { reactive, ref, defineProps, watch } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+
+let props = defineProps({
+  safetyHead: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  safetyList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
+let safetyHeadList = ref<any[]>([]);
+
+let safetyList = ref<any[]>([]);
+
+watch(() => props.safetyHead, (newH, oldH) => {
+  if (newH.length != 0) {
+    safetyHeadList.value = newH
+  }
+}, {
+  immediate: true,
+  deep: true
+})
+watch(() => props.safetyList, (newL, oldL) => {
+  if (newL.length != 0) {
+    safetyList.value = newL
+  }
+}, {
+  immediate: true,
+  deep: true
+})
 </script>
 
 <style lang="less" scoped>
-  .safetyJc {
+.safetyJc {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .safety-head {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    height: 30px;
+    padding: 0 7px;
+
+    .safety-head-item {
+      color: #1fb3f7;
+      font-weight: bold;
+
+      &: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;
+      }
+
+      &:nth-child(3) {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &:nth-child(4) {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &:last-child {
+        display: flex;
+        flex: 2;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .safety-content {
+    display: flex;
     position: relative;
-    width: 100%;
-    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: calc(100% - 30px);
+    overflow: hidden;
 
-    .safety-head {
+    .seamless-warp{
+      width: 100%;
+
+      .safety-content-box {
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: space-between;
-      height: 30px;
+      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%;
 
-      .safety-head-item {
-        color: #1fb3f7;
-        font-weight: bold;
+      span {
+        color: #fff;
 
-        &:nth-child(1) {
+        &:first-child {
           display: flex;
-          flex: 2;
+          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%;
         }
 
         &:nth-child(2) {
@@ -68,6 +157,7 @@
           flex: 1;
           align-items: center;
           justify-content: center;
+          height: 100%;
         }
 
         &:nth-child(3) {
@@ -75,95 +165,30 @@
           flex: 1;
           align-items: center;
           justify-content: center;
+          height: 100%;
         }
 
         &:nth-child(4) {
           display: flex;
-          flex: 2;
+          flex: 1;
           align-items: center;
           justify-content: center;
+          height: 100%;
         }
-      }
-    }
-
-    .safety-content {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      height: calc(100% - 30px);
-      overflow: hidden;
-
-      .scroll-contents {
-        @keyframes scrollCon {
-          0% {
-            top: 0%;
-            left: 0;
-          }
-
-          50% {
-            top: -50%;
-            left: 0;
-          }
-
-          100% {
-            top: -100%;
-            left: 0;
-          }
-        }
-
-        position: absolute;
-        width: 100%;
-        animation: scrollCon 6s linear infinite;
 
-        .safety-content-box {
+        &:last-child {
           display: flex;
-          box-sizing: border-box;
+          flex: 2;
           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;
-          }
-
-          .address-text {
-            display: flex;
-            flex: 2;
-            align-items: center;
-            justify-content: center;
-            background: url('@/assets/images/fire/firehome/safety2.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          .temp-text {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .grade-text {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .time-text {
-            display: flex;
-            flex: 2;
-            align-items: center;
-            justify-content: center;
-          }
+          justify-content: center;
+          height: 100%;
         }
       }
     }
+    }
+
+    
+
   }
+}
 </style>

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

@@ -1,15 +1,29 @@
 <template>
-    <div class="substationJc">
-        <div class="substation-box" ref="substation"></div>
-    </div>
+  <div class="substationJc">
+    <div class="substation-box" ref="substation"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import {ref,onMounted,nextTick} from 'vue'
+import { ref, onMounted, nextTick, reactive, defineProps, watch } from 'vue'
 import * as echarts from 'echarts';
 
+let props = defineProps({
+  echartDatas: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
 //获取dom节点
-let substation=ref()
+let substation = ref()
+
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  yData1: []
+})
 
 function getOption() {
   nextTick(() => {
@@ -84,7 +98,7 @@ function getOption() {
           axisTick: {
             show: false,
           },
-          data: ['15:30','15:31','15:32','15:33','15:34','15:35',],
+          data: echartData.xData,
         },
       ],
 
@@ -147,7 +161,7 @@ function getOption() {
             borderColor: '#646ace',
             borderWidth: 0,
           },
-          data: [100,105,115,130,150,180],
+          data: echartData.yData,
         },
         {
           name: '监测值',
@@ -167,7 +181,7 @@ function getOption() {
             borderColor: '#646ace',
             borderWidth: 0,
           },
-          data: [200,195,185,170,150,120],
+          data: echartData.yData1,
         },
       ],
     };
@@ -178,21 +192,30 @@ function getOption() {
   });
 }
 
-onMounted(()=>{
-    getOption()
+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
 })
 
+
+
 </script>
 
 <style lang="less" scoped>
 .substationJc {
-    position: relative;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .substation-box {
     width: 100%;
     height: 100%;
-
-    .substation-box{
-        width: 100%;
-        height: 100%;
-    }
+  }
 }
 </style>

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

@@ -12,14 +12,14 @@
             <div class="fx-label-l">
               <div class="bg-pie"></div>
             </div>
-            <div class="fx-label-r">{{ item.label }}</div>
+            <div class="fx-label-r">{{ item.name }}</div>
           </div>
-          <div class="fx-val">{{ item.val }}</div>
+          <div class="fx-val">{{ item.value }}</div>
         </div>
       </div>
     </div>
     <div class="card-workJc" :style="{ height: heightB }">
-      <div class="scroll-card">
+      <vue3-seamless-scroll hover-stop="true" :list="cardList" :hover="true" :step="0.15" 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>
@@ -29,375 +29,318 @@
             <span>{{ `${ite.title1} : ` }}</span>
             <span>{{ `${ite.val1}°C` }}</span>
           </div>
-          <div class="card-r-content1">
+          <!-- <div class="card-r-content1">
             <span>{{ `${ite.title2} : ` }}</span>
             <span>{{ ite.val2 }}</span>
-          </div>
+          </div> -->
         </div>
-      </div>
+      </vue3-seamless-scroll>
+
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, nextTick, defineProps } from 'vue';
-  import * as echarts from 'echarts';
-
-  let props = defineProps({
-    heightT: {
-      type: String,
-      default: '0%',
-    },
-    heightB: {
-      type: String,
-      default: '0%',
-    },
-  });
-
-  //获取dom节点
-  let ring = ref();
-
-  let fxLenged = reactive([
-    {
-      label: '低风险',
-      val: 1,
-    },
-    {
-      label: '中风险',
-      val: 2,
-    },
-    {
-      label: '高风险',
-      val: 3,
-    },
-    {
-      label: '报警',
-      val: 4,
-    },
-    {
-      label: '正常',
-      val: 5,
-    },
-  ]);
-
-  let cardList = reactive([
-    {
-      title: '风险',
-      val: '低',
-      label: '81202综放工作面',
-      title1: '温度最大值',
-      val1: '30',
-      title2: '预测风险区域',
-      val2: '散热带，氧化带，窒息带',
-    },
-    {
-      title: '风险',
-      val: '中',
-      label: '81202综放工作面',
-      title1: '温度最大值',
-      val1: '30',
-      title2: '预测风险区域',
-      val2: '散热带，氧化带，窒息带',
-    },
-    {
-      title: '风险',
-      val: '低',
-      label: '81202综放工作面',
-      title1: '温度最大值',
-      val1: '30',
-      title2: '预测风险区域',
-      val2: '散热带，氧化带，窒息带',
-    },
-    {
-      title: '风险',
-      val: '低',
-      label: '81202综放工作面',
-      title1: '温度最大值',
-      val1: '30',
-      title2: '预测风险区域',
-      val2: '散热带，氧化带，窒息带',
-    },
-    {
-      title: '风险',
-      val: '中',
-      label: '81202综放工作面',
-      title1: '温度最大值',
-      val1: '30',
-      title2: '预测风险区域',
-      val2: '散热带，氧化带，窒息带',
-    },
-    {
-      title: '风险',
-      val: '高',
-      label: '81202综放工作面',
-      title1: '温度最大值',
-      val1: '30',
-      title2: '预测风险区域',
-      val2: '散热带，氧化带，窒息带',
-    },
-  ]);
-
-  function getOption() {
-    nextTick(() => {
-      let color = ['#0CD2E6', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];
-
-      let seriesData = [
-        { name: '低风险', value: 30 },
-        { name: '中风险', value: 10 },
-        { name: '高风险', value: 15 },
-        { name: '报警', value: 23 },
-        { name: '正常', value: 10 },
-      ];
-
-      let myChart = echarts.init(ring.value);
-      let option = {
-        color: color,
-        grid: {
-          top: '15%',
-          left: 0,
-          right: '1%',
-          bottom: 5,
-          containLabel: true,
-        },
-
-        series: [
-          {
-            name: '风险占比',
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['65%', '85%'],
-            label: {
-              normal: {
-                show: false,
-                position: 'center',
-                formatter: '{value|{c}}\n{label|{b}}',
-                rich: {
-                  value: {
-                    padding: 5,
-                    align: 'center',
-                    verticalAlign: 'middle',
-                    fontSize: 16,
-                  },
-                  label: {
-                    align: 'center',
-                    verticalAlign: 'middle',
-                    fontSize: 14,
-                  },
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  heightT: {
+    type: String,
+    default: '0%',
+  },
+  heightB: {
+    type: String,
+    default: '0%',
+  },
+  cardData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+});
+
+//获取dom节点
+let ring = ref();
+
+let fxLenged = reactive([
+  {
+    name: '低风险',
+    value: 1,
+  },
+  {
+    name: '中风险',
+    value: 2,
+  },
+  {
+    name: '高风险',
+    value: 3,
+  },
+  {
+    name: '报警',
+    value: 4,
+  },
+  {
+    name: '正常',
+    value: 5,
+  },
+]);
+
+let cardList = ref<any[]>([]);
+
+function getOption() {
+  nextTick(() => {
+    let color = ['#0CD2E6', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];
+
+    let seriesData = [
+      { name: '低风险', value: 30 },
+      { name: '中风险', value: 10 },
+      { name: '高风险', value: 15 },
+      { name: '报警', value: 23 },
+      { name: '正常', value: 10 },
+    ];
+
+    let myChart = echarts.init(ring.value);
+    let option = {
+      color: color,
+      grid: {
+        top: '15%',
+        left: 0,
+        right: '1%',
+        bottom: 5,
+        containLabel: true,
+      },
+
+      series: [
+        {
+          name: '风险占比',
+          type: 'pie',
+          center: ['50%', '50%'],
+          radius: ['65%', '85%'],
+          label: {
+            normal: {
+              show: false,
+              position: 'center',
+              formatter: '{value|{c}}\n{label|{b}}',
+              rich: {
+                value: {
+                  padding: 5,
+                  align: 'center',
+                  verticalAlign: 'middle',
+                  fontSize: 16,
                 },
-              },
-              emphasis: {
-                show: true,
-                textStyle: {
-                  fontSize: '10',
+                label: {
+                  align: 'center',
+                  verticalAlign: 'middle',
+                  fontSize: 14,
                 },
               },
             },
-            labelLine: {
-              show: false,
-              length: 0,
-              length2: 0,
+            emphasis: {
+              show: true,
+              textStyle: {
+                fontSize: '10',
+              },
             },
-            data: seriesData,
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
-
-  onMounted(() => {
-    getOption();
+          labelLine: {
+            show: false,
+            length: 0,
+            length2: 0,
+          },
+          data: seriesData,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
   });
+}
+
+watch(() => props.cardData, (newC, oldC) => {
+  console.log(newC, 'newC-------')
+  cardList.value = newC
+}, { immediate: true, deep: true })
+
+onMounted(() => {
+  getOption();
+});
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: douyuFont;
-    src: url('@/assets/font/douyuFont.otf');
-  }
-
-  .workJc {
+@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;
     width: 100%;
-    height: 100%;
 
-    .echart-workJc {
-      // height: 45%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-
-      .workJc-l {
-        @keyframes rotationLine {
-          0% {
-            transform: rotate(0deg);
-          }
+    .workJc-l {
+      @keyframes rotationLine {
+        0% {
+          transform: rotate(0deg);
+        }
 
-          100% {
-            transform: rotate(360deg);
-          }
+        100% {
+          transform: rotate(360deg);
         }
+      }
 
-        position: relative;
-        width: 180px;
-        height: 100%;
+      position: relative;
+      width: 180px;
+      height: 100%;
 
-        .echart-yh {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 100px;
-          height: 100px;
-          transform: translate(-50%, -50%);
-          background: url('@/assets/images/fire/firehome/zu-e.png') no-repeat center;
-          background-size: 100% 100%;
-        }
+      .echart-yh {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100px;
+        height: 100px;
+        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: 8%;
-          left: 15%;
-          width: 125px;
-          height: 125px;
-          animation: rotationLine 10s linear infinite;
-          background: url('@/assets/images/fire/firehome/ty-e.png') no-repeat center;
-          background-size: 100% 100%;
-        }
+      .echart-line {
+        position: absolute;
+        top: 8%;
+        left: 15%;
+        width: 125px;
+        height: 125px;
+        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%);
-        }
+      .echart-boxs {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 90px;
+        height: 90px;
+        transform: translate(-50%, -50%);
       }
+    }
 
-      .workJc-r {
+    .workJc-r {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: calc(100% - 180px);
+      height: 100%;
+
+      .fx-box {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: space-around;
-        width: calc(100% - 180px);
-        height: 100%;
+        height: 80px;
+        color: #a1b6c2;
 
-        .fx-box {
+        .fx-label {
           display: flex;
-          flex-direction: column;
           align-items: center;
-          justify-content: space-around;
-          height: 80px;
-          color: #a1b6c2;
-
-          .fx-label {
-            display: flex;
-            align-items: center;
-            height: 28px;
-
-            .fx-label-l {
-              position: relative;
-              box-sizing: border-box;
-              width: 14px;
-              height: 14px;
-              margin-right: 5px;
-              padding: 1px;
-              border: 1px solid #1fb3f7;
-
-              .bg-pie {
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                background-color: #1fb3f7;
-              }
+          height: 28px;
+
+          .fx-label-l {
+            position: relative;
+            box-sizing: border-box;
+            width: 14px;
+            height: 14px;
+            margin-right: 5px;
+            padding: 1px;
+            border: 1px solid #1fb3f7;
+
+            .bg-pie {
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              background-color: #1fb3f7;
             }
           }
+        }
 
-          .fx-val {
-            font-family: douyuFont;
-            font-size: 18px;
-          }
+        .fx-val {
+          font-family: douyuFont;
+          font-size: 18px;
         }
       }
     }
+  }
 
-    .card-workJc {
-      position: relative;
-      // height: 55%;
-      overflow: hidden;
-
-      // overflow-y: auto;
-      .scroll-card {
-        @keyframes scrollCards {
-          0% {
-            top: 0%;
-            left: 0;
-          }
-
-          50% {
-            top: -50%;
-            left: 0;
-          }
+  .card-workJc {
+    position: relative;
+    // height: 55%;
+    overflow: hidden;
 
-          100% {
-            top: -100%;
-            left: 0;
-          }
-        }
+    .seamless-warp {
+      width: 100%;
 
-        position: absolute;
+      .card-box {
+        position: relative;
         width: 100%;
-        animation: scrollCards 12s linear infinite;
-
-        .card-box {
-          position: relative;
-          width: 100%;
-          height: 100px;
-          background: url('@/assets/images/fire/firehome/work-jc.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .card-l-label {
-            position: absolute;
-            top: 8%;
-            left: 6%;
-            color: #a1b6c2;
-            letter-spacing: 2px;
-          }
+        height: 100px;
+        background: url('@/assets/images/fire/firehome/work-jc.png') no-repeat center;
+        background-size: 100% 100%;
 
-          .card-l-val {
-            position: absolute;
-            top: 50%;
-            left: 7%;
-            color: #a3d5e5;
-            font-size: 18px;
-          }
+        .card-l-label {
+          position: absolute;
+          top: 8%;
+          left: 6%;
+          color: #a1b6c2;
+          letter-spacing: 2px;
+        }
 
-          .card-r-label {
-            position: absolute;
-            top: 4%;
-            left: 20%;
-            border-bottom: 1px solid #d0d2d3;
-            color: #d0d2d3;
-            font-size: 16px;
-          }
+        .card-l-val {
+          position: absolute;
+          top: 50%;
+          left: 7%;
+          color: #a3d5e5;
+          font-size: 18px;
+        }
 
-          .card-r-content {
-            position: absolute;
-            top: 42%;
-            left: 20%;
-            color: #9da5aa;
-          }
+        .card-r-label {
+          position: absolute;
+          top: 4%;
+          left: 20%;
+          border-bottom: 1px solid #d0d2d3;
+          color: #d0d2d3;
+          font-size: 16px;
+        }
 
-          .card-r-content1 {
-            position: absolute;
-            top: 68%;
-            left: 20%;
-            color: #9da5aa;
-          }
+        .card-r-content {
+          position: absolute;
+          // top: 42%;
+          top: 58%;
+          left: 20%;
+          color: #9da5aa;
+        }
+
+        .card-r-content1 {
+          position: absolute;
+          top: 68%;
+          left: 20%;
+          color: #9da5aa;
         }
       }
     }
+
+
+
   }
+}
 </style>

src/views/vent/fire/fireHome/firehome.api.ts

@@ -0,0 +1,79 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
+  getMbRealData ='/fire/fireDisasterApi/getMbRealData',
+  getSgjcPointInfo= '/fire/fireDisasterApi/getSgjcPointInfo',
+  getSgjcRealDataByPointCode='/fire/fireDisasterApi/getSgjcRealDataByPointCode',
+  getInfosByAreaCode='/fire/fireDisasterApi/getInfosByAreaCode',
+  getGxcwHistoryDataByPointCode='/fire/fireDisasterApi/getGxcwHistoryDataByPointCode',
+  getZcHfWd='/fire/fireDisasterApi/getZcHfWd',
+  getHeadingFace='/fire/fireDisasterApi/getHeadingFace',
+  getMainTrafficYw='/fire/fireDisasterApi/getMainTrafficYw',
+  getDsWd='/fire/fireDisasterApi/getDsWd',
+ 
+
+}
+/**
+ * 工作面风险监测
+ * @param params
+ */
+export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+
+/**
+ * 密闭监测实时信息
+ * @param params
+ */
+export const getMbRealData = (params) => defHttp.get({ url: Api.getMbRealData, params });
+
+/**
+ * 
+ * 获取工作面束管列表
+ * @param params
+ */
+export const getSgjcPointInfo = (params) => defHttp.get({ url: Api.getSgjcPointInfo, params });
+
+/**
+ * 
+ * 获取束管测点实时数据
+ * @param params
+ */
+export const getSgjcRealDataByPointCode = (params) => defHttp.get({ url: Api.getSgjcRealDataByPointCode, params });
+
+/**
+ * 
+ * 获取光钎条数及测点编号
+ * @param params
+ */
+export const getInfosByAreaCode = (params) => defHttp.get({ url: Api.getInfosByAreaCode, params });
+
+/**
+ * 
+ * 获取光钎测温图表数据
+ * @param params
+ */
+export const getGxcwHistoryDataByPointCode = (params) => defHttp.get({ url: Api.getGxcwHistoryDataByPointCode, params });
+/**
+ * 综采工作面
+ * @param params
+ */
+export const getZcHfWd = () => defHttp.get({ url: Api.getZcHfWd, });
+
+/**
+ * 掘进工作面
+ * @param params
+ */
+export const getHeadingFace = () => defHttp.get({ url: Api.getHeadingFace, });
+
+/**
+ * 运输系统烟雾传感器
+ * @param params
+ */
+export const getMainTrafficYw = () => defHttp.get({ url: Api.getMainTrafficYw, });
+
+/**
+ * 机电硐室传感器
+ * @param params
+ */
+export const getDsWd = () => defHttp.get({ url: Api.getDsWd, });
+

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

@@ -21,13 +21,14 @@
         <!-- 左中区域 -->
         <div class="left-c">
           <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '372px' }">
-            <workJc :heightT="'45%'" :heightB="'55%'" />
+            <workJc :heightT="'45%'" :heightB="'55%'" :echartData="echartDataWork" :cardData="cardData" />
           </DanelBd>
         </div>
         <!-- 左下区域 -->
         <div class="left-b">
-          <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
-            <emptyJc />
+          <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+            :selectList="selectListMb" @changeSelect="changeSelect">
+            <emptyJc :emptyData="emptyData" />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
@@ -37,8 +38,9 @@
       </div>
       <div class="center-area">
         <div class="center-b">
-          <DanelBd :moduleName="'工作面束管监测'" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '332px' }" commonTitle="datePikers">
-            <fiberBunbleJc />
+          <DanelBd :moduleName="'工作面束管监测'" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '332px' }"
+            commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
+            <fiberBunbleJc :bunbleData="bunbleData" />
           </DanelBd>
         </div>
       </div>
@@ -51,20 +53,23 @@
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
-            <outFireJc />
+          <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+            :selectList="selectListDs" @changeSelect="changeSelect">
+            <outFireJc :outFireData="outFireData" />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
-            <substationJc />
+          <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+            :selectList="selectListBd" @changeSelect="changeSelect">
+            <substationJc :echartDatas="echartDatas" />
           </DanelBd>
         </div>
         <!-- 右底部区域 -->
         <div class="right-f">
-          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }">
-            <safetyJc />
+          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+            :selectList="selectListAq" @changeSelect="changeSelect">
+            <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
           </DanelBd>
         </div>
       </div>
@@ -73,7 +78,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref,reactive} from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import DanelBd from '../../common/danelBd.vue';
 import workJc from './components/workJc.vue';
 import emptyJc from './components/emptyJc.vue';
@@ -82,12 +87,355 @@ import systemJc from './components/systemJc.vue';
 import outFireJc from './components/outFireJc.vue';
 import substationJc from './components/substationJc.vue';
 import safetyJc from './components/safetyJc.vue';
+import { getFireAreaInfo, getMbRealData, getSgjcPointInfo, getSgjcRealDataByPointCode, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getZcHfWd, getHeadingFace, getMainTrafficYw, getDsWd } from './firehome.api'
 
 let moduleSelect = reactive([
   { label: '工作面束管监测' },
-  { label: '工作面光钎监测' },
-  
+  // { label: '工作面光钎监测' },
+
+])
+
+let areaCode = ref('')
+let pointCode = ref('')
+let areaCodeMb = ref('')
+let dsCode = ref('')
+let areaCodeBd = ref('')
+let pointCodeBd = ref('')
+let pointCodeAq = ref('')
+
+//工作面风险监测数据
+let echartDataWork = reactive<any[]>([])
+let cardData = reactive<any[]>([])
+let selectList = reactive<any[]>([])
+let bunbleData = reactive<any[]>([])
+
+//密闭采空区数据
+let selectListMb = reactive<any[]>([])
+let emptyData = reactive<any>([])
+
+//带式输送机防灭火监控系统
+let selectListDs = reactive<any[]>([])
+let outFireData = reactive<any[]>([])
+
+//变电硐室
+let selectListBd = reactive<any[]>([])
+let echartDatas = reactive({
+  xData: [],
+  yData: [],
+  yData1: []
+})
+
+//安全监控
+let selectListAq = reactive<any[]>([
+  { label: "综放工作面传感器监测", value: 'one' },
+  { label: "掘进工作面传感器监测", value: 'two' },
+  { label: "主运输系统传感器监测", value: 'three' },
+  { label: '机电硐室及配电点传感器监测', value: 'four' }
 ])
+let safetyHead = reactive<any[]>([])
+let safetyList = reactive<any[]>([])
+
+//下拉选项切换
+function changeSelect(data) {
+  console.log(data, '下拉------')
+  switch (data.label) {
+    case '密闭采空区监测系统':
+      areaCodeMb.value = data.value
+      getMbRealDataList()
+      break;
+    case '工作面束管监测':
+      pointCode.value = data.value
+      getSgjcRealDataByPointCodeList()
+      break;
+    case '带式输送机防灭火监控系统':
+      dsCode.value = data.value
+      getFireAreaInfoListDs()
+      break;
+    case '变电硐室防灭火监控系统':
+      pointCodeBd.value = data.value
+      getGxcwHistoryDataByPointCodeList()
+      break;
+    case '安全监控系统':
+      pointCodeAq.value = data.value
+      getTableList()
+      break;
+  }
+
+}
+
+//获取工作面风险监测数据
+async function getFireAreaInfoList() {
+  echartDataWork.length = 0
+  cardData.length = 0
+  let res = await getFireAreaInfo({ fireCauseType: 2 })
+
+  if (res.length != 0) {
+    let data = res.filter(v => v.areaType == 2)
+
+    data.forEach(el => {
+      cardData.push({
+        title: '风险',
+        val: el.warningLevel == 1 ? '低' : el.warningLevel == 2 ? '中' : el.warningLevel == 3 ? '较大' : el.warningLevel == 4 ? '重大' : '--',
+        label: el.areaName,
+        title1: '温度最大值',
+        val1: el.infoTypeTwo.maxTemperature,
+      },)
+    })
+    areaCode.value = data[0].areaCode
+    //工作面束管监测
+    getSgjcPointInfoList()
+  }
+}
+
+//获取密闭下拉列表
+async function getFireAreaInfoListMb() {
+  selectListMb.length = 0
+  let res = await getFireAreaInfo({ fireCauseType: 2 })
+  console.log(res, '密闭数据')
+  if (res.length != 0) {
+    let dataMb = res.filter(m => m.areaType == 1)
+    dataMb.forEach(m => {
+      selectListMb.push({ label: m.areaName, value: m.areaCode })
+    })
+    areaCodeMb.value = selectListMb[0]['value']
+    //获取密闭监测实时信息
+    getMbRealDataList()
+  }
+}
+//获取密闭监测实时信息
+async function getMbRealDataList() {
+  emptyData.length = 0
+  let res = await getMbRealData({ areaCode: areaCodeMb.value })
+  console.log(res, '密闭监测实时信息')
+  res.forEach(el => {
+    emptyData.push({ label: el.name, val: el.currentValue },)
+  })
+}
+
+//工作面束管监测
+async function getSgjcPointInfoList() {
+  selectList.length = 0
+  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
+  console.log(res, '工作面束管列表---')
+  if (res.length != 0) {
+    res.forEach(el => {
+      selectList.push({ label: el.pointName, value: el.pointCode })
+    })
+    pointCode.value = selectList[0]['value']
+    //获取工作面束管测点实时数据  
+    getSgjcRealDataByPointCodeList()
+  }
+}
+//获取工作面束管测点实时数据
+async function getSgjcRealDataByPointCodeList() {
+  bunbleData.length = 0
+  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
+  console.log(res, '束管测点实时数据---')
+  if (res.length != 0) {
+    res.forEach(el => {
+      bunbleData.push({
+        type: el.type,
+        label: '最大浓度',
+        val: el.currentValue,
+        label1: '位置',
+        val1: el.position,
+        label2: '时间',
+        val2: el.time,
+      })
+    })
+  }
+}
+
+//带式输送机防灭火监控系统
+async function getFireAreaInfoListDs() {
+  selectListDs.length = 0
+  outFireData.length = 0
+  const res = await getFireAreaInfo({})
+  if (res.length != 0) {
+    let dataDs = res.filter(m => m.areaType == 4)
+    console.log(dataDs, '带式输送机防灭火')
+    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: '状态' },
+      )
+    }
+
+
+
+  }
+
+}
+
+//变电硐室防灭火监控系统
+async function getFireAreaInfoListBd() {
+  const res = await getFireAreaInfo({})
+  if (res.length != 0) {
+    let dataBd = res.filter(m => m.areaType == 5)
+    console.log(dataBd, '变电硐室-----')
+    areaCodeBd.value = dataBd[0].areaCode
+    //获取光钎条数及测点编号
+    getInfosByAreaCodeList()
+  }
+}
+//获取光钎条数及测点编号
+async function getInfosByAreaCodeList() {
+  selectListBd.length = 0
+  let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value })
+  console.log(res, 'res000999')
+  if (res.length != 0) {
+    res.forEach(el => {
+      selectListBd.push({
+        label: el.pointName,
+        value: el.pointCode
+      })
+    })
+    pointCodeBd.value = selectListBd[0].value
+    //获取光钎测温图表数据
+    getGxcwHistoryDataByPointCodeList()
+  }
+}
+
+//获取光钎测温图表数据
+async function getGxcwHistoryDataByPointCodeList() {
+  echartDatas.xData.length = 0
+  echartDatas.yData.length = 0
+  echartDatas.yData1.length = 0
+  let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value })
+  console.log(res, '光钎测温图表数据-------')
+  res.time.forEach(el => {
+    echartDatas.xData.push(el)
+  })
+  res.maxValue.forEach(el => {
+    echartDatas.yData.push(el)
+  })
+  res.minValue.forEach(el => {
+    echartDatas.yData1.push(el)
+  })
+}
+
+//获取安全监控列表数据
+function getTableList() {
+  switch (pointCodeAq.value) {
+    case 'one':
+      getZcHfWdList()
+      break;
+    case 'two':
+      getHeadingFaceList()
+      break;
+    case 'three':
+    getMainTrafficYwList()
+      break;
+    case 'four':
+    getDsWdList()
+      break;
+    default:
+    getZcHfWdList()
+      break
+  }
+}
+//获取综放工作面传感器监测数据
+async function getZcHfWdList() {
+  safetyHead.length = 0
+  safetyList.length = 0
+  let res = await getZcHfWd()
+  console.log(res, '综放工作面传感器监测数据')
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' }
+  )
+  if (res.length != 0) {
+    res.forEach(el => {
+      safetyList.push({ address: el.nodePlacement, temp: el.detectValue + '', grade: el.warningMsg, time: el.dateTime })
+    })
+  }
+}
+
+//获取掘进工作面传感器监测数据
+async function getHeadingFaceList() {
+  safetyHead.length = 0
+  safetyList.length = 0
+  let res = await getHeadingFace()
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: 'CO浓度(%)' },
+    { label: '温度' },
+    { label: '预警级别' },
+    { label: '时间' },
+  )
+  console.log(res, '掘进工作面传感器监测数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      safetyList.push({ address: el.name, nd: el.co + '', temp: el.wd + '', grade: el.warningMsg, time: el.dateTime })
+    })
+  }
+}
+//获取运输系统烟雾传感器数据
+async function getMainTrafficYwList() {
+  safetyHead.length = 0
+  safetyList.length = 0
+  let res = await getMainTrafficYw()
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' }
+  )
+  console.log(res, '运输系统烟雾传感器数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      safetyList.push({ address: el.nodePlacement, temp: el.detectValue + '', grade: el.warningMsg, time: el.dateTime })
+    })
+  }
+}
+
+//获取机电硐室传感器数据
+async function getDsWdList() {
+  safetyHead.length = 0
+  safetyList.length = 0
+  let res = await getDsWd()
+  console.log(res, '机电硐室传感器数据')
+  safetyHead.push(
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' }
+  )
+  if (res.length != 0) {
+    res.forEach(el => {
+      safetyList.push({ address: el.nodePlacement, temp: el.detectValue + '', grade: el.warningMsg, time: el.dateTime })
+    })
+  }
+}
+
+
+onMounted(() => {
+  //工作面
+  getFireAreaInfoList()
+  //密闭
+  getFireAreaInfoListMb()
+  //带式
+  getFireAreaInfoListDs()
+  //变电硐室
+  getFireAreaInfoListBd()
+
+  //安全监控
+  getTableList()
+})
 </script>
 
 <style lang="less" scoped>

src/views/vent/fire/fireMonitor/fireMonitor.api.ts

@@ -0,0 +1,67 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
+  getMbRealData ='/fire/fireDisasterApi/getMbRealData',
+  getMbHistoryData='/fire/fireDisasterApi/getMbHistoryData',
+  getInfosByAreaCode='/fire/fireDisasterApi/getInfosByAreaCode',
+  getGxcwHistoryDataByPointCode='/fire/fireDisasterApi/getGxcwHistoryDataByPointCode',
+  getSgjcPointInfo= '/fire/fireDisasterApi/getSgjcPointInfo',
+  getSgjcRealDataByPointCode='/fire/fireDisasterApi/getSgjcRealDataByPointCode',
+  getSgjcHistoryData='/fire/fireDisasterApi/getSgjcHistoryData',
+
+
+}
+/**
+ * 密闭监测实时数据
+ * @param params
+ */
+export const getMbRealData = (params) => defHttp.get({ url: Api.getMbRealData, params });
+
+/**
+ * 
+ * 获取左侧菜单树
+ * @param params
+ */
+export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+
+/**
+ * 
+ * 获取图表数据
+ * @param params
+ */
+export const getMbHistoryData = (params) => defHttp.get({ url: Api.getMbHistoryData, params });
+
+/**
+ * 
+ * 获取光钎条数及测点编号
+ * @param params
+ */
+export const getInfosByAreaCode = (params) => defHttp.get({ url: Api.getInfosByAreaCode, params });
+
+/**
+ * 
+ * 获取光钎测温图表数据
+ * @param params
+ */
+export const getGxcwHistoryDataByPointCode = (params) => defHttp.get({ url: Api.getGxcwHistoryDataByPointCode, params });
+
+/**
+ * 
+ * 获取束管列表
+ * @param params
+ */
+export const getSgjcPointInfo = (params) => defHttp.get({ url: Api.getSgjcPointInfo, params });
+
+/**
+ * 
+ * 获取束管测点实时数据
+ * @param params
+ */
+export const getSgjcRealDataByPointCode = (params) => defHttp.get({ url: Api.getSgjcRealDataByPointCode, params });
+
+/**
+ * 获取束管曲线数据
+ * @param params
+ */
+export const getSgjcHistoryData = (params) => defHttp.get({ url: Api.getSgjcHistoryData, params });

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

@@ -1,14 +1,39 @@
 <template>
   <div class="fireMonitor">
     <div class="fireMon-left-box">
-      <basicTree :treeData="treeData"></basicTree>
+      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
     </div>
     <div class="fireMon-right-box">
-      <div class="fire-top-box">
+      <!-- 光钎 -->
+      <div class="fire-top-box" v-if="flagShow == 'gx' || flagShow == 'all'">
         <basicCard2 :cardContentList2="cardContentList2"></basicCard2>
       </div>
-      <div class="fire-bot-box">
-        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+      <div :class="flagShow == 'gx' ? 'fire-bot-box' : 'fire-bot-box1'" v-if="flagShow == 'gx' || flagShow == 'all'">
+        <div class="gx-center-item-title">
+          <div class="item-left">光钎测温系统温度实时监测</div>
+          <Select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"
+            allowClear @change="pointChange" />
+
+        </div>
+        <div class="gx-center-item-content">
+          <basicEchartLine :gridV="gridV" :echartData="echartDataGx"></basicEchartLine>
+        </div>
+
+      </div>
+      <!-- 束管 -->
+      <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
+        <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+      </div>
+      <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
+        <div class="search-area">
+          <div class="area-title">束管系统监测</div>
+          <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+        </div>
+        <div class="content-area">
+          <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        </div>
+
       </div>
     </div>
 
@@ -16,47 +41,232 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import basicTree from '../../common/basicTree.vue'
 import basicCard2 from '../../common/basicCard2.vue';
+import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
+import { RangePicker, Select } from 'ant-design-vue';
 import { getAssetURL } from '../../../../utils/ui';
+import dayjs from 'dayjs';
+import { getFireAreaInfo, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './fireMonitor.api'
 
 let cardContentList2 = reactive([
-  { imgSrcL: getAssetURL('workPlaceWarn/jd-jcjl.png'), labelL: '监测距离(m)', valL: '468', imgSrcR: getAssetURL('workPlaceWarn/jd-pjwd.png'), labelR: '平均温度(°C)', valR: '11.8', },
-  { imgSrcL: getAssetURL('workPlaceWarn/temp.png'), labelL: '最高温度(°C)', valL: '25.0', imgSrcR: '', labelR: '位置(m)', valR: '450' },
-  { imgSrcL: getAssetURL('workPlaceWarn/jd-zdwd.png'), labelL: '最低温度(°C)', valL: '25.0', imgSrcR: '', labelR: '位置(m)', valR: '25.0' },
+  { imgSrcL: getAssetURL('workPlaceWarn/jd-jcjl.png'), labelL: '平均温度(°C)', valL: '', imgSrcR: getAssetURL('workPlaceWarn/jd-pjwd.png'), labelR: '监测距离(m)', valR: '', },
+  { imgSrcL: getAssetURL('workPlaceWarn/temp.png'), labelL: '最高温度(°C)', valL: '', imgSrcR: '', labelR: '位置(m)', valR: '' },
+  { imgSrcL: getAssetURL('workPlaceWarn/jd-zdwd.png'), labelL: '最低温度(°C)', valL: '', imgSrcR: '', labelR: '位置(m)', valR: '' },
 ])
 
+let areaCode = ref('')
+let warningLevel = ref('')//风险等级
+let flagShow = ref('')
+let gasType = ref('')
+let pointCode = ref('')
+let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
 //数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
+const treeData = reactive<any[]>([])
+
+let card3List = reactive<any[]>([])
 
-let gridV=reactive({
+let gridV = reactive({
   top: '8%',
-        left: '3%',
-        right: '3%',
-        bottom: '10%',
+  left: '3%',
+  right: '3%',
+  bottom: '10%',
 })
 
-let echartData=reactive({
-    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
-    yData:[90, 105, 84, 125, 110, 92, 98],
-    yData1:[140, 165, 134, 175, 160, 152, 158],
-    legendName:['实时值','预测值']
-})
+let echartData = reactive(
+  {
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: ['实时值', '预测值']
+  }
+)
+
+let echartDataGx = reactive(
+  {
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: ['最高温度', '最低温度']
+  }
+)
+
+let gxSelectList = reactive<any[]>([])
+let gxSelect = ref('')
+
+//时间选项切换
+function onDataChange(value, dateString) {
+  TimeRange.value = [dateString[0], dateString[1]]
+  console.log(TimeRange, 'TimeRange')
+}
+
+//获取左侧菜单树
+async function getFireAreaInfos() {
+  const res = await getFireAreaInfo({})
+  if (res.length != 0) {
+    res.forEach((el, ind) => {
+      if (el.areaType == 5) {
+        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, gxcwCnt: el.gxcwCnt, sgjcCnt: el.sgjcCnt, infoTypeTwo: el.infoTypeTwo,warningLevel:el.warningLevel })
+      }
+    })
+    areaCode.value = treeData[0]['areaCode']
+    warningLevel.value = treeData[0].warningLevel == 1 ? '低风险' : treeData[0].warningLevel == 2 ? '中风险' : treeData[0].warningLevel == 3 ? '较高风险' : treeData[0].warningLevel == 4 ? '重大风险' : '--'
+    console.log(treeData, 'treeData-------')
+    cardContentList2[0]['valL'] = treeData[0].infoTypeTwo.aveTemperature
+    cardContentList2[0]['valR'] = '-'
+    cardContentList2[1]['valL'] = treeData[0].infoTypeTwo.maxTemperature
+    cardContentList2[1]['valR'] = '-'
+    cardContentList2[2]['valL'] = treeData[0].infoTypeTwo.minTemperature
+    cardContentList2[2]['valR'] = '-'
+    if (treeData[0]['gxcwCnt'] > 0 && treeData[0]['sgjcCnt'] > 0) {
+      flagShow.value = 'all'
+      //获取工作面光钎条数及测点编号
+      getInfosByAreaCodeList()
+      //获取工作面束管测点编号列表
+      getSgjcPointInfoList()
 
+    } else if (treeData[0]['gxcwCnt'] > 0) {
+      flagShow.value = 'gx'
+      //获取光钎条数及测点编号
+      getInfosByAreaCodeList()
+    } else if (treeData[0]['sgjcCnt'] > 0) {
+      flagShow.value = 'sg'
+      //获取工作面束管测点编号列表
+      getSgjcPointInfoList()
+    }
+  }
+}
+
+//点击左侧树节点
+function selectChange(treeNode) {
+  console.log(treeNode, 'treeNode---')
+  areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
+  let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
+  warningLevel.value = level == 1 ? '低风险' : level == 2 ? '中风险' : level == 3 ? '较高风险' : level == 4 ? '重大风险' : '--'
+  let data = treeData.filter((a) => a.name == treeNode.node.dataRef.title)[0]
+  cardContentList2[0]['valL'] = data.infoTypeTwo.aveTemperature
+  cardContentList2[1]['valL'] = data.infoTypeTwo.maxTemperature
+  cardContentList2[2]['valL'] = data.infoTypeTwo.minTemperature
+  cardContentList2[0]['valR'] = '-'
+  cardContentList2[1]['valR'] = '-'
+  cardContentList2[2]['valR'] = '-'
+  let gxcwCnt = treeData.filter((g) => g.name == treeNode.node.dataRef.title)[0]['gxcwCnt']
+  let sgjcCnt = treeData.filter((s) => s.name == treeNode.node.dataRef.title)[0]['sgjcCnt']
+  if (gxcwCnt > 0 && sgjcCnt > 0) {
+    flagShow.value = 'all'
+    //获取工作面光钎条数及测点编号
+    getInfosByAreaCodeList()
+    //获取工作面束管测点编号列表
+    getSgjcPointInfoList()
+  } else if (gxcwCnt > 0) {
+    flagShow.value = 'gx'
+    //获取工作面光钎条数及测点编号
+    getInfosByAreaCodeList()
+
+  } else if (sgjcCnt > 0) {
+    flagShow.value = 'sg'
+    //获取工作面束管测点编号列表
+    getSgjcPointInfoList()
+  }
+}
+
+//获取光钎条数及测点编号
+async function getInfosByAreaCodeList() {
+  gxSelectList.length = 0
+  let res = await getInfosByAreaCode({ areaCode: areaCode.value })
+  console.log(res, '光钎条数及测点编号')
+  if (res.length != 0) {
+    res.forEach(el => {
+      gxSelectList.push({
+        label: el.pointName,
+        value: el.pointCode,
+      })
+    })
+    gxSelect.value = res[0]['pointCode']
+    //获取光钎测温图表数据
+    getGxcwHistoryDataByPointCodeList()
+  }
+}
+//光钎测温测点编号选项切换
+function pointChange(val) {
+  console.log('选项切换----------', val)
+  gxSelect.value = val
+  getGxcwHistoryDataByPointCodeList()
+}
+//获取光钎测温图表数据
+async function getGxcwHistoryDataByPointCodeList() {
+  echartDataGx.xData.length = 0
+  echartDataGx.yData.length = 0
+  echartDataGx.yData1.length = 0
+  let res = await getGxcwHistoryDataByPointCode({ pointCode: gxSelect.value })
+  console.log(res, '光钎测温图表数据')
+  res.time.forEach(el => {
+    echartDataGx.xData.push(el)
+  })
+  res.maxValue.forEach(el => {
+    echartDataGx.yData.push(el)
+  })
+  res.minValue.forEach(el => {
+    echartDataGx.yData1.push(el)
+  })
+}
+
+
+
+
+
+//获取束管测点编号列表
+async function getSgjcPointInfoList() {
+  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
+  console.log(res, '束管测点编号列表')
+  if (res.length != 0) {
+    pointCode.value = res[0]['pointCode']
+    //获取工作面束管测点实时数据  
+    getSgjcRealDataByPointCodeList()
+  }
+}
+
+//获取束管测点实时数据
+async function getSgjcRealDataByPointCodeList() {
+  card3List.length = 0
+  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
+  console.log(res, '束管测点实时数据======')
+  if (res.length != 0) {
+    res.forEach(el => {
+      card3List.push({ title: el.type, ndLabel: '浓度', ndVal: el.currentValue, tLabel: '时间', tVal: el.time, aLabel: '位置', aVal: el.position })
+    })
+    gasType.value = card3List[0]['title']
+    //获取束管曲线数据
+    getSgjcHistoryDataList()
+  }
+}
+//获取束管曲线数据
+async function getSgjcHistoryDataList() {
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  console.log(res, '束管曲线数据-------')
+  res.time.forEach(el => {
+    echartData.xData.push(el)
+  })
+  res.value.forEach(el => {
+    echartData.yData.push(el)
+  })
+}
+
+//束管选项切换
+function toggleChange(title) {
+  gasType.value = title
+  getSgjcHistoryDataList()
+}
+
+
+onMounted(() => {
+  getFireAreaInfos()
+})
 
 
 </script>
@@ -84,21 +294,143 @@ let echartData=reactive({
     height: 100%;
     margin-left: 10px;
     padding: 15px 10px;
+    overflow-y: auto;
     background-color: rgb(27 35 39 / 80%);
 
     .fire-top-box {
-    width: 100%;
-    height: 110px;
-    margin-bottom: 15px;
-  }
+      width: 100%;
+      height: 110px;
+      margin-bottom: 15px;
+    }
+
+    .fire-bot-box {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 125px);
+      // margin-bottom: 15px;
+      padding: 10px 15px;
+      background-color: rgb(41 49 53 / 80%);
+
+      .gx-center-item-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .item-left {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .gx-center-item-content {
+        height: calc(100% - 30px);
+      }
+    }
+
+    .fire-bot-box1 {
+      box-sizing: border-box;
+      width: 100%;
+      height: 242px;
+      margin-bottom: 15px;
+      padding: 10px 15px;
+      background-color: rgb(41 49 53 / 80%);
+
+      .gx-center-item-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .item-left {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .gx-center-item-content {
+        height: calc(100% - 30px);
+      }
+    }
+
+    .composite-top-box {
+      width: 100%;
+      height: 250px;
+      margin-bottom: 15px;
+    }
+
+    .composite-bot-box {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 265px);
+      padding: 10px 15px;
+      border: 1px solid #1e96cd;
+      background-color: rgb(41 49 53 / 80%);
+
+      .search-area {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .area-title {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .content-area {
+        height: calc(100% - 30px);
+      }
+
+    }
 
-  .fire-bot-box {
-    width: 100%;
-    height: calc(100% - 125px);
-    background-color: rgb(41 49 53 / 80%);
-  }
   }
 
- 
+
+}
+
+: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-select-selector) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-select-selection-placeholder) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-select-arrow) {
+  color: #a1dff8 !important;
 }
 </style>

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

@@ -1,21 +1,40 @@
 <template>
   <div class="workPlaceWarn">
     <div class="workPlace-left-box">
-      <basicTree :treeData="treeData"></basicTree>
+      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
     </div>
     <div class="workPlace-right-box">
-      <div class="top-box-card">
+      <!-- 光钎 -->
+      <div class="top-box-card" v-if="flagShow == 'gx' || flagShow == 'all'">
         <basicCard :cardContentList="cardContentList" />
       </div>
-      <div class="top-box-btn">
-        <basicWorkBtn :workBtnList="workBtnList" />
+      <div class="top-box-btn" v-if="flagShow == 'gx' || flagShow == 'all'">
+        <basicWorkBtn :workBtnList="workBtnList" @btnToggle="btnToggle" />
       </div>
-      <div class="center-box">
-        <basicEchartLine :gridV="gridV" :echartData="echartData"/>
+      <div class="center-box" v-if="flagShow == 'gx' || flagShow == 'all'">
+        <basicEchartLine :gridV="gridV" :echartData="echartDataGx" />
       </div>
-      <div class="bot-box">
+
+
+      <!-- 束管 -->
+      <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
+        <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
+      </div>
+      <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
+        <div class="search-area">
+          <div class="area-title">束管系统监测</div>
+          <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
+        </div>
+        <div class="content-area">
+          <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
+        </div>
+
+      </div>
+      <!-- 通用 -->
+      <div :class="flagShow == 'sg' ? 'bot-box1' : 'bot-box'">
         <div class="bot-box-card" v-for="(item, index) in botCardList" :key="index">
-          <basicSensor :sensorTitle="item.title" :sensorList="sensorList" :headList="headList" />
+          <basicSensor :sensorTitle="item.title" :sensorList="item.sensorList" :headList="headList" />
         </div>
       </div>
     </div>
@@ -24,80 +43,303 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { getAssetURL } from '../../../../utils/ui';
 import basicCard from '../../common/basicCard.vue';
 import basicWorkBtn from '../../common/basicWorkBtn.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import basicSensor from '../../common/basicSensor.vue';
 import basicTree from '../../common/basicTree.vue'
+import { getFireAreaInfo, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getYwRealData, getHyRealData, getPlzzRealData, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './workeFace.api'
+import dayjs from 'dayjs';
+import { RangePicker, Select } from 'ant-design-vue';
+import basicCard3 from '../../common/basicCard3.vue';
 
+let areaCode = ref('')
+let warningLevel = ref('')
+let flagShow = ref('')
+let gxSelect = ref('')
+let pointCode = ref('')
+let gasType = ref('')
+let card3List = reactive<any[]>([])
+let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
 let cardContentList = reactive([
-  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(℃)', val: '18.1' },
-  { id: 1, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '烟雾', val: '无' },
-  { id: 2, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度(ppm)', val: '16.3' },
+  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(℃)', val: '' },
+  { id: 1, imgSrc: getAssetURL('workPlaceWarn/jd-zdwd.png'), label: '最低温度(℃)', val: '' },
   {
-    id: 3,
-    imgSrc: getAssetURL('workPlaceWarn/dspl.png'),
-    label: '自动喷淋灭火装置',
-    val: '打开',
+    id: 2,
+    imgSrc: getAssetURL('workPlaceWarn/jd-pjwd.png'),
+    label: '平均温度',
+    val: '',
   },
-]);
+  { id: 3, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度(ppm)', val: '' },
 
-let workBtnList = reactive([
-  { id: 0, name: '行人侧' },
-  { id: 1, name: '非行人侧' },
 ]);
 
+let workBtnList = reactive<any[]>([]);
+
 let botCardList = reactive([
-  { title: '烟雾传感器' },
-  { title: '一氧化碳传感器' },
-  { title: '自动喷淋灭火装置' },
+  {
+    title: '烟雾传感器', sensorList: []
+  },
+  {
+    title: '火焰传感器', sensorList: []
+  },
+  {
+    title: '自动喷淋灭火装置', sensorList: []
+  },
 ]);
 let headList = reactive([
-  { id: 0, title: '测点位置' },
-  { id: 1, title: '测点值' },
+  { id: 0, title: '名称' },
+  { id: 1, title: '状态' },
   { id: 3, title: '时间' },
 ]);
 
-let sensorList = reactive([
-  { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-]);
 //数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-  { name: "81203综放工作面", value: "111", id: '1', pid: null },
-  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-  { name: "81203综放工作面", value: "458", id: '2', pid: null },
-  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-  { name: "81203综放工作面", value: "189", id: '3', pid: null },
-  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
-
-let gridV=reactive({
+const treeData = reactive<any[]>([])
+
+let gridV = reactive({
   top: '15%',
-        left: '3%',
-        right: '3%',
-        bottom: '10%',
+  left: '3%',
+  right: '3%',
+  bottom: '10%',
 })
 
-let echartData=reactive({
-    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
-    yData:[90, 105, 84, 125, 110, 92, 98],
-    yData1:[140, 165, 134, 175, 160, 152, 158],
-    legendName:['实时值','预测值']
+let echartData = reactive({
+  xData: [],
+  yData: [],
+  yData1: [],
+  legendName: ['实时值', '预测值']
+})
+
+let echartDataGx = reactive(
+  {
+    xData: [],
+    yData: [],
+    yData1: [],
+    legendName: ['最高温度', '最低温度']
+  }
+)
+
+
+//时间选项切换
+function onDataChange(value, dateString) {
+  TimeRange.value = [dateString[0], dateString[1]]
+  console.log(TimeRange, 'TimeRange')
+}
+
+//获取左侧菜单树
+async function getFireAreaInfos() {
+  const res = await getFireAreaInfo({})
+  if (res.length != 0) {
+    res.forEach((el, ind) => {
+      if (el.areaType == 4) {
+        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, gxcwCnt: el.gxcwCnt, sgjcCnt: el.sgjcCnt, infoTypeTwo: el.infoTypeTwo })
+      }
+    })
+    areaCode.value = treeData[0]['areaCode']
+    warningLevel.value = treeData[0].warningLevel == 1 ? '低风险' : treeData[0].warningLevel == 2 ? '中风险' : treeData[0].warningLevel == 3 ? '较高风险' : treeData[0].warningLevel == 4 ? '重大风险' : '--'
+    console.log(treeData, 'treeData-------')
+    cardContentList[0]['val'] = treeData[0].infoTypeTwo.maxTemperature
+    cardContentList[1]['val'] = treeData[0].infoTypeTwo.minTemperature
+    cardContentList[2]['val'] = treeData[0].infoTypeTwo.aveTemperature
+    cardContentList[3]['val'] = treeData[0].infoTypeTwo.returnAirCornerCO
+    //获取烟雾传感器数据
+    getYwRealDataList()
+    //获取火焰传感器监测数据
+    getHyRealDataList()
+    //获取自动喷淋灭火装置数据
+    getPlzzRealDataList()
+    if (treeData[0]['gxcwCnt'] > 0 && treeData[0]['sgjcCnt'] > 0) {
+      flagShow.value = 'all'
+      //获取工作面光钎条数及测点编号
+      getInfosByAreaCodeList()
+      // //获取工作面束管测点编号列表
+      getSgjcPointInfoList()
+    } else if (treeData[0]['gxcwCnt'] > 0) {
+      flagShow.value = 'gx'
+      //获取光钎条数及测点编号
+      getInfosByAreaCodeList()
+    } else if (treeData[0]['sgjcCnt'] > 0) {
+      flagShow.value = 'sg'
+      //获取工作面束管测点编号列表
+      getSgjcPointInfoList()
+    }
+  }
+}
+
+//点击左侧树节点
+function selectChange(treeNode) {
+  console.log(treeNode, 'treeNode---')
+  areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
+  let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
+  warningLevel.value = level == 1 ? '低风险' : level == 2 ? '中风险' : level == 3 ? '较高风险' : level == 4 ? '重大风险' : '--'
+  let data = treeData.filter((a) => a.name == treeNode.node.dataRef.title)[0]
+  cardContentList[0]['val'] = data.infoTypeTwo.maxTemperature
+  cardContentList[1]['val'] = data.infoTypeTwo.minTemperature
+  cardContentList[2]['val'] = data.infoTypeTwo.aveTemperature
+  cardContentList[3]['val'] = data.infoTypeTwo.returnAirCornerCO
+  //获取烟雾传感器数据
+  getYwRealDataList()
+  //获取火焰传感器监测数据
+  getHyRealDataList()
+  //获取自动喷淋灭火装置数据
+  getPlzzRealDataList()
+  let gxcwCnt = treeData.filter((g) => g.name == treeNode.node.dataRef.title)[0]['gxcwCnt']
+  let sgjcCnt = treeData.filter((s) => s.name == treeNode.node.dataRef.title)[0]['sgjcCnt']
+  if (gxcwCnt > 0 && sgjcCnt > 0) {
+    flagShow.value = 'all'
+    //获取工作面光钎条数及测点编号
+    getInfosByAreaCodeList()
+    //获取工作面束管测点编号列表
+    getSgjcPointInfoList()
+  } else if (gxcwCnt > 0) {
+    flagShow.value = 'gx'
+    //获取工作面光钎条数及测点编号
+    getInfosByAreaCodeList()
+
+  } else if (sgjcCnt > 0) {
+    flagShow.value = 'sg'
+    //获取工作面束管测点编号列表
+    getSgjcPointInfoList()
+  }
+}
+
+//获取光钎条数及测点编号
+async function getInfosByAreaCodeList() {
+  workBtnList.length = 0
+  let res = await getInfosByAreaCode({ areaCode: areaCode.value })
+  console.log(res, '光钎条数及测点编号')
+  if (res.length != 0) {
+    res.forEach(el => {
+      workBtnList.push({
+        label: el.pointName,
+        value: el.pointCode,
+      })
+    })
+    gxSelect.value = res[0]['pointCode']
+    //获取光钎测温图表数据
+    getGxcwHistoryDataByPointCodeList()
+  }
+}
+
+//光钎选项切换
+function btnToggle(item) {
+  console.log(item, 'item----=====')
+  gxSelect.value = item.value
+  getGxcwHistoryDataByPointCodeList()
+}
+
+//获取光钎测温图表数据
+async function getGxcwHistoryDataByPointCodeList() {
+  echartDataGx.xData.length = 0
+  echartDataGx.yData.length = 0
+  echartDataGx.yData1.length = 0
+  let res = await getGxcwHistoryDataByPointCode({ pointCode: gxSelect.value })
+  console.log(res, '光钎测温图表数据')
+  res.time.forEach(el => {
+    echartDataGx.xData.push(el)
+  })
+  res.maxValue.forEach(el => {
+    echartDataGx.yData.push(el)
+  })
+  res.minValue.forEach(el => {
+    echartDataGx.yData1.push(el)
+  })
+}
+
+//获取烟雾传感器监测数据
+async function getYwRealDataList() {
+  botCardList[0].sensorList.length = 0
+  let res = await getYwRealData({ areaCode: areaCode.value })
+  console.log(res, '烟雾传感器监测数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      el.isOpen = el.isOpen == '0' ? '无烟' : '有烟'
+      botCardList[0].sensorList.push({ name: el.pointName, status: el.isOpen, times: el.time })
+    })
+
+  }
+}
+
+//获取火焰传感器监测数据
+async function getHyRealDataList() {
+  botCardList[1].sensorList.length = 0
+  let res = await getHyRealData({ areaCode: areaCode.value })
+  console.log(res, '火焰传感器监测数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      el.isOpen = el.isOpen == '0' ? '无火' : '有火'
+      botCardList[1].sensorList.push({ name: el.pointName, status: el.isOpen, times: el.time })
+    })
+
+  }
+}
+
+//获取喷淋设备监测数据
+async function getPlzzRealDataList() {
+  botCardList[2].sensorList.length = 0
+  let res = await getPlzzRealData({ areaCode: areaCode.value })
+  console.log(res, '自动喷淋灭火装置数据')
+  if (res.length != 0) {
+    res.forEach(el => {
+      el.isOpen = el.isOpen == '0' ? '正常' : '异常'
+      botCardList[2].sensorList.push({ name: el.pointName, status: el.isOpen, times: el.time })
+    })
+
+  }
+
+}
+
+//获取束管测点编号列表
+async function getSgjcPointInfoList() {
+  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
+  console.log(res, '束管测点编号列表')
+  if (res.length != 0) {
+    pointCode.value = res[0]['pointCode']
+    //获取束管测点实时数据  
+    getSgjcRealDataByPointCodeList()
+  }
+}
+
+//束管选项切换
+function toggleChange(title) {
+  gasType.value = title
+  getSgjcHistoryDataList()
+}
+
+//获取束管测点实时数据
+async function getSgjcRealDataByPointCodeList() {
+  card3List.length = 0
+  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
+  console.log(res, '束管测点实时数据======')
+  if (res.length != 0) {
+    res.forEach(el => {
+      card3List.push({ title: el.type, ndLabel: '浓度', ndVal: el.currentValue, tLabel: '时间', tVal: el.time, aLabel: '位置', aVal: el.position })
+    })
+    gasType.value = card3List[0]['title']
+    //获取束管曲线数据
+    getSgjcHistoryDataList()
+  }
+}
+
+//获取束管曲线数据
+async function getSgjcHistoryDataList() {
+  echartData.xData.length = 0
+  echartData.yData.length = 0
+  echartData.yData1.length = 0
+  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
+  console.log(res, '束管曲线数据-------')
+  res.time.forEach(el => {
+    echartData.xData.push(el)
+  })
+  res.value.forEach(el => {
+    echartData.yData.push(el)
+  })
+}
+
+onMounted(() => {
+  getFireAreaInfos()
 })
 </script>
 
@@ -124,6 +366,7 @@ let echartData=reactive({
     height: 100%;
     margin-left: 10px;
     padding: 15px 10px;
+    overflow-y: auto;
     background-color: rgb(27 35 39 / 80%);
 
     .top-box-card {
@@ -152,12 +395,98 @@ let echartData=reactive({
       overflow-x: auto;
 
       .bot-box-card {
-        width: 550px;
+        width: 540px;
+        height: 100%;
+      }
+    }
+
+    .bot-box1 {
+      display: flex;
+      flex-shrink: 0;
+      justify-content: space-between;
+      height: calc(100% - 545px);
+      overflow-x: auto;
+
+      .bot-box-card {
+        width: 540px;
         height: 100%;
       }
     }
+
+    .composite-top-box {
+      width: 100%;
+      height: 235px;
+      margin-bottom: 15px;
+    }
+
+    .composite-bot-box {
+      box-sizing: border-box;
+      width: 100%;
+      // height: calc(100% - 250px);
+      height: 280px;
+      margin-bottom: 15px;
+      padding: 10px 15px;
+      border: 1px solid #1e96cd;
+      background-color: rgb(41 49 53 / 80%);
+
+      .search-area {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        height: 30px;
+
+        .area-title {
+          color: #fff;
+          font-family: douyuFont;
+          font-size: 16px;
+        }
+      }
+
+      .content-area {
+        height: calc(100% - 30px);
+      }
+    }
   }
+}
+
+: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-select-selector) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-select-selection-placeholder) {
+  color: #a1dff8 !important;
+}
 
+:deep(.vMonitor-select-arrow) {
+  color: #a1dff8 !important;
 }
 </style>

src/views/vent/fire/wokeFace/workeFace.api.ts

@@ -0,0 +1,69 @@
+
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  getFireAreaInfo = '/fire/fireDisasterApi/getFireAreaInfo',
+  getInfosByAreaCode='/fire/fireDisasterApi/getInfosByAreaCode',
+  getGxcwHistoryDataByPointCode='/fire/fireDisasterApi/getGxcwHistoryDataByPointCode',
+  getYwRealData='/fire/fireDisasterApi/getYwRealData',
+  getHyRealData='/fire/fireDisasterApi/getHyRealData',
+  getPlzzRealData='/fire/fireDisasterApi/getPlzzRealData',
+  getSgjcPointInfo= '/fire/fireDisasterApi/getSgjcPointInfo',
+  getSgjcRealDataByPointCode='/fire/fireDisasterApi/getSgjcRealDataByPointCode',
+  getSgjcHistoryData='/fire/fireDisasterApi/getSgjcHistoryData',
+
+}
+/**
+ * 菜单树接口
+ * @param params
+ */
+export const getFireAreaInfo = (params) => defHttp.get({ url: Api.getFireAreaInfo, params });
+
+/**
+ * 获取光钎条数及测点编号
+ * @param params
+ */
+export const getInfosByAreaCode = (params) => defHttp.get({ url: Api.getInfosByAreaCode, params });
+
+/**
+ * 获取光钎图表数据
+ * @param params
+ */
+export const getGxcwHistoryDataByPointCode = (params) => defHttp.get({ url: Api.getGxcwHistoryDataByPointCode, params });
+
+/**
+ * 获取烟雾传感器数据
+ * @param params
+ */
+export const getYwRealData = (params) => defHttp.get({ url: Api.getYwRealData, params });
+
+/**
+ * 获取火焰传感器数据
+ * @param params
+ */
+export const getHyRealData = (params) => defHttp.get({ url: Api.getHyRealData, params });
+
+/**
+ * 获取自动喷淋灭火装置数据
+ * @param params
+ */
+export const getPlzzRealData = (params) => defHttp.get({ url: Api.getPlzzRealData, params });
+
+/**
+ * 
+ * 获取束管测点实时数据
+ * @param params
+ */
+export const getSgjcRealDataByPointCode = (params) => defHttp.get({ url: Api.getSgjcRealDataByPointCode, params });
+
+/**
+ * 
+ * 获取束管列表
+ * @param params
+ */
+export const getSgjcPointInfo = (params) => defHttp.get({ url: Api.getSgjcPointInfo, params });
+
+/**
+ * 获取束管曲线数据
+ * @param params
+ */
+export const getSgjcHistoryData = (params) => defHttp.get({ url: Api.getSgjcHistoryData, params });