feat: menu

src/App.vue

@@ -1,15 +1,20 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import Navbar from 'components/navbar.vue';
 import zhCn from 'element-plus/lib/locale/lang/zh-cn';
 import { ElMessage } from 'element-plus';
+import { routes } from '@/routers/index.js';
 
 const local = zhCn;
 const store = useStore();
 let timer = null;
 
+const routeList = ref(routes);
+
+const menu = computed(() => store.state.menu);
+
 // 验证 获取query中u参数 获取token
 const validateQuery = async () => {
   const route = useRoute();
@@ -44,14 +49,44 @@ getDeviceData();
 
 <template>
   <el-config-provider :locale="local">
-    <Navbar />
-    <div class="p-4">
-      <router-view></router-view>
-    </div>
+    <el-container>
+      <el-header style="padding: 0">
+        <Navbar />
+      </el-header>
+      <el-container>
+        <!-- <el-aside width="180px" v-if="menu.show"> -->
+        <el-aside :width="!menu.collapse ? '180px' : '64px'" v-if="menu.show">
+          <el-menu :default-active="0" class="el-menu-vertical-demo" :collapse="menu.collapse">
+            <el-menu-item :index="index" v-for="(item, index) in routeList" :key="item.name">
+              <i :class="item.meta.icon"></i>
+              <template #title>
+                <router-link :to="item.path">{{ item.meta.title }}</router-link>
+              </template>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
+        <el-main style="padding: 0">
+          <div class="p-4">
+            <router-view></router-view>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
   </el-config-provider>
 </template>
 
 <style>
+html,
+body,
+#app,
+#app > section {
+  height: 100%;
+}
+
+.el-menu {
+  min-height: 100%;
+}
+
 .el-form--label-top .el-form-item__label {
   padding-bottom: 0 !important;
 }

src/components/navbar.vue

@@ -1,3 +1,23 @@
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const toggleCollapse = () => {
+  console.log('Toggle Collapse');
+  store.commit('toggleCollapse');
+};
+const menu = computed(() => store.state.menu);
+</script>
+
 <template>
-  <h1 class="text-lg font-medium py-3 px-6 shadow">{{ $route.meta.title || '智能大气腐蚀检测平台' }}</h1>
+  <h1 class="text-lg font-medium py-3 px-6 shadow">
+    <i
+      class="el-icon-guide mr-2"
+      :class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }"
+      @click="toggleCollapse"
+      v-if="menu.show"
+    ></i>
+    {{ $route.meta.title || '智能大气腐蚀检测平台' }}
+  </h1>
 </template>

src/routers/index.js

