Real-time-monitoring-frontend/src/views/teacher/teacherStatistics/components/mt-edit/index.vue

<template>
  <div id="mt-edit" class="relative flex-auto w-1/1 h-1/1 dark">
    <el-container class="h-1/1">
      <!-- 头部1 -->
      <el-header
        height="45px"
        class="dark:bg-myDarkBgColor cb-border p-0 select-none"
        @mousedown="mainPanelRef?.stopListenerKeyDown()"
      >
        <!-- 头部2 -->
        <header-panel
          v-model:leftAside="aside_state.left_show"
          v-model:rightAside="aside_state.right_show"
          v-model:lock-state="globalStore.lock"
          :selected-items-id="globalStore.selected_items_id"
          :group-enabled="header_group_enabled"
          :un-group-enabled="header_un_group_enabled"
          :align-enabled="header_align_enabled"
          :delete-enabled="header_delete_enabled"
          :undo-enabled="cacheStore.historyIndex > 0"
          :redo-enabled="cacheStore.historyIndex < cacheStore.history.length - 1"
          :real-time-data="globalStore.real_time_data"
          :use-thumbnail="mtEidtProps.useThumbnail"
          @on-group-click="mainPanelRef?.createGroupItem"
          @on-ungroup-click="mainPanelRef?.onUngroup"
          @on-delete-click="onDeleteClick"
          @on-export-click="onExportClick"
          @on-tree-click="done_json_tree_visiable = true"
          @on-help-click="onHelpClick"
          @align-selected="onAlignSelected"
          @on-redo-click="onRedoClick"
          @on-undo-click="onUndoClick"
          @on-import-click="onImportClick"
          @on-return-click="emits('onReturnClick')"
          @on-save-click="onSaveClick"
          @on-preview-click="onPreviewClick"
          @on-thumbnail-click="onThumbnailClick"
          @on-draw-line-click="onDrawLineClick"
          @on-right-drawer="onRightDrawer"
          @on-image-dialog="onImageDialog"
        >
        </header-panel>
      </el-header>

      <!-- 中间1 -->
      <el-container class="h-[calc(100%-45px-40px)]">
        <!-- 左侧 -->
        <el-aside
          :width="aside_state.left_show ? '200px' : '0px'"
          class="dark:bg-myDarkBgColor cr-border mt-edit-aside h-1/1 select-none"
          @mousedown="mainPanelRef?.stopListenerKeyDown()"
        >
          <el-scrollbar height="100%">
            <left-aside :leftAsideConfig="leftAsideStore.config"></left-aside>
          </el-scrollbar>
        </el-aside>

        <!-- 中间2 渲染组件 -->
        <el-main class="dark:bg-myMainDarkBgColor" @mousedown="mainPanelRef?.beginListenerKeyDown()">
          <main-panel
            ref="mainPanelRef"
            :group-enabled="header_group_enabled"
            :un-group-enabled="header_un_group_enabled"
            :delete-enabled="header_delete_enabled"
            :line-append-enable="line_append_enable"
          ></main-panel>
        </el-main>

        <!-- 右侧 -->
        <el-aside
          :width="aside_state.right_show ? '200px' : '0px'"
          class="dark:bg-myDarkBgColor cl-border mt-edit-aside select-none"
          @mousedown="mainPanelRef?.stopListenerKeyDown()"
        >
          <!-- 右侧2 渲染选项 -->
          <right-aside>
            <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
              <slot name="deviceBind" :item="item"></slot>
            </template>
          </right-aside>
        </el-aside>
      </el-container>

      <!-- 底部 -->
      <!-- <el-footer height="40px" class="dark:bg-myDarkBgColor ct-border select-none">
        <footer-panel></footer-panel>
      </el-footer> -->
    </el-container>

    <!-- 导入数据 -->
    <el-dialog v-model="import_visible" title="数据导入" @close="mainPanelRef?.beginListenerKeyDown()">
      <import-json ref="importJsonRef"></import-json>
      <template #footer>
        <el-button type="primary" @click="onImportYes">确定</el-button>
      </template>
    </el-dialog>

    <!-- 导出数据 -->
    <el-dialog v-model="export_visible" title="数据导出" @close="mainPanelRef?.beginListenerKeyDown()">
      <export-json
        :done-json="objectDeepClone(globalStore.done_json)"
        :canvas-cfg="globalStore.canvasCfg"
        :grid-cfg="globalStore.gridCfg"
      ></export-json>
    </el-dialog>

    <el-drawer v-model="done_json_tree_visiable" title="图形结构树" direction="ltr" size="30%">
      <done-tree
        :done-json="globalStore.done_json"
        :selected-items-id="globalStore.selected_items_id"
        @update-selected-items-id="onTreeUpdateSelectedItemsId"
        @update-selected-id-hide="onDoneTreeUpdateSelectedIdHide"
      ></done-tree>
    </el-drawer>

    <!-- xxxx -->
    <el-dialog v-model="drawerVisible" title="数据模型" width="35%">
      <span>注意：保存后会覆盖之前的模型文件</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="doSaveModel">保存</el-button>
          <el-button @click="loadModel" type="primary"> 加载</el-button>
        </div>
      </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>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片模型 -->
    <imageModel
      v-if="dialogImageVisible"
      :dialogImageVisible="dialogImageVisible"
      :isEdit="true"
      :isDelete="true"
      :isBinding="false"
      :isUpload="true"
      @update-dialog-image-visible="updateDialogImageVisible"
    />

    <!-- END -->
  </div>
