feat: 设备数量数据模拟获取;设备概览相关字段更新

.eslintrc.js

@@ -13,6 +13,14 @@ module.exports = {
     'import/no-unresolved': 0,
     'import/extensions': 0,
     'no-plusplus': 0,
+    'no-use-before-define': [
+      'error',
+      {
+        functions: false,
+        classes: true,
+        variables: true,
+      },
+    ],
     'consistent-return': 0,
     'vue/html-self-closing': 'off',
     'no-unused-expressions': 'off',
@@ -21,7 +29,13 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-param-reassign': 'off',
-    'max-len': ['error', { code: 140, tabWidth: 2 }],
+    'max-len': [
+      'error',
+      {
+        code: 140,
+        tabWidth: 2,
+      },
+    ],
     'object-curly-newline': ['error', { multiline: true }],
     'arrow-parens': ['error', 'as-needed'],
     'linebreak-style': 'off',

src/apis/index.js

@@ -12,6 +12,22 @@ export const getToken = userId => http.get(`${users}/userId`, { params: { userId
 // 获取设备列表
 export const getDevices = () => http.get(`${corrosion}/devices`);
 
+// 查设备概览 数据统计
+// export const getDevicesCount = () => http.get(`${corrosion}/devices/count`);
+export const getDevicesCount = () => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        total: 100,
+        online: 10,
+        offline: 90,
+        fault: 10,
+        warning: 5,
+      });
+    }, 100);
+  });
+};
+
 // 添加设备
 export const createDevice = data => http.post(`${corrosion}/devices`, data);
 

src/components/overview/chart-device-count.vue

@@ -3,18 +3,30 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+import { computed, onMounted, ref, watchEffect } from 'vue';
+import { useStore } from 'vuex';
 import { Pie } from '@antv/g2plot';
+import isEmpty from 'lodash/isEmpty';
+import { generateChartData } from 'utils/overview';
 
-const data = [
-  { type: '在线', value: 27 },
-  { type: '故障', value: 25 },
-  { type: '离线', value: 18 },
-  { type: '报警', value: 15 },
-];
+const store = useStore();
+const count = computed(() => store.state.device.count);
+const isMounted = ref(false);
 let piePlot = null;
 
