[Feat 0000] 保德配置调整及样式调整

src/views/vent/deviceManager/configurationTable/types.ts

@@ -88,7 +88,7 @@ export interface ShowStyle {
 
 export interface ModuleDataBoard {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
@@ -165,7 +165,7 @@ export interface ModuleDataGalleryList {
 
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar';
+  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。特别的是，pie 类型的图表应将路径指到对象上，其他的图表应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */

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

@@ -16,6 +16,9 @@
             @change="selectHandler"
           />
         </div>
+        <div v-if="header.show && header.showSlot">
+          {{ getFormattedText(selectedDevice, header.slot.value) }}
+        </div>
         <!-- 日期组件 -->
         <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
           <a-range-picker
@@ -49,6 +52,7 @@
   import { defineProps, defineEmits, computed, onMounted, onUnmounted } from 'vue';
   import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
   import { useInitDevicesBD } from '../hooks/useInit';
+  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
 
   const props = defineProps<{
     moduleData: ModuleData;

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

@@ -0,0 +1,302 @@
+<template>
+  <div class="dane-bd" :style="style" :class="daneClass">
+    <div class="dane-title">
+      <div class="common-navL">
+        <span :class="{ deactived: index === 1 }" @click="index = 0">
+          {{ moduleNameA }}
+        </span>
+        <span class="ml-5px mr-5px">|</span>
+        <span :class="{ deactived: index === 0 }" @click="index = 1">
+          {{ moduleNameB }}
+        </span>
+      </div>
+
+      <div class="common-navR">
+        <!-- 下拉框 -->
+        <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.showSelector">
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceIDA"
+            allowClear
+            :options="optionsA"
+            @change="selectHandlerA"
+          />
+        </div>
+        <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.showSelector">
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceIDB"
+            allowClear
+            :options="optionsB"
+            @change="selectHandlerB"
+          />
+        </div>
+        <!-- 日期组件 -->
+        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
+          <a-range-picker
+            size="small"
+            style="width: 140px"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']"
+            @change="onChange"
+            @ok="onOk"
+          />
+        </div> -->
+        <!-- 开关组件 -->
+        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
+            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
+            <a-switch v-model:checked="checked" />
+            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
+          </div> -->
+      </div>
+    </div>
+    <div class="dane-content">
+      <slot>
+        <Content v-if="index === 0" style="height: 100%" :moduleData="moduleDataA" :data="selectedDeviceA" />
+        <Content v-if="index === 1" style="height: 100%" :moduleData="moduleDataB" :data="selectedDeviceB" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Content from './content.vue';
+  import { defineProps, defineEmits, computed, onMounted, onUnmounted, ref } from 'vue';
+  import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
+  import { useInitDevicesBD } from '../hooks/useInit';
+
+  const props = defineProps<{
+    moduleDataA: ModuleData;
+    moduleNameA: string;
+    deviceTypeA: string;
+    moduleDataB: ModuleData;
+    moduleNameB: string;
+    deviceTypeB: string;
+    showStyle: ShowStyle;
+    visible: boolean;
+    pageType: string;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  const index = ref(0);
+
+  const headerA = props.moduleDataA.header;
+  const headerB = props.moduleDataB.header;
+
+  const {
+    selectedDeviceID: selectedDeviceIDA,
+    selectedDevice: selectedDeviceA,
+    options: optionsA,
+    fetchDevices: fetchDevicesA,
+  } = useInitDevicesBD(props.deviceTypeA, props.pageType, props.moduleDataA);
+  const {
+    selectedDeviceID: selectedDeviceIDB,
+    selectedDevice: selectedDeviceB,
+    options: optionsB,
+    fetchDevices: fetchDevicesB,
+  } = useInitDevicesBD(props.deviceTypeA, props.pageType, props.moduleDataA);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+  let interval: any = null;
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  const daneClass = computed(() => {
+    const position = props.showStyle.position;
+    if (position.includes('left:0')) {
+      return 'dane-m';
+    }
+    if (position.includes('right:0')) {
+      return 'dane-m';
+    }
+    return 'dane-w';
+  });
+
+  //切换时间选项
+  // function onChange(value, dateString) {
+  //   console.log('Selected Time: ', value);
+  //   console.log('Formatted Selected Time: ', dateString);
+  // }
+  // function onOk(val) {
+  //   console.log('onOk: ', val);
+  // }
+
+  //下拉框选项切换
+  function selectHandlerA(id) {
+    selectedDeviceIDA.value = id;
+    emit('select', selectedDeviceA);
+  }
+  function selectHandlerB(id) {
+    selectedDeviceIDB.value = id;
+    emit('select', selectedDeviceB);
+  }
+
+  onMounted(() => {
+    fetchDevicesA({ init: true });
+    fetchDevicesB({ init: true });
+    interval = setInterval(() => {
+      fetchDevicesA();
+      fetchDevicesB();
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+</script>
+
+<style scoped lang="less">
+  .dane-bd {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: url(/home/zekong/mky-vent-base/src/assets/images/home-container/configurable/firehome/module-title.png);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: 100% auto;
+    z-index: 2;
+
+    .dane-title {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 34px;
+      padding: 0 40px 0 50px;
+
+      .common-navL {
+        display: flex;
+        position: relative;
+        align-items: center;
+        color: #fff;
+        font-size: 14px;
+      }
+
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+      // .common-navR-switch {
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: space-around;
+      //   width: 90%;
+
+      //   .status-text {
+      //     color: #1fb3f7;
+      //     font-size: 14px;
+      //   }
+
+      //   .status-text1 {
+      //     color: #a1dff8;
+      //     font-size: 14px;
+      //   }
+      // }
+    }
+
+    .dane-content {
+      height: calc(100% - 34px);
+      // border-image: linear-gradient(#1dabeb, #1dabeb22);
+      border-image: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723) 30;
+      // border-left: 1px;
+      // border-right: 1px;
+      border-width: 2px;
+      border-style: solid;
+      box-sizing: border-box;
+      border-top: none;
+      background-image: linear-gradient(#000723 94%, #1dabeb11);
+    }
+  }
+
+  .dane-l {
+    background: url('@/assets/images/home-container/configurable/firehome/common-border.png') no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-m {
+    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-s {
+    background: url('@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-w {
+    background-image: url(/home/zekong/mky-vent-base/src/assets/images/home-container/configurable/firehome/module-title-long.png);
+    background-size: 100% 37px;
+  }
+
+  .deactived {
+    cursor: pointer;
+    color: #8087a1;
+  }
+
+  :deep(.zxm-select-selector) {
+    height: 22px !important;
+    border: none !important;
+    // background-color: rgb(15 64 88) !important;
+    background-color: transparent !important;
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-arrow) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
+
+  :deep(.zxm-picker-separator) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-active-bar) {
+    display: none !important;
+  }
+
+  :deep(.zxm-picker-suffix) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-switch) {
+    min-width: 48px !important;
+  }
+
+  :deep(.zxm-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
+
+  :deep(.zxm-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+</style>

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

@@ -60,7 +60,7 @@
           <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
         </template>
         <template v-if="config.key === 'blast_delta'">
-          <BlastDelta class="content__module" :pos-monitor="config.config.mock" :canvas-size="{ width: 250, height: 137 }" />
+          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -205,6 +205,62 @@
     }
 
     // 折线图和上面的柱状图类似
+    if (type === 'line_smooth') {
+      return {
+        legend: {
+          top: 10,
+          right: 10,
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        // backgroundColor: '#081f33',
+        textStyle: {
+          color: '#fff',
+        },
+        grid: {
+          left: 50,
+          top: 50,
+          right: 50,
+          bottom: 50,
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            type: 'category',
+            data: sorttedData.map((d) => {
+              return getFormattedText(d, e.label);
+            }),
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            name: e.label,
+            position: e.align,
+            splitLine: {
+              lineStyle: {
+                opacity: 0.3,
+              },
+            },
+          };
+        }),
+        series: series.map((serie) => {
+          const data = sorttedData.map((d) => {
+            return {
+              name: serie.label,
+              value: get(d, serie.prop, 0),
+            };
+          });
+
+          return {
+            type: 'line',
+            data,
+            smooth: true,
+          };
+        }),
+      };
+    }
+
+    // 折线图和上面的柱状图类似
     if (type === 'line_area') {
       return {
         legend: {
@@ -215,9 +271,9 @@
           color: '#fff',
         },
         grid: {
-          left: 60,
+          left: 50,
           top: 50,
-          right: 60,
+          right: 50,
           bottom: 50,
         },
         xAxis: xAxis.map((e) => {

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -190,14 +190,14 @@
     justify-content: space-between;
   }
   .list-item_G {
-    width: 170px;
-    height: 85px;
+    width: 130px;
+    height: 80px;
     align-items: center;
     text-align: center;
     border: 1px solid rgba(25, 237, 255, 0.4);
     box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
     background: rgba(0, 0, 0, 0.1);
-    margin: 5px 15px;
+    margin: 5px 10px;
   }
   .list-item__content_G {
     position: relative;
@@ -205,22 +205,22 @@
     height: 100%;
   }
   .list-item__content_G > .list-item__label {
-    width: 70px;
+    width: 60px;
     height: 100%;
     left: 0;
     position: absolute;
     font-size: 20px;
-    line-height: 85px;
+    line-height: 80px;
   }
   .list-item__content_G > .list-item__info {
-    width: 100px;
+    width: 70px;
     height: 40px;
     line-height: 40px;
     right: 0;
     position: absolute;
   }
   .list-item__content_G > .list-item__value {
-    width: 100px;
+    width: 70px;
     height: 40px;
     line-height: 40px;
     top: 40px;

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -34,7 +34,7 @@
       value?: string;
       // 告示牌布局，类型为：'val-top' | 'label-top'
       layout: string;
-      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D'
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F'
       type?: string;
     }>(),
     {
@@ -95,6 +95,14 @@
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+  .mini-board_F {
+    width: 140px;
+    height: 70px;
+    background-image: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    background-size: 100% 80%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
 
   .mini-board__value_A {
     color: @vent-gas-primary-text;
@@ -138,6 +146,7 @@
     line-height: 17px;
     height: 17px;
   }
+
   .mini-board__value_E {
     font-size: 20px;
     font-weight: bold;
@@ -150,6 +159,16 @@
     background-repeat: no-repeat;
     background-position: center top;
   }
+
+  .mini-board__value_F {
+    font-size: 20px;
+    font-weight: bold;
+    color: @vent-gas-primary-text;
+  }
+  .mini-board__label_F {
+    line-height: 50px;
+  }
+
   .mini-board_E:nth-child(1) {
     .mini-board__label_E {
       background-image: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);

src/views/vent/home/configurable/index.vue

@@ -33,16 +33,16 @@
         </div>
       </div>
     </div>
-    <!-- <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+    <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('/grout-home')">
         <div>智能</div>
-        <div>灌浆系统</div>
+        <div>注浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
         <div>智能</div>
-        <div>注氟系统</div>
+        <div>注氮系统</div>
       </div>
-    </div> -->
+    </div>
     <ModuleBD
       v-for="cfg in configs"
       :key="cfg.deviceType"
@@ -53,6 +53,17 @@
       :visible="true"
       :page-type="pageType"
     />
+    <ModuleBDDual
+      :show-style="configA.showStyle"
+      :module-data-a="configA.moduleData"
+      :module-name-a="configA.moduleName"
+      :device-type-a="configA.deviceType"
+      :module-data-b="configB.moduleData"
+      :module-name-b="configB.moduleName"
+      :device-type-b="configB.deviceType"
+      :visible="true"
+      :page-type="pageType"
+    />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
@@ -64,30 +75,46 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import { testConfigBDDust } from './configurable.data';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
+  import { testConfigBDFire } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDDustData } from './configurable.api';
+  import { getBDFireData } from './configurable.api';
 
-  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
-  const pageType = 'BD_dust';
+  const mainTitle = ref('保德煤矿火灾预警系统');
+  const pageType = 'BD_fire';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(testConfigBDDust);
+  const configs = ref(
+    testConfigBDFire.filter(({ moduleName }) => {
+      return moduleName !== '工作面光纤监测' && moduleName !== '工作面束管监测';
+    })
+  );
+  const configA = ref<any>(
+    testConfigBDFire.find(({ moduleName }) => {
+      return moduleName === '工作面束管监测';
+    })
+  );
+  const configB = ref<any>(
+    testConfigBDFire.find(({ moduleName }) => {
+      return moduleName === '工作面光纤监测';
+    })
+  );
   // const { configs, fetchConfigs } = useInitConfigs();
+
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getBDDustData({}).then((r) => {
+    getBDFireData({}).then((r) => {
       homedata.value = r;
     });
     // fetchConfigs(pageType);
   });
 
-  // function redirectTo(url) {
-  //   window.open(url);
-  // }
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -236,6 +263,7 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
+    z-index: 1;
 
     .tcontent-l {
       flex: 1;
@@ -254,7 +282,6 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
-      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
@@ -273,7 +300,6 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
-      cursor: pointer;
     }
   }