控制页面：修改为弹窗

ui/dasadmin/src/views/backend/equipment/equipmentManagement/control.vue

@@ -1,34 +1,7 @@
 <template>
     <div class="controlPage" v-loading="loading" element-loading-text="提交中...">
-        <el-button type="primary" size="large" @click="backEquipment" class="backBtn">返回</el-button>
         <h1 class="pageName">设备服务调试</h1>
         <div class="control">
-            <el-form :model="serviceType146Form" :rules="validData(146)" ref="serviceType146Ref">
-                <el-row>
-                    <el-col :span="1" :offset="2">
-                        <div class="title">遥调</div>
-                    </el-col>
-                    <el-col :span="8" :offset="1">
-                        <div class="center">
-                            <el-form-item label="服务名" prop="serviceName">
-                                <el-input v-model="serviceType146Form.serviceName" placehoder="请输入服务名"></el-input>
-                            </el-form-item>
-                        </div>
-                    </el-col>
-                    <el-col :span="6" :offset="1">
-                        <el-form-item label="设定值" prop="opValue">
-                            <el-select v-model="serviceType146Form.opValue" placeholder="请选择设定值">
-                                <el-option :value="0"></el-option>
-                                <el-option :value="1"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="4" :offset="1">
-                        <el-button type="primary" @click="submit(146)">提交</el-button>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <br />
             <el-form :model="serviceType147Form" :rules="validData(147)" ref="serviceType147Ref">
                 <el-row>
                     <el-col :span="1" :offset="2">
@@ -37,13 +10,23 @@
                     <el-col :span="8" :offset="1">
                         <div class="center">
                             <el-form-item label="服务名" prop="serviceName">
-                                <el-input v-model="serviceType147Form.serviceName" placehoder="请输入服务名"></el-input>
+                                <el-select v-model="serviceType147Form.serviceName" placeholder="请选择服务名">
+                                    <el-option
+                                        v-for="item in deviceServiceType147List"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    ></el-option>
+                                </el-select>
                             </el-form-item>
                         </div>
                     </el-col>
                     <el-col :span="6" :offset="1">
                         <el-form-item label="设定值" prop="opValue">
-                            <el-input v-model="serviceType147Form.opValue" placeholder="请输入设定值"> </el-input>
+                            <el-select v-model="serviceType147Form.opValue" placeholder="请选择设定值">
+                                <el-option :value="0"></el-option>
+                                <el-option :value="1"></el-option>
+                            </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :span="4" :offset="1">
@@ -51,31 +34,66 @@
                     </el-col>
                 </el-row>
             </el-form>
+            <br />
+            <el-form :model="serviceType146Form" :rules="validData(146)" ref="serviceType146Ref">
+                <el-row>
+                    <el-col :span="1" :offset="2">
+                        <div class="title">遥调</div>
+                    </el-col>
+                    <el-col :span="8" :offset="1">
+                        <div class="center">
+                            <el-form-item label="服务名" prop="serviceName">
+                                <el-select v-model="serviceType146Form.serviceName" placeholder="请选择服务名">
+                                    <el-option
+                                        v-for="item in deviceServiceType146List"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    ></el-option>
+                                </el-select>
+                            </el-form-item>
                         </div>
+                    </el-col>
+                    <el-col :span="6" :offset="1">
+                        <el-form-item label="设定值" prop="opValue">
+                            <el-input v-model="serviceType146Form.opValue" placeholder="请输入设定值"> </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="4" :offset="1">
+                        <el-button type="primary" @click="submit(146)">提交</el-button>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+        <div style="height: 20px"></div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { sendValueReq } from '/@/api/backend/control/request'
-import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, FormInstance } from 'element-plus'
+import { getModelServiceListReq } from '/@/api/backend/deviceModel/request'
 
