代码提交

src/stores/modules/cameraBind.ts

@@ -49,7 +49,7 @@ export const useCameraBindStore=defineStore('cameraBind',()=>{
   // 第三个参数：配置持久化
   persist: {
     key: 'camera-bind-store', // 存储在 localStorage 中的键名，可自定义
-    storage: sessionStorage,    // 默认是 localStorage，如果想关闭页面失效可改为 sessionStorage
+    storage: localStorage,    // 默认是 localStorage，如果想关闭页面失效可改为 sessionStorage
     serializer: {
       // 序列化：将 Mp 转换为 [[key, value], [key, value]] 的二维数组存入 JSON
       serialize: (state) => {

src/views/teacher/teacherPreview/index.vue

@@ -1,11 +1,193 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+  <!-- 数据模型 -->
+  <el-drawer v-model="drawerVisible" :modal="false" title="数据模型文件" modal-penetrable>
+    <el-radio-group class="vertical-radio-group" v-model="radio">
+      {{ drawerVisible }}
+      <el-radio v-for="item in fileNames" :key="item.id" :label="item.id">
+        {{ item.name }}
+      </el-radio>
+    </el-radio-group>
+  </el-drawer>
+</template>
+
 <script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
 
-</script>
+import  MtPreview  from '@/views/teacher/teacherStatistics/components/mt-preview/index.vue';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/views/teacher/teacherStatistics/components/mt-edit/store/global';
+import { useExportJsonToDoneJson } from '@/views/teacher/teacherStatistics/components/mt-edit/composables';
+import { objectDeepClone, randomString } from '@/views/teacher/teacherStatistics/components/mt-edit/utils';
+import { modelApi } from '@/views/teacher/teacherStatistics/utils/request';
 
-<template>
-<h1>预览管理</h1>
-</template>
 
-<style scoped lang="scss">
+let drawerVisible = ref(false);
+let fileNames: Array<{ id: string; name: string }> = reactive([]);
+let radio = ref('-1');
+// 用于调试：跟踪组件是否被重新创建
+let randomString1 = randomString();
+
+//文件读取
+function fileRead() {
+  fetch('/dataModes/index.json')
+    .then((response) => response.json())
+    .then((data) => {
+      fileNames = Object.assign(data);
+    })
+    .catch((error) => {
+      console.error('获取JSON文件错误：', error);
+    });
+}
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+
+//属性抽取
+function extractValFromProps(props: any) {
+  const result: Record<string, any> = {};
+
+  for (const key in props) {
+    if (props[key] && typeof props[key] === 'object' && 'val' in props[key]) {
+      result[key] = props[key].val;
+    }
+  }
+
+  return result;
+}
+
+function initLoad() {
+  let canvasCfg = globalStore.canvasCfg;
+  let gridCfg = globalStore.gridCfg;
+  // let json = globalStore.done_json;
+  let json: Array<any> = objectDeepClone(globalStore.done_json);
+  globalStore.done_json.forEach((item) => {
+    const extractedProps = extractValFromProps(item.props);
+    json.forEach((obj) => {
+      if (obj.id === item.id) {
+        obj.props = extractedProps;
+      }
+    });
+  });
+
+  let endJson = {
+    canvasCfg: canvasCfg,
+    gridCfg: gridCfg,
+    json: json
+  };
+
+  console.log('endJson：', endJson);
+
+  MtPreviewRef.value?.setImportJson(endJson);
+}
+
+async function newLoadModel() {
+  // let endJson = {
+  //   menuType: route.query.screen
+  // };
+
+  let endJson = {
+    menuType: ''
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == '0000') {
+      const result = response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+
+      console.log('globalStore:', globalStore);
+      console.log('MtPreviewRef.value', MtPreviewRef.value);
+      // if (globalStore.group_ids.has(route.query.screen as string)) {
+      //   globalStore.group_ids.delete(route.query.screen as string);
+      // }
+      // globalStore.group_ids.set(
+      //   route.query.screen as string,
+      //   processedImportDoneJson.map((item) => item.id)
+      // );
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+
+//加载数据模型
+function loadModel() {
+  console.log('选中：', radio.value, radio);
+  if (!radio.value || radio.value == '-1') {
+    ElMessage.warning('请先选择一个模型文件');
+  }
+  fileNames.forEach((item) => {
+    if (item.id == radio.value) {
+      fetch(`/dataModes/${item.name}`)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log('文件内容：', data);
+          const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(data);
+          globalStore.canvasCfg = canvasCfg;
+          globalStore.gridCfg = gridCfg;
+          globalStore.setGlobalStoreDoneJson(importDoneJson);
+          initLoad();
+        })
+        .catch((error) => {
+          ElMessage.error('获取文件错误：', error);
+        });
+    }
+  });
+}
+
+function test2() {
+  console.log('test3：', globalStore);
+}
+</script>
 
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
 </style>

src/views/teacher/teacherStatistics/utils/request.ts

@@ -3,11 +3,11 @@ export const API_CONFIG = {
   // nginx
   NGINX: 'http://localhost:8099',
   // 测试环境
-  LOCAL: 'http://localhost:8080'
+  LOCAL: 'http://localhost:9991/api/admin'
 };
 
 interface ApiResponse {
-  code: number;
+  code: any;
   message: string;
   data: any;
 }