feat: 第三方设备

src/components/MicroComponents/index.tsx

@@ -207,6 +207,44 @@ export const InputTsx = defineComponent({
   }
 })
 
+export const EditInputTsx = defineComponent({
+  name: 'edit-input-tsx',
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '输入点什么...'
+    },
+    styles: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: ['update:value', 'submit'],
+  setup (props, ctx) {
+    const onInput = (value: string) => ctx.emit('update:value', value)
+
+    const editing = ref<boolean>(false)
+
+    const submitUpdate = () => {
+      ctx.emit('submit')
+    }
+    return () => {
+      <Space>
+        {
+          editing.value
+            ? <Input style={{ minWidth: '170px' }} placeholder={props.placeholder} value={props.modelValue} onChange={(e) => onInput(e.target.value!)} />
+            : <div style={{ minWidth: '170px' }} >{props.modelValue}</div>
+        }
+      </Space>
+    }
+  }
+})
+
 /**
  * @description 文字copy按钮
  */

src/pages/Iot/thirdDevice/index.vue

@@ -13,7 +13,7 @@
         <a-input style="width: 170px;" placeholder="请输入设备编码" v-model:value="queryParams.deviceCode" >  </a-input>
         <a-cascader
           style="width: 170px;"
-          v-model:value="queryParams.deviceType"
+          @change="changeDeviceType"
           :options="options"
           placeholder="请选择设备类型"
           change-on-select
@@ -27,8 +27,6 @@
       </template>
       <template v-if="column.key === 'action'" >
         <a-space>
-          <a @click="openDataView(record)" v-if="record.deviceType != 3" >查看</a>
-          <a @click="openDataView(record)" v-if="record.deviceType = 3" >阀⻔数据</a>
           <a @click="openModal('update', record)" >编辑</a>
           <a-popconfirm
             title="确定要删除这个设备吗？"
@@ -38,6 +36,9 @@
           >
             <a>删除</a>
           </a-popconfirm>
+          <a @click="openDataView(record)" v-if="record.deviceType != '3' && record.deviceType != '1' " >查看</a>
+          <a @click="openDataView(record)" v-if="record.deviceType === '1'" >阀⻔数据</a>
+          <a @click="openDataView(record)" v-if="record.deviceType === '3'" >传感器数据</a>
         </a-space>
       </template>
     </template>
@@ -92,6 +93,31 @@
       :pagination="false"
       :scroll="{y: '100%'}"
     >
+    <template #bodyCell="{column, record}">
+      <template v-if="deviceType === '1'  && column.key === 'devicePropVal'" >
+        <a-switch checkedValue="1" unCheckedValue="0" v-model:checked="record.devicePropVal" @change="changeDevicePropVal(record)" checked-children="开" un-checked-children="关" />
+      </template>
+      <template v-if="deviceType === '3'  && column.key === 'devicePropVal'" >
+        <a-switch v-if="record.devicePropCode == 30005" checkedValue="1" unCheckedValue="0" v-model:checked="record.devicePropVal" @change="changeDevicePropVal(record)" checked-children="开" un-checked-children="关" />
+        <div v-else @dblclick="record.ed = true">
+          <!-- <EditInputTsx :modelValue="record.devicePropVal" /> -->
+          <div v-if="!record.ed" ><a>{{record.devicePropVal}}</a></div>
+          <a-space  v-else>
+            <a-input v-model:value='record.devicePropVal' ></a-input>
+            <a-button type="primary" size="samll" @click="changeDevicePropVal" >
+              <template #icon>
+                <CheckOutlined />
+              </template>
+            </a-button>
+            <a-button type="primary" size="samll" @click="record.ed = false" >
+              <template #icon>
+                <CloseOutlined />
+              </template>
+            </a-button>
+          </a-space>
+        </div>
+      </template>
+    </template>
     </a-table>
   </a-card>
 </RealView>
@@ -101,6 +127,8 @@ import { ThirdDeviceController } from '@/controller'
 import { reactive, ref } from 'vue'
 import { Form, message, CascaderProps } from 'ant-design-vue'
 import { RealView } from '@/components/RealView/index'
+import { EditInputTsx } from '@/components/MicroComponents'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
 
 const columns = [
   {
@@ -190,12 +218,48 @@ const dataColumns = [
 
 const options: CascaderProps['options'] = [
   {
-    value: 'zhejiang',
-    label: 'Zhejiang',
+    value: '131,333',
+    label: '消防⽔压⽆线采集终端',
+    children: [
+      {
+        value: '131,333',
+        label: '消防⽔压⽆线采集终端'
+      }
+    ]
+  },
+  {
+    value: '13',
+    label: '灌溉系统',
+    children: [
+      {
+        value: '1',
+        label: '阀⻔'
+      },
+      {
+        value: '3',
+        label: '采集箱'
+      }
+    ]
+  },
+  {
+    value: '001,129',
+    label: '⽤户传输装置',
     children: [
       {
-        value: 'hangzhou',
-        label: 'Hangzhou'
+        value: '001,129',
+        label: '⽤户传输装置'
+      },
+      {
+        value: '053,521',
+        label: '消防电源电压/电流信号传感器'
+      },
+      {
+        value: '019,102',
+        label: '防⽕⻔部件'
+      },
+      {
+        value: '001,025',
+        label: '部件'
       }
     ]
   }
@@ -234,6 +298,18 @@ const { resetFields, validate, validateInfos } = useForm(state, reactive({
   deviceLabel: [{ required: true, message: '请填写设备名称' }]
 }))
 
+const changeDeviceType = (record) => {
+  console.log()
+  record ? queryParams.deviceType = record[1] : queryParams.deviceType = null
+}
+
+const changeDevicePropVal = async (record) => {
+  ThirdDeviceController.updateDeviceAttr(record.deviceCode, {
+    devicePropCode: record.devicePropCode,
+    devicePropVal: record.devicePropVal
+  })
+}
+
 const ok = () => {
   validate().then(async () => {
     opraState.value === 'add' ? await ThirdDeviceController.add(state) : await ThirdDeviceController.update(state)
@@ -262,8 +338,13 @@ const deviceData = ref()
 
 const realViewVisible = ref(false)
 
+const deviceType = ref()
+
 const openDataView = (record) => {
   realViewVisible.value = true
+  deviceType.value = record.deviceType
+  console.log('deviceType.value :', deviceType.value)
+
   getDataByCode(record.deviceCode)
 }