[Wip 0000] 塔山可配置首页修改以及预设模块SelectCS的功能对接

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

@@ -115,7 +115,7 @@
         </template>
         <!-- lxh -->
         <template v-if="config.name === 'select_cs'">
-          <SelectCs :devicedata="config.data" :setLabelData="config.config.setLabelConfig" />
+          <SelectCs :devicedata="config.data" :config="config.config" />
         </template>
         <template v-if="config.name === 'measure_detail'">
           <MeasureDetail

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

@@ -121,7 +121,7 @@
         </template>
         <!-- lxh -->
         <template v-if="config.name === 'select_cs'">
-          <SelectCs :devicedata="config.data" :setLabelData="config.config.setLabelConfig" />
+          <SelectCs :devicedata="config.data" :config="config.config" />
         </template>
         <template v-if="config.name === 'measure_detail'">
           <MeasureDetail

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

@@ -2,136 +2,173 @@
   <div class="select-cs">
     <div class="select-item">
       <div class="select-item-box">
-        <a-select v-model:value="selectVal" :placeholder="setLabelData['selectL']" :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 v-model:value="selectVal" :bordered="false" style="width: 100%">
+          <a-select-option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
         </a-select>
       </div>
       <div class="select-item-box">
-        <span>{{ setLabelData['switchL'][0] }}</span>
-        <a-switch v-model:checked="checkedStatus" />
-        <span>{{ setLabelData['switchL'][1] }}</span>
+        <span>{{ config.switch1.label[0] }}</span>
+        <a-switch
+          :disabled="config.switch1.disabled"
+          :checked="getFormattedText(devicedata, config.switch1.value, config.switch1.trans)"
+          @update:checked="handlUpdate($event, config.switch1)"
+        />
+        <span>{{ config.switch1.label[1] }}</span>
       </div>
-
-
     </div>
     <div class="select-item">
       <div class="select-item-box1">
-        <span>{{ setLabelData['switchL1'] }}</span>
-        <a-switch v-model:checked="checkedJlb" />
+        <span>{{ config.switch2.label[0] }}</span>
+        <a-switch
+          :disabled="config.switch2.disabled"
+          :checked="getFormattedText(devicedata, config.switch2.value, config.switch2.trans)"
+          @update:checked="handlUpdate($event, config.switch2)"
+        />
       </div>
       <div class="select-item-box1">
-        <span>{{ setLabelData['switchL2'] }}</span>
-        <a-switch v-model:checked="checkedZjb" />
+        <span>{{ config.switch3.label[0] }}</span>
+        <a-switch
+          :disabled="config.switch3.disabled"
+          :checked="getFormattedText(devicedata, config.switch3.value, config.switch3.trans)"
+          @update:checked="handlUpdate($event, config.switch3)"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-
-let props = defineProps({
-  devicedata: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  },
-  setLabelData: {
-    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
-})
+  import { computed, ref } from 'vue';
+  import { getData, getFormattedText } from '../../hooks/helper';
+  import { deviceControlApi } from '/@/api/vent';
+  import { message } from 'ant-design-vue';
+
+  interface SwitchConfig {
+    /** 提交控制时 启动 状态对应的key */
+    keyOn: string;
+    /** 提交控制时 关闭 状态对应的key */
+    keyOff: string;
+    /** 提交控制时 启动 状态对应的value */
+    valueOn: string;
+    /** 提交控制时 关闭 状态对应的value */
+    valueOff: string;
+    /** 提示文本，按需从数组中依次读取内容 */
+    label: string[];
+    disabled?: boolean;
+    /** 判断该项的默认状态时用到的value，formatter格式 */
+    value: string;
+    /** 如果value不是boolean类型，需要给出trans转换 */
+    trans: any;
+  }
+  interface CSConfig {
+    selector: {
+      label: string;
+      value: string;
+      readFrom: string;
+    };
+    switch1: SwitchConfig;
+    switch2: SwitchConfig;
+    switch3: SwitchConfig;
+  }
 