@@ -2,49 +2,42 @@ import { createRouter, createWebHistory } from 'vue-router';
 // 还有 createWebHashHistory 和 createMemoryHistory
 
 export const routes = [
-  { path: '/', redirect: '/test' },
   {
     path: '/network-config',
     name: 'network-config',
-    meta: { title: '网络参数配置' },
+    meta: { title: '网络参数配置', icon: 'el-icon-setting' },
     component: () => import('@/views/network-config.vue'),
   },
   {
     path: '/function-config',
     name: 'function-config',
-    meta: { title: '功能参数配置' },
+    meta: { title: '功能参数配置', icon: 'el-icon-set-up' },
     component: () => import('@/views/function-config.vue'),
   },
   {
     path: '/device-create',
     name: 'device-create',
-    meta: { title: '设备添加' },
+    meta: { title: '设备添加', icon: 'el-icon-plus' },
     component: () => import('@/views/device-create.vue'),
   },
   {
     path: '/devices',
     name: 'devices',
-    meta: { title: '设备管理' },
+    meta: { title: '设备管理', icon: 'el-icon-box' },
     component: () => import('@/views/device-list.vue'),
   },
   {
     path: '/data-history',
     name: 'data-history',
-    meta: { title: '历史数据查看' },
+    meta: { title: '历史数据查看', icon: 'el-icon-data-line' },
     component: () => import('@/views/data-history.vue'),
   },
   {
     path: '/months',
     name: 'months',
-    meta: { title: '月累计数据分析' },
+    meta: { title: '月累计数据分析', icon: 'el-icon-data-analysis' },
     component: () => import('@/views/month-data.vue'),
   },
-  {
-    path: '/test',
-    name: 'test',
-    meta: { title: '测试' },
-    component: () => import('@/views/test.vue'),
-  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -1,12 +1,17 @@
 import { createStore } from 'vuex';
 import device from './device';
-import user from './user';
 import statistics from './statistics';
+import user from './user';
 
 export default createStore({
   modules: { user, device, statistics },
-  state: {},
+  state: { menu: { show: true, collapse: false } },
   getters: {},
-  mutations: {},
+  mutations: {
+    toggleCollapse(state) {
+      console.log('1');
+      state.menu.collapse = !state.menu.collapse;
+    },
+  },
   actions: {},
 });

src/views/data-history.vue

@@ -1,36 +1,32 @@
 <script setup>
-import { computed, onMounted, reactive } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import SearchBar from 'components/search-bar-data.vue';
 import { getHistories } from 'apis/index';
 
-const filter = reactive({ search: {}, page: { page: 1, size: 10 } });
-
-const onSearch = payload => {
-  console.log('payload: ', payload);
-  filter.search = { ...payload };
-};
-
+const search = ref({});
+const page = ref({ page: 2, size: 10 });
 let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
 let contentHeight = 600;
-let data = reactive(null);
+const data = ref(null);
 
 // 获取设备完整信息列表
 const getData = async () => {
   try {
     if (token) {
-      const params = { ...filter };
+      const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } };
       console.log('params: ', params);
-      data = await getHistories(params);
-      console.log('data: ', data);
+      const resData = await getHistories(params);
+      data.value = resData.data;
+      page.value = resData.page;
       timer && clearTimeout(timer);
       timer = null;
     } else {
       timer = setTimeout(() => {
         getData();
-      });
+      }, 20);
     }
   } catch (error) {
     console.log('error: ', error);
@@ -45,75 +41,80 @@ onMounted(() => {
   contentHeight = winHeight - 150;
 });
 
-// 当前页码变化
+/**
+ * 监听search信息
+ * @param {object} payload search组件emit的数据
+ */
+const onSearch = payload => {
+  search.value = { ...payload };
+  getData();
+};
+
+/**
+ * 当前页码变化
+ * 更新page 重新获取数据
+ * @param {number} e 当前的页码
+ */
 const onCurrentPageChange = e => {
-  console.log(e);
+  page.value.page = e;
+  getData();
 };
 
-// 每页条数变化
 const onSizeChange = e => {
-  console.log(e);
+  page.value.size = e;
+  getData();
 };
 
 // 下一页
 const onNext = e => {
-  console.log(e);
+  page.value.page = e + 1;
+  getData();
 };
 
 // 上一页
 const onPrev = e => {
-  console.log(e);
+  page.value.page = e - 1;
+  getData();
 };
 </script>
 
 <template>
   <SearchBar @search="onSearch" />
-  <template v-if="data">
-    <el-table :data="data.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
-      <el-table-column type="expand">
-        <template #default="props">
-          <el-row :gutter="20" class="px-6 text-gray-400">
-            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
-            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
-            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
-            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
-            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
-            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
-            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
-            <el-col :span="18">备注：{{ props.row.remark }}</el-col>
-          </el-row>
-        </template>
-      </el-table-column>
-      <el-table-column label="ID" prop="deviceId" width="100" />
-      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
-      <el-table-column label="地点" prop="address" width="150" />
-      <el-table-column label="地区" prop="area" width="120" />
-      <el-table-column label="联系人" prop="contact" width="100" />
-      <el-table-column label="联系电话" prop="phone" width="150" />
-      <el-table-column label="安装时间" prop="installTime" width="200" />
-      <el-table-column label="正式运行时间" prop="runTime" width="200" />
-      <el-table-column fixed="right" label="操作" width="148">
-        <template #default="props">
-          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
-            <template #reference>
-              <el-button type="danger" plain size="mini">删除</el-button>
-            </template>
-          </el-popconfirm>
 
-          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
-        </template>
-      </el-table-column>
+  <template v-if="data">
+    <el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
+      <el-table-column label="设备编号" fixed prop="deviceNo" width="140" />
+      <el-table-column label="ICCID" fixed prop="ICCID" width="100" />
+      <el-table-column label="IMEI" fixed prop="IMEI" width="80" />
+      <el-table-column label="信号强度" prop="signal" width="80" />
+      <el-table-column label="基站编号" prop="stationNo" width="80" />
+      <el-table-column label="版本号" prop="version" width="80" />
+      <el-table-column label="太阳能电压" prop="solarVoltage" width="94" />
+      <el-table-column label="蓄电池电压" prop="batteryVoltage" width="94" />
+      <el-table-column label="机箱温度" prop="deviceTemperature" width="80" />
+      <el-table-column label="机箱湿度" prop="deviceHumidity" width="80" />
+      <el-table-column label="环境温度" prop="environmentTemperature" width="80" />
+      <el-table-column label="环境湿度" prop="environmentHumidity" width="80" />
+      <el-table-column label="SO2" prop="so2" width="50" />
+      <el-table-column label="盐分" prop="salt" width="50" />
+      <el-table-column label="腐流1" prop="corrosion1" width="60" />
+      <el-table-column label="腐流2" prop="corrosion2" width="60" />
+      <el-table-column label="腐流3" prop="corrosion3" width="60" />
+      <el-table-column label="腐流4" prop="corrosion4" width="60" />
     </el-table>
 
     <el-pagination
       background
-      :current-page="data.page.page"
-      :page-size="data.page.size"
+      :current-page="page.page"
+      :page-size="page.size"
       :default-page-size="10"
-      :page-count="data.page.total"
+      :page-count="page.count"
+      layout="total, sizes, prev, pager, next, jumper"
+      :page-sizes="[1, 10, 20, 50, 100]"
       class="my-3 float-right"
-      @size-change="onSizeChange"
+      :total="page.total"
       @current-change="onCurrentPageChange"
+      @size-change="onSizeChange"
       @prev-click="onPrev"
       @next-click="onNext"
     ></el-pagination>

src/views/device-list.vue

@@ -2,7 +2,7 @@
   <SearchBar />
 
   <template v-if="devicesAll && devicesAll.data">
-    <el-table :data="devicesAll.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
+    <el-table :data="devicesAll.data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
       <el-table-column type="expand">
         <template #default="props">
           <el-row :gutter="20" class="px-6 text-gray-400">
@@ -43,7 +43,7 @@
       :current-page="devicesAll.page.page"
       :page-size="devicesAll.page.size"
       :default-page-size="10"
-      :page-count="devicesAll.page.total"
+      :page-count="devicesAll.page.count"
       class="my-3 float-right"
       @size-change="onSizeChange"
       @current-change="onCurrentPageChange"

src/views/test.vue

@@ -5,7 +5,7 @@
         <span>测试</span>
       </div>
     </template>
-    <div class="text item" v-for="item in routeList" :key="item">
+    <div class="text item" v-for="item in routeList" :key="item.name">
       <router-link :to="item.path">
         <el-button type="text">{{ item.name }}</el-button>
       </router-link>