feat: 标签增删改茶

src/api/iot/device.ts

@@ -69,9 +69,9 @@ export const addSubDevice = (data: IOT.API.DEVICE.SubBodyParams) => {
   })
 }
 
-export const addDeviceTag = (data: IOT.API.DEVICE.DeviceTag) => {
+export const addDeviceTag = (data: IOT.API.DEVICE.DeviceTag[]) => {
   return request<string>({
-    url: '/deviceTage',
+    url: '/deviceTag',
     method: 'POST',
     data
   })
@@ -79,7 +79,7 @@ export const addDeviceTag = (data: IOT.API.DEVICE.DeviceTag) => {
 
 export const getDeviceTag = (params: {deviceId: number | string}) => {
   return request<string>({
-    url: '/deviceTage',
+    url: '/deviceTag',
     method: 'GET',
     params
   })
@@ -87,7 +87,7 @@ export const getDeviceTag = (params: {deviceId: number | string}) => {
 
 export const delDeviceTag = (id: string) => {
   return request<string>({
-    url: `/deviceTage/${id}`,
+    url: `/deviceTag/${id}`,
     method: 'DELETE'
   })
 }

src/components/TablePro/index.vue

@@ -45,7 +45,7 @@
                   @confirm="confirmDel(item, record)"
                   v-if="item.use == 'del'"
                 >
-                  <a href="#">删除</a>
+                  <a>删除</a>
                 </a-popconfirm>
                 <a v-else @click="handleAction(item, record)" >{{item.name}}</a>
               </span>

src/controller/iot/device.ts

@@ -1,6 +1,6 @@
 import {
   addDevice, addSubDevice, delDevice, delDeviceMul, delDeviceTag,
-  getDeviceById, getDeviceCount, getDeviceList, getDeviceMsgList, addDeviceMsg, getDeviceTag, getSubDeviceList, updateDeviceLabel, addDeviceCmd, getDeviceCmdList
+  getDeviceById, getDeviceCount, getDeviceList, getDeviceMsgList, addDeviceMsg, getDeviceTag, getSubDeviceList, updateDeviceLabel, addDeviceCmd, getDeviceCmdList, addDeviceTag
 } from '@/api/iot/device'
 import { DeviceMsgEnum } from '@/enum/common'
 import { message } from 'ant-design-vue'
@@ -86,7 +86,7 @@ export class DeviceContriller {
     message.success('新增成功')
   }
 
-  static async pageTag (params: {deviceId: number | string}) {
+  static async ListTag (params: {deviceId: number | string}) {
     return await getDeviceTag(params)
   }
 
@@ -95,6 +95,11 @@ export class DeviceContriller {
     message.success('删除标签成功')
   }
 
+  static async postTag (data: IOT.API.DEVICE.DeviceTag[]) {
+    await addDeviceTag(data)
+    message.success('新增标签成功')
+  }
+
   static async updateLabel (data: {id: string, deviceLabel: string}) {
     await updateDeviceLabel(data)
   }

src/pages/Iot/device/components/deviceTag.vue

@@ -0,0 +1,133 @@
+<template>
+  <a-card>
+      <a-row justify="end" >
+        <a-col><a-button @click="state.visible = true" >绑定标签</a-button></a-col>
+      </a-row>
+      <a-table
+        :columns="columns"
+        :data-source="state.dataSource"
+        :loading="state.loading"
+      >
+      <template #bodyCell="{column, record}">
+        <template v-if="column.key === 'action'" >
+                <a-popconfirm
+                  title="确实要解绑吗？"
+                  ok-text="确定"
+                  cancel-text="取消"
+                  @confirm="confirmDel(record.id)"
+                >
+                  <a >解绑</a>
+                </a-popconfirm>
+        </template>
+      </template>
+      </a-table>
+  </a-card>
+
+  <modal-pro
+    style="width: 700px;"
+    title="绑定标签"
+    :visible="state.visible"
+    @cancel="state.visible = false"
+    @ok="ok"
+  >
+    <div class="subtitle">可根据需要定义设备标签，用于检索设备</div>
+    <div  >
+      <a-space style="margin: 10px 0px;" v-for="(item, index) in state.tags" :key="index" >
+        <a-input style="width: 250px;" placeholder="请输入标签名" v-model:value="item.tagLabel" ></a-input>
+        <a-input style="width: 250px;" placeholder="请输入标签值" v-model:value="item.tagValue"></a-input>
+        <a-button type="text" danger @click="deltag(index)" >删除</a-button>
+      </a-space>
+    </div>
+    <a @click="addTag" >添加标签</a>
+  </modal-pro>
+</template>
+<script lang='ts' setup >
+import { DeviceContriller } from '@/controller'
+import { message } from 'ant-design-vue'
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const deviceId = route.query.id as string
+
+const columns = [
+  {
+    title: '标签名',
+    dataIndex: 'tagLabel'
+  },
+  {
+    title: '标签值',
+    dataIndex: 'tagValue'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action'
+  }
+]
+
+const tag = {
+  deviceId,
+  tagLabel: '',
+  tagValue: ''
+}
+
+const state = reactive({
+  visible: false,
+  loading: false,
+  tags: [{ ...tag }],
+  dataSource: []
+})
+
+const deltag = (index: number) => {
+  state.tags.splice(index, 1)
+}
+
+const addTag = () => {
+  state.tags.push({ ...tag })
+}
+
+const confirmDel = async (id: string) => {
+  await DeviceContriller.delTag(id)
+  getDeviceTagPage()
+}
+
+const getDeviceTagPage = async () => {
+  state.loading = true
+  const { data } = await DeviceContriller.ListTag({ deviceId })
+  state.dataSource = data
+  state.loading = false
+}
+
+const validate = () => {
+  state.tags.forEach(item => {
+    if (!item.tagLabel || !item.tagValue) {
+      message.warn('存在未填写的标签名或者标签值')
+      return false
+    }
+  })
+
+  return true
+}
+
+const ok = async () => {
+  if (validate()) {
+    await DeviceContriller.postTag(state.tags)
+    state.visible = false
+    getDeviceTagPage()
+  }
+}
+
+onMounted(() => {
+  getDeviceTagPage()
+})
+
+</script>
+<style lang='less' scoped >
+
+@import '~@/styles/theme.less';
+.subtitle {
+  color: @sublabel-color;
+}
+</style>

src/pages/Iot/device/components/overview.vue

@@ -55,9 +55,14 @@ import { onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-
 const deviceId = route.query.id as string
 
+interface IProps {
+  deviceId: string
+}
+
+const props = defineProps<IProps>()
+
 const state = reactive<{
   deviceDetail: IOT.API.DEVICE.Device | null,
   visible: boolean
@@ -67,7 +72,7 @@ const state = reactive<{
 })
 
 onMounted(async () => {
-  state.deviceDetail = await DeviceContriller.byId(deviceId)
+  state.deviceDetail = await DeviceContriller.byId(props.deviceId)
 })
 
 </script>

src/pages/Iot/device/components/subDevice.vue

@@ -45,7 +45,7 @@
         </template>
           <template v-if="column.key === 'action'">
             <a-space>
-                <a>详情</a>
+                <a @click="goDeviceDetailPage(record.id)" >详情</a>
                 <a-popconfirm
                   title="确实要删除吗？"
                   ok-text="确定"
@@ -77,13 +77,15 @@
 <script lang='ts' setup >
 import { DeviceContriller, ModelCmdController, ModelController } from '@/controller'
 import { onMounted, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { Form } from 'ant-design-vue'
 import type { ColumnsProps } from '@/components/FormPro/index.vue'
 
 const useForm = Form.useForm
 
 const route = useRoute()
+const router = useRouter()
+const emit = defineEmits(['goDetail'])
 
 const formPro = ref('')
 
@@ -156,7 +158,7 @@ const state = reactive({
   visible: false,
   dataSource: [],
   queryParams: {
-    // id: deviceId,
+    id: deviceId,
     page: 1,
     pageSize: 10,
     total: 0,
@@ -180,6 +182,11 @@ const ok = async () => {
   state.visible = false
 }
 
+const goDeviceDetailPage = (id: string) => {
+  emit('goDetail', { id })
+  router.replace({ path: '/device/detail', query: { id } })
+}
+
 const delSubDevice = async (id: string) => {
   // const {} = await DeviceContriller
 }

src/pages/Iot/device/detail.vue

@@ -7,11 +7,12 @@
         :tab="item.name"
       />
     </a-tabs>
-    <OverView  v-if="state.tabsActive === '1'"/>
+    <OverView  :deviceId="state.deviceId" :key="state.deviceId" v-if="state.tabsActive === '1'"/>
     <CloudView   v-else-if="state.tabsActive === '2'"/>
     <DeviceShadow v-else-if="state.tabsActive === '3'" />
     <MsgTrack v-else-if="state.tabsActive === '4'" />
-    <SubDevice v-else-if="state.tabsActive === '5'" />
+    <SubDevice @goDetail="goDetail" v-else-if="state.tabsActive === '5'" />
+    <DeviceTag @goDetail="goDetail" v-else-if="state.tabsActive === '6'" />
   </a-card>
 </template>
 
@@ -22,6 +23,8 @@ import CloudView from './components/cloudview.vue'
 import DeviceShadow from './components/deviceShadow.vue'
 import MsgTrack from './components/msgTrack.vue'
 import SubDevice from './components/subDevice.vue'
+import DeviceTag from './components/deviceTag.vue'
+import { useRoute } from 'vue-router'
 
 const tabs = [
   {
@@ -50,10 +53,19 @@ const tabs = [
   }
 ]
 
+const route = useRoute()
+const deviceId = route.query.id as string
+
 const state = reactive({
-  tabsActive: '5'
+  tabsActive: '6',
+  deviceId: deviceId
 })
 
+const goDetail = ({ id }) => {
+  state.tabsActive = '1'
+  state.deviceId = id
+}
+
 const domainCom = () => {
   switch (state.tabsActive) {
     case '1':
@@ -67,8 +79,6 @@ const domainCom = () => {
   }
 }
 
-console.log('domainCom:', domainCom())
-
 </script>
 
 <style lang="less" scoped >