Browse Source

perf(views): 优化组态编辑器界面

1. 作为组态编辑器时,不显示新建,文件名等内容
wangcong 2 tuần trước cách đây
mục cha
commit
45ba97f1c0

+ 30 - 0
src/services/module-type.ts

@@ -0,0 +1,30 @@
+import { VisualModuleType } from "@/views";
+import { computed, ref } from "vue";
+
+const currModuleType = ref<VisualModuleType>();
+
+const isBigScreen = computed(() => {
+  return currModuleType.value === VisualModuleType.BigScreen;
+});
+
+const isModule2D = computed(() => {
+  return currModuleType.value === VisualModuleType.Module2D;
+});
+
+const isHvacModule = computed(() => {
+  return isBigScreen.value || isModule2D.value;
+});
+
+export const useModuleType = () => {
+  const setModuleType = (value: VisualModuleType) => {
+    currModuleType.value = value;
+  };
+
+  return {
+    currModuleType,
+    isBigScreen,
+    isModule2D,
+    isHvacModule,
+    setModuleType,
+  };
+};

+ 8 - 0
src/views/Index.vue

@@ -28,12 +28,20 @@ import { useSelection, SelectionMode } from '@/services/selections';
 import { onMounted, onUnmounted, ref } from "vue";
 import { DeviceItem, IframeMsg } from '@/types';
 import { getVisual2DMsgType, Visual2DMsgType } from '.';
+import { useModuleType } from '@/services/module-type';
+import { useRoute } from 'vue-router';
 
+const route = useRoute();
+const { setModuleType } = useModuleType();
 const currentDevices = ref<DeviceItem[]>([]);
 
 onMounted(()=>{
   selections.mode = SelectionMode.File
 
+  if (route.query.moduleType) {
+    setModuleType(Number(route.query.moduleType))
+  }
+
   window.addEventListener("message", handleMsg);
 
   const msg: IframeMsg = {

+ 3 - 1
src/views/components/FileProps.vue

@@ -3,7 +3,7 @@
     <t-tabs v-model="data.tab">
       <t-tab-panel :value="1" :label="$t('画布')">
         <t-space direction="vertical" size="small" class="panel">
-          <div class="form-item">
+          <div v-if="isBigScreen" class="form-item">
             <label>{{$t('文件名')}}</label>
             <t-input class="w-full" :value="meta2dData.name" @change="changeName($event, 'name')" :placeholder="$t('文件名')"></t-input>
           </div>
@@ -222,6 +222,7 @@ import GlobalStates from './GlobalStates.vue';
 import { getToken  } from '@le5le/auth-token';
 import D2M from 'dxf';
 import { getImgUrl } from '@/services/utils';
+import { useModuleType } from '@/services/module-type';
 const { getEnterprise } = useEnterprise();
 const { meta2dData, setMeta2dData } = useMeta2dData();
 const { extendData, setExtendData } = useExtendData();
@@ -236,6 +237,7 @@ const updataData = { directory: '/大屏/图片/默认' };
 // const { assets } = useAssets();
 
 const { user } = useUser();
+const { isBigScreen } = useModuleType();
 
 const isShow = globalThis.globalStates;
 

+ 4 - 2
src/views/components/Header.vue

@@ -7,7 +7,7 @@
     <t-dropdown :minColumnWidth="200" :maxHeight="560" :delay2="[10, 150]" overlayClassName="header-dropdown" trigger1="click">
       <a> {{$t('文件')}} </a>
       <t-dropdown-menu>
-        <t-dropdown-item @click="newFile">
+        <t-dropdown-item v-if="isBigScreen" @click="newFile">
           <a>{{$t('新建文件')}}</a>
         </t-dropdown-item>
         <t-dropdown-item @click="load(true)">
@@ -247,7 +247,7 @@
     </t-dropdown> -->
 
     <!-- <div style="width: 148px; flex-shrink: 0"></div> -->
-    <input v-model="meta2dData.name" @change="onInputName($event)" />
+    <input v-if="isBigScreen" v-model="meta2dData.name" @change="onInputName($event)" />
 
     <!-- <a :href="enterprise.account" target="_blank">
       <home-icon></home-icon>
@@ -591,7 +591,9 @@ const { meta2dData, setMeta2dData } = useMeta2dData();
 const baseUrl = import.meta.env.BASE_URL || '/';
 // const { assets, getAssets } = useAssets();
 import {useI18n} from "vue-i18n";
+import { useModuleType } from '@/services/module-type';
 
+const { isBigScreen } = useModuleType();
 const { user, signout } = useUser();
 const { setDot, dot } = useDot();
 const { proxy } = getCurrentInstance();

+ 3 - 1
src/views/components/View.vue

@@ -2,7 +2,7 @@
   <div class="meta2d">
     <div class="tools">
       <t-tooltip placement="bottom" :content="$t('新建')">
-        <a @click="newFile">
+        <a v-if="isBigScreen" @click="newFile">
           <!-- <t-icon name="add" @click="newFile" /> -->
           <add-icon  />
         </a>
@@ -908,7 +908,9 @@ import { typeOptions, useDAnchor } from '@/services/common';
 import { upload } from '@/services/file';
 import { getCollectionList } from '@/services/api';
 import { parseSearchToken } from '@le5le/auth-token';
+import { useModuleType } from '@/services/module-type';
 
+const { isBigScreen } = useModuleType();
 const {anchorShow } = useDAnchor();
 const router = useRouter();
 const route = useRoute();

+ 18 - 0
src/views/index.ts

@@ -17,6 +17,24 @@ export const enum Visual2DMsgType {
   ExportImg = 'export-img',
 }
 
+/**
+ * 可视化模板类型
+ */
+export const enum VisualModuleType {
+  /**
+   * 大屏
+   */
+  BigScreen,
+  /**
+   * 2D组态
+   */
+  Module2D,
+  /**
+   * 3D组态
+   */
+  Module3D,
+}
+
 export const getVisual2DMsgType = (type: Visual2DMsgType) => {
   return visual2DMsgPrefix + '-' + type;
 };