</template>
<script setup lang="ts">
import HeaderPanel from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/header-panel/index.vue';
import LeftAside from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/left-aside/index.vue';
import MainPanel from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/main-panel/index.vue';
import RightAside from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/right-aside/index.vue';
import { leftAsideStore } from '@/views/teacher/teacherStatistics/components/mt-edit/store/left-aside';
import { ElContainer, ElHeader, ElAside, ElMain, ElDialog, ElDrawer, ElButton, ElMessage, ElTreeV2 } from 'element-plus';
import { globalStore } from '@/views/teacher/teacherStatistics/components/mt-edit/store/global';
import { computed, reactive, ref, useSlots, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue';
import DoneTree from '@/views/teacher/teacherStatistics/components/mt-edit/components/done-tree/index.vue';
import { cacheStore } from './store/cache';
import ExportJson from '@/views/teacher/teacherStatistics/components/mt-edit/components/export-json/index.vue';
import ImportJson from '@/views/teacher/teacherStatistics/components/mt-edit/components/import-json/index.vue';
import { objectDeepClone } from './utils';
import { genExportJson, useExportJsonToDoneJson } from './composables';
import type { IExportJson } from './components/types';
import imageModel from '@/views/teacher/teacherStatistics/components/mt-edit/components/layout/base-panel/imageModel.vue';
import { saveOrUpdateModelData, getModelData } from '@/api/modules/teacher/teacherStatistics';

interface Tree {
  id: string;
  label: string;
  disabled?: boolean;
  children?: Tree[];
}

const props = {
  value: 'id',
  label: 'label',
  children: 'children',
  disabled: 'disabled'
};

let treeData: Tree[] = [];

function updateDialogImageVisible() {
  dialogImageVisible.value = false;
}

// 打开图片模型弹窗
const onImageDialog = () => {
  dialogImageVisible.value = true;
  console.log('点击：', dialogImageVisible.value);
};
let drawerVisible = ref(false);
let dialogFormVisible = ref(false);
let dialogImageVisible = ref(false);
let fileName = ref('');
let menuType = ref('');

type MtEditProps = {
  useThumbnail?: boolean;
  screen?: string;
};

const mtEidtProps = withDefaults(defineProps<MtEditProps>(), {
  useThumbnail: false
});
const emits = defineEmits([
  'onPreviewClick',
  'onReturnClick',
  'onSaveClick',
  'onThumbnailClick',
  'onRightDrawer',
  'onImageDialog',
  'updateDialogImageVisible'
]);
const slots = useSlots();
const mainPanelRef = ref<InstanceType<typeof MainPanel>>();
const importJsonRef = ref<InstanceType<typeof ImportJson>>();
const aside_state = reactive({
  left_show: true,
  right_show: true
});
const hasDeviceBindSlot = computed(() => {
  return !!slots.deviceBind;
});
const header_delete_enabled = computed(() => {
  return globalStore.selected_items_id.length > 0;
});
const header_group_enabled = computed(() => {
  return globalStore.selected_items_id.length > 1;
});
const header_un_group_enabled = computed(() => {
  if (globalStore.selected_items_id.length === 1) {
    const item = globalStore.done_json.find(f => f.id === globalStore.selected_items_id[0]);
    return item?.type === 'group';
  }
  return false;
});
const header_align_enabled = computed(() => {
  const selected_items = globalStore.done_json.filter(f => globalStore.selected_items_id.includes(f.id) && f.type !== 'sys-line');
  return selected_items.length > 1;
});
const import_visible = ref(false);
const export_visible = ref(false);
const done_json_tree_visiable = ref(false);
const line_append_enable = ref(false);
const onDeleteClick = () => {
  globalStore.deleteSelectedItems();
  cacheStore.addHistory(globalStore.done_json);
};
const onImportClick = () => {
  import_visible.value = true;
  mainPanelRef.value?.stopListenerKeyDown();
};
const onExportClick = () => {
  export_visible.value = true;
  mainPanelRef.value?.stopListenerKeyDown();
};
const onTreeUpdateSelectedItemsId = (id: string) => {
  globalStore.setSingleSelect(id);
};
const onDoneTreeUpdateSelectedIdHide = (id: string) => {
  const item = globalStore.done_json.find(f => f.id === id);
  if (item) {
    item.hide = !item.hide;
  }
};
const onAlignSelected = (
  type: 'left' | 'horizontally' | 'right' | 'top' | 'vertically' | 'bottom' | 'horizontal-distribution' | 'vertical-distribution'
) => {
  mainPanelRef.value?.onAlignSelected(type);
};
const onHelpClick = () => {
  window.open('http://mt.yaolm.top');
};
const onRedoClick = () => {
  mainPanelRef.value?.onRedo();
};
const onUndoClick = () => {
  mainPanelRef.value?.onUndo();
};

// 导入
const onImportYes = async () => {
  const res = await importJsonRef.value?.onImport();
  if (res) {
    import_visible.value = false;

    cacheStore.addHistory(globalStore.done_json);
  } else {
    ElMessage.error('导入失败,请检查数据格式');
  }
};

// 保存数据模型
async function doSaveModel() {
  fullscreenLoading.value = true;

  const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json);

  let endJson = {
    menuType: menuType.value,
    canvasCfg: exportJson.canvasCfg,
    gridCfg: exportJson.gridCfg,
    json: exportJson.json
  };

  try {
    const response = await saveOrUpdateModelData(endJson);
    // const response = await modelApi.saveOrUpdate_modelData_post(endJson);
    if (response.code == '0000') {
      fullscreenLoading.value = false;
      dialogFormVisible.value = false;
      ElMessage.success('数据模型保存成功');
      drawerVisible.value = false;
    } else {
      fullscreenLoading.value = false;
      dialogFormVisible.value = false;
      console.error('保存失败：', response.code, response.message);
      // 尝试获取错误详情
      console.error('服务器返回错误信息：', response.message);
      ElMessage.error(`数据模型保存失败: ${response.code} - ${response.message}`);
      drawerVisible.value = false;
    }
  } catch (error) {
    drawerVisible.value = false;
    fullscreenLoading.value = false;
    dialogFormVisible.value = false;
    console.error('请求错误：', error);
    ElMessage.error('网络请求失败');
  }
}

