更新

src/App.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div id="app" class="bg-gray-50 text-slate-700 !dark:text-slate-500 dark:bg-slate-800">
-    id="app"
-    class="bg-gray-50 text-slate-700 !dark:text-slate-500 dark:bg-slate-800"
-  >
     <el-config-provider :locale="zhCn">
       <router-view />
       <Application />

src/api/equipment/particulars.js

@@ -0,0 +1,9 @@
+import service from '@/utils/request'
+
+export const getDeviceDetailsListByPage = (data) => {
+  return service({
+    url: '/device/getDeviceDetailsListByPage',
+    method: 'post',
+    data: data
+  })
+}

src/pathInfo.json

@@ -13,6 +13,7 @@
   "/src/view/dashboard/index.vue": "Dashboard",
   "/src/view/equipment/gateway/index.vue": "Index",
   "/src/view/equipment/list/index.vue": "Index",
+  "/src/view/equipment/particulars/index.vue": "Index",
   "/src/view/error/index.vue": "Error",
   "/src/view/error/reload.vue": "Reload",
   "/src/view/example/breakpoint/breakpoint.vue": "BreakPoint",

src/pinia/modules/app.js

@@ -16,7 +16,7 @@ export const useAppStore = defineStore('app', () => {
     layout_side_width: 256,
     layout_side_collapsed_width: 80,
     layout_side_item_height: 48,
-    show_watermark: true,
+    show_watermark: false,
     side_mode: 'normal',
     // 页面过渡动画配置
     transition_type: 'slide'

src/pinia/modules/router.js

@@ -4,8 +4,8 @@ import { asyncMenu } from '@/api/menu'
 import { defineStore } from 'pinia'
 import { ref, watchEffect } from 'vue'
 import pathInfo from '@/pathInfo.json'
-import {useRoute} from "vue-router";
+import { useRoute } from 'vue-router'
-import {config} from "@/core/config.js";
+import { config } from '@/core/config.js'
 
 const notLayoutRouterArr = []
 const keepAliveRoutersArr = []
@@ -34,10 +34,7 @@ const KeepAliveFilter = (routes) => {
   routes &&
     routes.forEach((item) => {
       // 子菜单中有 keep-alive 的，父菜单也必须 keep-alive，否则无效。这里将子菜单中有 keep-alive 的父菜单也加入。
-      if (
+      if ((item.children && item.children.some((ch) => ch.meta.keepAlive)) || item.meta.keepAlive) {
-        (item.children && item.children.some((ch) => ch.meta.keepAlive)) ||
-        item.meta.keepAlive
-      ) {
         const path = item.meta.path
         keepAliveRoutersArr.push(pathInfo[path])
         nameMap[item.name] = pathInfo[path]
@@ -53,7 +50,7 @@ export const useRouterStore = defineStore('router', () => {
   const asyncRouterFlag = ref(0)
   const setKeepAliveRouters = (history) => {
     const keepArrTemp = []
-    
+
     // 1. 首先添加原有的keepAlive配置
     keepArrTemp.push(...keepAliveRoutersArr)
     if (config.KeepAliveTabs) {
@@ -67,7 +64,7 @@ export const useRouterStore = defineStore('router', () => {
             keepArrTemp.push(componentName)
           }
         }
-        
+
         // 3. 如果子路由在tabs中打开，父路由也需要keepAlive
         if (nameMap[item.name]) {
           keepArrTemp.push(nameMap[item.name])
@@ -77,7 +74,6 @@ export const useRouterStore = defineStore('router', () => {
     keepAliveRouters.value = Array.from(new Set(keepArrTemp))
   }
 
-
   const route = useRoute()
 
   emitter.on('setKeepAlive', setKeepAliveRouters)
@@ -104,29 +100,29 @@ export const useRouterStore = defineStore('router', () => {
 
   const findTopActive = (menuMap, routeName) => {
     for (let topName in menuMap) {
-      const topItem = menuMap[topName];
+      const topItem = menuMap[topName]
-      if (topItem.children?.some(item => item.name === routeName)) {
+      if (topItem.children?.some((item) => item.name === routeName)) {
-        return topName;
+        return topName
       }
-      const foundName = findTopActive(topItem.children || {}, routeName);
+      const foundName = findTopActive(topItem.children || {}, routeName)
       if (foundName) {
-        return topName;
+        return topName
       }
     }
-    return null;
+    return null
-  };
+  }
 
   watchEffect(() => {
     let topActive = sessionStorage.getItem('topActive')
     // 初始化菜单内容，防止重复添加
-    topMenu.value = [];
+    topMenu.value = []
     asyncRouters.value[0]?.children.forEach((item) => {
       if (item.hidden) return
       menuMap[item.name] = item
       topMenu.value.push({ ...item, children: [] })
     })
     if (!topActive || topActive === 'undefined' || topActive === 'null') {
-      topActive = findTopActive(menuMap, route.name);
+      topActive = findTopActive(menuMap, route.name)
     }
     setLeftMenu(topActive)
   })
@@ -164,7 +160,7 @@ export const useRouterStore = defineStore('router', () => {
     if (notLayoutRouterArr.length !== 0) {
       baseRouter.push(...notLayoutRouterArr)
     }
-    console.log('baseRouter', baseRouter)
+    // console.log('baseRouter', baseRouter)
     asyncRouterHandle(baseRouter)
     KeepAliveFilter(asyncRouter)
     asyncRouters.value = baseRouter

src/view/equipment/list/index.vue

@@ -3,11 +3,11 @@
     <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="用户名">
+        <el-form-item label="设备状态">
-          <el-input v-model="searchInfo.username" placeholder="设备ID" />
+          <el-select v-model="searchInfo.deviceStatus" placeholder="请选择">
-        </el-form-item>
+            <el-option label="合闸" :value="1" />
-        <el-form-item label="昵称">
+            <el-option label="分闸" :value="0" />
-          <el-input v-model="searchInfo.nickname" placeholder="设备状态" />
+          </el-select>
         </el-form-item>
 
         <el-form-item>
@@ -26,32 +26,49 @@
             <CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
           </template>
         </el-table-column> -->
-        <el-table-column align="left" label="设备ID" prop="cbId" />
+        <el-table-column align="left" label="设备ID" prop="cbId">
-        <el-table-column align="left" label="项目ID" prop="projectId" />
+          <template #default="{ row }">
-        <el-table-column align="left" label="网关ID" prop="gatewayId" />
+            {{ row.cbId || '未设置' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="项目ID" prop="projectId">
+          <template #default="{ row }">
+            {{ row.projectId || '未设置' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="网关ID" prop="gatewayId">
+          <template #default="{ row }">
+            {{ row.gatewayId || '未设置' }}
+          </template>
+        </el-table-column>
         <el-table-column align="left" label="设备状态">
-          <template #default="scope">
+          <template #default="{ row }">
-            <el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">{{
+            <el-tag v-if="row.cbTypeName !== 'T30'" :type="row.deviceStatus == 1 ? 'success' : 'danger'">{{
-              scope.row.deviceStatus == 1 ? '合闸' : '分闸'
+              row.deviceStatus == 1 ? '合闸' : '分闸'
             }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column align="left" label="网络">
-          <template #default="scope">
+          <template #default="{ row }">
-            <el-tag :type="scope.row.netStatus == 1 ? 'primary' : 'info'">{{
+            <el-tag :type="row.netStatus == 1 ? 'primary' : 'info'">{{ row.netStatus == 1 ? '在线' : '离线' }}</el-tag>
-              scope.row.netStatus == 1 ? '在线' : '离线'
-            }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column align="left" label="设备类型名称" prop="cbTypeName" />
         <el-table-column align="left" label="网关mac" prop="gatewayMac" />
-        <el-table-column align="left" label="创建时间" prop="createTime" />
+        <el-table-column align="left" label="安装时间" prop="createTime">
+          <template #default="{ row }">
+            {{ row.createTime || '未设置' }}
+          </template>
+        </el-table-column>
 
         <el-table-column label="操作" fixed="right">
-          <template #default="scope">
+          <template #default="{ row }">
-            <el-link underline="never" type="primary" @click="changeStatus(scope.row)">合分闸</el-link>
+            <el-link v-if="row.deviceStatus == 1" underline="never" type="primary" @click="changeStatus(row)"
-            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button> -->
+              >分闸</el-link
-            <!-- <el-button type="primary" link icon="edit" @click="openEdit(scope.row)">编辑</el-button> -->
+            >
+            <el-link v-else underline="never" type="primary" @click="changeStatus(row)">合闸</el-link>
+            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(row)">删除</el-button> -->
+            <!-- <el-button type="primary" link icon="edit" @click="openEdit(row)">编辑</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -81,10 +98,7 @@
   const appStore = useAppStore()
 
   const searchInfo = ref({
-    username: '',
+    deviceStatus: ''
-    nickname: '',
-    phone: '',
-    email: ''
   })
 
   const page = ref(1)
@@ -98,7 +112,7 @@
 
   // 合分闸
   const changeStatus = (row) => {
-    ElMessageBox.confirm(row.deviceStatus == 1 ? '确认合闸吗？' : '确认分闸吗？', '提示', {
+    ElMessageBox.confirm(row.deviceStatus == 1 ? '确认分闸吗？' : '确认合闸吗？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
@@ -146,10 +160,7 @@
 
   const onReset = () => {
     searchInfo.value = {
-      username: '',
+      deviceStatus: ''
-      nickname: '',
-      phone: '',
-      email: ''
     }
     getTableData()
   }

src/view/equipment/particulars/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="设备状态">
+          <!-- <el-select v-model="searchInfo.deviceStatus" placeholder="请选择">
+            <el-option label="合闸" :value="1" />
+            <el-option label="分闸" :value="0" />
+          </el-select> -->
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
+          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
+      </div>
+      <el-table :data="tableData" row-key="ID">
+        <el-table-column align="left" label="运行时长" prop="runtime"> </el-table-column>
+        <el-table-column align="left" label="信号质量" prop="signalQuality"> </el-table-column>
+        <el-table-column align="left" label="漏电流值" prop="leakageCurrent"> </el-table-column>
+        <el-table-column align="left" label="累计用电量" prop="cumulativeElectricity" />
+        <el-table-column align="left" label="电流值" prop="current" />
+        <el-table-column align="left" label="功率因数" prop="powerFactor"> </el-table-column>
+        <el-table-column align="left" label="内部温度" prop="internalTemperature"> </el-table-column>
+        <el-table-column align="left" label="N相下端温度" prop="nLowerTemperature"> </el-table-column>
+        <el-table-column align="left" label="功率因数" prop="powerFactor"> </el-table-column>
+
+        <el-table-column label="操作" fixed="right">
+          <template #default="scope">
+            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button> -->
+            <!-- <el-button type="primary" link icon="edit" @click="openEdit(scope.row)">编辑</el-button> -->
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import * as serve from '@/api/equipment/particulars'
+
+  import { nextTick, ref, watch, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  // import { id } from 'element-plus/es/locale'
+  import { useAppStore } from '@/pinia'
+
+  const appStore = useAppStore()
+
+  const searchInfo = ref({
+    deviceStatus: ''
+  })
+
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+
+  onMounted(() => {
+    getTableData()
+  })
+
+  // 分页
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    getTableData()
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getTableData()
+  }
+  // 查询
+  const getTableData = async () => {
+    const table = await serve.getDeviceDetailsListByPage({
+      page: page.value,
+      pageSize: pageSize.value,
+      ...searchInfo.value
+    })
+    if (table.code === 0) {
+      tableData.value = table.data.list
+      total.value = table.data.total
+      page.value = table.data.page
+      pageSize.value = table.data.pageSize
+    }
+  }
+
+  const onSubmit = () => {
+    page.value = 1
+    getTableData()
+  }
+
+  const onReset = () => {
+    searchInfo.value = {
+      deviceStatus: ''
+    }
+    getTableData()
+  }
+</script>
+
+<style lang="scss">
+  .header-img-box {
+    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
+  }
+</style>

src/view/layout/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
+  <div class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen">
-    class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen"
-  >
     <el-watermark
       v-if="config.show_watermark"
       :font="font"
@@ -20,25 +18,13 @@
           (device === 'mobile' && config.side_mode == 'combination')
         "
       />
-      <gva-aside
+      <gva-aside v-if="config.side_mode === 'combination' && device !== 'mobile'" mode="normal" />
-        v-if="config.side_mode === 'combination' && device !== 'mobile'"
-        mode="normal"
-      />
       <div class="flex-1 w-0 h-full">
         <gva-tabs v-if="config.showTabs" />
-        <div
+        <div class="overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
-          class="overflow-auto px-2"
-          :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'"
-        >
           <router-view v-if="reloadFlag" v-slot="{ Component, route }">
-            <div
+            <div id="gva-base-load-dom" class="gva-body-h bg-gray-50 dark:bg-slate-800">
-              id="gva-base-load-dom"
+              <transition mode="out-in" :name="route.meta.transitionType || config.transition_type">
-              class="gva-body-h bg-gray-50 dark:bg-slate-800"
-            >
-              <transition
-                mode="out-in"
-                :name="route.meta.transitionType || config.transition_type"
-              >
                 <keep-alive :include="routerStore.keepAliveRouters">
                   <component :is="Component" :key="route.fullPath" />
                 </keep-alive>
@@ -92,6 +78,11 @@
     if (userStore.loadingInstance) {
       userStore.loadingInstance.close()
     }
+    nextTick(() => {
+      document.getElementsByClassName(
+        'flex flex-col md:flex-row gap-2 items-center text-sm text-slate-700 dark:text-slate-500 justify-center py-2'
+      )[0].style.opacity = 0
+    })
   })
 
   const userStore = useUserStore()