+  const props = defineProps<{
+    config: CSConfig;
+    devicedata: Record<string, any>;
+  }>();
+
+  const options = computed(() => {
+    const { readFrom, value, label } = props.config.selector;
+    const res = getData(props.devicedata.value, readFrom);
+    return (Array.isArray(res) ? res : [res]).map((item) => {
+      return {
+        label: getFormattedText(item, label),
+        value: getFormattedText(item, value),
+      };
+    });
+  });
+
+  const selectVal = ref(undefined);
+
+  function handlUpdate(checked: boolean, item: SwitchConfig) {
+    deviceControlApi({
+      deviceid: selectVal,
+      paramcode: checked ? item.keyOn : item.keyOff,
+      value: checked ? item.valueOn : item.valueOff,
+    })
+      .then((r) => {
+        if (!r.success) throw r.message || '操作失败';
+        message.success('指令下发成功');
+      })
+      .catch((e) => {
+        message.error(typeof e === 'string' ? e : '指令下发失败');
+      });
+  }
 </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;
+  .select-cs {
+    height: 100%;
+    padding: 5px 15px;
+    box-sizing: border-box;
     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%;
-    }
+    overflow-y: auto;
 
-    &:nth-child(2) {
-      margin-top: 2px;
-    }
-
-    .select-item-box {
+    .select-item {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50%;
-      height: 34px;
-      padding-top: 6px;
-      box-sizing: border-box;
+      width: 100%;
+      height: calc(50% - 2px);
 
       &:nth-child(1) {
-        background: url('@/assets/images/vent/homeNew/databg/bg-line.png') no-repeat right;
+        margin-bottom: 2px;
+        padding: 0px 10px;
+        background: url('@/assets/images/vent/homeNew/databg/11.png') no-repeat;
+        background-size: 100% 100%;
       }
 
-      span {
-        margin: 0px 10px;
+      &:nth-child(2) {
+        margin-top: 2px;
       }
-    }
 
-    .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%;
-    }
-  }
+      .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;
+        }
+      }
 
-  ::v-deep .zxm-select-selector {
-    background-color: transparent;
-    height: 28px;
-    padding: 0 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-switch {
+    ::v-deep .zxm-select-selector {
+      background-color: transparent;
+      height: 28px;
+      padding: 0 10px;
+    }
 
-    border-top: 1px solid rgba(45, 187, 255);
-    border-bottom: 1px solid rgba(45, 187, 255);
-    border-right: 1px solid rgba(45, 187, 255);
+    ::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>
+</style>

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

@@ -135,12 +135,49 @@ export const testConfigTSFire: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'select_cs',
-          setLabelConfig: {
-            selectL: '请选择...',
-            switchL: ['开启', '关闭'],
-            switchL1: '进料泵',
-            switchL2: '注浆泵',
+          readFrom: 'spray.datalist',
+          config: {
+            selector: {
+              label: '',
+              value: '',
+            },
+            switch1: {
+              keyOn: 'run_auto_sign',
+              keyOff: 'run_auto_sign',
+              valueOn: '1',
+              valueOff: '0',
+              label: ['开启', '关闭'],
+              value: '${readData.isOnline}',
+              trans: {
+                '1': true,
+                '0': false,
+              },
+            },
+            switch2: {
+              keyOn: '',
+              keyOff: '',
+              valueOn: '1',
+              valueOff: '0',
+              disabled: true,
+              label: ['注浆电机'],
+              value: '${readData.ZjDjStatus}',
+              trans: {
+                '1': true,
+                '0': false,
+              },
+            },
+            switch3: {
+              keyOn: '',
+              keyOff: '',
+              valueOn: '1',
+              valueOff: '0',
+              label: ['送料电机'],
+              value: '${readData.SlDjStatus}',
+              trans: {
+                '1': true,
+                '0': false,
+              },
+            },
           },
         },
       ],