function saveModel() {
  let nodes = treeRef.value?.getCheckedNodes();
  console.log(nodes?.length);
  if (nodes?.length === 0) {
    ElMessage.warning('请至少选择一个模型文件');
  } else {
    dialogFormVisible.value = true;
    fileName.value = nodes?.[0].label;
    menuType.value = nodes?.[0].id;
  }
}

async function loadModel() {
  fullscreenLoading.value = false;
  let endJson = {
    menuType: ''
  };
  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;
      drawerVisible.value = false;
    } else {
      fullscreenLoading.value = false;
      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
      drawerVisible.value = false;
    }
  } catch (error) {
    fullscreenLoading.value = false;
    console.error('请求错误：', error);
    ElMessage.error('网络请求失败');
    drawerVisible.value = false;
  }
}

// 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
  const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json);
  emits('onPreviewClick', exportJson);
};
const onSaveClick = () => {
  // 获取导出json
  const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json);
  emits('onSaveClick', exportJson);
};
const onThumbnailClick = () => {
  emits('onThumbnailClick');
};
const onDrawLineClick = (val: boolean) => {
  line_append_enable.value = val;
};

let fileNames: Array<{ id: string; name: string }> = reactive([]);
let radio = ref('-1');

//加载数据模型
const fullscreenLoading = ref(false);

const onRightDrawer = () => {
  drawerVisible.value = true;
  // fileRead();
};

onMounted(() => {
  // fileRead();
});
onBeforeUnmount(() => {
  // 1. 强制停止 main-panel 的键盘监听（极其重要！）
  if (mainPanelRef.value && mainPanelRef.value.stopListenerKeyDown) {
    mainPanelRef.value.stopListenerKeyDown();
  }

  // 2. 清空占据大量内存的全局 Store 数据（假设您的 store 提供了清空/重置的方法）
  // 注意：具体方法名请根据您 store 里的实际定义来修改
  globalStore.done_json = [];
  globalStore.selected_items_id = [];
  cacheStore.history = [];
  cacheStore.historyIndex = 0;

  // 3. 关闭所有可能未关闭的弹窗
  dialogFormVisible.value = false;
  drawerVisible.value = false;
  dialogImageVisible.value = false;
});
const setImportJson = (exportJson: IExportJson) => {
  const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(exportJson);
  globalStore.canvasCfg = canvasCfg;
  globalStore.gridCfg = gridCfg;
  globalStore.setGlobalStoreDoneJson(importDoneJson);
  cacheStore.history[0] = importDoneJson;
  return true;
};

const treeRef = ref<InstanceType<typeof ElTreeV2> | null>();
defineExpose({
  setImportJson
});
</script>
<style scoped>
.demo-pagination-block {
  margin-top: 20px;
}
.prefix {
  color: var(--el-color-primary);
  margin-right: 10px;
}
.prefix.is-leaf {
  color: var(--el-color-success);
}

.mt-edit-aside {
  transition: width 0.3s;
}

.vertical-radio-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
</style>