代码提交

package-lock.json

@@ -2807,7 +2807,7 @@
     },
     "node_modules/@vueuse/core": {
       "version": "10.11.1",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/@vueuse/core/-/core-10.11.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.1.tgz",
       "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
       "license": "MIT",
       "dependencies": {
@@ -7739,7 +7739,7 @@
     },
     "node_modules/pinia-plugin-persistedstate": {
       "version": "3.2.3",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.3.tgz",
+      "resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.3.tgz",
       "integrity": "sha512-Cm819WBj/s5K5DGw55EwbXDtx+EZzM0YR5AZbq9XE3u0xvXwvX2JnWoFpWIcdzISBHqy9H1UiSIUmXyXqWsQRQ==",
       "license": "MIT",
       "peerDependencies": {

package.json

@@ -55,7 +55,6 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "vite-plugin-dts": "^4.5.0",
     "eslint": "8.57.0",
     "eslint-plugin-vue": "9.4.0",
     "less": "^4.6.3",
@@ -67,6 +66,7 @@
     "unocss": "^66.6.6",
     "vite": "6.3.4",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-dts": "^4.5.0",
     "vite-plugin-vue-devtools": "^7.7.9",
     "vue-tsc": "^2.2.12"
   }

src/main.ts

@@ -3,7 +3,6 @@ import { createApp } from 'vue';
 import pinia from '@/stores';
 
 import '@/styles/index.scss';
-
 // element plus
 import ElementPlus from 'element-plus';
 // element css
@@ -50,7 +49,6 @@ app.use(pinia);
 app.use(router);
 app.use(directives);
 app.use(I18n);
-
 // app.use(router)
 app.use(hljsVuePlugin);
 

src/stores/modules/cameraBind.ts

@@ -0,0 +1,69 @@
+import {defineStore} from "pinia";
+import {computed, ref} from "vue";
+
+export const useCameraBindStore=defineStore('cameraBind',()=>{
+  // 存储已绑定的摄像头id及其绑定的组件信息
+  const boundCameras=ref<Map<number,{
+    val:number,
+    type: string,
+    title: string
+  }>>(new Map());
+  // 检查摄像头是否已被绑定
+  const isCameraBound = (cameraId: number ) => {
+    return boundCameras.value.has(cameraId);
+  };
+  // 获取摄像头的绑定信息
+  const getCameraBindsInfo=(cameraId:number )=>{
+    return boundCameras.value.get(cameraId);
+  }
+  // 绑定摄像头
+  const bingCamera=(cameraId:number,obj:any)=>{
+    if(isCameraBound(cameraId))
+    {
+      return false;
+    }
+    boundCameras.value.set(cameraId,{
+      val:cameraId,
+      type:obj.type,
+      title:obj.title
+    });
+    return true;
+  }
+  // 解绑摄像头
+  const unbindCamera=(cameraId:number)=>{
+    boundCameras.value.delete(cameraId);
+  }
+  // 获取所有已经绑定的摄像头ID列表
+  const getBoundCameraIds=computed(()=>{
+    return Array.from(boundCameras.value.keys());
+  })
+  return {
+    boundCameras,
+    isCameraBound,
+    getCameraBindsInfo,
+    bingCamera,
+    unbindCamera,
+    getBoundCameraIds
+  }
+},{
+  // 第三个参数：配置持久化
+  persist: {
+    key: 'camera-bind-store', // 存储在 localStorage 中的键名，可自定义
+    storage: sessionStorage,    // 默认是 localStorage，如果想关闭页面失效可改为 sessionStorage
+    serializer: {
+      // 序列化：将 Mp 转换为 [[key, value], [key, value]] 的二维数组存入 JSON
+      serialize: (state) => {
+        return JSON.stringify({
+          boundCameras: Array.from(state.boundCameras.entries())
+        });
+      },
+      // 反序列化：将 JSON 中的二维数组解析并重新构建为 Map 对象
+      deserialize: (value) => {
+        const parsed = JSON.parse(value);
+        return {
+          boundCameras: new Map(parsed.boundCameras)
+        };
+      }
+    }
+  }
+})

src/views/teacher/teacherPreview/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<h1>预览管理</h1>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/teacher/teacherStatistics/components/custom-componet/myEditor.vue

@@ -92,9 +92,10 @@ leftAsideStore.registerConfig('工作组件', [
     thumbnail: '/svgs/image.svg',
     props: {
       moduleId: {
-        type: 'upload',
-        val: '--',
-        title: '绑定'
+        type: 'treeSelectModel',
+        val: '',
+        name: '',
+        title: '绑定摄像头',
       }
     }
   }

src/views/teacher/teacherStatistics/components/custom-componet/treeSelectModel.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import {nextTick, ref} from "vue";
+import type {TreeNode} from "@/api/types/monitor/Tree";
+import {ElMessage, type TreeData, type TreeKey} from "element-plus";
+import {useCameraBindStore} from "@/stores/modules/cameraBind";
+const cameraBindStore=useCameraBindStore();
+const filteredTreeData = ref<TreeNode[]>([]);
+// 用于记录当前选中的节点 ID
+const currentCheckedId=ref<number>();
+interface Params {
+  title: string;
+  rows: any;
+  getTreeData?: (() => Promise<any>) | undefined;
+}
+const visible = ref(false);
+const treeRef=ref<any>(null);
+const paramsProps=ref<Params>({
+  rows: null,
+  title:'',
+  getTreeData: undefined
+})
+const emit=defineEmits(['bindingCamera']);
+// 接收父组件传递过来的参数
+const acceptParams=async (params:Params)=> {
+  paramsProps.value = params;
+  const res = await paramsProps.value.getTreeData!();
+  if (res.code == '0000') {
+    filteredTreeData.value = res.data;
+  }
+  currentCheckedId.value=paramsProps.value.rows.val;
+  console.log('当前被选中的节点的ID为：',currentCheckedId.value);
+  visible.value = true;
+  await nextTick();
+  if(currentCheckedId.value)
+  {
+    treeRef.value.setCheckedKeys([currentCheckedId.value]);
+  }
+  else {
+    treeRef.value.setCheckedKeys([]);
+  }
+}
+// 提交数据
+const handleSubmit = async () => {
+  const checkedNodes = treeRef.value.getCheckedNodes();
+  // 顺手帮你加个保护机制，避免触发你上一个问题里提到的 undefined 报错
+  if (!checkedNodes || checkedNodes.length === 0) {
+    ElMessage.warning('请先选择一个设备');
+    return;
+  }
+  try {
+    // 移除pinia中原先绑定的摄像头
+    if(currentCheckedId.value!=checkedNodes[0])
+    {
+      cameraBindStore.unbindCamera(currentCheckedId.value);
+    }
+    emit('bindingCamera', checkedNodes[0]);
+    treeRef.value.setCheckedKeys([]);
+    currentCheckedId.value = null; // 提交后清空选中状态
+    visible.value = false;
+  } catch (error) {
+    console.log(error);
+  }
+}
+const handleCheck=(data: TreeNode, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData})=>{
+  // 判断当前操作是勾选还是取消勾选
+  const isChecked = info.checkedKeys.includes(data.id);
+  if(isChecked)
+  {
+    // 如果被勾选
+    // 判断是否为叶子节点
+    const isLeaf=!data.children || data.children.length === 0;
+    if(!isLeaf)
+    {
+      // 如果不是叶子节点，强制从已选列表中移除当前节点
+      const newKeys=info.checkedKeys.filter(key => key !== data.id);
+      treeRef.value.setCheckedKeys(newKeys);
+      return;
+    }else {
+      treeRef.value.setCheckedKeys([data.id]);
+    }
+  }
+}
+// 暴露给父组件
+defineExpose({
+  acceptParams
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    class="tree-wrapper"
+    :title="paramsProps.title"
+    width="500px"
+    draggable >
+    <el-scrollbar height="400px">
+      <el-empty v-if="filteredTreeData.length === 0" description="暂无设备数据" :image-size="60" />
+      <el-tree-v2
+        v-else
+        ref="treeRef"
+        :height="400"
+        :data="filteredTreeData"
+        show-checkbox
+        check-strictly
+        @check="handleCheck"
+        node-key="id"
+        default-expand-all
+        :props="{
+            label: 'name',
+            children: 'children',
+          }"
+        class="transfer-tree"
+      />
+    </el-scrollbar>
+
+    <template #footer>
+      <el-button @click="visible = false"> 取消</el-button>
+      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
+    </template>
+  </el-dialog>
+
+</template>
+
+<style scoped lang="scss">
+
+
+</style>

src/views/teacher/teacherStatistics/components/mt-edit/components/layout/base-panel/imageModel.vue

@@ -269,24 +269,29 @@ async function loadFileList() {
     endTime: form.fileDate ? new Date(form.fileDate[1]).getTime() : undefined
   };
   // const response = await modelApi.fileStorage_file_list_post(endJson);
-  const response = await fileStorageFileListApi(endJson);
-  tableData.value = [];
-  if (!response.data) {
-    elDialogLoading.value = false;
-    return;
-  }
-  pageTotal.value = response.data.total;
-  currentPage.value = response.data.current;
-  pageSize.value = response.data.limit;
-
-  response.data.rows.forEach((value: FileEntityDTO) => {
-    let date = formatTimestamp(value.addTime);
-    let id = value.id;
-    let name = value.fileName;
-    let imgUrl = getFileObj(value.filePath);
-    tableData.value.push({ date, id, name, imgUrl });
-  });
-  elDialogLoading.value = false;
+   try {
+     const response = await fileStorageFileListApi(endJson);
+     tableData.value = [];
+     if (!response.data) {
+       elDialogLoading.value = false;
+       return;
+     }
+     pageTotal.value = response.data.total;
+     currentPage.value = response.data.current;
+     pageSize.value = response.data.limit;
+
+     response.data.rows.forEach((value: FileEntityDTO) => {
+       let date = formatTimestamp(value.addTime);
+       let id = value.id;
+       let name = value.fileName;
+       let imgUrl = getFileObj(value.filePath);
+       tableData.value.push({ date, id, name, imgUrl });
+     });
+     elDialogLoading.value = false;
+   }catch (error) {
+     console.log('error:', error);
+     elDialogLoading.value = false;
+   }
 }
 onMounted(() => {
   loadFileList();

src/views/teacher/teacherStatistics/components/mt-edit/components/layout/right-aside/index.vue

@@ -9,7 +9,8 @@
     >
       <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
         <slot name="deviceBind" :item="item" /> </template
-    ></select-item-setting>
+    >
+    </select-item-setting>
 
     <!-- 设置2 -->
     <page-setting
@@ -17,7 +18,9 @@
       v-model:canvasCfg="globalStore.canvasCfg"
       v-model:grid-cfg="globalStore.gridCfg"
       v-model:canvas-location="globalStore.canvasCfg.drag_offset"
-    ></page-setting>
+    >
+
+    </page-setting>
   </div>
 </template>
 <script setup lang="ts">

src/views/teacher/teacherStatistics/components/mt-edit/components/layout/right-aside/select-item-props-setting.vue

@@ -67,21 +67,21 @@
         </template>
       </el-input-tag>
 
-      <!-- <el-upload
-        v-else-if="attr_item.type === 'upload' && !attr_item.disabled"
-        accept="image/*"
-        :action="BASE_URL + '/fileStorage/saveFile'"
-        :on-success="saveImageSuccess"
+<!--      树-->
+      <el-input
+        style="width: 200px"
+        v-else-if="attr_item.type === 'treeSelectModel' && !attr_item.disabled"
+        v-model="attr_item.name"
+        tag-type="success"
+        size="small"
+        readonly
       >
-        <el-button type="primary">绑定图片</el-button>
-      </el-upload> -->
+        <template #prefix>
+          <el-icon @click="onTreeDialog(attr_item)"><Search /></el-icon>
+        </template>
+      </el-input>
 
-      <!-- inputTypeTag 类型标签 -->
-      <el-tag v-else-if="attr_item.type === 'inputTypeTag' && !attr_item.disabled">
-        {{ attr_item.val }}
-      </el-tag>
 
-      <!-- inputSelectId 输入类型标签 -->
       <el-input-tag
         v-else-if="attr_item.type === 'inputSelectId' && !attr_item.disabled"
         :model-value="[attr_item.val]"
@@ -107,6 +107,11 @@
     @update-dialog-image-visible="updateDialogImageVisible"
     @binding-img="bindingImg"
   />
+<!--  树型模型-->
+  <treeSelectModel
+    ref="treeSelectModel"
+    @bindingCamera="bindingCamera"
+  />
   <!-- 表单 -->
   <el-dialog
     v-model="dialogTableVisible"
@@ -175,24 +180,30 @@
   <!-- END -->
 </template>
 <script setup lang="ts">
-import type { ILeftAsideConfigItemPublicProps } from '@/views/teacher/teacherStatistics/components/mt-edit/store/types';
+import type {ILeftAsideConfigItemPublicProps} from '@/views/teacher/teacherStatistics/components/mt-edit/store/types';
 import {
+  ElButton,
+  ElColorPicker,
   ElFormItem,
+  ElIcon,
   ElInput,
-  ElInputNumber,
-  ElSelect,
+  ElInputNumber, ElMessage,
   ElOption,
+  ElSelect,
   ElSwitch,
-  ElColorPicker,
-  ElIcon,
-  ElButton,
   type UploadFile
 } from 'element-plus';
-import { Search } from '@element-plus/icons-vue';
+import {Search} from '@element-plus/icons-vue';
 import JsonEdit from './json-edit.vue';
-import { ref, computed, onMounted } from 'vue';
-import { modelApi, BASE_URL } from '@/views/teacher/teacherStatistics/utils/request';
-import imageModel from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/base-panel/imageModel.vue';
+import {computed, onMounted, ref} from 'vue';
+import imageModel
+  from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/base-panel/imageModel.vue';
+import TreeSelectModel from "@/views/teacher/teacherStatistics/components/custom-componet/treeSelectModel.vue";
+import {bindCamerasApi} from "@/api/modules/edgebox/EdgeBox";
+import {getTreePreview} from "@/api/modules/monitor/Tree";
+import {getBoundCameraListApi} from "@/api/modules/monitor/Camera";
+import {useCameraBindStore} from "@/stores/modules/cameraBind";
+
 type SelectItemPropsSettingProps = {
   propsInfo: ILeftAsideConfigItemPublicProps | undefined;
 };
@@ -216,6 +227,7 @@ interface RecServiceType {
 interface ExtendedParentWindow extends Window {
   Rec?: RecServiceType;
 }
+
 const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {});
 
 // 定义组件可以触发的事件
@@ -256,11 +268,39 @@ function handleIconClick(obj: any) {
 }
 
 let attrImg: any;
+let attrTree=ref({
+  val: '',
+  name: '',
+  type: '',
+  title: '',
+});
+const treeSelectModel=ref();
 // 打开图片模型弹窗
 const onImageDialog = (obj: any) => {
   dialogImageVisible.value = true;
   attrImg = obj;
+  console.log('打开绑定按钮',attrImg);
 };
+// 打开树型模型弹框
+const onTreeDialog=(obj:any)=>{
+  const params = {
+    rows: obj,
+    title: '绑定设备',
+    getTreeData:getTreePreview,
+  };
+  attrTree.value = obj;
+  console.log('树型',attrTree.value)
+  treeSelectModel.value.acceptParams(params);
+}
+const cameraBindStore=useCameraBindStore();
+// 绑定摄像头
+const bindingCamera=(camera: any)=>{
+  // 绑定摄像头
+  cameraBindStore.bingCamera(camera.id,attrTree);
+  attrTree.value.val=camera.id;
+  attrTree.value.name=camera.name;
+}
+
 function bindingImg(obj: any) {
   console.log('绑定图片', obj, attrImg);
   attrImg.val = obj.id;

src/views/teacher/teacherStatistics/components/mt-edit/components/layout/right-aside/select-item-setting.vue

@@ -5,7 +5,6 @@
     v-if="selectItemSettingProps.itemJson"
     class="select-none"
   >
-    <button @click="showTest">查看参数</button>
     <!-- 配置 -->
     <el-tab-pane label="配置" name="config">
       <el-collapse v-model="activeNames">
@@ -14,43 +13,6 @@
             <el-form-item label="标题" size="small">
               <el-input size="small" v-model="item_title"></el-input>
             </el-form-item>
-
-            <!-- <el-form-item label="x轴坐标" size="small">
-              <el-input-number
-                size="small"
-                v-model="item_binfo_left"
-                @change="emits('addHistory')"
-              ></el-input-number>
-            </el-form-item>
-            <el-form-item label="y轴坐标" size="small">
-              <el-input-number
-                size="small"
-                v-model="item_binfo_top"
-                @change="emits('addHistory')"
-              ></el-input-number>
-            </el-form-item>
-            <el-form-item label="宽度" size="small" v-if="!is_line">
-              <el-input-number
-                size="small"
-                v-model="item_binfo_width"
-                @change="emits('addHistory')"
-              ></el-input-number>
-            </el-form-item>
-            <el-form-item label="高度" size="small" v-if="!is_line">
-              <el-input-number
-                size="small"
-                v-model="item_binfo_height"
-                @change="emits('addHistory')"
-              ></el-input-number>
-            </el-form-item>
-            <el-form-item label="旋转角度" size="small" v-if="!is_line">
-              <el-input-number
-                size="small"
-                v-model="item_binfo_angle"
-                @change="emits('addHistory')"
-              ></el-input-number>
-            </el-form-item> -->
-
             <el-form-item label="隐藏" size="small">
               <el-switch size="small" v-model="item_hide" @change="emits('addHistory')"></el-switch>
             </el-form-item>
@@ -58,51 +20,16 @@
               <el-switch size="small" v-model="item_lock" @change="emits('addHistory')"></el-switch>
             </el-form-item>
 
-            <!-- <el-form-item v-if="!item_lock && !is_line" label="可缩放" size="small">
-              <el-switch size="small" v-model="item_resize"></el-switch>
-            </el-form-item>
-
-            <el-form-item
-              v-if="item_resize && !item_lock && !is_line"
-              label="等比缩放"
-              size="small"
-            >
-              <el-switch size="small" v-model="item_use_proportional_scaling"></el-switch>
-            </el-form-item> -->
-
-            <!-- <el-form-item v-if="!item_lock && !is_line" label="可旋转" size="small">
-              <el-switch size="small" v-model="item_rotate"></el-switch>
-            </el-form-item> -->
             <!-- xq 自定义属性 -->
             <select-item-props-setting
               :propsInfo="item_props"
-              @imgUpload="(val: any) => onUpdateModelValue(val)"
               @selectById="(val: any) => selectModeTypeByGetId(val)"
             ></select-item-props-setting>
+
           </el-form>
         </el-collapse-item>
-
-        <!-- <el-collapse-item title="动画配置" name="2">
-          <select-item-animate-setting
-            v-model:common-animates="item_common_animations"
-          ></select-item-animate-setting>
-        </el-collapse-item> -->
       </el-collapse>
     </el-tab-pane>
-
-    <!-- 事件 -->
-    <!-- <el-tab-pane label="事件" name="event">
-      <select-item-event-setting
-        :done-json="selectItemSettingProps.doneJson"
-        v-model:item-events="item_events"
-      ></select-item-event-setting>
-    </el-tab-pane> -->
-
-    <!-- 绑定 -->
-    <!-- <el-tab-pane label="绑定" name="bind_device">
-      <slot v-if="hasDeviceBindSlot" name="deviceBind" :item="selectItemSettingProps.itemJson" />
-      <el-empty v-else description="请传递插槽进行设备绑定页面显示" />
-    </el-tab-pane> -->
   </el-tabs>
 </template>
 <script setup lang="ts">
@@ -145,17 +72,16 @@ type SelectItemSettingProps = {
 const imgStore = useImgStore();
 
 function showTest() {
-  // console.log('查看参数', selectItemSettingProps.itemJson.id);
+   console.log('查看参数', selectItemSettingProps.itemJson);
   // console.log('查看pinia', imgStore.imgList);
 }
 
 const selectItemSettingProps = withDefaults(defineProps<SelectItemSettingProps>(), {});
+
 const emits = defineEmits(['update:itemJson', 'addHistory', 'imgUpload', 'selectById']);
 const slots = useSlots();
 
-function onUpdateModelValue(fileId: string) {
-  emitter.emit(selectItemSettingProps.itemJson?.id || '', fileId || '');
-}
+
 
 // function onUpdateModelValue(uploadFile: UploadFile) {
 //   console.log('触发事件：', uploadFile.raw);
@@ -350,7 +276,6 @@ const item_props = computed({
     return selectItemSettingProps.itemJson?.props;
   },
   set: (value) => {
-    console.log('右侧属性修改12');
     emits('update:itemJson', {
       ...selectItemSettingProps.itemJson,
       props: value

src/views/teacher/teacherStatistics/components/mt-edit/composables/index.ts

@@ -19,9 +19,12 @@ export const genExportJson = (
     if (m.symbol) {
       delete m.symbol;
     }
-    let new_props = {};
+    let new_props: any = {};
     for (const key in m.props) {
-      new_props = { ...new_props, ...{ [key]: m.props[key].val } };
+      new_props[key] = m.props[key].val;
+      if (m.props[key].name !== undefined) {
+        new_props[`${key}_name`] = m.props[key].name;
+      }
     }
     return {
       ...m,
@@ -54,7 +57,12 @@ export const useExportJsonToDoneJson = (json: IExportJson) => {
       props = { ...props, ...objectDeepClone(find_props) };
     }
     for (const key in m.props) {
-      if (props[key]) props[key].val = m.props[key];
+      if (props[key]) {
+        props[key].val = m.props[key];
+        if (m.props[`${key}_name`] !== undefined) {
+          props[key].name = m.props[`${key}_name`];
+        }
+      }
     }
     if (find_item?.symbol) {
       symbol = find_item.symbol;

src/views/teacher/teacherStatistics/components/mt-edit/index.vue

@@ -80,10 +80,6 @@
         </el-aside>
       </el-container>
 
-      <!-- 底部 -->
-      <!-- <el-footer height="40px" class="dark:bg-myDarkBgColor ct-border select-none">
-        <footer-panel></footer-panel>
-      </el-footer> -->
     </el-container>
 
     <!-- 导入数据 -->
@@ -123,38 +119,6 @@
       </template>
     </el-dialog>
     <!-- end -->
-
-    <!-- 数据模型 -->
-    <!-- <el-drawer v-model="drawerVisible" :modal="false" title="数据模型文件121" modal-penetrable>
-      <el-tree-v2
-        style="max-width: 600px; height: 100px"
-        :data="treeData"
-        :props="props"
-        :height="450"
-        :show-checkbox="true"
-        :check-strictly="true"
-        :highlight-current="true"
-        ref="treeRef"
-      >
-        <template #default="{ node }">
-          <el-icon class="el-icon--left">
-            <Document v-if="node.isLeaf" />
-            <Folder v-else-if="!node.expanded" />
-            <FolderOpened v-else />
-          </el-icon>
-          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">{{ node.label }}</span>
-        </template>
-      </el-tree-v2>
-
-      <template #footer>
-        <div class="drawer-footer">
-          <el-button @click="doSaveModel">保存模型11</el-button>
-          <el-button @click="loadModel" v-loading.fullscreen.lock="fullscreenLoading">加载模型2</el-button>
-          <el-button> 移除模型 </el-button>
-        </div>
-      </template>
-    </el-drawer> -->
-
     <!-- 数据保存弹框 -->
     <el-dialog v-model="dialogFormVisible" title="数据模型保存" width="500">
       <span>确定保存或者覆盖 {{ fileName }} 模型文件？</span>
@@ -329,9 +293,8 @@ const onImportYes = async () => {
 // 保存数据模型
 async function doSaveModel() {
   fullscreenLoading.value = true;
-
   const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json);
-
+  console.log('保存数据',exportJson.json)
   let endJson = {
     menuType: menuType.value,
     canvasCfg: exportJson.canvasCfg,
@@ -410,44 +373,7 @@ async function loadModel() {
   }
 }
 
-// async function loadModel() {
-//   fullscreenLoading.value = false;
-//   let nodes = treeRef.value?.getCheckedNodes();
-//   console.log(nodes?.length);
-//   if (nodes?.length != 0) {
-//     // if (nodes?.length === 0) {
-//     fullscreenLoading.value = false;
-//     ElMessage.warning('请至少选择一个模型文件');
-//   } else {
-//     let endJson = {
-//       menuType: ''
-//       // menuType: nodes?.[0].id
-//     };
-//     console.log('请求数据类型：', typeof JSON.stringify(endJson));
-
-//     try {
-//       const response = await getModelData(endJson);
-//       // const response = await modelApi.model_getModelData_post(endJson);
-//       console.log('响应状态：', typeof response);
-//       if (response.code == '0000') {
-//         ElMessage.success('请求数据成功');
-//         const result = response.data;
-//         const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result as IExportJson);
-//         globalStore.canvasCfg = canvasCfg;
-//         globalStore.gridCfg = gridCfg;
-//         globalStore.setGlobalStoreDoneJson(importDoneJson);
-//         fullscreenLoading.value = false;
-//       } else {
-//         fullscreenLoading.value = false;
-//         ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
-//       }
-//     } catch (error) {
-//       fullscreenLoading.value = false;
-//       console.error('请求错误：', error);
-//       ElMessage.error('网络请求失败');
-//     }
-//   }
-// }
+
 
 const onPreviewClick = () => {
   // 获取导出json

src/views/teacher/teacherStatistics/components/mt-edit/store/types.ts

@@ -10,7 +10,9 @@ export type ILeftAsideConfigItemPublicPropsType =
   | 'upload'
   | 'inputSelectId'
   | 'inputTypeTag' //inputTypeTag 必须和 inputSelectId 一起使用
-  | 'inputSelectImgId';
+  | 'inputSelectImgId'
+  | 'treeSelectModel'
+  ;
 // 开放注册配置
 export type ILeftAsideConfigItemPublicProps = Record<
   string,
@@ -18,6 +20,7 @@ export type ILeftAsideConfigItemPublicProps = Record<
     title: string; //显示在属性面板的标题
     type: ILeftAsideConfigItemPublicPropsType; //属性的类型决定了修改属性的方式
     val: any;
+    name?: string;
     options?: any; //比如说修改属性的时候用到了下拉框，这里面就可以放下拉框的选项
     disabled?: boolean; //如果禁用了将不会显示到右侧属性面板里，但是仍然可以通过代码修改属性
   }

src/views/teacher/teacherStatistics/components/vue-xq-test/vue-camera.vue

@@ -1,22 +1,25 @@
 <template>
-  <div class="main-img" @click="customDraggingVisible = true">
-    <el-button type="primary" :icon="VideoCamera" class="full-size-btn" />
+  <div class="main-img" >
+    <el-button type="primary" :icon="VideoCamera" class="full-size-btn" @click="handlePlay"/>
   </div>
-  
+
   <teleport to="body">
     <el-dialog 
-      v-model="customDraggingVisible" 
-      class="custom-dragging-style" 
-      title="摄像机画面" 
-      width="500" 
+      v-model="customDraggingVisible"
+      title="摄像机画面"
       :modal="false"
+      style="height: 60vh"
+      center
+      destroy-on-close
       draggable
     >
-      <span>这是摄像机画面。尝试拖动它看看效果！</span>
+    <div class="video-content">
+      <VideoPlayer :camera-id="VideoPlayerId" class="player-instance"/>
+    </div>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="customDraggingVisible = false">Cancel</el-button>
-          <el-button type="primary" @click="customDraggingVisible = false"> Confirm </el-button>
+          <el-button @click="customDraggingVisible = false">取消</el-button>
+          <el-button type="primary" @click="customDraggingVisible = false"> 确定 </el-button>
         </div>
       </template>
     </el-dialog>
@@ -26,8 +29,32 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { VideoCamera } from '@element-plus/icons-vue';
-
+import {useCameraBindStore} from "@/stores/modules/cameraBind";
+import VideoPlayer from "@/views/sysmonitortree/sysMonitorTree/components/VideoPlayer.vue";
 const customDraggingVisible = ref(false);
+const cameraBindStore=useCameraBindStore();
+const props = defineProps({
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  },
+  moduleId: {
+    type: Number,
+    default: ''
+  }
+});
+const VideoPlayerId =ref();
+// 处理摄像头播放按钮
+const handlePlay = () => {
+  const id=Number(props.moduleId);
+  // 如果当前摄像头已经被绑定，才出现播放的弹框
+  if(cameraBindStore.isCameraBound(id))
+  {
+    VideoPlayerId.value=id;
+    console.log('当前播放的摄像头消息', props.definitionItemJson)
+    customDraggingVisible.value = true;
+  }
+};
 </script>
 
 <style scoped>
@@ -51,4 +78,14 @@ const customDraggingVisible = ref(false);
   min-width: 100%;
   min-height: 100%;
 }
+.video-content {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .player-instance {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

src/views/teacher/teacherStatistics/components/vue-xq-test/vue-img.vue

@@ -42,7 +42,7 @@ console.log('父传子1：', props.definitionItemJson.id);
 watch(
   () => props.moduleId,
   (newVal, oldVal) => {
-    console.log('moduleId:', newVal, oldVal);
+    console.log(`moduleId:新值：${newVal},旧值：${oldVal}`);
     loadFileList(newVal);
   }
 );
@@ -51,24 +51,29 @@ let imgUrl = ref<string>();
 
 // 获取文件列表
 async function loadFileList(fileId: string) {
+  console.log('loadFileList:', fileId);
   let endJson = {
     id: fileId
   };
+  if(fileId==='--')
+    return;
   // const response = await modelApi.fileStorage_file_list_post(endJson);
   const response = await fileStorageFileListApi(endJson);
   if (!response.data) {
     return;
   }
-  response.data.rows.forEach((value: any) => {
-    imgUrl.value = formatFilePath(File_Url+'/admin', value.filePath);
-  });
-  console.log('imgUrl:', imgUrl);
+  if(response.data.rows)
+  {
+    response.data.rows.forEach((value: any) => {
+      imgUrl.value = formatFilePath(File_Url+'/admin', value.filePath);
+    });
+  }
 }
 
-emitter.on('imgUpload:' + props.definitionItemJson.id, (uploadFile) => {
-  console.log('imgUpload:', uploadFile);
-  displayImageUrl.value = uploadFile as string;
-});
+// emitter.on('imgUpload:' + props.definitionItemJson.id, (uploadFile) => {
+//   console.log('imgUpload:', uploadFile);
+//   displayImageUrl.value = uploadFile as string;
+// });
 
 onUnmounted(() => {
   console.log('组件卸载');