-const router = useRouter()
-const route = useRoute()
-const loading = ref(false)
-
-const serviceType146Ref = ref<FormInstance>()
-const serviceType147Ref = ref<FormInstance>()
-const serviceType146Form = ref({
-    //节点ID
-    nodeId: '1',
-    //服务名
-    serviceName: '',
-    //操作值
-    opValue: null,
+const props = defineProps({
+    iotModelId: {
+        type: String,
+        default: '',
+    },
+    deviceId: {
+        type: String,
+        default: '',
+    },
+    show: {
+        type: Boolean,
+        default: false,
+    },
 })
 
+const loading = ref(false)
+
+const serviceType147Ref = ref<FormInstance>()
+const serviceType146Ref = ref<FormInstance>()
 const serviceType147Form = ref({
     //节点ID
     nodeId: '1',
@@ -85,14 +103,42 @@ const serviceType147Form = ref({
     opValue: null,
 })
 
+const serviceType146Form = ref({
+    //节点ID
+    nodeId: '1',
+    //服务名
+    serviceName: '',
+    //操作值
+    opValue: null,
+})
+
+const deviceServiceType147List = ref<any[]>([])
+const deviceServiceType146List = ref<any[]>([])
+
+const init = () => {
+    getModelServiceListReq({ iotModelId: props.iotModelId, pageNum: 1, pageSize: 100000 }).then((res) => {
+        const type147: { label: string; value: string }[] = []
+        const type146: { label: string; value: string }[] = []
+        res.rows.forEach((item) => {
+            if (item.serviceType === 147) {
+                type147.push({ label: item.serviceName, value: item.serviceCode })
+            } else if (item.serviceType === 146) {
+                type146.push({ label: item.serviceName, value: item.serviceCode })
+            }
+        })
+        deviceServiceType147List.value = type147
+        deviceServiceType146List.value = type146
+    })
+}
+
 const validData = (type: number) => {
-    if (type === 146) {
+    if (type === 147) {
         return {
             serviceName: [
                 {
                     required: true,
                     message: '请输入服务名',
-                    trigger: 'blur',
+                    trigger: 'change',
                 },
             ],
             opValue: [
@@ -103,13 +149,13 @@ const validData = (type: number) => {
                 },
             ],
         }
-    } else if (type === 147) {
+    } else if (type === 146) {
         return {
             serviceName: [
                 {
                     required: true,
                     message: '请输入服务名',
-                    trigger: 'blur',
+                    trigger: 'change',
                 },
             ],
             opValue: [
@@ -128,26 +174,26 @@ const validData = (type: number) => {
     }
 }
 const submit = (type: number) => {
-    if (type === 146) {
-        serviceType146Ref.value?.validate((valid) => {
-            if (valid) {
-                loading.value = true
-                sendValue(serviceType146Form.value)
-            }
-        })
-    } else if (type === 147) {
+    if (type === 147) {
         serviceType147Ref.value?.validate((valid) => {
             if (valid) {
                 loading.value = true
                 sendValue(serviceType147Form.value)
             }
         })
+    } else if (type === 146) {
+        serviceType146Ref.value?.validate((valid) => {
+            if (valid) {
+                loading.value = true
+                sendValue(serviceType146Form.value)
+            }
+        })
     }
 }
 
 const sendValue = (data: any) => {
     const val = JSON.parse(JSON.stringify(data))
-    val.deviceId = route.query.deviceId
+    val.deviceId = props.deviceId
     sendValueReq(val)
         .then((res) => {
             console.log(res)
@@ -161,9 +207,34 @@ const sendValue = (data: any) => {
         })
 }
 
-const backEquipment = () => {
-    router.push({ path: route.query.prevPath as string })
-}
+watch(
+    () => props.deviceId,
+    () => {
+        init()
+    },
+    {
+        immediate: true,
+    }
+)
+watch(
+    () => props.show,
+    (newVal) => {
+        if (newVal) {
+            serviceType147Form.value = {
+                nodeId: '1',
+                serviceName: '',
+                opValue: null,
+            }
+            serviceType146Form.value = {
+                nodeId: '1',
+                serviceName: '',
+                opValue: null,
+            }
+            serviceType147Ref.value?.resetFields()
+            serviceType146Ref.value?.resetFields()
+        }
+    }
+)
 </script>
 
 <style scoped lang="scss">
@@ -176,13 +247,8 @@ const backEquipment = () => {
     // justify-content: center;
     font-size: 18px;
     .pageName {
-        margin: 80px auto;
-        margin-bottom: 200px;
-    }
-    .backBtn {
-        position: absolute;
-        top: 10px;
-        right: 10px;
+        margin: 20px auto;
+        margin-bottom: 30px;
     }
     .control {
         width: 100%;

ui/dasadmin/src/views/backend/equipment/equipmentManagement/index.vue

@@ -420,6 +420,11 @@
                 </template>
             </el-dialog>
         </el-container>
+        <el-dialog v-model="showControlPage">
+            <div class="controlSlot">
+                <ControlPage :deviceId="contorlData.deviceId" :iotModelId="contorlData.iotModelId" :show="showControlPage"></ControlPage>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -439,13 +444,9 @@ import {
     equipDetailsOrg,
 } from '/@/api/backend'
 import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
-import type Node from 'element-plus/es/components/tree/src/model/node'
 import { useAdminInfo } from '/@/stores/adminInfo'
 import { encrypt_aes, generateRandomNumber } from '/@/utils/crypto'
-import { useRouter, useRoute } from 'vue-router'
-
-const router = useRouter()
-const route = useRoute()
+import ControlPage from './control.vue'
 
 const adminInfo = useAdminInfo()
 interface Tree {
@@ -621,7 +622,7 @@ const deviceTypeQuery = () => {
 }
 
 // 分页
-const pagePagination = [ 10, 20, 30]
+const pagePagination = [10, 20, 30]
 const currentPage = ref(1)
 const currentPageSize = ref(pagePagination[1])
 const handleSizeChange = (val: number) => {
@@ -946,14 +947,19 @@ const Export = () => {
     })
 }
 
+const showControlPage = ref(false)
+const contorlData = reactive({
+    deviceId: '',
+    iotModelId: '',
+})
 const openControl = (data: any) => {
-    router.push({
-        name: 'control',
-        query: {
-            deviceId: data.row.id,
-            prevPath: route.path,
-        },
-    })
+    contorlData.deviceId = data.row.id
+    contorlData.iotModelId = data.row.iotModelId
+    if(contorlData.iotModelId){
+        showControlPage.value = true
+    }else{
+        ElMessage.warning('该设备没有绑定物模型！')
+    }
 }
 </script>