-function render() {
+watchEffect(() => {
+  if (isEmpty(count.value) || !isMounted.value) return;
+  if (!piePlot) {
+    render(count.value);
+  } else {
+    // TODO: 更新图表数据
+    piePlot.destroy();
+    render(count.value);
+  }
+});
+
+function render(rawCount) {
+  const data = generateChartData(rawCount);
   piePlot = new Pie('device-overview-container', {
     legend: false,
     appendPadding: 10,
@@ -30,7 +42,10 @@ function render() {
       style: { textAlign: 'center' },
     },
     statistic: {
-      title: { offsetY: -12, content: '设备总数' },
+      title: {
+        offsetY: -12,
+        content: '设备总数',
+      },
       content: { offsetY: 0 },
     },
     // 添加 中心统计文本 交互
@@ -41,12 +56,24 @@ function render() {
         type: 'pie-statistic-active',
         cfg: {
           start: [
-            { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
-            { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
+            {
+              trigger: 'element:mouseenter',
+              action: 'pie-statistic:change',
+            },
+            {
+              trigger: 'legend-item:mouseenter',
+              action: 'pie-statistic:change',
+            },
           ],
           end: [
-            { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
-            { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
+            {
+              trigger: 'element:mouseleave',
+              action: 'pie-statistic:reset',
+            },
+            {
+              trigger: 'legend-item:mouseleave',
+              action: 'pie-statistic:reset',
+            },
           ],
         },
       },
@@ -56,6 +83,6 @@ function render() {
 }
 
 onMounted(() => {
-  render();
+  isMounted.value = true;
 });
 </script>

src/components/overview/device-table.vue

@@ -1,13 +1,21 @@
 <template>
   <template v-if="devicesAll && devicesAll.data">
-    <el-table :data="devicesAll.data" :max-height="contentHeight" border stripe class="mt-6" style="width: 100%">
+    <el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
       <el-table-column align="center" label="站点名称" min-width="150" prop="address" />
       <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
-      <el-table-column align="center" label="注册时间" min-width="200" prop="installTime" />
-      <el-table-column align="center" label="最近上传时间" min-width="200" prop="runTime" />
-      <el-table-column align="left" header-align="center" label="设备状态" min-width="150" prop="address" />
-      <el-table-column align="left" header-align="center" label="产品类型" min-width="150" prop="area" />
-      <el-table-column align="left" header-align="center" label="协议版本" min-width="150" prop="contact" />
+      <el-table-column align="center" label="注册时间" min-width="200" prop="signupTime" />
+      <el-table-column align="center" label="最近上传时间" min-width="200" prop="lastUploadTime" />
+      <el-table-column align="center" header-align="center" label="设备状态" min-width="150">
+        <template #default="scope">
+          {{ scope.row.status }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" header-align="center" label="产品类型" min-width="150">
+        <template #default="scope">
+          {{ scope.row.type }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" header-align="center" label="协议版本" min-width="150" prop="protocolVersion" />
     </el-table>
 
     <el-pagination

src/routers/index.js

@@ -7,7 +7,7 @@ export const routes = [
     name: 'overview',
     meta: {
       title: '设备概览',
-      icon: 'el-icon-box',
+      icon: 'el-icon-data-board',
     },
     component: () => import('@/views/overview.vue'),
   },

src/store/device.js

@@ -1,6 +1,6 @@
-import { getDevices, getDevicesAll } from 'apis/index';
-
+import { getDevices, getDevicesAll, getDevicesCount } from 'apis';
 import dayjs from 'dayjs';
+import { ElMessage } from 'element-plus';
 
 const user = {
   namespaced: true,
@@ -9,6 +9,13 @@ const user = {
     devices: [], // 站点列表 设备列表简版
     devicesAll: null, // 设备列表完整版
     currentDeviceId: '', // 当前正在编辑的设备deviceId
+    count: {
+      total: 0, // 总设备数量
+      online: 0, // 在线
+      offline: 0, // 离线
+      warning: 0, // 警告
+      fault: 0, // 故障
+    },
   },
 
   getters: {
@@ -37,6 +44,20 @@ const user = {
       }
     },
 
+    /**
+     * 设置设备统计数据信息
+     * @param {object} state
+     * @param {object} count // 服务端返回的对象
+     * @param {number} count.total // 总设备数量
+     * @param {number} count.online // 在线
+     * @param {number} count.offline // 离线
+     * @param {number} count.warning // 报警
+     * @param {number} count.fault // 故障
+     */
+    setDevicesCount(state, count) {
+      state.count = count;
+    },
+
     /**
      * 设置devicesAll的数据
      * @param {*} state
@@ -106,6 +127,17 @@ const user = {
       }
     },
 
+    // 查询设备数量信息
+    async getDevicesCount({ commit }) {
+      try {
+        const data = await getDevicesCount();
+        commit('setDevicesCount', data);
+      } catch (error) {
+        ElMessage.error(error.message || '获取设备统计信息失败');
+        throw new Error(error);
+      }
+    },
+
     // 获取设备列表(站点列表) 完整信息
     async getDevicesAll({ commit }, params) {
       try {

src/store/index.js

@@ -5,7 +5,7 @@ import user from './user';
 
 export default createStore({
   modules: { user, device, statistics },
-  state: { menu: { show: true, collapse: true } },
+  state: { menu: { show: true, collapse: false } },
   getters: {},
   mutations: {
     toggleCollapse(state) {

src/utils/overview.js

@@ -0,0 +1,30 @@
+/**
+ * 生成设备概览 数量数据
+ * @param {object} count
+ * @param {number} count.online 在线数量
+ * @param {number} count.offline 离线数量
+ * @param {number} count.fault 故障数量
+ * @param {number} count.warning 报警数量
+ * @returns {[{type: string, value: number},{type: string, value: number},{type: string, value: number},{type: string, value: number}]}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function generateChartData(count) {
+  return [
+    {
+      type: '在线',
+      value: count.online || 0,
+    },
+    {
+      type: '故障',
+      value: count.fault || 0,
+    },
+    {
+      type: '离线',
+      value: count.offline || 0,
+    },
+    {
+      type: '报警',
+      value: count.warning || 0,
+    },
+  ];
+}

src/views/data-history.vue

@@ -140,7 +140,7 @@ function formatTime(time) {
   </el-row>
 
   <template v-if="data">
-    <el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight">
+    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
       <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
       <el-table-column align="center" label="太阳能电压(V)" min-width="120" prop="solarVoltage" />
       <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
@@ -160,7 +160,7 @@ function formatTime(time) {
           {{ formatTime(+scope.row.time) }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="后台接受时间" min-width="170">
+      <el-table-column align="center" label="后台接收时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.createdAt) }}
         </template>

src/views/data-realtime.vue

@@ -1,5 +1,5 @@
 <template>
-  <SearchBar @search="getData" @refresh="onRefresh" :show-refresh="true" />
+  <SearchBar :show-refresh="true" @refresh="onRefresh" @search="getData" />
 
   <template v-if="data">
     <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
@@ -15,7 +15,7 @@
           {{ formatTime(+scope.row.time) }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="后台接受时间" min-width="170">
+      <el-table-column align="center" label="后台接收时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.createdAt) }}
         </template>

src/views/data-report.vue

@@ -130,7 +130,7 @@ function formatTime(time) {
           {{ formatTime(+scope.row.time) }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="后台接受时间" min-width="170">
+      <el-table-column align="center" label="后台接收时间" min-width="170">
         <template #default="scope">
           {{ formatTime(+scope.row.createdAt) }}
         </template>

src/views/device-create.vue

@@ -102,6 +102,11 @@
     </el-row>
 
     <el-row :gutter="20">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
+        <el-form-item label="维修记录" prop="operationRecord">
+          <el-input v-model="data.operationRecord" type="textarea"></el-input>
+        </el-form-item>
+      </el-col>
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="备注" prop="remark">
           <el-input v-model="data.remark" type="textarea"></el-input>
@@ -144,6 +149,7 @@ const data = reactive({
   simple: '', // 试样
   sim1: '', // sim卡1
   joint: '', // 主站后台联调情况
+  operationRecord: '', // 维修记录
   remark: '', // 备注
 });
 

src/views/device-list.vue

@@ -20,7 +20,8 @@
             <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-col :span="9">维修记录：{{ props.row.operationRecord }}</el-col>
+            <el-col :span="9">备注：{{ props.row.remark }}</el-col>
           </el-row>
         </template>
       </el-table-column>

src/views/overview.vue

@@ -16,4 +16,8 @@
 import ChartDeviceCount from 'components/overview/chart-device-count.vue';
 import ChartDeviceDetail from 'components/overview/chart-device-detail.vue';
 import DeviceTable from 'components/overview/device-table.vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+store.dispatch('device/getDevicesCount'); // 获取设备数量信息
 </script>