Merge branch 'master' of dd.tall.wiki:ccsens_fe/corrosion

src/routers/index.js

@@ -29,27 +29,39 @@ export const routes = [
   {
     path: '/data-history',
     name: 'data-history',
-    meta: { title: '历史数据查看', icon: 'el-icon-data-line' },
+    meta: { title: '历史数据查看', icon: 'el-icon-document-copy' },
     component: () => import('@/views/data-history.vue'),
   },
-  {
-    path: '/statistical-realtime',
-    name: 'statistical-realtime',
-    meta: { title: '实时数据统计' },
-    component: () => import('@/views/statistical-realtime.vue'),
-  },
   {
     path: '/statistical-history',
     name: 'statistical-history',
-    meta: { title: '历史数据统计' },
+    meta: { title: '历史数据统计', icon: 'el-icon-data-line' },
     component: () => import('@/views/statistical-history.vue'),
   },
+  {
+    path: '/statistical-realtime',
+    name: 'statistical-realtime',
+    meta: { title: '实时数据统计', icon: 'el-icon-time' },
+    component: () => import('@/views/statistical-realtime.vue'),
+  },
   {
     path: '/months',
     name: 'months',
     meta: { title: '月累计数据分析', icon: 'el-icon-data-analysis' },
     component: () => import('@/views/month-data.vue'),
   },
+  {
+    path: '/communication-log',
+    name: 'communication-log',
+    meta: { title: '通讯日志', icon: 'el-icon-phone-outline' },
+    component: () => import('@/views/communication-log.vue'),
+  },
+  {
+    path: '/access-log',
+    name: 'access-log',
+    meta: { title: '访问日志', icon: 'el-icon-message' },
+    component: () => import('@/views/access-log.vue'),
+  },
 ];
 
 const router = createRouter({

src/views/access-log.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-row :gutter="24" class="flex flex-column">
+    <el-col :xs="24" :md="12" v-for="(list, index) in lists" :key="index">
+      <el-card class="box-card mb-3">
+        <div class="flex flex-column">
+          <el-avatar icon="el-icon-user-solid" :size="46" :src="circleUrl"></el-avatar>
+          <div class="ml-4 flex-1 flex-col">
+            <span class="font-bold">
+              {{ list.name }}
+            </span>
+            <div class="flex flex-col mt-5 text-sm text-gray-400">
+              <span class="mb-1">{{ list.operation }}</span>
+              <span>{{ list.time }}</span>
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const circleUrl = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
+const lists = ref([
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+  {
+    name: '管理员01',
+    operation: '管理员01',
+    time: '2021年10月19日',
+  },
+]);
+</script>

src/views/communication-log.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>通讯日志</div>
+</template>
+
+<script setup></script>

src/views/statistical-history.vue

@@ -1,40 +1,43 @@
 <template>
-  <DataSearchBar @getDate="getDate" />
+  <SearchBar @search="getDate" />
   <HistoryData ref="childRef" class="mt-4" />
 </template>
 
 <script setup>
-import DataSearchBar from 'components/data-search-bar.vue';
+import SearchBar from 'components/search-bar-data.vue';
 import HistoryData from 'components/history-data.vue';
 import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
+import { getHistories } from 'apis/index';
 
 const childRef = ref(null);
 
 let timer = null;
+const page = ref({ page: 2, size: 10 });
+const data = ref(null);
+const search = ref({});
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
-const realtimeData = computed(() => store.state.statistics.realtimeData);
 
 // 实时数据统计
-const getDate = async options => {
+const getDate = async () => {
+  try {
     if (token) {
-    const params = {
+      const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } };
-      deviceId: options && options.deviceId ? options.deviceId : '', // 站点 设备id
+      const resData = await getHistories(params);
-      date: options && options.date && options.date.length ? options.date : [], // 年月时间段
+      data.value = resData.data;
-      sort: 1, // 1 -> 按时间正序 -1->按时间倒序
+      page.value = resData.page;
-      page: 1, // 第几页
-      size: 10, // 每页多少条
-    };
-    await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);
       timer = null;
-    childRef.value.changeDate(realtimeData.value);
+      childRef.value.changeDate(data.value);
     } else {
       timer = setTimeout(() => {
         getDate();
       });
     }
+  } catch (error) {
+    console.log('error: ', error);
+  }
 };
 
 getDate();