三道沟均压首页样式调整

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

@@ -90,6 +90,7 @@ export interface ModuleData {
         | 'tabs'
         | 'blast_delta'
         | 'measure_detail'
+          | 'select_cs'
         | 'qh_curve'
         | 'ai_chat'
         | 'device_alarm';

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" />
@@ -113,14 +89,13 @@
         <template v-if="config.name === 'device_alarm'">
           <DeviceAlarm class="content__module" :devicedata="config.data" />
         </template>
+        <!-- lxh -->
+        <template v-if="config.name === 'select_cs'">
+          <SelectCs></SelectCs>
+        </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.key === 'fire_control'">
         <FIreControl class="content__module" />
@@ -160,6 +135,7 @@ import MeasureDetail from './preset/MeasureDetail.vue';
 import CustomTabs from './preset/CustomTabs.vue';
 import AIChat from '/@/components/AIChat/MiniChat.vue';
 import DeviceAlarm from './preset/DeviceAlarm.vue';
+import SelectCs from './preset/SelectCs.vue';
 import MiniBoardNew from './detail/MiniBoard-New.vue';
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
@@ -407,6 +383,7 @@ const layoutConfig = computed(() => {
   display: flex;
   flex-direction: column;
 }
+
 .content__background {
   width: 100%;
   height: 100%;
@@ -416,17 +393,20 @@ const layoutConfig = computed(() => {
   z-index: 0;
   object-fit: fill;
 }
+
 .image__background {
   width: 35%;
   height: 61%;
   left: 30%;
 }
+
 .content__module {
   // margin-top: 5px;
   // margin-bottom: 5px;
   width: 100%;
   height: 100%;
 }
+
 .content__module1 {
   background: url('@/assets/images/vent/homeNew/databg/4.png');
   background-repeat: no-repeat;
@@ -434,11 +414,13 @@ const layoutConfig = computed(() => {
   height: 129px;
   margin-top: 20%;
 }
+
 .content__moduleFire {
   width: 100%;
   height: 100%;
   margin-left: -24% !important;
 }
+
 .content__module_dust {
   background: url('@/assets/images/vent/homeNew/bottomBg.png');
   background-repeat: no-repeat;
@@ -446,6 +428,7 @@ const layoutConfig = computed(() => {
   width: 100%;
   height: 100%;
 }
+
 // .content__module:first-of-type {
 //   margin-top: 0;
 // }
@@ -455,6 +438,7 @@ const layoutConfig = computed(() => {
 ::-webkit-scrollbar {
   width: 5px !important;
 }
+
 ::-webkit-scrollbar-thumb {
   width: 5px !important;
 }
@@ -463,15 +447,19 @@ const layoutConfig = computed(() => {
   /* background-color: transparent; */
   color: #fff;
 }
+
 :deep(.zxm-select-arrow) {
   color: #fff;
 }
+
 :deep(.zxm-select-selection-item) {
   color: #fff !important;
 }
+
 :deep(.zxm-select-selection-placeholder) {
   color: #fff !important;
 }
+
 :deep(.dialog-overlay) {
   width: 100%;
   height: 100%;
@@ -482,6 +470,7 @@ const layoutConfig = computed(() => {
 ::-webkit-scrollbar {
   width: 5px !important;
 }
+
 ::-webkit-scrollbar-thumb {
   width: 5px !important;
 }

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

@@ -53,10 +53,12 @@ withDefaults(
     --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
     --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
     --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+      --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
     --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
     --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
     --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
     --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
+     --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
   }
 }
 
@@ -68,9 +70,11 @@ withDefaults(
   --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
   --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
   --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
+    --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
   --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
   --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
   --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
+    --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
   --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
   --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
   --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
@@ -170,13 +174,23 @@ withDefaults(
   text-align: center;
   margin-bottom: 10px;
 }
+
 .list-item__content_D {
   line-height: 30px;
 }
 .list-item__value_D {
   font-weight: bold;
 }
-
+.list-item_S {
+  flex-basis: 25%;
+  height: 60px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_s);
+  text-align: center;
+  margin-bottom: 10px;
+}
 .list_E {
   background-image: var(--image-list_bg_defflip);
 }
@@ -294,6 +308,22 @@ withDefaults(
 .list-item__content_H > div {
   flex-basis: 33.3%;
 }
+
+.list-item__content_R {
+  height: 50px;
+  background-repeat: no-repeat;
+  padding: 20px 50px 0 50px;
+  display: flex;
+  background-position: bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_r);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_R > div {
+  flex-basis: 33.3%;
+}
+
 .list_fireList {
   background: none;
 }

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

@@ -114,7 +114,10 @@ defineEmits(['click']);
     --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
     --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
     --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+        --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
     --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
     --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
     --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
     --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
@@ -134,7 +137,10 @@ defineEmits(['click']);
   --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
   --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
   --image-area3: url('/@/assets/images/company/area3.png');
+   --image-areaT: url('/@/assets/images/company/areaT.png');
+    --image-areaR: url('/@/assets/images/company/areaR.png');
   --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-value-S: url('/@/assets/images/vent/value-S.png');
   --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
   --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
   --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
@@ -215,6 +221,7 @@ defineEmits(['click']);
   justify-content: center;
   align-items: center;
 }
+
 .mini-board_A {
   width: 120px;
   height: 60px;
@@ -229,6 +236,27 @@ defineEmits(['click']);
   background-position: center bottom;
   background-repeat: no-repeat;
 }
+.mini-board_R{
+  width: 120px;
+  height: 90px;
+  background-image: var(--image-areaR);
+  background-size: 100% 100%;
+}
+.mini-board_S {
+  width: 131px;
+  height: 64px;
+  background-image: var(--image-value-S);
+  background-size: auto 40px;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board_T {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-areaT);
+  background-size: 100% 100%;
+}
+
 .mini-board_C {
   width: 121px;
   height: 69px;

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

@@ -0,0 +1,130 @@
+<template>
+  <div class="select-cs">
+    <div class="select-item">
+      <div class="select-item-box">
+        <a-select v-model:value="selectVal" placeholder="选择球阀" :bordered="false" style="width: 100%">
+          <a-select-option v-for="item in optionList" :key="item.value" :value="item.value">{{ item.label
+            }}</a-select-option>
+        </a-select>
+      </div>
+      <div class="select-item-box">
+        <span>开启</span>
+        <a-switch v-model:checked="checkedStatus" />
+        <span>关闭</span>
+      </div>
+
+
+    </div>
+    <div class="select-item">
+      <div class="select-item-box1">
+        <span>进料泵</span>
+        <a-switch v-model:checked="checkedJlb" />
+      </div>
+      <div class="select-item-box1">
+        <span>注浆泵</span>
+        <a-switch v-model:checked="checkedZjb" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+let props = defineProps({
+  devicedata: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+
+let selectVal = ref(undefined)
+let optionList = ref<any[]>([
+  { label: '测试', value: 1 },
+  { label: '测试1', value: 2 },
+  { label: '测试2', value: 3 },
+])
+let checkedStatus = ref(false)
+let checkedJlb=ref(false)
+let checkedZjb=ref(false)
+
+watch(() => props.devicedata, (newV, oldV) => {
+  console.log(newV, '测试---')
+}, {
+  deep: true,
+  immediate: true
+})
+
+</script>
+
+<style lang="less" scoped>
+.select-cs {
+  height: 100%;
+  padding: 5px 15px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-y: auto;
+
+  .select-item {
+    display: flex;
+    width: 100%;
+    height: calc(50% - 2px);
+
+    &:nth-child(1) {
+      margin-bottom: 2px;
+      padding: 0px 10px;
+      background: url('@/assets/images/vent/homeNew/databg/11.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(2) {
+      margin-top: 2px;
+    }
+
+    .select-item-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50%;
+      height: 34px;
+      padding-top: 6px;
+      box-sizing: border-box;
+
+      &:nth-child(1) {
+        background: url('@/assets/images/vent/homeNew/databg/bg-line.png') no-repeat right;
+      }
+
+      span {
+        margin: 0px 10px;
+      }
+    }
+
+    .select-item-box1 {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: 10px 20px 0px 20px;
+      box-sizing: border-box;
+      background: url('@/assets/images/vent/homeNew/databg/13.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  ::v-deep .zxm-select-selector {
+    background-color: transparent;
+    height: 28px;
+    padding: 0 10px;
+  }
+
+  ::v-deep .zxm-switch {
+
+    border-top: 1px solid rgba(45, 187, 255);
+    border-bottom: 1px solid rgba(45, 187, 255);
+    border-right: 1px solid rgba(45, 187, 255);
+  }
+
+}
+</style>

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

@@ -94,7 +94,7 @@ export const testConfigTSFire: Config[] = [
         direction: 'column',
         items: [
           {
-             name: 'device_alarm',
+             name: 'select_cs',
              basis: '40%',
            },
           { 
@@ -135,7 +135,7 @@ export const testConfigTSFire: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'device',
+          readFrom: 'select_cs',
         },
       ],
       mock: {},
@@ -512,158 +512,5 @@ export const testConfigTSFire: Config[] = [
       position: 'bottom:8px;right:10px;',
     },
   },
-  // 7. 工作面束管监测（中下1）
-  {
-    deviceType: 'RealtimeMonitor',
-    moduleName: '实时监视',
-    pageType: 'ts_fire',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'table',
-            basis: '100%',
-          },
-
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
-        {
-          type: 'A',
-          readFrom: 'mockTable',
-          columns: [
-            { name: '序号', prop: 'serialVal' },
-            { name: '监测点', prop: 'MonitorPoint' },
-            { name: '报警等级', prop: 'warnLevel' },
-            { name: '类型', prop: 'warnType' },
-            { name: '值', prop: 'nowVal' },
-          ],
-        },],
-      list: [],
-      complex_list: [],
-      preset: [],
-      mock: {
-        mockTable: [
-          {
-            serialVal: '1',
-            MonitorPoint: '130608工作面采空区30mC2H6',
-            warnLevel: '低风险',
-            warnType: '乙烷',
-            nowVal: '0ppm',
-          },
-          {
-            serialVal: '2',
-            MonitorPoint: '130608工作面采空区30mC2H6',
-            warnLevel: '低风险',
-            warnType: '乙烷',
-            nowVal: '0ppm',
-          },
-          {
-            serialVal: '3',
-            MonitorPoint: '130608工作面采空区30mC2H6',
-            warnLevel: '低风险',
-            warnType: '乙烷',
-            nowVal: '0ppm',
-          },
-          {
-            serialVal: '4',
-            MonitorPoint: '130608工作面采空区30mC2H6',
-            warnLevel: '低风险',
-            warnType: '乙烷',
-            nowVal: '0ppm',
-          }
-        ],
-      },
-    },
-    showStyle: {
-      size: 'width:980px;height:270px;',
-      version: '原版',
-      position: 'bottom:8px;left:470px',
-    },
-  },
-  // 8. 异常待处理（中下2）
-  {
-    deviceType: 'sgGxObj',
-    moduleName: '异常待处理',
-    pageType: 'ts_fire',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: 'devGxcw',
-        selector: {
-          show: true,
-          value: '${strinstallpos}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'chart',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [
-        {
-          type: 'line_smooth',
-          readFrom: '',
-          legend: { show: true },
-          xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
-          series: [
-            {
-              label: '${strinstallpos}',
-              readFrom: 'fibreTemperatureArr',
-              xprop: 'pos',
-              yprop: 'value',
-            },
-          ],
-        },
-      ],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [],
-    },
-    showStyle: {
-      size: 'width:980px;height:315px;',
-      version: '原版',
-      position: 'bottom:8px;left:470px',
-    },
-  }
+  
 ];

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

@@ -42,7 +42,7 @@
     </div>
     <!-- 渲染所有模块 -->
     <ModuleCommon 
-      v-for="cfg in cfgs" 
+      v-for="cfg in configs" 
       :key="cfg.deviceType + cfg.moduleName"
       :show-style="cfg.showStyle" 
       :module-data="cfg.moduleData"