feat:具体选择某一个摄像头

src/components/Select/SelectDeviceTree.vue

@@ -0,0 +1,162 @@
+<template>
+    <el-tree-select ref="treeRef" style="width: 100%;"
+        :props="{ label: 'name', children: 'children', value: 'id', disabled: 'isLock' }" :data="state.options"
+        node-key="id" :expand-on-click-node="false" :default-expanded-keys="state.defaultExpandedKeys" show-checkbox
+        v-model="selectId" :placeholder="props.placeholder" :clearable="props.clearable" remote-show-suffix
+        :disabled="props.disabled" :remote-method="remoteSearch" :loading="state.loading"
+        @visible-change="(e) => e && getOptions()" @check="check" @clear="clear" multiple collapse-tags
+        collapse-tags-tooltip>
+        <template #default="{ node, data }">
+            <div class="center">
+                <el-icon v-if="data.deep == 1">
+                    <Files />
+                </el-icon>
+                <el-icon v-if="data.deep == 2">
+                    <VideoCamera />
+                </el-icon>
+                <span class="text-overflow" style="margin-left: 4px;">{{ node.label }}</span>
+            </div>
+        </template>
+    </el-tree-select>
+</template>
+
+<script setup name="SelectDeviceTree">
+import { ref, defineEmits, reactive, defineModel, watch, onMounted, nextTick } from "vue";
+import { Files, VideoCamera } from "@element-plus/icons-vue"
+
+import * as deviceGroupApi from "/@/api/device/deviceGroup.ts"
+
+const emit = defineEmits(["change"])
+
+const props = defineProps({
+    placeholder: {
+        type: String,
+        default: "请选择分组",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
+    autoFirst: {
+        type: Boolean,
+        default: true,
+    },
+    apiParams: {
+        type: Object,
+        default: () => { },
+    }
+});
+
+const selectId = defineModel()
+
+// 树组件ref
+const treeRef = ref()
+
+const queryForm = reactive({
+    name: "",
+    current: 1,
+    size: 10,
+})
+
+const state = reactive({
+    loading: true,
+    options: [],
+    defaultExpandedKeys: [],
+    checkedTreeNodes: []
+})
+
+// 仅当接口参数发生变化时刷新选项，避免选择行为触发数据重载
+watch(
+    () => props.apiParams,
+    (newVal, oldVal) => {
+        if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return
+        getOptions()
+
+    },
+    { immediate: false, deep: true },
+)
+
+onMounted(() => {
+    props.autoFirst && getOptions()
+})
+
+// 获取分组树
+async function getOptions() {
+    try {
+        state.loading = true
+        const _pa = {
+            ...queryForm,
+            ...props.apiParams,
+        }
+        const { data } = await deviceGroupApi.getDeviceGroupTree(_pa)
+        state.options = data ?? []
+        if ((!selectId.value || !selectId.value.length) && props.autoFirst && state.options.length != 0) {
+            selectId.value = [state.options[0].id, ...state.options[0].children.map((item) => item.id)]
+            await getDefaultExpandedKeys()
+            // 返回两个一个一级节点ids,一个二级节点ids
+            const firstLevelIds = state.checkedTreeNodes.filter((item) => item.deep == 1).map((item) => item.id)
+            const secondLevelIds = state.checkedTreeNodes.filter((item) => item.deep == 2).map((item) => item.id)
+            emit("change", [firstLevelIds, secondLevelIds])
+        }
+    } catch (error) {
+        console.error("|获取分组树|意外的错误:", error);
+    }
+    finally {
+        setTimeout(() => (state.loading = false), 500)
+    }
+}
+
+function remoteSearch(params) {
+    if (params != queryForm.name) {
+        queryForm.name = params
+        getOptions()
+    }
+}
+
+function check(data, checkStatus) {
+    const { checkedNodes } = checkStatus
+    state.checkedTreeNodes = checkedNodes
+    // 返回两个一个一级节点ids,一个二级节点ids
+    const firstLevelIds = checkedNodes.filter((item) => item.deep == 1).map((item) => item.id)
+    const secondLevelIds = checkedNodes.filter((item) => item.deep == 2).map((item) => item.id)
+    emit("change", [firstLevelIds, secondLevelIds])
+}
+
+function clear() {
+    emit("change", [[], []])
+}
+
+// 或者获取默认展开的节点
+const getDefaultExpandedKeys = () => {
+    return new Promise((resolve, reject) => {
+        const targetIndex = state.options.findIndex((item) => item.children && item.children.length)
+        const targetList = state.options[targetIndex]
+        state.defaultExpandedKeys = [targetList.id, ...targetList.children.map((item) => item.id)]
+        treeRef.value?.setCheckedKeys(state.defaultExpandedKeys)
+        nextTick(() => {
+            state.checkedTreeNodes = treeRef.value?.getCheckedNodes()
+            resolve()
+        })
+    })
+
+}
+</script>
+
+<style scoped lang="scss">
+.flex-center {
+    display: flex;
+    align-items: center;
+}
+
+.text-overflow {
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

src/components/index.ts

@@ -33,6 +33,7 @@ import SelectDutyType from "/@/components/Select/SelectDutyType.vue"
 import SelectTreeChannel from "/@/components/Select/SelectTreeChannel.vue"
 import SelectTreeChannelRadio from "/@/components/Select/SelectTreeChannelRadio.vue"
 import SelectTreeDept from "/@/components/Select/SelectTreeDept.vue"
+import SelectDeviceTree from "/@/components/Select/SelectDeviceTree.vue"
 
 import ColumnBtn from "/@/components/Column/ColumnBtn.vue"
 
@@ -93,6 +94,7 @@ export default {
 		app.component('SelectTreeChannel', SelectTreeChannel);
 		app.component('SelectTreeChannelRadio', SelectTreeChannelRadio);
 		app.component('SelectTreeDept', SelectTreeDept);
+		app.component('SelectDeviceTree', SelectDeviceTree);
 
 		app.component('ColumnBtn', ColumnBtn);
 

src/views/duty/dutyPlan/components/video-pay.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="w-full h-full flex flex-col pt-[10px]">
         <com-title title="监控预览">
-            <select-device-group v-model="refreshForm.dutyId" autoFirst style="width: 250px;" />
+            <select-device-tree v-model="refreshForm.dutyId" autoFirst style="width: 250px;" @change="groupChange" />
         </com-title>
         <div class="h-[10px]" />
         <preview-video ref="previewVideoRef" />
@@ -16,27 +16,35 @@ const comTitle = defineAsyncComponent(() => import('./com-title.vue'));
 const PreviewVideo = defineAsyncComponent(() => import("../../../device/components/preview-video/index.vue"));
 
 const refreshForm = reactive<any>({
-    dutyId: ""
+    dutyId: null,
+    groupIdList: [],
+    deviceChannelCodeList: []
 })
 
 const previewVideoRef = ref<any>(null)
 
-watch(
-    () => refreshForm.dutyId,
-    () => {
-        refreshVideo()
-    }
-)
 
 const refreshVideo = async () => {
-    const { code, data } = await deviceChannelApi.list({
-        groupId: refreshForm.dutyId
+    const { code, data } = await deviceChannelApi.getChannelPage({
+        groupIdList: refreshForm.groupIdList,
+        deviceChannelCodeList: refreshForm.deviceChannelCodeList
     })
     if (code != 0) return
-    const channelCode = data?.map((v: any) => v.channelCode) ?? []
+    const channelCode = data?.records?.map((v: any) => v.channelCode) ?? []
     previewVideoRef.value.init(channelCode)
 }
 
+const groupChange = (e: any) => {
+    if (!e) return
+    const [groupIds, channelCodes] = e
+    if (!groupIds.length && !channelCodes.length) {
+        previewVideoRef.value.close()
+        return
+    }
+    refreshForm.groupIdList = groupIds
+    refreshForm.deviceChannelCodeList = channelCodes
+    refreshVideo()
+}
 </script>
 
 <style lang="scss" scoped></style>