机电硐室

src/views/vent/home/configurable/components/content.vue

@@ -3,62 +3,37 @@
   <!-- 主体内容部分 -->
   <div class="content">
     <!-- 背景 -->
-    <img v-if="background.show && background.type === 'image'" class="content__background image__background" :src="background.link" />
-    <video
-      v-if="background.show && background.type === 'video'"
-      class="content__background content__background_video"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
+    <img v-if="background.show && background.type === 'image'" class="content__background image__background"
+      :src="background.link" />
+    <video v-if="background.show && background.type === 'video'" class="content__background content__background_video"
+      width="100%" autoplay loop muted disablepictureinpicture playsinline>
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
+      <div v-for="config in layoutConfig" :key="config.name"
+        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
-          <div
-            v-if="config.pageType == 'vent_New'"
-            style="padding-top: 11%"
-            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap"
-          >
-            <MiniBoard
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+          <div v-if="config.pageType == 'vent_New'" style="padding-top: 11%"
+            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
-          <div v-else-if="config.pageType == 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoardNew
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+          <div v-else-if="config.pageType == 'New_fire'"
+            class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
           <div v-else class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoard
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
-          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config"
+            :chart-data="config.data" />
           <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
@@ -82,7 +57,8 @@
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
+          <GalleryList class="content__module" :type="config.type" :list-config="config.items"
+            :gallery-config="config.galleryItems" />
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'complex_list'">
@@ -90,22 +66,22 @@
         </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
         <template v-if="config.name === 'table'">
-          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns"
+            :data="config.data" />
         </template>
         <template v-if="config.name === 'tabs'">
-          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items"
+            :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
-          <BlastDelta
-            v-if="config.pageType === 'New_fire'"
-            class="content__moduleFire"
-            :pos-monitor="config.data"
-            :canvasSize="{ width: 250, height: 200 }"
-          />
-          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta v-if="config.pageType === 'New_fire'" class="content__moduleFire" :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }" />
         </template>
         <template v-if="config.name === 'qh_curve'">
-          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
+          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop"
+            :fan2-prop="config.config.fan2Prop" />
         </template>
         <template v-if="config.name === 'ai_chat'">
           <AIChat class="content__module" />
@@ -118,13 +94,8 @@
           <SelectCs :devicedata="config.data" :setLabelData="config.config.setLabelConfig" />
         </template>
         <template v-if="config.name === 'measure_detail'">
-          <MeasureDetail
-            class="content__module"
-            :show-title="false"
-            :composite-data="config.data"
-            :topconfig="config.config.topconfig"
-            :btnconfig="config.config.btnconfig"
-          />
+          <MeasureDetail class="content__module" :show-title="false" :composite-data="config.data"
+            :topconfig="config.config.topconfig" :btnconfig="config.config.btnconfig" />
         </template>
         <template v-if="config.name === 'partition'">
           <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
@@ -136,11 +107,15 @@
           <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
         </template>
         <template v-if="config.name === 'button_list'">
-          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
+          <ButtonList class="content__module" :type="config.config.type" :config="config.config"
+            :buttonList="config.config.buttonList" />
         </template>
-         <template v-if="config.name === 'card_list'">
-          <cardList class="content__module"  :config="config.config" :buttonList="config.config.buttonList" />
+        <template v-if="config.name === 'card_list'">
+          <cardList class="content__module" :cardData="config.data" />
         </template>
+          <template v-else-if="config.name === 'generalist'">
+            <generalList class="content__module"></generalList>
+          </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
@@ -186,6 +161,8 @@ import SelectorDualChart from './preset/selectorDualChart.vue';
 import RadioLabel from './preset/radioLabel.vue';
 import ButtonList from './preset/buttonList.vue';
 import cardList from './preset/cardList.vue'
+import generalList from './preset/generalList.vue'
+
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/preset/cardList.vue

@@ -1,35 +1,40 @@
 <template>
   <div class="card-list">
-    <div class="list-box" v-for="(item, index) in cardListData" :key="index">
-      <div class="box-item-title">{{ item.title }}</div>
+    <div class="list-box">
+      <div class="box-item-title">{{ cardData.title }}</div>
       <div class="box-item-content">
         <div class="content-area">
           <img src="@/assets/images/home-container/configurable/electroChamper/2-6.png" alt="">
