feat: 完成设备信息功能编写以及国际化

.env.development

@@ -1,2 +1,3 @@
 VITE_NODE_ENV= development
-VITE_API_BASE_URL= 'http://localhost:5173/'
+VITE_API_BASE_URL= 'http://localhost:5173/'
+VITE_API_DOWN_URL= 'http://192.168.1.28:5000/'

.env.production

@@ -1,2 +1,3 @@
 VITE_NODE_ENV= production
 VITE_API_BASE_URL= 'http://192.168.1.28:5000/'
+VITE_API_DOWN_URL= 'http://192.168.1.28:5000/'

src/api/dashboard.ts

@@ -21,6 +21,12 @@ export interface Data {
   data: string;
 }
 
+export interface ExportUrl {
+  success: boolean;
+  message: string;
+  code: string;
+  data: string;
+}
 export interface DashboardList {
   success: boolean;
   message: string;
@@ -46,3 +52,7 @@ export async function queryDashboardList(
   const res = await instance.post('/api/Author/GetDeviceList', params);
   return res.data;
 }
+export async function exportDashboardList(params: object): Promise<ExportUrl> {
+  const res = await instance.post('/api/Author/Export', params);
+  return res.data;
+}

src/config/settings.json

@@ -6,7 +6,7 @@
   "topMenu": false,
   "hideMenu": false,
   "menuCollapse": false,
-  "footer": true,
+  "footer": false,
   "themeColor": "#165DFF",
   "menuWidth": 200,
   "globalSettings": false,

src/locale/en-US.ts

@@ -15,12 +15,14 @@ export default {
   'menu.dashboard': 'Dashboard',
   'menu.server.dashboard': 'Dashboard-Server',
   'menu.server.workplace': 'Workplace-Server',
-  'menu.list': 'List',
   'menu.exception': 'Exception',
   'menu.user': 'User Center',
   'menu.arcoWebsite': 'Arco Design',
-  'navbar.docs': 'Docs',
   'navbar.action.locale': 'Switch to English',
+  'searchTable.form.search': 'Search',
+  'searchTable.form.reset': 'Reset',
+  'searchTable.form.down': 'Down',
+  'searchTable.table.number': 'No.',
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

src/locale/zh-CN.ts

@@ -14,12 +14,14 @@ export default {
   'menu.dashboard': '仪表盘',
   'menu.server.dashboard': '仪表盘-服务端',
   'menu.server.workplace': '工作台-服务端',
-  'menu.list': '列表页',
   'menu.exception': '异常页',
   'menu.user': '个人中心',
   'menu.arcoWebsite': 'Arco Design',
-  'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
+  'searchTable.form.search': '查询',
+  'searchTable.form.reset': '重置',
+  'searchTable.form.down': '下载',
+  'searchTable.table.number': '序号',
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

src/utils/const.ts

@@ -0,0 +1,8 @@
+export const downLoadFun = (url: string) => {
+  const baseUrl = import.meta.env.VITE_API_DOWN_URL;
+  if (baseUrl) {
+    window.open(baseUrl + url, '_blank');
+  } else {
+    console.log('请配置VITE_API_DOWN_URL');
+  }
+};

src/views/dashboard/workplace/index.vue

@@ -13,21 +13,25 @@
               <a-col :span="6">
                 <a-form-item
                   field="address"
-                  label="IP地址"
+                  :label="$t('dashboard.form.address')"
                   label-col-flex="50px"
                 >
                   <a-input
                     v-model="formModel.address"
-                    placeholder="IP地址"
+                    :placeholder="$t('dashboard.form.address')"
                     allow-clear
                   />
                 </a-form-item>
               </a-col>
               <a-col :span="6">
-                <a-form-item field="name" label="名称" label-col-flex="50px">
+                <a-form-item
+                  field="name"
+                  :label="$t('dashboard.form.name')"
+                  label-col-flex="50px"
+                >
                   <a-input
                     v-model="formModel.name"
-                    placeholder="名称"
+                    :placeholder="$t('dashboard.form.name')"
                     allow-clear
                   />
                 </a-form-item>
@@ -35,12 +39,12 @@
               <a-col :span="6">
                 <a-form-item
                   field="entityType"
-                  label="设备类型"
+                  :label="$t('dashboard.form.entityType')"
                   label-col-flex="60px"
                 >
                   <a-select
                     v-model="formModel.entityType"
-                    placeholder="设备类型"
+                    :placeholder="$t('dashboard.form.entityType')"
                     allow-clear
                   >
                     <a-option
@@ -54,12 +58,12 @@
               <a-col :span="6">
                 <a-form-item
                   field="statusTypeList"
-                  label="状态"
+                  :label="$t('dashboard.form.status')"
                   label-col-flex="60px"
                 >
                   <a-select
                     v-model="formModel.status"
-                    placeholder="状态"
+                    :placeholder="$t('dashboard.form.status')"
                     allow-clear
                   >
                     <a-option
@@ -71,7 +75,10 @@
                 </a-form-item>
               </a-col>
               <a-col :span="6">
-                <a-form-item label="时间范围" label-col-flex="60px">
+                <a-form-item
+                  :label="$t('dashboard.form.timeRange')"
+                  label-col-flex="60px"
+                >
                   <a-range-picker v-model="formModel.time" />
                 </a-form-item>
               </a-col>
@@ -80,7 +87,7 @@
         </a-col>
         <a-divider :style="{ height: '84px' }" direction="vertical" />
         <a-col :flex="'86px'">
-          <a-space direction="vertical" :size="18">
+          <a-space :size="10">
             <a-button type="primary" @click="search">
               <template #icon>
                 <icon-search />
@@ -94,6 +101,14 @@
               {{ $t('searchTable.form.reset') }}
             </a-button>
           </a-space>
+          <a-space class="right-side">
+            <a-button type="primary" @click="downloadExcel">
+              <template #icon>
+                <icon-download />
+              </template>
+              {{ $t('searchTable.form.down') }}
+            </a-button>
+          </a-space>
         </a-col>
       </a-row>
       <a-table
@@ -105,6 +120,7 @@
         :data="renderData"
         :bordered="false"
         :size="size"
+        :scrollbar="true"
         @page-change="onPageChange"
         @row-dblclick="handleClick"
       >
@@ -152,8 +168,15 @@
 </template>
 
 <script lang="ts" setup name="Dashboard">
-import { ref, reactive, shallowRef, h, getCurrentInstance } from 'vue';
-import { queryDashboardList } from '@/api/dashboard';
+import {
+  ref,
+  reactive,
+  shallowRef,
+  h,
+  getCurrentInstance,
+  computed,
+} from 'vue';
+import { queryDashboardList, exportDashboardList } from '@/api/dashboard';
 import type { DashboardParams, Data } from '@/api/dashboard';
 import { SizeProps, Pagination } from '@/types/global';
 import BTag from '@/components/business/b-tag/index.vue';
@@ -162,14 +185,16 @@ import useLoading from '@/hooks/loading';
 import { useI18n } from 'vue-i18n';
 import { entityTypeList, statusTypeList, DeviceInfo } from './conf';
 import dayjs from 'dayjs';
+import { downLoadFun } from '@/utils/const';
 
 const { t } = useI18n();
 
 const { loading, setLoading } = useLoading(true);
-
-const cloneColumns = ref<TableColumnData[]>([
+const cloneColumns = computed(() => [
+  // ])
+  // const cloneColumns = ref<TableColumnData[]>([
   {
-    title: '序号',
+    title: t('searchTable.table.number'),
     dataIndex: 'index',
     slotName: 'index',
     ellipsis: true,
@@ -177,30 +202,29 @@ const cloneColumns = ref<TableColumnData[]>([
     width: 60,
   },
   {
-    title: '设备类型',
+    title: t('dashboard.form.entityType'),
     dataIndex: 'entityType',
     slotName: 'entityType',
   },
   {
-    title: '名称',
+    title: t('dashboard.form.name'),
     dataIndex: 'name',
     slotName: 'name',
   },
   {
-    title: 'IP地址',
+    title: t('dashboard.form.address'),
     dataIndex: 'address',
     ellipsis: true,
     tooltip: true,
   },
-
   {
-    title: '状态',
+    title: t('dashboard.form.status'),
     dataIndex: 'status',
     slotName: 'status',
     width: 120,
   },
   {
-    title: '修改时间',
+    title: t('dashboard.table.time'),
     dataIndex: 'time',
     slotName: 'time',
     ellipsis: true,
@@ -237,7 +261,7 @@ function searchTable() {
   setLoading(true);
   const [startTime, endTime] = formModel.value.time;
   formModel.value.startTime = startTime ? startTime : null;
-  formModel.value.endTime = endTime ? startTime : null;
+  formModel.value.endTime = endTime ? endTime : null;
   queryDashboardList(formModel.value)
     .then(res => {
       console.log('res', res);
@@ -257,13 +281,29 @@ const search = () => {
 const reset = () => {
   formModel.value = generateFormModel();
 };
+const downloadExcel = () => {
+  setLoading(true);
+  const [startTime, endTime] = formModel.value.time;
+  formModel.value.startTime = startTime ? startTime : null;
+  formModel.value.endTime = endTime ? endTime : null;
+  exportDashboardList(formModel.value)
+    .then(res => {
+      if (!res.success) {
+        return;
+      }
+      const url = res.data;
+      downLoadFun(url);
+    })
+    .finally(() => {
+      setLoading(false);
+    });
+};
 const onPageChange = (current: number) => {
   formModel.value.pageIndex = current;
   searchTable();
 };
 
 const handleClick = (value: Data) => {
-  console.log('e', value);
   if (value.data) {
     const obj = JSON.parse(value.data);
     for (const key in obj) {
@@ -278,9 +318,6 @@ const handleClick = (value: Data) => {
       this_.$message.warning('No device information available at the moment');
   }
 };
-const handleOk = () => {
-  visible.value = false;
-};
 const handleCancel = () => {
   visible.value = false;
 };
@@ -292,10 +329,14 @@ const handleCancel = () => {
 
   .general-card {
     padding-top: 20px;
+
+    .right-side {
+      margin-top: 20px;
+    }
   }
 
   .table-list {
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 </style>

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

@@ -1,6 +1,10 @@
 export default {
-  'menu.dashboard.workplace': 'Workplace',
+  'menu.dashboard.workplace': 'DeviceInfo',
   'workplace.welcome': 'Welcome!',
-  'searchTable.form.search': 'Search',
-  'searchTable.form.reset': 'Reset',
+  'dashboard.form.address': 'Address',
+  'dashboard.form.name': 'Name',
+  'dashboard.form.entityType': 'EntityType',
+  'dashboard.form.status': 'Status',
+  'dashboard.form.timeRange': 'TimeRange',
+  'dashboard.table.time': 'Time',
 };

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

@@ -1,6 +1,10 @@
 export default {
-  'menu.dashboard.workplace': '工作台',
+  'menu.dashboard.workplace': '设备信息',
   'workplace.welcome': '欢迎回来！',
-  'searchTable.form.search': '查询',
-  'searchTable.form.reset': '重置',
+  'dashboard.form.address': 'IP地址',
+  'dashboard.form.name': '名称',
+  'dashboard.form.entityType': '设备类型',
+  'dashboard.form.status': '状态',
+  'dashboard.form.timeRange': '时间范围',
+  'dashboard.table.time': '时间',
 };

src/views/user/setting/index.vue

@@ -6,7 +6,7 @@
       </a-col>
     </a-row>
     <a-row class="wrapper">
-      <a-col :span="24"> </a-col>
+      <a-col :span="24">{{ $t('workplace.welcome') }} </a-col>
     </a-row>
   </div>
 </template>
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .container {
-  padding: 0 10px 20px;
+  padding: 10px 10px 20px;
 }
 
 .wrapper {