perf: 优化功能

src/api/dashboard.ts

@@ -19,6 +19,7 @@ export interface DataList {
   status?: number;
   time?: string;
   data?: string;
+  routeInfoId?: number | null;
 }
 
 export interface ExportUrl {

src/assets/style/global.less

@@ -133,7 +133,7 @@ body {
 }
 
 .arco-modal {
-  background-color: var(--color-theme-2);
+  background-color: var(--color-theme-2) !important;
 
   .arco-modal-header {
     border-bottom-color: var(--color-border);

src/components/menu/nav-menu.vue

@@ -14,7 +14,7 @@
         @mouseenter="handleMouseEnter(item)"
         @mouseleave="handleMouseLeave"
       >
-        <span>{{ item.name }}</span>
+        <span>{{ t(item.meta?.locale as string) }}</span>
       </li>
     </ul>
   </div>
@@ -23,6 +23,9 @@
 import useMenuTree from './use-menu-tree';
 import { defineComponent, ref, h, compile, computed, watch } from 'vue';
 import { useRoute, useRouter, RouteRecordNormalized } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
 interface NavMenuEmits {
   (e: 'menuHover', val: RouteRecordNormalized): void;
 }

src/components/menu/nav-second-menu.vue

@@ -9,7 +9,7 @@
         :class="['menu-item', { active: item.name === route.name }]"
         v-if="!item.meta?.hideInMenu"
       >
-        <span>{{ item.name }}</span>
+        <span>{{ t(item.meta?.locale as string) }}</span>
       </div>
     </li>
   </ul>
@@ -22,12 +22,15 @@ import {
   RouteRecordNormalized,
   RouteRecordRaw,
 } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
 interface NavSecondMenuEmits {
   (e: 'internalHoveredItemFun', val: RouteRecordNormalized): void;
 }
 interface NavSecondMenuProps {
   hoveredMenuItem: RouteRecordNormalized;
 }
+const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const menuList = computed(() => route.matched[0].children);
@@ -58,6 +61,7 @@ const displayedMenuList = computed(() => {
   // 最后使用默认菜单
   return menuList.value || [];
 });
+console.log('menuList', displayedMenuList);
 // 处理自身鼠标进入事件
 const handleSelfMouseEnter = () => {
   mouseInSelf = true;

src/locale/en-US.ts

@@ -19,11 +19,12 @@ export default {
   'menu.exception': 'Exception',
   'menu.system': 'System',
   'menu.user': 'User Center',
+  'menu.home': 'Home',
   'menu.arcoWebsite': 'Arco Design',
   'navbar.action.locale': 'Switch to English',
   'searchTable.form.search': 'Search',
   'searchTable.form.reset': 'Reset',
-  'searchTable.form.down': 'Down',
+  'searchTable.form.export': 'Export',
   'searchTable.form.add': 'Add',
   'searchTable.form.delete': 'Delete',
   'searchTable.form.edit': 'Edit',

src/locale/zh-CN.ts

@@ -19,11 +19,12 @@ export default {
   'menu.exception': '异常页',
   'menu.system': '系统设置',
   'menu.user': '个人中心',
+  'menu.home': '首页',
   'menu.arcoWebsite': 'Arco Design',
   'navbar.action.locale': '切换为中文',
   'searchTable.form.search': '查询',
   'searchTable.form.reset': '重置',
-  'searchTable.form.down': '下载',
+  'searchTable.form.export': '导出',
   'searchTable.form.edit': '编辑',
   'searchTable.form.delete': '删除',
   'searchTable.form.add': '新增',

src/router/constants.ts

@@ -9,10 +9,10 @@ export const NOT_FOUND = {
 
 export const REDIRECT_ROUTE_NAME = 'Redirect';
 
-export const DEFAULT_ROUTE_NAME = 'Workplace';
+export const DEFAULT_ROUTE_NAME = 'HomePage';
 
 export const DEFAULT_ROUTE = {
-  title: 'menu.dashboard.workplace',
+  title: 'menu.dashboard.status',
   name: DEFAULT_ROUTE_NAME,
-  fullPath: '/dashboard/workplace',
+  fullPath: '/home/index',
 };

src/router/routes/modules/dashboard.ts

@@ -13,11 +13,11 @@ const DASHBOARD: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: 'workplace/:station',
-      name: 'Workplace',
+      path: 'device-status',
+      name: 'DeviceStatus',
       component: () => import('@/views/dashboard/workplace/index.vue'),
       meta: {
-        locale: 'menu.dashboard.workplace',
+        locale: 'menu.dashboard.status',
         requiresAuth: true,
         roles: ['*'],
       },

src/router/routes/modules/home.ts

@@ -17,7 +17,7 @@ const HOME: AppRouteRecordRaw = {
       name: 'HomePage',
       component: () => import('@/views/home/index.vue'),
       meta: {
-        locale: 'menu.home.dictItem',
+        locale: 'menu.home.index',
         requiresAuth: true,
         hideInMenu: true,
         roles: ['*'],

src/utils/const.ts

@@ -37,3 +37,8 @@ export const getRules = (t: (key: string) => string) => ({
     },
   ],
 });
+export interface StationKey {
+  id: number | null;
+  station: string | null;
+}
+export const STATIONKEY = 'smms-station';

src/views/dashboard/manage/edit.vue

@@ -59,6 +59,8 @@ import type { AdditionalProp } from '@/api/dict';
 import { useI18n } from 'vue-i18n';
 import { getRules } from '@/utils/const';
 import useDictList from '@/hooks/dict-list';
+import { useStorage } from '@vueuse/core';
+import { STATIONKEY, StationKey } from '@/utils/const';
 
 const formRef = ref();
 const { t } = useI18n();
@@ -80,6 +82,10 @@ const props = withDefaults(defineProps<EditDialogProps>(), {
 const emit = defineEmits<EditDialogEmits>();
 const visible = shallowRef<boolean>(false);
 const deviceTypeList = ref<AdditionalProp[]>([] as AdditionalProp[]);
+const obj = useStorage<StationKey>(STATIONKEY, {
+  id: null,
+  station: null,
+});
 watch(
   () => props.modelValue,
   value => {
@@ -97,6 +103,7 @@ const formModel = () => {
     name: '',
     address: '',
     deviceType: null,
+    routeInfoId: null,
   } as DataList;
 };
 const form = ref<DataList>(formModel());
@@ -104,6 +111,7 @@ const form = ref<DataList>(formModel());
 const handleBeforeOk = (done: (closed: boolean) => void) => {
   formRef.value.validate().then((data: DataList['data']) => {
     if (!data) {
+      form.value.routeInfoId = obj.value.id;
       saveDeviceDetails(form.value)
         .then(res => {
           if (res.success) {

src/views/dashboard/manage/index.vue

@@ -225,6 +225,8 @@ import { downLoadFun, DeviceInfo } from '@/utils/const';
 import { Modal } from '@arco-design/web-vue';
 import type { AdditionalProp } from '@/api/dict';
 import useDictList from '@/hooks/dict-list';
+import { useStorage } from '@vueuse/core';
+import { STATIONKEY, StationKey } from '@/utils/const';
 
 const { t } = useI18n();
 
@@ -309,7 +311,10 @@ useDictList(['DeviceType', 'DeviceStatus']).then(res => {
   deviceTypeList.value.push(...res['DeviceType']);
   deviceStatusList.value.push(...res['DeviceStatus']);
 });
-
+const obj = useStorage<StationKey>(STATIONKEY, {
+  id: null,
+  station: null,
+});
 function searchTable() {
   // setLoading(true);
   const [startTime, endTime] = formModel.value.time
@@ -317,6 +322,7 @@ function searchTable() {
     : ['', ''];
   formModel.value.startTime = startTime ? startTime : null;
   formModel.value.endTime = endTime ? endTime : null;
+  formModel.value.station = obj.value.station;
   queryDashboardList(formModel.value)
     .then(res => {
       pagination.current = formModel.value.pageIndex;

src/views/dashboard/workplace/index.vue

@@ -108,7 +108,7 @@
               <template #icon>
                 <icon-download />
               </template>
-              {{ t('searchTable.form.down') }}
+              {{ t('searchTable.form.export') }}
             </a-button>
           </a-space>
         </a-col>
@@ -186,6 +186,8 @@ import { downLoadFun } from '@/utils/const';
 import { useIntervalFn } from '@vueuse/core';
 import DeviceInfoDialog from './device-info/index.vue';
 import useDictList from '@/hooks/dict-list';
+import { useStorage } from '@vueuse/core';
+import { STATIONKEY, StationKey } from '@/utils/const';
 
 const { t } = useI18n();
 const {
@@ -262,6 +264,10 @@ const deviceTypeList = ref<AdditionalProp[]>([] as AdditionalProp[]);
 const deviceStatusList = ref<AdditionalProp[]>([] as AdditionalProp[]);
 const deviceId = shallowRef<number>(0);
 const deviceType = shallowRef<number | null>(1);
+const obj = useStorage<StationKey>(STATIONKEY, {
+  id: null,
+  station: null,
+});
 useDictList(['DeviceType', 'DeviceStatus']).then(res => {
   deviceTypeList.value.push(...res['DeviceType']);
   deviceStatusList.value.push(...res['DeviceStatus']);
@@ -273,8 +279,8 @@ function searchTable() {
     : ['', ''];
   formModel.value.startTime = startTime ? startTime : null;
   formModel.value.endTime = endTime ? endTime : null;
-  formModel.value.station =
-    station && station.toString() !== 'all' ? (station as string) : null;
+  formModel.value.station = obj.value.station;
+
   queryDashboardList(formModel.value)
     .then(res => {
       pagination.current = formModel.value.pageIndex;

src/views/dashboard/workplace/locale/en-US.ts

@@ -1,7 +1,6 @@
 export default {
-  'menu.dashboard.workplace': 'Device Status',
+  'menu.dashboard.status': 'Device Status',
   'menu.dashboard.manage': 'Device Manage',
-  'workplace.welcome': 'Welcome!',
   'dashboard.dialog.title': 'Device Information',
   'dashboard.form.address': 'Location',
   'dashboard.form.name': 'Name',

src/views/dashboard/workplace/locale/zh-CN.ts

@@ -1,7 +1,6 @@
 export default {
-  'menu.dashboard.workplace': '设备状态',
+  'menu.dashboard.status': '设备状态',
   'menu.dashboard.manage': '设备管理',
-  'workplace.welcome': '欢迎回来！',
   'dashboard.dialog.title': '设备信息',
   'dashboard.form.address': 'IP地址',
   'dashboard.form.name': '名称',

src/views/home/list/index.vue

@@ -36,15 +36,7 @@
       }}</span>
     </template>
     <template #name="{ record }">
-      <div
-        class="hover-link"
-        @click="
-          router.push({
-            name: 'Workplace',
-            params: { station: record.station },
-          })
-        "
-      >
+      <div class="hover-link" @click="handleToDevice(record)">
         {{ record.name }}
       </div>
     </template>
@@ -73,6 +65,8 @@ import { DeviceInfo } from '@/utils/const';
 import type { AdditionalProp } from '@/api/dict';
 import useDictList from '@/hooks/dict-list';
 import router from '@/router';
+import { useStorage } from '@vueuse/core';
+import { STATIONKEY, StationKey } from '@/utils/const';
 
 interface ListPageProps {
   data: AlarmTotalRes;
@@ -199,6 +193,15 @@ const handleClick = (value: DataList) => {
       this_.$message.warning('No device information available at the moment');
   }
 };
+const obj = useStorage<StationKey>(STATIONKEY, {
+  id: null,
+  station: null,
+});
+const handleToDevice = (folder: Data) => {
+  obj.value.id = folder.id;
+  obj.value.station = folder.station;
+  router.push({ name: 'DeviceStatus' });
+};
 </script>
 
 <style lang="less" scoped>

src/views/home/tree/index.vue

@@ -44,6 +44,9 @@ import useLoading from '@/hooks/loading';
 // 导入 SVG 作为 Vue 组件
 import FolderIcon from '@/assets/icon/folder.svg';
 import router from '@/router';
+import { useStorage } from '@vueuse/core';
+import { STATIONKEY, StationKey } from '@/utils/const';
+
 const { loading, setLoading } = useLoading(true);
 interface ListPageProps {
   data: AlarmTotalRes;
@@ -56,6 +59,7 @@ watch(
   () => props.data,
   () => {
     treeData.value = props.data.tree;
+    console.log('ddd', treeData.value);
     treeData.value.forEach(item => {
       item.expanded = true;
     });
@@ -68,9 +72,15 @@ const toggleFolder = (folderName: number) => {
     treeData.value[folderName].expanded = !treeData.value[folderName].expanded;
   }
 };
+const obj = useStorage<StationKey>(STATIONKEY, {
+  id: null,
+  station: null,
+});
 
 const handleChild = (folder: Tree) => {
-  router.push({ name: 'Workplace', params: { station: folder.name } });
+  obj.value.id = folder.id;
+  obj.value.station = folder.name;
+  router.push({ name: 'DeviceStatus' });
 };
 </script>
 <style lang="less" scoped>

src/views/login/components/login-form.vue

@@ -106,7 +106,7 @@ const handleSubmit = async ({
             await router.push(decodedPath);
           } catch (error) {
             await router.push({
-              name: 'Workplace',
+              name: 'HomePage',
               query: {
                 ...othersQuery,
               },
@@ -114,7 +114,7 @@ const handleSubmit = async ({
           }
         } else {
           await router.push({
-            name: 'Workplace',
+            name: 'HomePage',
             query: {
               ...othersQuery,
             },

src/views/not-found/index.vue

@@ -8,23 +8,23 @@
 </template>
 
 <script lang="ts" setup>
-  import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
-  const router = useRouter();
-  const back = () => {
-    // warning： Go to the node that has the permission
-    router.push({ name: 'Workplace' });
-  };
+const router = useRouter();
+const back = () => {
+  // warning： Go to the node that has the permission
+  router.push({ name: 'HomePage' });
+};
 </script>
 
 <style scoped lang="less">
-  .content {
-    // padding-top: 100px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -121px;
-    margin-left: -95px;
-    text-align: center;
-  }
+.content {
+  // padding-top: 100px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -121px;
+  margin-left: -95px;
+  text-align: center;
+}
 </style>