-          <div class="item-text">{{ item.areaText }}</div>
-          <div class="item-val">{{ item.areaVal }}</div>
+          <div class="item-text">{{ cardData.areaText }}</div>
+          <div class="item-val">{{ cardData.areaVal }}</div>
         </div>
-        <div class="content-status">
+         <div class="content-module">
           <img src="@/assets/images/home-container/configurable/electroChamper/2-8.png" alt="">
-          <div class="item-text">{{ item.statusText }}</div>
-          <div class="item-val">{{ item.statusVal }}</div>
+          <div class="item-text">{{ cardData.moduleText }}</div>
+          <div class="item-val">{{ cardData.moduleVal }}</div>
+        </div>
+        <div class="content-status">
+          <img src="@/assets/images/home-container/configurable/electroChamper/2-6.png" alt="">
+          <div class="item-text">{{ cardData.statusText }}</div>
+          <div class="item-val">{{ cardData.statusVal }}</div>
         </div>
         <div class="content-card-box">
           <div class="card-box-item">
             <div class="item-common item-green">
-              <div class="common-text">{{ item.phoneText }}</div>
-              <div class="common-val val-green">{{ item.phoneVal }}</div>
+              <div class="common-text">{{ cardData.phoneText }}</div>
+              <div class="common-val val-green">{{ cardData.phoneVal }}</div>
             </div>
             <div class="item-common item-blue">
-              <div class="common-text">{{ item.tempNowText }}</div>
-              <div class="common-val val-blue">{{ `${item.tempNowVal}℃` }}</div>
+              <div class="common-text">{{ cardData.tempNowText }}</div>
+              <div class="common-val val-blue">{{ `${cardData.tempNowVal}℃` }}</div>
             </div>
             <div class="item-common item-green">
-              <div class="common-text">{{ item.tempOpenText }}</div>
-              <div class="common-val val-green">{{ `${item.tempOpenVal}℃` }}</div>
+              <div class="common-text">{{ cardData.tempOpenText }}</div>
+              <div class="common-val val-green">{{ `${cardData.tempOpenVal}℃` }}</div>
             </div>
             <div class="item-common item-blue">
-              <div class="common-text">{{ item.timeText }}</div>
-              <div class="common-val val-blue">{{ `${item.timeVal}s` }}</div>
+              <div class="common-text">{{ cardData.timeText }}</div>
+              <div class="common-val val-blue">{{ `${cardData.timeVal}s` }}</div>
             </div>
           </div>
           <div class="card-box-item">
@@ -39,16 +44,16 @@
               <div>关闭</div>
             </div>
             <div class="item-common item-green">
-              <div class="common-text">{{ item.tempMaxText }}</div>
-              <div class="common-val val-green">{{ `${item.tempMaxVal}℃` }}</div>
+              <div class="common-text">{{ cardData.tempMaxText }}</div>
+              <div class="common-val val-green">{{ `${cardData.tempMaxVal}℃` }}</div>
             </div>
             <div class="item-common item-blue">
-              <div class="common-text">{{ item.tempCloseText }}</div>
-              <div class="common-val val-blue">{{ `${item.tempCloseVal}℃` }}</div>
+              <div class="common-text">{{ cardData.tempCloseText }}</div>
+              <div class="common-val val-blue">{{ `${cardData.tempCloseVal}℃` }}</div>
             </div>
             <div class="item-common item-green">
-              <div class="common-text">{{ item.time3Text }}</div>
-              <div class="common-val val-green">{{ `${item.time3Val}s` }}</div>
+              <div class="common-text">{{ cardData.time3Text }}</div>
+              <div class="common-val val-green">{{ `${cardData.time3Val}s` }}</div>
             </div>
           </div>
         </div>
@@ -59,14 +64,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref,watchEffect } from 'vue'
 
+let props=defineProps({
+  cardData:{
+    type:Object,
+    default:()=>{
+      return {}
+    }
+  }
+})
+//设备开关状态
 let checked = ref(true)
-let cardListData = ref<any[]>([
-  { id: 1, title: '01球阀', areaText: '烟雾模式-区域', areaVal: '分区4', statusText: '烟雾传感器状态', statusVal: '烟雾正常-低水平', phoneText: '机号', phoneVal: 4, tempNowText: '实时测温', tempNowVal: 21.2, tempOpenText: '开启温度', tempOpenVal: 30, timeText: '延时t1', timeVal: 3, tempMaxText: '最高温度', tempMaxVal: 21.3, tempCloseText: '关闭温度', tempCloseVal: 30, time3Text: '延时t3', time3Val: 3 },
-  // { id: 2, title: '02球阀', areaText: '烟雾模式-区域', areaVal: '分区4', statusText: '烟雾传感器状态', statusVal: '烟雾正常-低水平', phoneText: '机号', phoneVal: 4, tempNowText: '实时测温', tempNowVal: 21.2, tempOpenText: '开启温度', tempOpenVal: 30, timeText: '延时t1', timeVal: 3, tempMaxText: '最高温度', tempMaxVal: 21.3, tempCloseText: '关闭温度', tempCloseVal: 30, time3Text: '延时t3', time3Val: 3 },
-])
-
+watchEffect(()=>{
+  checked.value=props.cardData.deviceSTAT
+})
 </script>
 
 <style lang="less" scoped>
@@ -132,13 +144,21 @@ let cardListData = ref<any[]>([
         background: var(--image-content-area) no-repeat;
         background-size: 100% 100%;
       }
+        .content-module {
+        position: relative;
+        width: 100%;
+        height: 38px;
+        line-height: 38px;
+        background: var(--image-content-status) no-repeat;
+        background-size: 100% 100%;
+      }
 
       .content-status {
         position: relative;
         width: 100%;
         height: 38px;
         line-height: 38px;
-        background: var(--image-content-status) no-repeat;
+        background: var(--image-content-area) no-repeat;
         background-size: 100% 100%;
       }
 
@@ -154,7 +174,7 @@ let cardListData = ref<any[]>([
             position: relative;
             width: 100%;
             height: 38px;
-            margin-bottom: 36px;
+            margin-bottom: 16px;
           }
 
           .item-green {

src/views/vent/home/configurable/components/preset/generalList.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="general-list">
+    <div class="general-content-box" v-for="(item, index) in generalList" :key="index">
+      <div class="general-icon" :class="index % 2 == 0 ? 'icon-green' : 'icon-blue'"></div>
+      <div class="general-label">{{ }}</div>
+      <div class="general-status">{{ }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let generalList = ref<any[]>([
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+  { label: '分区1', status: '正常' },
+])
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .card-list {
+    --image-bg-green: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-3.png');
+    --image-bg-blue: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-4.png');
+    --image-bg-green-icon: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-3.png');
+    --image-bg-blue-icon: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-2.png');
+
+  }
+}
+
+.general-list {
+  --image-bg-green: url('@/assets/images/home-container/configurable/electroChamper/3-3.png');
+  --image-bg-blue: url('@/assets/images/home-container/configurable/electroChamper/3-1.png');
+  --image-bg-green-icon: url('@/assets/images/home-container/configurable/electroChamper/3-4.png');
+  --image-bg-blue-icon: url('@/assets/images/home-container/configurable/electroChamper/3-2.png');
+  width: 100%;
+  height: 100%;
+  padding: 10px 15px;
+  box-sizing: border-box;
+
+  .general-content-box {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+
+    &:nth-child(odd) {
+      background: var(--image-bg-blue) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(even) {
+      background: var(--image-bg-green) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .general-icon {
+    width: 25px;
+    height: 25px;
+  }
+
+  .icon-green {}
+}
+</style>

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

@@ -4,6 +4,7 @@ import { get } from '../billboard/utils';
 import { useGlobSetting } from '/@/hooks/setting';
 import { ref, reactive } from 'vue'
 import ceshi from './ceshi.json'
+import { e } from 'unocss';
 
 
 enum Api {
@@ -99,6 +100,7 @@ export const list = (params) => {
         }
         if (isArray(e.history_report)) {
           e.history_report = slice(e.history_report, e.history_report.length - 30, e.history_report.length);
+          console.log(e, '999000')
         }
       });
     }
@@ -631,15 +633,30 @@ export const getElectroData = (params) => {
 
 
   let res = ceshi.msgTxt.find(el => el.type == 'ballvalve_auto')
- 
-  res.tempData=res?.datalist?.map((el,index)=>{
+
+  res.tempData = res?.datalist?.map((el, index) => {
     return {
-      areaName:el.readData.areaName,
-      tempStart:el.readData.tempStart,
-      tempStop:el.readData.tempStop
+      areaName: el.readData.areaName,
+      tempStart: el.readData.tempStart,
+      tempStop: el.readData.tempStop
     }
   })
-   console.log(res, '机电硐室数据')
+
+  if (res?.datalist) {
+    res.datalist.forEach(el => {
+      el.cardData = {
+        title: el.strinstallpos, areaText: '区域', areaVal: el.readData.areaName, moduleText: '模式', moduleVal: el.readData.smokePattern, statusText: '烟雾传感器状态', statusVal: el.readData.smokeSensorStatus == 'False' ? '正常-低电平' : '异常', phoneText: '机号', phoneVal: el.readData.deviceName, tempNowText: '实时测温', tempNowVal: el.readData.tempRealtime, tempOpenText: '开启温度', tempOpenVal: el.readData.tempStart, timeText: '延时t1', timeVal: 0, tempMaxText: '最高温度', tempMaxVal: el.readData.tempMax, tempCloseText: '关闭温度', tempCloseVal: el.readData.tempMin, time3Text: '延时t3', time3Val: 0, deviceSTAT: el.readData.deviceSTAT == '1' ? true : false
+      }
+    })
+    res.chartData=res.datalist.map(el=>{
+      return {
+        time:el.readData.tTime,
+        coRealTime:el.readData.CORealtime,
+        coWarn:el.readData.COWarn,
+      }
+    })
+  }
+  console.log(res, '机电硐室数据')
   return new Promise((resolve) => {
     resolve(res)
   })

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

@@ -5558,7 +5558,7 @@ export const testConfigElectro: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'datalist',
+          readFrom: 'cardData',
          
         },
       ],
@@ -5600,80 +5600,24 @@ export const testConfigElectro: Config[] = [
             basis: '30%',
           },
           {
-            name: 'list',
+            name: 'generalist',
             basis: '70%',
           },
         ],
 
       },
       board: [],
-      list: [
-        {
-          type: 'N',
-          readFrom: 'arrayCount',
-          items: [
-            {
-              label: '分区1',
-              value: '${coVal}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区2',
-              value: '${co2Val}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区3',
-              value: '${o2Val}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区4',
-              value: '${tempVal}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区5',
-              value: '${coVal}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区6',
-              value: '${co2Val}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区7',
-              value: '${o2Val}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '分区8',
-              value: '${tempVal}',
-              color: 'blue',
-              info: '',
-            },
-
-          ],
-        },
-      ],
+      list: [],
       chart: [
         {
           type: 'line',
           readFrom: '',
           legend: { show: true },
           xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '风量(m³/min)', position: 'left' }],
+          yAxis: [{ show: true, name: '(%)', position: 'left' }],
           series: [
-            { readFrom: 'history_report', xprop: 'time', yprop: 'faceIntM3', label: '进风' },
-            { readFrom: 'history_report', xprop: 'time', yprop: 'faceRetM3', label: '回风' },
+            { readFrom: 'chartData', xprop: 'time', yprop: 'coRealTime', label: 'CO实时值' },
+            { readFrom: 'chartData', xprop: 'time', yprop: 'coWarn', label: 'CO报警阈值' },
           ],
         }
       ],
@@ -5681,7 +5625,12 @@ export const testConfigElectro: Config[] = [
       gallery: [],
       complex_list: [],
       gallery_list: [],
-      preset: [],
+      preset: [
+        {
+          readFrom: 'cardData',
+         
+        }
+        ],
       to: '',
     },
     showStyle: {