整体修复

.env.development

@@ -2,6 +2,7 @@
 	NODE_ENV='development'
 	VUE_APP_ENV = development
 	// 下面的为接口地址。此处/api是我经过webpack设置跨域代理之后的地址
-	VUE_APP_BASE_URL='https://qhome.usky.cn/uskypower/'
+	//VUE_APP_BASE_URL='https://qhome.usky.cn/uskypower/'
+	VUE_APP_BASE_URL='http://qhome-pro.usky.cn/uskypower/'
 	VUE_APP_IMAGES='https://qhome.usky.cn/uskyfile/'
 	VUE_APP_FILE_URL='https://qhome.usky.cn/uskyfile/'

deploy.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-set -e
-npm run build
-cd dist
-touch .nojekyll
-git init
-git add -A
-git commit -m 'deploy'
-git push -f "https://${access_token}@gitee.com/chu1204505056/vue-admin-beautiful-mini.git" master:gh-pages
-git push -f "https://${access_token}@gitee.com/chu1204505056/vue-admin-beautiful-antdv.git" master:gh-pages
-start "https://gitee.com/chu1204505056/vue-admin-beautiful-mini/pages"
-start "https://gitee.com/chu1204505056/vue-admin-beautiful-antdv/pages"
-cd -
-exec /bin/bash
-
-
-
-

package.json

@@ -8,21 +8,17 @@
     "build:development": "vue-cli-service build --mode development",
     "build:production": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint",
-    "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
-    "use:npm": "nrm use npm",
-    "use:taobao": "nrm use taobao",
-    "update": "ncu -u --target greatest&&npm install --registry=https://registry.npm.taobao.org",
-    "deploy": "start ./deploy.sh"
+    "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org"
   },
   "dependencies": {
-    "ant-design-vue": "2.0.0-rc.9",
-    "axios": "^0.21.1",
+    "ant-design-vue": "^2.0.0-rc.9",
+    "axios": "^1.2.2",
     "clipboard": "^2.0.6",
     "core-js": "^3.8.3",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.11.6",
     "echarts": "^5.2.1",
     "element-plus": "^1.1.0-beta.20",
-    "js-cookie": "^3.0.0-rc.1",
+    "js-cookie": "3.0.1",
     "mockjs": "^1.1.0",
     "remixicon": "^2.5.0",
     "video.js": "^7.17.0",
@@ -31,7 +27,7 @@
     "vue-amap": "^0.5.10",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.9",
@@ -50,16 +46,15 @@
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
     "lint-staged": "^10.5.3",
-    "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
-    "sass": "^1.42.1",
+    "sass": "1.52.1",
     "sass-loader": "^7.3.1",
     "stylelint": "^13.9.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recess-order": "^2.3.0",
     "svg-sprite-loader": "^5.2.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "vab-config": "0.0.8",
+    "vab-config": "file:vab-config",
     "webpackbar": "^5.0.0-3"
   },
   "gitHooks": {

public/static/config.js

@@ -4,7 +4,8 @@ var PLATFROM_CONFIG = {};
 // PLATFROM_CONFIG.baseUrl = "http://172.16.120.104:8010/" //杨强本地
 // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/" //超博本地
 
-PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
+PLATFROM_CONFIG.baseUrl = "http://qhome-pro.usky.cn/uskypower/" //线上--->测试
+// PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
 PLATFROM_CONFIG.images = "https://qhome.usky.cn/uskyfile/" //线上图片--->测试
 PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/uskyfile/" //xlsx文件访问路径--->测试
 

sh.exe.stackdump

@@ -1,11 +0,0 @@
-Stack trace:
-Frame        Function    Args
-000FFFFB540  00180064365 (00180275F10, 00180266FD1, 000FFFFCA60, 000FFFFBA20)
-000FFFFBA70  001800499D2 (00100002000, 0018034EB80, 00000000001, 00000000128)
-000FFFFCA80  00180049A11 (00000000001, 0018034EE90, 000FFFFCA60, 00000000008)
-000FFFFCB10  0018005CFCD (00000000000, 000FFFFCC40, 001800DC3EF, 00000000000)
-000FFFFCBF0  0018005D12B (000FFFFCDF0, 00000000000, FFFFFFFFFFFFFFD7, 00000000000)
-000FFFFCCE0  0018004A1A8 (00000000000, 00000000000, 00000000000, 00000000000)
-000FFFFCDA0  00180048A2A (00000000000, 00000000000, 00000000000, 00000000000)
-000FFFFCE50  00180048AEC (00000000000, 00000000000, 00000000000, 00000000000)
-End of stack trace

src/main.js

@@ -14,10 +14,10 @@ import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文
 import '@/assets/css/index.scss'
 import '@/assets/css/global.scss'
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 
 import '@/icons'
-import SvgIcon from "@/components/SvgIcon"
+import SvgIcon from '@/components/SvgIcon'
 
 import 'video.js/dist/video-js.css'
 
@@ -26,66 +26,60 @@ import 'video.js/dist/video-js.css'
  */
 import VueGridLayout from 'vue-grid-layout'
 
-/**
- * @author chuzhixin 1204505056@qq.com
- * @description 正式环境默认使用mock，正式项目记得注释后再打包
- */
-
-
-
 var app = createApp(App)
 
 app.config.globalProperties.$echarts = echarts
 
-app.directive("drag", {   					//指令的名称
-    inserted: function (el, binding) {		//当被绑定的元素插入到 DOM 中时
-        binding
-        el.onmousedown = function (e) {
-            var x = e.clientX - el.offsetLeft;
-            var y = e.clientY - el.offsetTop;
-            document.onmousemove = function (eve) {
-                el.style.left = eve.clientX - x + "px";
-                el.style.top = eve.clientY - y + "px";
-            }
-            document.onmouseup = function () {
-                document.onmousemove = null;
-                document.onmouseup = null;
-            }
-        }
+app.directive('drag', {
+  //指令的名称
+  inserted: function (el, binding) {
+    //当被绑定的元素插入到 DOM 中时
+    binding
+    el.onmousedown = function (e) {
+      var x = e.clientX - el.offsetLeft
+      var y = e.clientY - el.offsetTop
+      document.onmousemove = function (eve) {
+        el.style.left = eve.clientX - x + 'px'
+        el.style.top = eve.clientY - y + 'px'
+      }
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
     }
+  },
 })
 
 app
-    .component("svg-icon", SvgIcon)
-    .use(store)
-    .use(router)
-    .use(ElementPlus, { locale: zhCn, size: 'small' })
-    .use(Antd)
-    .use(VueGridLayout)
-    .mount('#app')
+  .component('svg-icon', SvgIcon)
+  .use(store)
+  .use(router)
+  .use(ElementPlus, { locale: zhCn, size: 'small' })
+  .use(Antd)
+  .use(VueGridLayout)
+  .mount('#app')
 
 /**
  * @需添加路由拦截 --登录后执行
  */
-
 router.beforeEach((to) => {
-    if (to.path != '/login') {
-        store.commit('publicDeviceList')//公共左侧树状设备
-        store.commit('getAuthorities', to.meta.title)//公共按钮权限
-        
-        // next()
-    }
-    // if (to.path == '/home') {
-    //     if (window.location.host.indexOf('localhost') != -1) {
-    //         window.location.href = "http://localhost:8080/#/home";
-    //         // } else if (window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
-    //         //     window.location.href = "https://pcdev.ewoogi.com/vuefiv#/home";
-    //     } else {
-    //         window.location.href = "http://101.133.214.75:13201/";
-    //     }
-    // }
+  if (to.path != '/login') {
+    store.commit('publicDeviceList') //公共左侧树状设备
+    store.commit('getAuthorities', to.meta.title) //公共按钮权限
+
+    // next()
+  }
+  // if (to.path == '/home') {
+  //     if (window.location.host.indexOf('localhost') != -1) {
+  //         window.location.href = "http://localhost:8080/#/home";
+  //         // } else if (window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
+  //         //     window.location.href = "https://pcdev.ewoogi.com/vuefiv#/home";
+  //     } else {
+  //         window.location.href = "http://101.133.214.75:13201/";
+  //     }
+  // }
 })
 
 router.afterEach((to) => {
-    to
-})
+  to
+})

src/router/index.js

@@ -1,589 +1,544 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout'
 
-export const constantRoutes = [{
-        path: '/login',
-        component: () =>
-            import ('@/views/login'),
-        hidden: true,
-    },
-    {
-
-        path: '/middle',
-        component: () =>
-            import ('@/views/middle'),
-        hidden: true,
-    },
-    {
-        path: '/403',
-        name: '403',
-        component: () =>
-            import ('@/views/403'),
-        hidden: true,
-    },
-
-    {
-        path: '/401',
-        name: '401',
-        component: () =>
-            import ('@/views/401'),
-        hidden: true,
-    },
-    {
-        path: '/404',
-        name: '404',
-        component: () =>
-            import ('@/views/404'),
-        hidden: true,
+export const constantRoutes = [
+  {
+    path: '/login',
+    component: () => import('@/views/login'),
+    hidden: true,
+  },
+  {
+    path: '/middle',
+    component: () => import('@/views/middle'),
+    hidden: true,
+  },
+  {
+    path: '/403',
+    name: '403',
+    component: () => import('@/views/403'),
+    hidden: true,
+  },
+
+  {
+    path: '/401',
+    name: '401',
+    component: () => import('@/views/401'),
+    hidden: true,
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/404'),
+    hidden: true,
+  },
+
+  // {
+
+  //     path: '/index',
+  //     component: () =>
+  //         import ('@/views/index/index'),
+  //     hidden: true,
+  // },
+
+  {
+    path: '/perCenter',
+    redirect: '/perCenter/index',
+    meta: {
+      title: '个人中心',
+      icon: 'home',
     },
-
-    // {
-
-    //     path: '/index',
-    //     component: () =>
-    //         import ('@/views/index/index'),
-    //     hidden: true,
-    // },
-
-
-    {
-        path: '/perCenter',
-        redirect: '/perCenter/index',
+    hidden: true,
+    component: Layout,
+    children: [
+      {
         meta: {
-            title: '个人中心',
-            icon: 'home',
-
+          title: '个人中心',
+          icon: 'home',
+          affix: false,
         },
-        hidden: true,
-        component: Layout,
-        children: [{
-            meta: {
-                title: '个人中心',
-                icon: 'home',
-                affix: false,
-            },
-            path: '/perCenter/index',
-            component: () =>
-            
-                import ('@/views/perCenter/index'),
-        }, ]
-    },
-
-
+        path: '/perCenter/index',
+        component: () => import('@/views/perCenter/index'),
+      },
+    ],
+  },
 
-
-
-    // { path: '*', redirect: '/404', hidden: true }
+  // { path: '*', redirect: '/404', hidden: true }
 ]
 export const asyncRoutes = [
-
-    // {
-    //     path: '/',
-    //     component: Layout,
-    //     redirect: '/index',
-    //     meta: {
-    //         title: '首页',
-    //         icon: 'home',
-    //         affix: true,
-    //     },
-    //     children: [{
-    //         path: 'index',
-    //         name: 'Index',
-    //         component: () =>
-    //             import ('@/views/index'),
-    //         meta: {
-    //             title: '首页',
-    //             icon: 'home',
-    //             affix: true,
-    //         },
-    //     }, ],
-    // },
-
-
-    {
-        path: '/',
-        redirect: '/alarmManage/index',
-        meta: {
-            title: '告警管理',
-            icon: 'alarmManage',
-            affix: true,
-        },
-        component: Layout,
-        children: [{
-            meta: {
-                title: '告警管理',
-                icon: 'alarmManage',
-            },
-            path: '/alarmManage/index',
-            component: () =>
-                import ('@/views/alarmManage/index'),
-        }, ]
+  // {
+  //     path: '/',
+  //     component: Layout,
+  //     redirect: '/index',
+  //     meta: {
+  //         title: '首页',
+  //         icon: 'home',
+  //         affix: true,
+  //     },
+  //     children: [{
+  //         path: 'index',
+  //         name: 'Index',
+  //         component: () =>
+  //             import ('@/views/index'),
+  //         meta: {
+  //             title: '首页',
+  //             icon: 'home',
+  //             affix: true,
+  //         },
+  //     }, ],
+  // },
+
+  {
+    path: '/',
+    redirect: '/alarmManage/index',
+    meta: {
+      title: '告警管理',
+      icon: 'alarmManage',
+      affix: true,
     },
-
-
-
-    // {
-    //     path: 'external-link',
-    //     component: Layout,
-    //     children: [{
-    //         path: '/home',
-    //         meta: { title: '首页', icon: 'home', }
-    //     }]
-    // },
-
-    {
-        path: '/',
-        redirect: '/alarmManage/index',
+    component: Layout,
+    children: [
+      {
         meta: {
-            title: '告警管理',
-            icon: 'alarmManage',
-            affix: true,
+          title: '告警管理',
+          icon: 'alarmManage',
         },
-        component: Layout,
-        children: [{
-            meta: {
-                title: '告警管理',
-                icon: 'alarmManage',
-            },
-            path: '/alarmManage/index',
-            component: () =>
-                import ('@/views/alarmManage/index'),
-        }, ]
+        path: '/alarmManage/index',
+        component: () => import('@/views/alarmManage/index'),
+      },
+    ],
+  },
+
+  // {
+  //     path: 'external-link',
+  //     component: Layout,
+  //     children: [{
+  //         path: '/home',
+  //         meta: { title: '首页', icon: 'home', }
+  //     }]
+  // },
+
+  // {
+  //     path: '/alarmManage',
+  //     redirect: '/alarmManage/index',
+  //     meta: {
+  //         title: '告警管理',
+  //         icon: 'alarmManage',
+  //         affix: true,
+  //     },
+  //     component: Layout,
+  //     children: [{
+  //         meta: {
+  //             title: '告警管理',
+  //             icon: 'alarmManage',
+  //             affix: true,
+  //         },
+  //         path: 'alarmManage',
+  //         component: () =>
+  //             import ('@/views/alarmManage/index'),
+
+  //     }, ]
+  // },
+  {
+    path: '/siteManage',
+    redirect: '/siteManage/index',
+    meta: {
+      title: '站点管理',
+      icon: 'siteManage',
     },
-    // {
-    //     path: '/alarmManage',
-    //     redirect: '/alarmManage/index',
-    //     meta: {
-    //         title: '告警管理',
-    //         icon: 'alarmManage',
-    //         affix: true,
-    //     },
-    //     component: Layout,
-    //     children: [{
-    //         meta: {
-    //             title: '告警管理',
-    //             icon: 'alarmManage',
-    //             affix: true,
-    //         },
-    //         path: 'alarmManage',
-    //         component: () =>
-    //             import ('@/views/alarmManage/index'),
-
-    //     }, ]
-    // },
-    {
-        path: '/siteManage',
-        redirect: '/siteManage/index',
+    component: Layout,
+    children: [
+      {
         meta: {
-            title: '站点管理',
-            icon: 'siteManage',
+          title: '站点管理',
+          icon: 'siteManage',
         },
-        component: Layout,
-        children: [{
-            meta: {
-                title: '站点管理',
-                icon: 'siteManage',
-            },
-            path: '/siteManage',
-            component: () =>
-                import ('@/views/siteManage/index'),
-            hidden: true
-        }]
+        path: '/siteManage',
+        component: () => import('@/views/siteManage/index'),
+        hidden: true,
+      },
+    ],
+  },
+
+  {
+    path: '/stationManage',
+    redirect: '/stationManage/index',
+    meta: {
+      title: '台区管理',
+      icon: 'stationManage',
     },
-
-    {
-        path: '/stationManage',
-        redirect: '/stationManage/index',
+    component: Layout,
+    children: [
+      {
         meta: {
-            title: '台区管理',
-            icon: 'stationManage',
+          title: '台区管理',
+          icon: 'stationManage',
         },
-        component: Layout,
-        children: [{
-            meta: {
-                title: '台区管理',
-                icon: 'stationManage',
-            },
-            path: '/stationManage',
-            component: () =>
-                import ('@/views/stationManage/index'),
-            hidden: true
-        }]
+        path: '/stationManage',
+        component: () => import('@/views/stationManage/index'),
+        hidden: true,
+      },
+    ],
+  },
+
+  /**
+   * deviceManage 设备管理
+   * powerEquip 电力监测设备
+   * videoEquip 视频监测设备
+   * communicateEquip 通信设备
+   * channelList 通道列表
+   * attribTemplate 属性模板
+   */
+  {
+    path: '/deviceManage',
+    redirect: '/deviceManage/powerEquip',
+    meta: {
+      title: '设备管理',
+      icon: 'deviceManage',
     },
-
-    /**
-     * deviceManage 设备管理
-     * powerEquip 电力监测设备
-     * videoEquip 视频监测设备
-     * communicateEquip 通信设备
-     * channelList 通道列表
-     * attribTemplate 属性模板
-     */
-    {
-        path: '/deviceManage',
-        redirect: '/deviceManage/powerEquip',
+    component: Layout,
+    children: [
+      {
         meta: {
-            title: '设备管理',
-            icon: 'deviceManage',
+          title: '设备管理',
+          icon: 'deviceManage',
         },
-        component: Layout,
-        children: [{
-            meta: {
-                title: '设备管理',
-                icon: 'deviceManage',
-            },
-            path: '/deviceManage',
-            component: () =>
-                import ('@/views/deviceManage/powerEquip'),
-            hidden: true
-        }]
-    },
-
-
-    // {
-    //     meta: { icon: 'deviceManage', title: '设备管理', },
-    //     path: '/deviceManage',
-    //     component: Layout,
-    //     redirect: '/deviceManage/powerEquip',
-    //     children: [{
-    //             meta: { icon: 'powerEquip', title: '设备管理', },
-    //             path: 'powerEquip',
-    //             component: () =>
-    //                 import ('@/views/deviceManage/powerEquip/index.vue'),
-    //         },
-    //         {
-    //             meta: { icon: 'attribTemplate', title: '属性模板', },
-    //             path: 'attribTemplate',
-    //             component: () =>
-    //                 import ('@/views/deviceManage/attribTemplate/index.vue'),
-    //         }
-    //     ]
-    // },
-
-    /**
-     * dataManage 数据管理
-     * sameAnalysis 同比分析报表
-     * chainAnalysis 环比分析报表
-     * handOpera 手动抄表
-     * energyReport 用能月报
-     * demandAnalysis 需量分析
-     * consumConfig 能耗分析配置
-     */
-
-
-    {
-        meta: { icon: 'dataManage', title: '数据管理', },
-        path: '/dataManage',
-        component: Layout,
-        redirect: '/dataManage/sameAnalysis/index',
-        children: [{
-                meta: { icon: 'sameAnalysis', title: '同比分析报表', },
-                path: 'sameAnalysis',
-                component: () =>
-                    import ('@/views/dataManage/sameAnalysis/index'),
-            },
-            {
-                meta: { icon: 'chainAnalysis', title: '环比分析报表', },
-                path: 'chainAnalysis',
-                component: () =>
-                    import ('@/views/dataManage/chainAnalysis/index'),
-            },
-            // {
-            //     meta: { icon: 'handOpera', title: '手动抄表', },
-            //     title: 'index-layout.menu.dataManage.handOpera',
-            //     path: 'handOpera',
-            //     component: () =>
-            //         import ('@/views/dataManage/handOpera/index.vue'),
-            // },
-            {
-                meta: { icon: 'energyReport', title: '用能月报', },
-                title: 'index-layout.menu.dataManage.energyReport',
-                path: 'energyReport',
-                component: () =>
-                    import ('@/views/dataManage/energyReport/index'),
-            },
-            {
-                meta: { icon: 'demandAnalysis', title: '需量分析', },
-                title: 'index-layout.menu.dataManage.demandAnalysis',
-                path: 'demandAnalysis',
-                component: () =>
-                    import ('@/views/dataManage/demandAnalysis/index'),
-            },
-            // {
-            //     meta: { icon: 'consumConfig', title: '能耗分析配置', },
-            //     title: 'index-layout.menu.dataManage.consumConfig',
-            //     path: 'consumConfig',
-            //     component: () =>
-            //         import ('@/views/dataManage/consumConfig/index.vue'),
-            // }
-        ]
-    },
-
-    /**
-     * powerQuality 电能质量
-     * harmonicReport 谐波报表
-     * realTimeMonitoring 实时监测
-     * asseReport 评估报告
-     * unbalanceAnalysis 三相不平衡分析
-     */
-    {
-        meta: { icon: 'powerQuality', title: '电能质量', },
-        path: '/powerQuality',
-        component: Layout,
-        redirect: '/powerQuality/harmonicReport/index',
-        children: [{
-                meta: { icon: 'harmonicReport', title: '谐波报表', },
-                path: 'harmonicReport',
-                component: () =>
-                    import ('@/views/powerQuality/harmonicReport/index'),
-            },
-            {
-                meta: { icon: 'realTimeMonitoring', title: '实时监测' },
-                path: 'realTimeMonitoring',
-                component: () =>
-                    import ('@/views/powerQuality/realTimeMonitoring/index'),
-            },
-            {
-                meta: { icon: 'asseReport', title: '评估报告', },
-                path: 'asseReport',
-                component: () =>
-                    import ('@/views/powerQuality/asseReport/index'),
-            },
-            {
-                meta: { icon: 'unbalanceAnalysis', title: '三相不平衡分析', },
-                path: 'unbalanceAnalysis',
-                component: () =>
-                    import ('@/views/powerQuality/unbalanceAnalysis/index'),
-            },
-
-        ]
-    },
-
-
-    /**
-     * monthReport 月度报告
-     */
-    // {
-    //     path: '/monthReport',
-    //     redirect: '/monthReport',
-    //     meta: { title: '月度报告', icon: 'monthReport', },
-    //     component: Layout,
-    //     children: [{
-    //             meta: { title: '月度报告', icon: 'monthReport', },
-    //             path: '/monthReport',
-    //             component: () =>
-    //                 import ('@/views/monthReport/index'),
-    //             hidden: true
-    //         },
-    //         {
-    //             meta: { title: '月报模板', icon: 'reportModel', },
-    //             path: '/reportModel',
-    //             component: () =>
-    //                 import ('@/views/monthReport/reportModel'),
-    //             hidden: true
-    //         }
-    //     ]
-    // },
-
-
-    {
+        path: '/deviceManage',
+        component: () => import('@/views/deviceManage/powerEquip'),
+        hidden: true,
+      },
+    ],
+  },
+
+  // {
+  //     meta: { icon: 'deviceManage', title: '设备管理', },
+  //     path: '/deviceManage',
+  //     component: Layout,
+  //     redirect: '/deviceManage/powerEquip',
+  //     children: [{
+  //             meta: { icon: 'powerEquip', title: '设备管理', },
+  //             path: 'powerEquip',
+  //             component: () =>
+  //                 import ('@/views/deviceManage/powerEquip/index.vue'),
+  //         },
+  //         {
+  //             meta: { icon: 'attribTemplate', title: '属性模板', },
+  //             path: 'attribTemplate',
+  //             component: () =>
+  //                 import ('@/views/deviceManage/attribTemplate/index.vue'),
+  //         }
+  //     ]
+  // },
+
+  /**
+   * dataManage 数据管理
+   * sameAnalysis 同比分析报表
+   * chainAnalysis 环比分析报表
+   * handOpera 手动抄表
+   * energyReport 用能月报
+   * demandAnalysis 需量分析
+   * consumConfig 能耗分析配置
+   */
+
+  {
+    meta: { icon: 'dataManage', title: '数据管理' },
+    path: '/dataManage',
+    component: Layout,
+    redirect: '/dataManage/sameAnalysis/index',
+    children: [
+      {
+        meta: { icon: 'sameAnalysis', title: '同比分析报表' },
+        path: 'sameAnalysis',
+        component: () => import('@/views/dataManage/sameAnalysis/index'),
+      },
+      {
+        meta: { icon: 'chainAnalysis', title: '环比分析报表' },
+        path: 'chainAnalysis',
+        component: () => import('@/views/dataManage/chainAnalysis/index'),
+      },
+      // {
+      //     meta: { icon: 'handOpera', title: '手动抄表', },
+      //     title: 'index-layout.menu.dataManage.handOpera',
+      //     path: 'handOpera',
+      //     component: () =>
+      //         import ('@/views/dataManage/handOpera/index.vue'),
+      // },
+      {
+        meta: { icon: 'energyReport', title: '用能月报' },
+        title: 'index-layout.menu.dataManage.energyReport',
+        path: 'energyReport',
+        component: () => import('@/views/dataManage/energyReport/index'),
+      },
+      {
+        meta: { icon: 'demandAnalysis', title: '需量分析' },
+        title: 'index-layout.menu.dataManage.demandAnalysis',
+        path: 'demandAnalysis',
+        component: () => import('@/views/dataManage/demandAnalysis/index'),
+      },
+      // {
+      //     meta: { icon: 'consumConfig', title: '能耗分析配置', },
+      //     title: 'index-layout.menu.dataManage.consumConfig',
+      //     path: 'consumConfig',
+      //     component: () =>
+      //         import ('@/views/dataManage/consumConfig/index.vue'),
+      // }
+    ],
+  },
+
+  /**
+   * powerQuality 电能质量
+   * harmonicReport 谐波报表
+   * realTimeMonitoring 实时监测
+   * asseReport 评估报告
+   * unbalanceAnalysis 三相不平衡分析
+   */
+  {
+    meta: { icon: 'powerQuality', title: '电能质量' },
+    path: '/powerQuality',
+    component: Layout,
+    redirect: '/powerQuality/harmonicReport/index',
+    children: [
+      {
+        meta: { icon: 'harmonicReport', title: '谐波报表' },
+        path: 'harmonicReport',
+        component: () => import('@/views/powerQuality/harmonicReport/index'),
+      },
+      {
+        meta: { icon: 'realTimeMonitoring', title: '实时监测' },
+        path: 'realTimeMonitoring',
+        component: () =>
+          import('@/views/powerQuality/realTimeMonitoring/index'),
+      },
+      {
+        meta: { icon: 'asseReport', title: '评估报告' },
+        path: 'asseReport',
+        component: () => import('@/views/powerQuality/asseReport/index'),
+      },
+      {
+        meta: { icon: 'unbalanceAnalysis', title: '三相不平衡分析' },
+        path: 'unbalanceAnalysis',
+        component: () => import('@/views/powerQuality/unbalanceAnalysis/index'),
+      },
+    ],
+  },
+
+  /**
+   * monthReport 月度报告
+   */
+  // {
+  //     path: '/monthReport',
+  //     redirect: '/monthReport',
+  //     meta: { title: '月度报告', icon: 'monthReport', },
+  //     component: Layout,
+  //     children: [{
+  //             meta: { title: '月度报告', icon: 'monthReport', },
+  //             path: '/monthReport',
+  //             component: () =>
+  //                 import ('@/views/monthReport/index'),
+  //             hidden: true
+  //         },
+  //         {
+  //             meta: { title: '月报模板', icon: 'reportModel', },
+  //             path: '/reportModel',
+  //             component: () =>
+  //                 import ('@/views/monthReport/reportModel'),
+  //             hidden: true
+  //         }
+  //     ]
+  // },
+
+  {
+    path: '/planOutage',
+    redirect: '/planOutage/index',
+    meta: { title: '计划停电', icon: 'planOutage' },
+    component: Layout,
+    children: [
+      {
+        meta: { title: '计划停电', icon: 'planOutage' },
         path: '/planOutage',
-        redirect: '/planOutage/index',
-        meta: { title: '计划停电', icon: 'planOutage', },
-        component: Layout,
-        children: [{
-            meta: { title: '计划停电', icon: 'planOutage', },
-            path: '/planOutage',
-            component: () =>
-                import ('@/views/planOutage/index'),
-            hidden: true
-        }],
-    },
-
-
-    /**
-     * patrolManage 巡检管理
-     * patrolPlan 巡检计划
-     * patrolRecord 巡检记录
-     * patrolContent 巡检内容
-     * checkEntries 检查条目
-     */
-    // {
-    //     meta: { title: '巡检管理', icon: 'patrolManage', },
-    //     path: '/patrolManage',
-    //     component: Layout,
-    //     redirect: '/patrolManage/patrolPlan',
-    //     name: 'patrolManage',
-    //     children: [{
-    //             meta: { title: '巡检计划', icon: 'patrolPlan' },
-    //             path: 'patrolPlan',
-    //             name: 'patrolPlan',
-    //             component: () =>
-    //                 import ('@/views/patrolManage/patrolPlan/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '巡检记录', icon: 'patrolRecord' },
-    //             path: 'patrolRecord',
-    //             name: 'patrolRecord',
-    //             component: () =>
-    //                 import ('@/views/patrolManage/patrolRecord/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '巡检内容', icon: '巡检内容' },
-    //             path: 'patrolContent',
-    //             name: 'patrolContent',
-    //             component: () =>
-    //                 import ('@/views/patrolManage/patrolContent/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '检查条目', icon: '检查条目' },
-    //             path: 'checkEntries',
-    //             name: 'checkEntries',
-    //             component: () =>
-    //                 import ('@/views/patrolManage/checkEntries/index.vue'),
-    //         },
-    //     ]
-    // },
-
-
-    /**
-     * operManage 运维管理
-     * siteAchives 现场档案
-     * defectManage 缺陷管理
-     * workManage 工单管理
-     * operStatistics 运维统计
-     * workStatistics 工作量统计
-     */
-    // {
-    //     meta: { title: '运维管理', icon: 'operManage', },
-    //     path: '/operManage',
-    //     component: Layout,
-    //     redirect: '/operManage/siteAchives',
-    //     name: 'operManage',
-    //     children: [{
-    //             meta: { title: '现场档案', icon: 'siteAchives', },
-    //             path: 'siteAchives',
-    //             component: () =>
-    //                 import ('@/views/operManage/siteAchives/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '缺陷管理', icon: 'defectManage', },
-    //             path: 'defectManage',
-    //             component: () =>
-    //                 import ('@/views/operManage/defectManage/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '工单管理', icon: 'workManage', },
-    //             path: 'workManage',
-    //             component: () =>
-    //                 import ('@/views/operManage/workManage/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '运维统计', icon: 'operStatistics', },
-    //             path: 'operStatistics',
-    //             component: () =>
-    //                 import ('@/views/operManage/operStatistics/index.vue'),
-    //         },
-    //         {
-    //             meta: { title: '工作量统计', icon: 'workStatistics', },
-    //             path: 'workStatistics',
-    //             component: () =>
-    //                 import ('@/views/operManage/workStatistics/index.vue'),
-    //         },
-
-    //     ]
-    // },
-
-    /** 
-     * systemManage 系统管理
-     * userManage 用户管理
-     * rolePermission 权限管理
-     */
-    {
-        meta: { title: '系统管理', icon: 'systemManage', },
-        path: '/systemManage',
-        component: Layout,
-        redirect: '/systemManage/userManage/index',
-        children: [{
-                meta: { title: '用户管理', icon: 'userManage', },
-                path: 'userManage',
-                component: () =>
-                    import ('@/views/systemManage/userManage/index'),
-            },
-            {
-                meta: { title: '权限管理', icon: 'rolePermission', },
-                path: 'rolePermission',
-                component: () =>
-                    import ('@/views/systemManage/rolePermission/index'),
-            },
-        ]
-    },
-
-
-
-
-    // {
-    //   path: '/test',
-    //   component: Layout,
-    //   redirect: '/test/test',
-    //   meta: {
-    //     title: '动态路由测试',
-    //     icon: 'test-tube-line',
-    //   },
-    //   children: [
-    //     {
-    //       path: 'test',
-    //       name: 'Test',
-    //       component: () => import('@/views/test'),
-    //       meta: {
-    //         title: '动态路由测试',
-    //         icon: 'test-tube-line',
-    //       },
-    //     },
-    //   ],
-    // },
-
-    // {
-    //     path: '/error',
-    //     name: 'Error',
-    //     component: Layout,
-    //     redirect: '/error/403',
-    //     meta: {
-    //         title: '错误页',
-    //         icon: 'error-warning-line',
-    //     },
-    //     children: [{
-    //             path: '403',
-    //             name: 'Error403',
-    //             component: () =>
-    //                 import ('@/views/403'),
-    //             meta: {
-    //                 title: '403',
-    //                 icon: 'error-warning-line',
-    //             },
-    //         },
-    //         {
-    //             path: '404',
-    //             name: 'Error404',
-    //             component: () =>
-    //                 import ('@/views/404'),
-    //             meta: {
-    //                 title: '404',
-    //                 icon: 'error-warning-line',
-    //             },
-    //         },
-    //     ],
-    // },
-    {
-        path: '/*',
-        redirect: '/404',
+        component: () => import('@/views/planOutage/index'),
         hidden: true,
-    },
+      },
+    ],
+  },
+
+  /**
+   * patrolManage 巡检管理
+   * patrolPlan 巡检计划
+   * patrolRecord 巡检记录
+   * patrolContent 巡检内容
+   * checkEntries 检查条目
+   */
+  // {
+  //     meta: { title: '巡检管理', icon: 'patrolManage', },
+  //     path: '/patrolManage',
+  //     component: Layout,
+  //     redirect: '/patrolManage/patrolPlan',
+  //     name: 'patrolManage',
+  //     children: [{
+  //             meta: { title: '巡检计划', icon: 'patrolPlan' },
+  //             path: 'patrolPlan',
+  //             name: 'patrolPlan',
+  //             component: () =>
+  //                 import ('@/views/patrolManage/patrolPlan/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '巡检记录', icon: 'patrolRecord' },
+  //             path: 'patrolRecord',
+  //             name: 'patrolRecord',
+  //             component: () =>
+  //                 import ('@/views/patrolManage/patrolRecord/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '巡检内容', icon: '巡检内容' },
+  //             path: 'patrolContent',
+  //             name: 'patrolContent',
+  //             component: () =>
+  //                 import ('@/views/patrolManage/patrolContent/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '检查条目', icon: '检查条目' },
+  //             path: 'checkEntries',
+  //             name: 'checkEntries',
+  //             component: () =>
+  //                 import ('@/views/patrolManage/checkEntries/index.vue'),
+  //         },
+  //     ]
+  // },
+
+  /**
+   * operManage 运维管理
+   * siteAchives 现场档案
+   * defectManage 缺陷管理
+   * workManage 工单管理
+   * operStatistics 运维统计
+   * workStatistics 工作量统计
+   */
+  // {
+  //     meta: { title: '运维管理', icon: 'operManage', },
+  //     path: '/operManage',
+  //     component: Layout,
+  //     redirect: '/operManage/siteAchives',
+  //     name: 'operManage',
+  //     children: [{
+  //             meta: { title: '现场档案', icon: 'siteAchives', },
+  //             path: 'siteAchives',
+  //             component: () =>
+  //                 import ('@/views/operManage/siteAchives/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '缺陷管理', icon: 'defectManage', },
+  //             path: 'defectManage',
+  //             component: () =>
+  //                 import ('@/views/operManage/defectManage/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '工单管理', icon: 'workManage', },
+  //             path: 'workManage',
+  //             component: () =>
+  //                 import ('@/views/operManage/workManage/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '运维统计', icon: 'operStatistics', },
+  //             path: 'operStatistics',
+  //             component: () =>
+  //                 import ('@/views/operManage/operStatistics/index.vue'),
+  //         },
+  //         {
+  //             meta: { title: '工作量统计', icon: 'workStatistics', },
+  //             path: 'workStatistics',
+  //             component: () =>
+  //                 import ('@/views/operManage/workStatistics/index.vue'),
+  //         },
+
+  //     ]
+  // },
+
+  /**
+   * systemManage 系统管理
+   * userManage 用户管理
+   * rolePermission 权限管理
+   */
+  {
+    meta: { title: '系统管理', icon: 'systemManage' },
+    path: '/systemManage',
+    component: Layout,
+    redirect: '/systemManage/userManage/index',
+    children: [
+      {
+        meta: { title: '用户管理', icon: 'userManage' },
+        path: 'userManage',
+        component: () => import('@/views/systemManage/userManage/index'),
+      },
+      {
+        meta: { title: '权限管理', icon: 'rolePermission' },
+        path: 'rolePermission',
+        component: () => import('@/views/systemManage/rolePermission/index'),
+      },
+    ],
+  },
+
+  // {
+  //   path: '/test',
+  //   component: Layout,
+  //   redirect: '/test/test',
+  //   meta: {
+  //     title: '动态路由测试',
+  //     icon: 'test-tube-line',
+  //   },
+  //   children: [
+  //     {
+  //       path: 'test',
+  //       name: 'Test',
+  //       component: () => import('@/views/test'),
+  //       meta: {
+  //         title: '动态路由测试',
+  //         icon: 'test-tube-line',
+  //       },
+  //     },
+  //   ],
+  // },
+
+  // {
+  //     path: '/error',
+  //     name: 'Error',
+  //     component: Layout,
+  //     redirect: '/error/403',
+  //     meta: {
+  //         title: '错误页',
+  //         icon: 'error-warning-line',
+  //     },
+  //     children: [{
+  //             path: '403',
+  //             name: 'Error403',
+  //             component: () =>
+  //                 import ('@/views/403'),
+  //             meta: {
+  //                 title: '403',
+  //                 icon: 'error-warning-line',
+  //             },
+  //         },
+  //         {
+  //             path: '404',
+  //             name: 'Error404',
+  //             component: () =>
+  //                 import ('@/views/404'),
+  //             meta: {
+  //                 title: '404',
+  //                 icon: 'error-warning-line',
+  //             },
+  //         },
+  //     ],
+  // },
+  {
+    path: '/*',
+    redirect: '/404',
+    hidden: true,
+  },
 ]
 
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes: constantRoutes,
+  history: createWebHashHistory(),
+  routes: constantRoutes,
 })
 
-export default router
+export default router

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopLineChart.vue

@@ -1,212 +1,206 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height400" ref="lineChartBanlance" />
+    <div class="height400" ref="loopLineChart" />
   </div>
 </template>
-<script>
-import { defineComponent, onMounted, ref, watch } from 'vue'
-// import { useStore } from 'vuex'
-import * as echarts from 'echarts'
+<script setup>
+  import { defineComponent, onMounted, ref, watch } from 'vue'
+  // import { useStore } from 'vuex'
+  import * as echarts from 'echarts'
 
-export default defineComponent({
-  name: 'LoopLineChart',
-  props: {
+  const props = defineProps({
     num: Number,
-    unit:String
-  },
-  setup(props) {
-    // const store = useStore()
-    const lineChartBanlance = ref(null)
+    unit: String,
+  })
 
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      loading.value = false
-    }
-    function echarts2() {
-      let myChart = echarts.init(lineChartBanlance.value)
-      // 绘制图表
-      myChart.setOption({
-        // backgroundColor: "pink",
-        color: ['#f2e251', '#40ABFE', '#fe8161'],
+  // const store = useStore()
+  const loopLineChart = ref(null)
 
-        legend: {
-          icon: 'rect',
-          // bottom: "0",
-          right: 40,
-          data: ['A', 'B', 'C'],
-        },
-        // toolbox: {
-        //   show: false,
-        // },
-        tooltip: {
-          // trigger: 'axis',
-          // axisPointer: { type: 'cross' },
+  // 读取数据 func
+  const loading = ref(true)
+  const getData = async () => {
+    loading.value = false
+  }
+  function echarts2() {
+    let myChart = echarts.init(loopLineChart.value)
+    // 绘制图表
+    myChart.setOption({
+      // backgroundColor: "pink",
+      color: ['#f2e251', '#40ABFE', '#fe8161'],
 
-          trigger: 'axis',
-          formatter: function (params) {
-            var relVal = params[0].name
-            for (var i = 0, l = params.length; i < l; i++) {
-              relVal +=
-                '<br/>' + params[i].seriesName + ' : ' + params[i].value + props.unit
-            }
-            return relVal
-          },
+      legend: {
+        icon: 'rect',
+        // bottom: "0",
+        right: 40,
+        data: ['A', 'B', 'C'],
+      },
+      // toolbox: {
+      //   show: false,
+      // },
+      tooltip: {
+        // trigger: 'axis',
+        // axisPointer: { type: 'cross' },
+
+        trigger: 'axis',
+        formatter: function (params) {
+          var relVal = params[0].name
+          for (var i = 0, l = params.length; i < l; i++) {
+            relVal +=
+              '<br/>' +
+              params[i].seriesName +
+              ' : ' +
+              params[i].value +
+              props.unit
+          }
+          return relVal
         },
-        grid: {
-          left: '20',
-          right: '40',
-          top: '40',
-          bottom: '20',
-          containLabel: true,
+      },
+      grid: {
+        left: '20',
+        right: '40',
+        top: '40',
+        bottom: '20',
+        containLabel: true,
+      },
+      xAxis: {
+        axisLabel: {
+          color: '#444',
+          fontSize: 14,
         },
-        xAxis: {
-          axisLabel: {
+        /*改变xy轴颜色*/
+        axisLine: {
+          lineStyle: {
             color: '#444',
-            fontSize: 14,
-          },
-          /*改变xy轴颜色*/
-          axisLine: {
-            lineStyle: {
-              color: '#444',
-              width: 1, //这里是为了突出显示加上的
-            },
+            width: 1, //这里是为了突出显示加上的
           },
-          boundaryGap: false,
-          data:
-            props.num == 0
-              ? [
-                  '总谐波',
-                  '3次谐波',
-                  '5次谐波',
-                  '7次谐波',
-                  '9次谐波',
-                  '11次谐波',
-                  '13次谐波',
-                  '15次谐波',
-                  '17次谐波',
-                  '19次谐波',
-                  '21次谐波',
-                  '23次谐波',
-                  '25次谐波',
-                  '27次谐波',
-                  '29次谐波',
-                  '31次谐波',
-                ]
-              : [
-                  '2总谐波',
-                  '4次谐波',
-                  '6次谐波',
-                  '8次谐波',
-                  '10次谐波',
-                  '12次谐波',
-                  '14次谐波',
-                  '16次谐波',
-                  '18次谐波',
-                  '20次谐波',
-                  '22次谐波',
-                  '24次谐波',
-                  '26次谐波',
-                  '28次谐波',
-                  '30次谐波',
-                ],
         },
-        yAxis: {
-          // name: "A",
-          nameTextStyle: {
-            color: '#707070',
-            fontSize: 14,
-          },
-          axisLabel: {
-            color: '#444',
-            fontSize: 14,
-          },
-
-          axisLine: {
-            symbolOffset: [0, 4],
-            lineStyle: { color: '#444' },
-          },
-          splitArea: {
-            show: false,
-          },
+        boundaryGap: false,
+        data:
+          props.num == 0
+            ? [
+                '总谐波',
+                '3次谐波',
+                '5次谐波',
+                '7次谐波',
+                '9次谐波',
+                '11次谐波',
+                '13次谐波',
+                '15次谐波',
+                '17次谐波',
+                '19次谐波',
+                '21次谐波',
+                '23次谐波',
+                '25次谐波',
+                '27次谐波',
+                '29次谐波',
+                '31次谐波',
+              ]
+            : [
+                '2总谐波',
+                '4次谐波',
+                '6次谐波',
+                '8次谐波',
+                '10次谐波',
+                '12次谐波',
+                '14次谐波',
+                '16次谐波',
+                '18次谐波',
+                '20次谐波',
+                '22次谐波',
+                '24次谐波',
+                '26次谐波',
+                '28次谐波',
+                '30次谐波',
+              ],
+      },
+      yAxis: {
+        // name: "A",
+        nameTextStyle: {
+          color: '#707070',
+          fontSize: 14,
+        },
+        axisLabel: {
+          color: '#444',
+          fontSize: 14,
         },
 
-        series: [
-          {
-            name: 'A',
-            type: 'line',
-            symbolSize: 7,
-            smooth: false,
-            data: [
-              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-              0, 0, 0, 0, 0, 0,
-            ],
-          },
-          {
-            name: 'B',
-            type: 'line',
-            symbolSize: 7,
-            smooth: false,
-            data: [
-              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-              0, 0, 0, 0, 0, 0,
-            ],
-          },
-          {
-            name: 'C',
-            type: 'line',
-            symbolSize: 7,
-            smooth: false,
-            data: [
-              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-              0, 0, 0, 0, 0, 0,
-            ],
-          },
-        ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-    }
-
-    const writeValue = (val) => {
-      val
-      getData()
-      echarts2()
-    }
-
-    //监听变化
-    watch(
-      () => props.num,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        newVal
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
+        axisLine: {
+          symbolOffset: [0, 4],
+          lineStyle: { color: '#444' },
+        },
+        splitArea: {
+          show: false,
+        },
       },
-      { lazy: true }
-    )
 
-    onMounted(() => {
-      getData()
-      echarts2()
+      series: [
+        {
+          name: 'A',
+          type: 'line',
+          symbolSize: 7,
+          smooth: false,
+          data: [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+          ],
+        },
+        {
+          name: 'B',
+          type: 'line',
+          symbolSize: 7,
+          smooth: false,
+          data: [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+          ],
+        },
+        {
+          name: 'C',
+          type: 'line',
+          symbolSize: 7,
+          smooth: false,
+          data: [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+          ],
+        },
+      ],
+    })
+    window.addEventListener('resize', () => {
+      myChart.resize()
     })
+  }
 
-    return {
-      lineChartBanlance,
-      loading,
-      echarts2,
-    }
-  },
-})
+  const writeValue = (val) => {
+    val
+    getData()
+    echarts2()
+  }
+
+  //监听变化
+  watch(
+    () => props.num,
+    (newVal, oldVal, clear) => {
+      // 执行异步任务，并得到关闭异步任务的 id
+      newVal
+      let id = writeValue(newVal, oldVal)
+      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+      clear(() => clearTimeout(id))
+    },
+    { lazy: true }
+  )
+
+  onMounted(() => {
+    getData()
+    echarts2()
+  })
 </script>
 <style lang="scss" scoped>
-.homeBoxCard {
-  height: 100%;
-  margin-bottom: 24px;
-  .height400 {
-    height: 80%;
+  .homeBoxCard {
+    height: 100%;
+    margin-bottom: 24px;
+    .height400 {
+      height: 80%;
+    }
   }
-}
-</style>
+</style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopRadarChart.vue

@@ -1,184 +1,171 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height260" ref="lineChartBanlance" id="lineChartBanlance" />
+    <div class="height260" ref="loopRadarChart" />
   </div>
 </template>
-<script>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import * as echarts from 'echarts'
+<script setup>
+  import { computed, onMounted, ref, watch } from 'vue'
+  import { useStore } from 'vuex'
+  import * as echarts from 'echarts'
 
-export default defineComponent({
-  name: 'LoopRadarChart',
-  props: {
+  const props = defineProps({
     getData: Object,
-  },
-  setup(props) {
-    let lineChartBanlance = ref(null)
+  })
 
-    const store = useStore()
-    const max=ref(0)
+  let loopRadarChart = ref(null)
 
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
+  const store = useStore()
+  const max = ref(0)
 
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true
-      // await store.dispatch('Home/queryWorksChartData')
-      loading.value = false
-      var aa = [props.getData.ua, props.getData.ub, props.getData.uc]
+  // 总数
+  const total = computed(() => store.state.Home.worksChartData.total)
+  // num
+  const num = computed(() => store.state.Home.worksChartData.num)
 
-      aa.sort(function (a, b) {
-        return a - b
-      })
-      max.value=  aa.pop()
-       if (!props.getData.ua && !props.getData.ub && !props.getData.uc) {
-        max.value = 1
-      }
-    
+  // 读取数据 func
+  const loading = ref(true)
+  const getData = async () => {
+    // loading.value = true
+    // await store.dispatch('Home/queryWorksChartData')
+    loading.value = false
+    var aa = [props.getData.ua, props.getData.ub, props.getData.uc]
+
+    aa.sort(function (a, b) {
+      return a - b
+    })
+    max.value = aa.pop()
+    if (!props.getData.ua && !props.getData.ub && !props.getData.uc) {
+      max.value = 1
     }
-    function echarts2() {
-      let myChart = echarts.init(document.getElementById('lineChartBanlance'))
-      // 绘制图表
-      myChart.setOption({
-        backgroundColor: '#FFF',
-        tooltip: {},
-        grid: {
-          left: '20',
-          right: '40',
-          top: '-20',
-          bottom: '0',
-          containLabel: true,
+  }
+  function echarts2() {
+    let myChart = echarts.init(loopRadarChart.value)
+    // 绘制图表
+    myChart.setOption({
+      backgroundColor: '#FFF',
+      tooltip: {},
+      grid: {
+        left: '20',
+        right: '40',
+        top: '-20',
+        bottom: '0',
+        containLabel: true,
+      },
+      radar: {
+        shape: 'circle',
+        radius: '70%',
+        center: ['50%', '55%'],
+        splitNumber: 5,
+        nameGap: '15',
+        name: {
+          textStyle: {
+            color: '#a8a8a8',
+          },
         },
-        radar: {
-          shape: 'circle',
-          radius: '70%',
-          center: ['50%', '55%'],
-          splitNumber: 5,
-          nameGap: '15',
-          name: {
-            textStyle: {
-              color: '#a8a8a8',
-            },
+        axisLine: {
+          lineStyle: {
+            color: '#ebebeb',
           },
-          axisLine: {
-            lineStyle: {
-              color: '#ebebeb',
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            width: 1,
+            color: '#ebebeb',
           },
-          splitLine: {
-            lineStyle: {
-              width: 1,
-              color: '#ebebeb',
-            },
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['#f8f8f8', '#fff'].reverse(),
           },
-          splitArea: {
-            areaStyle: {
-              color: ['#f8f8f8', '#fff'].reverse(),
-            },
+        },
+        indicator: [
+          {
+            name: 'Ua',
+            max: max.value ? max.value : 0,
           },
-          indicator: [
-            {
-              name: 'Ua',
-              max: max.value?max.value:0,
-            },
-            {
-              name: 'Ub',
-              max: max.value?max.value:0,
-            },
+          {
+            name: 'Ub',
+            max: max.value ? max.value : 0,
+          },
+          {
+            name: 'Uc',
+            max: max.value ? max.value : 0,
+          },
+        ],
+      },
+      series: [
+        {
+          name: 'Title✍',
+          type: 'radar',
+          symbolSize: 12,
+          itemStyle: {
+            borderColor: '#ebebeb',
+            borderWidth: 2,
+          },
+          areaStyle: {
+            opacity: 0.3,
+          },
+          data: [
             {
-              name: 'Uc',
-              max: max.value?max.value:0,
+              itemStyle: {
+                color: '#5eb6db',
+              },
+              value: [props.getData.ua, props.getData.ub, props.getData.uc],
             },
           ],
         },
-        series: [
-          {
-            name: 'Title✍',
-            type: 'radar',
-            symbolSize: 12,
-            itemStyle: {
-              borderColor: '#ebebeb',
-              borderWidth: 2,
-            },
-            areaStyle: {
-              opacity: 0.3,
-            },
-            data: [
-              {
-                itemStyle: {
-                  color: '#5eb6db',
-                },
-                value: [props.getData.ua, props.getData.ub, props.getData.uc],
-              },
-            ],
-          },
-        ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-    }
-
-    const writeValue = (val) => {
-      val
-      getData()
-      echarts2()
-    }
+      ],
+    })
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
 
-    //监听变化
-    watch(
-      () => props.getData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-       newVal
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
+  const writeValue = (val) => {
+    val
+    getData()
+    echarts2()
+  }
 
-    onMounted(() => {
-      getData()
-      echarts2()
-    })
+  //监听变化
+  watch(
+    () => props.getData,
+    (newVal, oldVal, clear) => {
+      // 执行异步任务，并得到关闭异步任务的 id
+      newVal
+      let id = writeValue(newVal, oldVal)
+      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+      clear(() => clearTimeout(id))
+    },
+    { lazy: true }
+  )
 
-    return {
-      lineChartBanlance,
-      loading,
-      total,
-      num,
-      echarts2,
-    }
-  },
-})
+  onMounted(() => {
+    getData()
+    echarts2()
+  })
 </script>
 <style lang="scss" scoped>
-.homeBoxCard {
-  margin-bottom: 24px;
-  :deep(.el-card__header) {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  :deep(.el-card__body) {
-    padding: 12px;
-    font-size: 14px;
-    line-height: 1.5715;
-  }
-  :deep(.el-divider) {
-    margin: 8px 0;
-  }
-  .num {
-    font-size: 30px;
-    color: #515a6e;
-  }
-  .height260 {
-    height: 200px;
+  .homeBoxCard {
+    margin-bottom: 24px;
+    :deep(.el-card__header) {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 12px;
+      font-size: 14px;
+      line-height: 1.5715;
+    }
+    :deep(.el-divider) {
+      margin: 8px 0;
+    }
+    .num {
+      font-size: 30px;
+      color: #515a6e;
+    }
+    .height260 {
+      height: 200px;
+    }
   }
-}
-</style>
+</style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopRadarChart2.vue

@@ -1,185 +1,172 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height260" ref="lineChartBanlance2" id="lineChartBanlance2" />
+    <div class="height260" ref="loopRadarChart2" id="lineChartBanlance2" />
   </div>
 </template>
-<script>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import * as echarts from 'echarts'
+<script setup>
+  import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+  import { useStore } from 'vuex'
+  import * as echarts from 'echarts'
 
-export default defineComponent({
-  name: 'LoopRadarChart2',
-  props: {
+  const props = defineProps({
     getData: Object,
-  },
-  setup(props) {
-    let lineChartBanlance = ref(null)
+  })
 
-    const store = useStore()
-    const max = ref(0)
+  let loopRadarChart2 = ref(null)
 
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
+  const store = useStore()
+  const max = ref(0)
 
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true
-      // await store.dispatch('Home/queryWorksChartData')
-      loading.value = false
-      var aa = [props.getData.ia, props.getData.ib, props.getData.ic]
-      aa.sort(function (a, b) {
-        return a - b
-      })
-      max.value = aa.pop()
+  // 总数
+  const total = computed(() => store.state.Home.worksChartData.total)
+  // num
+  const num = computed(() => store.state.Home.worksChartData.num)
 
-      if (!props.getData.ia && !props.getData.ib && !props.getData.ic) {
-        max.value = 1
-      }
+  // 读取数据 func
+  const loading = ref(true)
+  const getData = async () => {
+    // loading.value = true
+    // await store.dispatch('Home/queryWorksChartData')
+    loading.value = false
+    var aa = [props.getData.ia, props.getData.ib, props.getData.ic]
+    aa.sort(function (a, b) {
+      return a - b
+    })
+    max.value = aa.pop()
+
+    if (!props.getData.ia && !props.getData.ib && !props.getData.ic) {
+      max.value = 1
     }
-    function echarts2() {
-      let myChart = echarts.init(document.getElementById('lineChartBanlance2'))
-      // 绘制图表
-      myChart.setOption({
-        backgroundColor: '#FFF',
-        tooltip: {},
-        grid: {
-          left: '20',
-          right: '40',
-          top: '-20',
-          bottom: '0',
-          containLabel: true,
+  }
+  function echarts2() {
+    let myChart = echarts.init(loopRadarChart2.value)
+    // 绘制图表
+    myChart.setOption({
+      backgroundColor: '#FFF',
+      tooltip: {},
+      grid: {
+        left: '20',
+        right: '40',
+        top: '-20',
+        bottom: '0',
+        containLabel: true,
+      },
+      radar: {
+        shape: 'circle',
+        radius: '70%',
+        center: ['50%', '55%'],
+        splitNumber: 5,
+        nameGap: '15',
+        name: {
+          textStyle: {
+            color: '#a8a8a8',
+          },
         },
-        radar: {
-          shape: 'circle',
-          radius: '70%',
-          center: ['50%', '55%'],
-          splitNumber: 5,
-          nameGap: '15',
-          name: {
-            textStyle: {
-              color: '#a8a8a8',
-            },
+        axisLine: {
+          lineStyle: {
+            color: '#ebebeb',
           },
-          axisLine: {
-            lineStyle: {
-              color: '#ebebeb',
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            width: 1,
+            color: '#ebebeb',
           },
-          splitLine: {
-            lineStyle: {
-              width: 1,
-              color: '#ebebeb',
-            },
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['#f8f8f8', '#fff'].reverse(),
           },
-          splitArea: {
-            areaStyle: {
-              color: ['#f8f8f8', '#fff'].reverse(),
-            },
+        },
+        indicator: [
+          {
+            name: 'Ia',
+            max: max.value ? max.value : 0,
           },
-          indicator: [
-            {
-              name: 'Ia',
-              max: max.value ? max.value : 0,
-            },
-            {
-              name: 'Ib',
-              max: max.value ? max.value : 0,
-            },
+          {
+            name: 'Ib',
+            max: max.value ? max.value : 0,
+          },
+          {
+            name: 'Ic',
+            max: max.value ? max.value : 0,
+          },
+        ],
+      },
+      series: [
+        {
+          name: 'Title✍',
+          type: 'radar',
+          symbolSize: 12,
+          itemStyle: {
+            borderColor: '#ebebeb',
+            borderWidth: 2,
+          },
+          areaStyle: {
+            opacity: 0.3,
+          },
+          data: [
             {
-              name: 'Ic',
-              max: max.value ? max.value : 0,
+              itemStyle: {
+                color: '#5eb6db',
+              },
+              value: [props.getData.ia, props.getData.ib, props.getData.ic],
             },
           ],
         },
-        series: [
-          {
-            name: 'Title✍',
-            type: 'radar',
-            symbolSize: 12,
-            itemStyle: {
-              borderColor: '#ebebeb',
-              borderWidth: 2,
-            },
-            areaStyle: {
-              opacity: 0.3,
-            },
-            data: [
-              {
-                itemStyle: {
-                  color: '#5eb6db',
-                },
-                value: [props.getData.ia, props.getData.ib, props.getData.ic],
-              },
-            ],
-          },
-        ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-    }
+      ],
+    })
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
 
-    const writeValue = (val) => {
-      val
-      getData()
-      echarts2()
-    }
+  const writeValue = (val) => {
+    val
+    getData()
+    echarts2()
+  }
 
-    //监听变化
-    watch(
-      () => props.getData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        newVal
-      
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
+  //监听变化
+  watch(
+    () => props.getData,
+    (newVal, oldVal, clear) => {
+      // 执行异步任务，并得到关闭异步任务的 id
+      newVal
 
-    onMounted(() => {
-      getData()
-      echarts2()
-    })
+      let id = writeValue(newVal, oldVal)
+      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+      clear(() => clearTimeout(id))
+    },
+    { lazy: true }
+  )
 
-    return {
-      lineChartBanlance,
-      loading,
-      total,
-      num,
-      echarts2,
-      max,
-    }
-  },
-})
+  onMounted(() => {
+    getData()
+    echarts2()
+  })
 </script>
 <style lang="scss" scoped>
-.homeBoxCard {
-  margin-bottom: 24px;
-  :deep(.el-card__header) {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  :deep(.el-card__body) {
-    padding: 12px;
-    font-size: 14px;
-    line-height: 1.5715;
-  }
-  :deep(.el-divider) {
-    margin: 8px 0;
-  }
-  .num {
-    font-size: 30px;
-    color: #515a6e;
-  }
-  .height260 {
-    height: 200px;
+  .homeBoxCard {
+    margin-bottom: 24px;
+    :deep(.el-card__header) {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 12px;
+      font-size: 14px;
+      line-height: 1.5715;
+    }
+    :deep(.el-divider) {
+      margin: 8px 0;
+    }
+    .num {
+      font-size: 30px;
+      color: #515a6e;
+    }
+    .height260 {
+      height: 200px;
+    }
   }
-}
-</style>
+</style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart.vue

@@ -3,173 +3,161 @@
     <div class="height300" id="pieChart" ref="pieChart" />
   </div>
 </template>
-<script>
-import { defineComponent, onMounted,watch} from 'vue'
-// import { useStore } from 'vuex'
-import * as echarts from 'echarts'
+<script setup>
+  import { defineComponent, onMounted, watch, ref } from 'vue'
+  // import { useStore } from 'vuex'
+  import * as echarts from 'echarts'
 
-// var total_datas = 0
-// for (var i = 0; i < echartData.length; i++) {
-//   total_datas += Number(echartData[i].value)
-//   console.log(typeof echartData[i].value)
-// }
+  // var total_datas = 0
+  // for (var i = 0; i < echartData.length; i++) {
+  //   total_datas += Number(echartData[i].value)
+  //   console.log(typeof echartData[i].value)
+  // }
 
-export default defineComponent({
-  name: 'PieChart',
-  props: {
+  const props = defineProps({
     getTableData: Object,
-  },
-  setup(props) {
-    // 读取数据 func
-    const getData = async () => {
-    }
-    function echarts2() {
-      let myChart = echarts.init(document.getElementById('pieChart'))
-      // 绘制图表
-      myChart.setOption({
-        title: [
-          {
-            text: 1,
-            subtext: '共计回路',
-            textStyle: {
-              fontSize: 24,
-              color: 'black',
-            },
-            subtextStyle: {
-              fontSize: 16,
-              color: 'black',
-            },
-            textAlign: 'center',
-            left: '49%',
-            top: '40%',
+  })
+
+  let pieChart = ref(null)
+
+  // 读取数据 func
+  const getData = async () => {}
+  function echarts2() {
+    let myChart = echarts.init(pieChart.value)
+    // 绘制图表
+    myChart.setOption({
+      title: [
+        {
+          text: 1,
+          subtext: '共计回路',
+          textStyle: {
+            fontSize: 24,
+            color: 'black',
           },
-        ],
-        tooltip: {
-          trigger: 'item',
-          formatter: function (parms) {
-            var str =
-              '</br>' +
-              parms.marker +
-              '' +
-              parms.data.legendname +
-              '</br>' 
-              // +
-              // '数量：' +
-              // parms.data.value +
-              // '</br>' +
-              // '占比：' +
-              // parms.percent +
-              // '%'
-            return str
+          subtextStyle: {
+            fontSize: 16,
+            color: 'black',
           },
+          textAlign: 'center',
+          left: '49%',
+          top: '40%',
         },
-        legend: {
-          type: 'scroll',
-          orient: 'horizontal',
-          bottom: '0%',
-          align: 'left',
-           selectedMode: false, //取消图例上的点击事件
-          // top:'middle',
-          textStyle: {
-            color: '#8C8C8C',
-          },
-          height: 250,
+      ],
+      tooltip: {
+        trigger: 'item',
+        formatter: function (parms) {
+          var str =
+            '</br>' + parms.marker + '' + parms.data.legendname + '</br>'
+          // +
+          // '数量：' +
+          // parms.data.value +
+          // '</br>' +
+          // '占比：' +
+          // parms.percent +
+          // '%'
+          return str
+        },
+      },
+      legend: {
+        type: 'scroll',
+        orient: 'horizontal',
+        bottom: '0%',
+        align: 'left',
+        selectedMode: false, //取消图例上的点击事件
+        // top:'middle',
+        textStyle: {
+          color: '#8C8C8C',
         },
-        series: [
-          {
-            // name: '标题',
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['37%', '55%'],
+        height: 250,
+      },
+      series: [
+        {
+          // name: '标题',
+          type: 'pie',
+          center: ['50%', '50%'],
+          radius: ['37%', '55%'],
 
-            clockwise: false, //饼图的扇区是否是顺时针排布
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
+          clockwise: false, //饼图的扇区是否是顺时针排布
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            {
+              value: props.getTableData.score >= 80 ? 1 : 0,
+              legendname: '优秀',
+              name: '优秀',
+              itemStyle: { color: '#40ABFE' },
             },
-            labelLine: {
-              show: false,
+            {
+              value: props.getTableData.score >= 60 ? 1 : 0,
+              legendname: '合格',
+              name: '合格',
+              itemStyle: { color: '#EEAA3F' },
             },
-            data: [
-              {
-                value: props.getTableData.score>=80?1:0,
-                legendname: '优秀',
-                name: '优秀',
-                itemStyle: { color: '#40ABFE' },
-              },
-              {
-                value: props.getTableData.score>=60?1:0,
-                legendname: '合格',
-                name: '合格',
-                itemStyle: { color: '#EEAA3F' },
-              },
-              {
-                value: props.getTableData.score<60?1:0,
-                legendname: '不合格',
-                name: '不合格',
-                itemStyle: { color: '#FF2222' },
-              },
-            ],
-          },
-        ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-    }
-
-    const writeValue = (val) => {
-      val
-      getData()
-      echarts2()
-    }
-
-    //监听变化
-    watch(
-      () => props.getTableData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        // console.log(newVal)
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
+            {
+              value: props.getTableData.score < 60 ? 1 : 0,
+              legendname: '不合格',
+              name: '不合格',
+              itemStyle: { color: '#FF2222' },
+            },
+          ],
+        },
+      ],
+    })
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
 
+  const writeValue = (val) => {
+    val
+    getData()
+    echarts2()
+  }
 
-    onMounted(() => {
-      getData()
-      echarts2()
-    })
+  //监听变化
+  watch(
+    () => props.getTableData,
+    (newVal, oldVal, clear) => {
+      // 执行异步任务，并得到关闭异步任务的 id
+      // console.log(newVal)
+      let id = writeValue(newVal, oldVal)
+      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+      clear(() => clearTimeout(id))
+    },
+    { lazy: true }
+  )
 
-    return {
-      echarts2,
-    }
-  },
-})
+  onMounted(() => {
+    getData()
+    echarts2()
+  })
 </script>
 <style lang="scss" scoped>
-.homeBoxCard {
-  margin-bottom: 24px;
-  :deep(.el-card__header) {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  :deep(.el-card__body) {
-    padding: 12px;
-    font-size: 14px;
-    line-height: 1.5715;
-  }
-  :deep(.el-divider) {
-    margin: 8px 0;
-  }
-  .num {
-    font-size: 30px;
-    color: #515a6e;
-  }
-  .height300 {
-    height: 300px;
+  .homeBoxCard {
+    margin-bottom: 24px;
+    :deep(.el-card__header) {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 12px;
+      font-size: 14px;
+      line-height: 1.5715;
+    }
+    :deep(.el-divider) {
+      margin: 8px 0;
+    }
+    .num {
+      font-size: 30px;
+      color: #515a6e;
+    }
+    .height300 {
+      height: 300px;
+    }
   }
-}
-</style>
+</style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/radarChart.vue

@@ -3,170 +3,161 @@
     <div class="height260" id="radarChart" ref="radarChart" />
   </div>
 </template>
-<script>
-import {  defineComponent, onMounted, watch } from 'vue'
-import * as echarts from 'echarts'
+<script setup>
+  import { defineComponent, onMounted, watch, ref } from 'vue'
+  import * as echarts from 'echarts'
 
-export default defineComponent({
-  name: 'RadarChart',
-  props:{
-    getTableData:Object,
-  },
-  setup(props) {
+  const props = defineProps({
+    getTableData: Object,
+  })
 
-    // 读取数据 func
-    const getData = async () => {
+  const radarChart = ref(null)
 
-      // await store.dispatch("Home/queryWorksChartData");
-    }
-    function echarts2(){
-       let myChart = echarts.init(document.getElementById('radarChart'))
-      // 绘制图表
-      myChart.setOption({
-        backgroundColor: '#FFF',
-        tooltip: {},
-        grid: {
-          left: '20',
-          right: '40',
-          top: '-20',
-          bottom: '0',
-          containLabel: true,
-        },
-        radar: {
-          radius: '60%',
-          center: ['50%', '55%'],
-          splitNumber: 5,
-          nameGap: '15',
-          name: {
-            textStyle: {
-              color: '#a8a8a8',
-            },
+  // 读取数据 func
+  const getData = async () => {
+    // await store.dispatch("Home/queryWorksChartData");
+  }
+  function echarts2() {
+    let myChart = echarts.init(radarChart.value)
+    // 绘制图表
+    myChart.setOption({
+      backgroundColor: '#FFF',
+      tooltip: {},
+      grid: {
+        left: '20',
+        right: '40',
+        top: '-20',
+        bottom: '0',
+        containLabel: true,
+      },
+      radar: {
+        radius: '60%',
+        center: ['50%', '55%'],
+        splitNumber: 5,
+        nameGap: '15',
+        name: {
+          textStyle: {
+            color: '#a8a8a8',
           },
-          axisLine: {
-            lineStyle: {
-              color: '#ebebeb',
-            },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#ebebeb',
           },
-          splitLine: {
-            lineStyle: {
-              width: 1,
-              color: '#ebebeb',
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            width: 1,
+            color: '#ebebeb',
           },
-          splitArea: {
-            areaStyle: {
-              color: ['#f8f8f8', '#fff'].reverse(),
-            },
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['#f8f8f8', '#fff'].reverse(),
           },
-          indicator: [
-            {
-              name: '电压平衡度',
-              max: 20,
-            },
-            {
-              name: '电流平衡度',
-              max: 20,
-            },
-            {
-              name: '功率因数',
-              max: 20,
-            },
-            {
-              name: '电压合格率',
-              max: 20,
-            },
-            {
-              name: '负载率',
-              max: 20,
-            },
-          ],
         },
-        series: [
+        indicator: [
           {
-            name: 'Title✍',
-            type: 'radar',
-            symbolSize: 12,
-            itemStyle: {
-              borderColor: '#ebebeb',
-              borderWidth: 2,
-            },
-            areaStyle: {
-              opacity: 0.3,
-            },
-            data: [
-              {
-                itemStyle: {
-                  color: '#5eb6db',
-                },
-                value: [props.getTableData.vtBalunQ?20:0,props.getTableData.elBalunQ?20:0, props.getTableData.cosQ?20:0, props.getTableData.uq?20:0, props.getTableData.iloadQ?20:0],
-              },
-            ],
+            name: '电压平衡度',
+            max: 20,
+          },
+          {
+            name: '电流平衡度',
+            max: 20,
+          },
+          {
+            name: '功率因数',
+            max: 20,
+          },
+          {
+            name: '电压合格率',
+            max: 20,
+          },
+          {
+            name: '负载率',
+            max: 20,
           },
         ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-
-    }
-
-    const writeValue = (val) => {
-    
-      val
-
-      getData()
-      echarts2()
-    }
-
-    //监听变化
-    watch(
-      () => props.getTableData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        // console.log(newVal)
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
       },
-      { lazy: true }
-    )
+      series: [
+        {
+          name: 'Title✍',
+          type: 'radar',
+          symbolSize: 12,
+          itemStyle: {
+            borderColor: '#ebebeb',
+            borderWidth: 2,
+          },
+          areaStyle: {
+            opacity: 0.3,
+          },
+          data: [
+            {
+              itemStyle: {
+                color: '#5eb6db',
+              },
+              value: [
+                props.getTableData.vtBalunQ ? 20 : 0,
+                props.getTableData.elBalunQ ? 20 : 0,
+                props.getTableData.cosQ ? 20 : 0,
+                props.getTableData.uq ? 20 : 0,
+                props.getTableData.iloadQ ? 20 : 0,
+              ],
+            },
+          ],
+        },
+      ],
+    })
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
 
-    onMounted(() => {
-      getData()
-      echarts2()
+  const writeValue = (val) => {
+    val
+    getData()
+    echarts2()
+  }
 
-     
-    })
+  //监听变化
+  watch(
+    () => props.getTableData,
+    (newVal, oldVal, clear) => {
+      // 执行异步任务，并得到关闭异步任务的 id
+      // console.log(newVal)
+      let id = writeValue(newVal, oldVal)
+      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+      clear(() => clearTimeout(id))
+    },
+    { lazy: true }
+  )
 
-    return {
-   
-      getData,
-      echarts2
-    }
-  },
-})
+  onMounted(() => {
+    getData()
+    echarts2()
+  })
 </script>
 <style lang="scss" scoped>
-.homeBoxCard {
-  margin-bottom: 24px;
-  :deep(.el-card__header) {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  :deep(.el-card__body) {
-    padding: 12px;
-    font-size: 14px;
-    line-height: 1.5715;
-  }
-  :deep(.el-divider) {
-    margin: 8px 0;
-  }
-  .num {
-    font-size: 30px;
-    color: #515a6e;
-  }
-  .height260 {
-    height: 260px;
+  .homeBoxCard {
+    margin-bottom: 24px;
+    :deep(.el-card__header) {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 12px;
+      font-size: 14px;
+      line-height: 1.5715;
+    }
+    :deep(.el-divider) {
+      margin: 8px 0;
+    }
+    .num {
+      font-size: 30px;
+      color: #515a6e;
+    }
+    .height260 {
+      height: 260px;
+    }
   }
-}
-</style>
+</style>

src/views/siteManage/index.vue

@@ -3,22 +3,28 @@
     <!-- 树形组件start -->
     <div class="grid-content treeDom">
       <div style="text-align: center" class="mb-20">
+        <el-button v-if="treeLevel == 3 || groupingId == 0" disabled>
+          添加分组
+        </el-button>
         <el-button
-          v-if="treeLevel == 3 || groupingId == 0 "
-          disabled
+          v-else
+          type="primary"
+          @click="addGroup()"
+          :disabled="store.state.authorities.indexOf('新增') == -1"
         >
           添加分组
         </el-button>
-        <el-button v-else type="primary" @click="addGroup()" :disabled="store.state.authorities.indexOf('新增')==-1">
-          添加分组
+        <el-button v-if="treeLevel == 3 || groupingId == 0" disabled>
+          添加站点
         </el-button>
         <el-button
-          v-if="treeLevel == 3 || groupingId == 0 "
-          disabled
+          v-else
+          type="primary"
+          @click="addSite()"
+          :disabled="store.state.authorities.indexOf('新增') == -1"
         >
           添加站点
         </el-button>
-        <el-button v-else type="primary" @click="addSite()" :disabled="store.state.authorities.indexOf('新增')==-1">添加站点</el-button>
       </div>
       <el-input
         placeholder="输入关键字进行过滤"
@@ -89,7 +95,7 @@
     <div
       class="grid-content nestingDom"
       style="width: calc(100% - 300px)"
-      v-if="flag2 "
+      v-if="flag2"
     >
       <el-tabs
         v-if="treeLevel == 3 || groupingId == 0"
@@ -161,397 +167,345 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick } from 'vue'
-
-import basicInfo from './basicInfo'
-import WatchDog from './watchDog'
-import variableList from './variableList'
-import camera from './camera'
-import PowerScore from './powerScore'
-
-import groupInfoCom from './groupInfoCom'
-import addGroupCom from './addGroupCom'
-import addSiteCom from './addSiteCom'
-
-import * as api from '@/api/siteManage/index'
-import { ElMessage } from 'element-plus'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-
-export default defineComponent({
-  components: {
-    basicInfo,
-    WatchDog,
-    variableList,
-    camera,
-    PowerScore,
-    groupInfoCom,
-    addGroupCom,
-    addSiteCom,
-  },
-  setup() {
-    const store = useStore()
-    const flag2 = ref(false)
-    const tree = ref(null)
-    const showTree = ref(true)
-    const defaultExpand = ref(0)
-    const showDialog = ref(false)
-    const showDialog2 = ref(false)
-    const dialogTitle = ref('')
-    const treeLevel = ref(3)
-    const groupingId = ref(1)
-    const siteId = ref(0)
-    const labelCom = ref('')
-    const siteName = ref('')
-    const label = ref('')
-    const activeName = ref('first')
-    const filterText = ref('')
-    const selectNode = ref(0)
-
-    const route = useRoute()
-    let num = route.query.num
-    const data = ref([
-      {
-        label: '所有站点',
-        children: [],
-      },
-    ])
-
-    // const data2 = ref([
-    //   {
-    //     grouping_id: 1,
-    //     id: 1,
-    //     label: '所有站点',
-    //     children: [
-    //       {
-    //         id: 1,
-    //         label: '分组测试1',
-    //          grouping_id: 1,
-    //         children: [
-    //           {
-    //             id: 368,
-    //             label: '测试站点89',
-    //           },
-    //           {
-    //             id: 367,
-    //             label: '测试站点88',
-    //           },
-    //         ],
-    //       },
-    //       {
-    //         grouping_id: 0,
-    //         id: 5,
-    //         label: '中国铁路上海...',
-    //       },
-    //       {
-    //         grouping_id: 0,
-    //         id: 5,
-    //         label: '上海拓石...',
-    //       },
-    //     ],
-    //   },
-    // ])
-    // const defaultProps2 = ref({
-    //   children: 'children',
-    //   label: 'label',
-    // })
-
-    const defaultProps = ref({
-      children: 'children',
-      label: 'label',
-    })
-
-    const getMsgFormSon = () => {
-      activeName.value = 'third'
-    }
-    const getMsgFormSon2 = () => {
-      siteTreeList()
+<script setup>
+  import { ref, reactive, watch, onMounted, nextTick } from 'vue'
+
+  import basicInfo from './basicInfo'
+  import WatchDog from './watchDog'
+  import variableList from './variableList'
+  import camera from './camera'
+  import PowerScore from './powerScore'
+
+  import groupInfoCom from './groupInfoCom'
+  import addGroupCom from './addGroupCom'
+  import addSiteCom from './addSiteCom'
+
+  import * as api from '@/api/siteManage/index'
+  import { ElMessage } from 'element-plus'
+  import { useStore } from 'vuex'
+  import { useRoute } from 'vue-router'
+
+  const store = useStore()
+  const flag2 = ref(false)
+  const tree = ref(null)
+  const showTree = ref(true)
+  const defaultExpand = ref(0)
+  const showDialog = ref(false)
+  const showDialog2 = ref(false)
+  const dialogTitle = ref('')
+  const treeLevel = ref(3)
+  const groupingId = ref(1)
+  const siteId = ref(0)
+  const labelCom = ref('')
+  const siteName = ref('')
+  const label = ref('')
+  const activeName = ref('first')
+  const filterText = ref('')
+  const selectNode = ref(0)
+
+  const route = useRoute()
+  let num = route.query.num
+  const data = ref([
+    {
+      label: '所有站点',
+      children: [],
+    },
+  ])
+
+  // const data2 = ref([
+  //   {
+  //     grouping_id: 1,
+  //     id: 1,
+  //     label: '所有站点',
+  //     children: [
+  //       {
+  //         id: 1,
+  //         label: '分组测试1',
+  //          grouping_id: 1,
+  //         children: [
+  //           {
+  //             id: 368,
+  //             label: '测试站点89',
+  //           },
+  //           {
+  //             id: 367,
+  //             label: '测试站点88',
+  //           },
+  //         ],
+  //       },
+  //       {
+  //         grouping_id: 0,
+  //         id: 5,
+  //         label: '中国铁路上海...',
+  //       },
+  //       {
+  //         grouping_id: 0,
+  //         id: 5,
+  //         label: '上海拓石...',
+  //       },
+  //     ],
+  //   },
+  // ])
+  // const defaultProps2 = ref({
+  //   children: 'children',
+  //   label: 'label',
+  // })
+
+  const defaultProps = ref({
+    children: 'children',
+    label: 'label',
+  })
+
+  function getMsgFormSon() {
+    activeName.value = 'third'
+  }
+  function getMsgFormSon2() {
+    siteTreeList()
+    setTimeout(() => {
+      treeLevel.value = 1
+    }, 1000)
+  }
+  //站点基本信息保存后触发
+  function getMsgFormSon3(data) {
+    siteTreeList()
+    setTimeout(() => {
+      tree.value.setCurrentKey(selectNode.value)
+    }, 1000)
+
+    if (data == 0) {
       setTimeout(() => {
         treeLevel.value = 1
       }, 1000)
     }
-    //站点基本信息保存后触发
-    const getMsgFormSon3 = (data) => {
-      siteTreeList()
-      setTimeout(() => {
-        tree.value.setCurrentKey(selectNode.value)
-      }, 1000)
+  }
+  function mouseenter(data) {
+    data.show = true
+  }
+  function mouseleave(data) {
+    data.show = false
+  }
 
-      if (data == 0) {
-        setTimeout(() => {
-          treeLevel.value = 1
-        }, 1000)
-      }
+  function handleNodeClick(data, obj, node) {
+    // alert('obj.level'+obj.level)
+    activeName.value = 'first'
+    data, node
+    flag2.value = true
+
+    treeLevel.value = obj.level
+    groupingId.value = obj.data.grouping_id
+    label.value = obj.data.label
+    // console.log('obj.data')
+    // console.log(obj.data.id)
+    selectNode.value = obj.data.id
+    labelCom.value = obj.data.label
+    store.state.siteManageLabelCom = obj.data.label
+    store.state.basicInfoSiteName = ''
+
+    if (treeLevel.value == 3) {
+      siteId.value = obj.data.id
     }
-    function mouseenter(data) {
-      data.show = true
-    }
-    function mouseleave(data) {
-      data.show = false
+    if (treeLevel.value == 2 && groupingId.value == 0) {
+      // console.log(obj.data)
+      siteId.value = obj.data.id
     }
+  }
 
-    const handleNodeClick = (data, obj, node) => {
-      // alert('obj.level'+obj.level) 
-      activeName.value = 'first'
-      data, node
-      flag2.value = true
-
-      treeLevel.value = obj.level
-      groupingId.value = obj.data.grouping_id
-      label.value = obj.data.label
-      // console.log('obj.data')
-      // console.log(obj.data.id)
-      selectNode.value = obj.data.id
-      labelCom.value = obj.data.label
-      store.state.siteManageLabelCom = obj.data.label
-      store.state.basicInfoSiteName = ''
-
-      if (treeLevel.value == 3) {
-        siteId.value = obj.data.id
-      }
-      if (treeLevel.value == 2 && groupingId.value == 0) {
-        // console.log(obj.data)
-        siteId.value = obj.data.id
-      }
-    }
+  function filterNode(value, data) {
+    if (!value) return true
+    return data.label.indexOf(value) !== -1
+  }
 
-    function filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
+  // 异步任务 用于给tree传值
+  function writeValue(val) {
+    return tree.value.filter(val)
+  }
+  // 定义 watch 监听
+  watch(
+    filterText,
+    (newCount, old, clear) => {
+      // 执行异步任务，并得到关闭异步任务的 id
+      let id = writeValue(newCount, old)
+      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+      clear(() => clearTimeout(id))
+    },
+    // watch 刚被创建的时候不执行
+    { lazy: true }
+  )
+  watch(
+    activeName,
+    (newCount, old, clear) => {
+      newCount, old, clear
+      // 清除定时器
+      clear(() => clearTimeout(store.state.siteCameraTimer))
+    },
+    // watch 刚被创建的时候不执行
+    { lazy: true }
+  )
+
+  // 新建分或站点的关闭操作
+  function closeDialog(res) {
+    if (store.state.basicInfoConst == 1 && res == '默认关闭') {
+      // alert('1 并  默认关闭')
+      showDialog.value = false
+      showDialog2.value = false //弹框关闭
+      siteTreeList()
+      flag2.value = false //基本信息不显示
+      treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
+    } else if (store.state.basicInfoConst == 1) {
+      //  alert('1')
+      showDialog.value = false
+      showDialog2.value = false
     }
+  }
 
-    // 异步任务 用于给tree传值
-    const writeValue = (val) => {
-      return tree.value.filter(val)
-    }
-    // 定义 watch 监听
-    watch(
-      filterText,
-      (newCount, old, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        let id = writeValue(newCount, old)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      // watch 刚被创建的时候不执行
-      { lazy: true }
-    )
-    watch(
-      activeName,
-      (newCount, old, clear) => {
-        newCount, old, clear
-        // 清除定时器
-        clear(() => clearTimeout(store.state.siteCameraTimer))
-      },
-      // watch 刚被创建的时候不执行
-      { lazy: true }
-    )
-
-    // 新建分或站点的关闭操作
-    const closeDialog = (res) => {
-      if (store.state.basicInfoConst == 1 && res == '默认关闭') {
-        // alert('1 并  默认关闭')
-        showDialog.value = false
-        showDialog2.value = false  //弹框关闭
-        siteTreeList()
-        flag2.value = false  //基本信息不显示
-        treeLevel.value = 3  //新建站点  新建分组 按钮不可点击
-      } else if (store.state.basicInfoConst == 1) {
-          //  alert('1')
-        showDialog.value = false
-        showDialog2.value = false
-      }
-    }
+  //站点保存后关闭
+  function getFromSon(param, param2, param3) {
+    // alert('站点保存后关闭')
+    siteId.value = param2
+    siteName.value = param
+    groupingId.value = param3
 
-    //站点保存后关闭
-    const getFromSon = (param, param2, param3) => {
-      // alert('站点保存后关闭')
-      siteId.value = param2
-      siteName.value = param
-      groupingId.value = param3
+    flag2.value = true //基本信息显示
+    treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
+  }
 
-      flag2.value = true //基本信息显示
-      treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
+  //新建分组
+  const tableItem = reactive([])
+  function addGroup() {
+    // alert('添加分组弹框')
+    tableItem.value = {
+      groupingName: '',
     }
+    dialogTitle.value = '新建分组'
+    showDialog.value = true
+  }
 
-    //新建分组
-    const tableItem = reactive([])
-    const addGroup = () => {
-      // alert('添加分组弹框')
-      tableItem.value = {
-        groupingName: '',
-      }
-      dialogTitle.value = '新建分组'
-      showDialog.value = true
+  //新建站点
+  function addSite() {
+    tableItem.value = {
+      id: '',
+      stationName: '',
+      xh: '',
+      userName: '',
+      list: [],
+      done: '',
+      guaZai: '',
+      checked: true,
     }
+    dialogTitle.value = '新建站点'
+    showDialog2.value = true
+  }
 
-    //新建站点
-    const addSite = () => {
-      tableItem.value = {
-        id: '',
-        stationName: '',
-        xh: '',
-        userName: '',
-        list: [],
-        done: '',
-        guaZai: '',
-        checked: true,
-      }
-      dialogTitle.value = '新建站点'
-      showDialog2.value = true
-    }
-    const remove = (node, data) => {
-      const parent = node.parent
-      const children = parent.data.children || parent.data
-      const index = children.findIndex((d) => d.id === data.id)
-      children.splice(index, 1)
-      this.dataSource = [...this.dataSource]
-    }
+  function remove(node, data) {
+    const parent = node.parent
+    const children = parent.data.children || parent.data
+    const index = children.findIndex((d) => d.id === data.id)
+    children.splice(index, 1)
+    this.dataSource = [...this.dataSource]
+  }
 
-    //左侧树结构列表
-    function siteTreeList() {
-      api.siteTreeList({}).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          var jsona = JSON.stringify(requset.data)
-          var jsonb = jsona.replace(/"grouping_name"/g, '"label"')
-          jsonb = jsonb.replace(/"site_list"/g, '"children"')
-          jsonb = jsonb.replace(/"site_name"/g, '"label"')
-          jsonb = jsonb.replace(/"site_id"/g, '"id"')
-          var jsonc = JSON.parse(jsonb)
-          data.value[0].children = jsonc
-
-          if (route.query.activeName && route.query.siteId) {
-            setTimeout(() => {
-              tree.value.setCurrentKey(route.query.siteId)
-            }, 1000)
-            flag2.value = true
-            treeLevel.value = 3
-            activeName.value = route.query.activeName
-            siteId.value = route.query.siteId
-            var bb = []
-            jsonc.forEach(function (item) {
-              if (item.id == siteId.value) {
-                bb.push(item)
-              }
-            })
-            store.state.siteManageLabelCom = bb[0].label
-          }
-        } else {
-          ElMessage.error(requset.msg)
+  //左侧树结构列表
+  function siteTreeList() {
+    api.siteTreeList({}).then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        var jsona = JSON.stringify(requset.data)
+        var jsonb = jsona.replace(/"grouping_name"/g, '"label"')
+        jsonb = jsonb.replace(/"site_list"/g, '"children"')
+        jsonb = jsonb.replace(/"site_name"/g, '"label"')
+        jsonb = jsonb.replace(/"site_id"/g, '"id"')
+        var jsonc = JSON.parse(jsonb)
+        data.value[0].children = jsonc
+
+        if (route.query.activeName && route.query.siteId) {
+          setTimeout(() => {
+            tree.value.setCurrentKey(route.query.siteId)
+          }, 1000)
+          flag2.value = true
+          treeLevel.value = 3
+          activeName.value = route.query.activeName
+          siteId.value = route.query.siteId
+          var bb = []
+          jsonc.forEach(function (item) {
+            if (item.id == siteId.value) {
+              bb.push(item)
+            }
+          })
+          store.state.siteManageLabelCom = bb[0].label
         }
-      })
-    }
-
-    onMounted(() => {
-      siteTreeList()
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
+  }
 
-    nextTick(() => {})
-
-    return {
-      showDialog,
-      showDialog2,
-      treeLevel,
-      activeName,
-      filterText,
-      dialogTitle,
-      data,
-      defaultProps,
-      tableItem,
-      groupingId,
-      siteId,
-      labelCom,
-      label,
-      flag2,
-      showTree,
-      tree,
-
-      getFromSon,
-      siteName,
-
-      defaultExpand,
-      getMsgFormSon,
-      getMsgFormSon2,
-      getMsgFormSon3,
-      mouseenter,
-      mouseleave,
-      filterNode,
-      handleNodeClick,
-      closeDialog,
-      addGroup,
-      addSite,
-      remove,
-
-      selectNode,
-      num,
-      store
-    }
-  },
-})
+  onMounted(() => {
+    siteTreeList()
+  })
+
+  nextTick(() => {})
 </script>
 
 <style scoped lang="scss">
-.custom-tree-node {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: block;
-}
-.el-tree-node__content{
-  font-size:14px
-}
-.app-container.page-nesting {
-  padding: 0;
-  background: rgba(0, 0, 0, 0);
-}
-.grid-content {
-  background: #fff;
-  height: calc(100vh - 140px);
-  overflow-y: auto;
-}
-.el-input__inner {
-  border-radius: 20px !important;
-}
-.treeDom {
-  width: 290px;
-  position: absolute;
-  left: 0;
-  // margin-left: 20px;
-  padding: 15px;
-  height: calc(100vh - 140px);
-
-  .el-icon-search {
-    color: #409eff;
+  .custom-tree-node {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: block;
+  }
+  .el-tree-node__content {
+    font-size: 14px;
+  }
+  .app-container.page-nesting {
+    padding: 0;
+    background: rgba(0, 0, 0, 0);
   }
-  .el-button {
-    width: 100px;
+  .grid-content {
+    background: #fff;
+    height: calc(100vh - 140px);
+    overflow-y: auto;
+  }
+  .el-input__inner {
+    border-radius: 20px !important;
+  }
+  .treeDom {
+    width: 290px;
+    position: absolute;
+    left: 0;
+    // margin-left: 20px;
+    padding: 15px;
+    height: calc(100vh - 140px);
+
+    .el-icon-search {
+      color: #409eff;
+    }
+    .el-button {
+      width: 100px;
+    }
+  }
+  .nestingDom {
+    margin-left: 300px;
   }
-}
-.nestingDom {
-  margin-left: 300px;
-}
 </style>
 <style lang="scss">
-// tab重置样式
-.el-tabs--card > .el-tabs__header .el-tabs__item {
-  line-height: 50px;
-  height: 50px;
-  font-size: 16px;
-}
-.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-  border-bottom: 2px solid #409eff;
-  color: #409eff;
-}
-.el-tabs--card .el-tabs__header:hover,
-.el-tabs__item:hover {
-  color: #409eff !important;
-}
-.el-tabs__header {
-  margin-bottom: 0;
-}
-.el-tabs--card > .el-tabs__header .el-tabs__item,
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
-  border: none;
-}
+  // tab重置样式
+  .el-tabs--card > .el-tabs__header .el-tabs__item {
+    line-height: 50px;
+    height: 50px;
+    font-size: 16px;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    border-bottom: 2px solid #409eff;
+    color: #409eff;
+  }
+  .el-tabs--card .el-tabs__header:hover,
+  .el-tabs__item:hover {
+    color: #409eff !important;
+  }
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item,
+  .el-tabs--card > .el-tabs__header .el-tabs__nav {
+    border: none;
+  }
 </style>

vab-config/index.js

@@ -0,0 +1,40 @@
+module.exports = {
+  webpackBarName: 'vue-admin-better',
+  webpackBanner:
+    ' build: vue-admin-better  \n vue-admin-better QQ Group(QQ群): 972435319、1139183756 \n time: ',
+  donationConsole() {
+    const chalk = require('chalk')
+    console.log(
+      chalk.green(
+        `> 欢迎使用vue-admin-beautiful，开源地址：https://github.com/chuzhixin/vue-admin-beautiful`
+      )
+    )
+
+    console.log(
+      chalk.green(
+        `> pro版演示地址：http://chu1204505056.gitee.io/vue-admin-beautiful-pro?hmsr=console&hmpl=&hmcu=&hmkw=&hmci=`
+      )
+    )
+
+    console.log(
+      chalk.green(
+        `> vue 2.x版本演示地址（MIT协议免费商用）：http://chu1204505056.gitee.io/vue-admin-beautiful?hmsr=console&hmpl=&hmcu=&hmkw=&hmci=`
+      )
+    )
+
+    console.log(
+      chalk.green(
+        `> vue3.X版演示地址（andv MIT协议免费商用）：http://chu1204505056.gitee.io/vue-admin-beautiful-antdv?hmsr=console&hmpl=&hmcu=&hmkw=&hmci=`
+      )
+    )
+
+    console.log(
+      chalk.green(
+        `> 使用中出现任何问题可加QQ群反馈，获取文档（群号：972435319，1139183756）`
+      )
+    )
+
+    console.log(chalk.green(`> 如果您不希望显示以上信息，可在config中配置关闭`))
+    console.log('\n')
+  },
+}

vab-config/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "vab-config",
+  "main": "index.js"
+}

vue.config.js

@@ -4,25 +4,25 @@
  */
 const path = require('path')
 const {
-    /* baseURL, */
-    publicPath,
-    assetsDir,
-    outputDir,
-    lintOnSave,
-    transpileDependencies,
-    title,
-    abbreviation,
-    devPort,
-    providePlugin,
-    build7z,
-    donation,
+  /* baseURL, */
+  publicPath,
+  assetsDir,
+  outputDir,
+  lintOnSave,
+  transpileDependencies,
+  title,
+  abbreviation,
+  devPort,
+  providePlugin,
+  build7z,
+  donation,
 } = require('./src/config')
 const { webpackBarName, webpackBanner, donationConsole } = require('vab-config')
 
 if (donation) donationConsole()
 const { version, author } = require('./package.json')
 const Webpack = require('webpack')
-const WebpackBar = require('webpackbar')
+const WebpackBar = require('webpackbar') 
 const FileManagerPlugin = require('filemanager-webpack-plugin')
 const dayjs = require('dayjs')
 const date = dayjs().format('YYYY_M_D')
@@ -33,7 +33,7 @@ process.env.VUE_APP_UPDATE_TIME = time
 process.env.VUE_APP_VERSION = version
 
 const resolve = (dir) => {
-    return path.join(__dirname, dir)
+  return path.join(__dirname, dir)
 }
 
 // const mockServer = () => {
@@ -44,179 +44,181 @@ const resolve = (dir) => {
 //     }
 // }
 
-
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
-    publicPath,
-    assetsDir,
-    outputDir,
-    lintOnSave,
-    transpileDependencies,
-    devServer: {
-        hot: true,
-        port: devPort,
-        open: true,
-        noInfo: false,
-        overlay: {
-            warnings: true,
-            errors: true,
-        },
-        disableHostCheck: true,
+  publicPath,
+  assetsDir,
+  outputDir,
+  lintOnSave,
+  transpileDependencies,
+  devServer: {
+    hot: true,
+    port: devPort,
+    open: true,
+    noInfo: false,
+    overlay: {
+      warnings: true,
+      errors: true,
+    },
+    disableHostCheck: true,
 
-        // 注释掉的地方是前端配置代理访问后端的示例
-        proxy: {
-            //   [baseURL]: {
-            //     target: `http://你的后端接口地址`,
-            //     ws: true,
-            //     changeOrigin: true,
-            //     pathRewrite: {
-            //       ["^/" + baseURL]: "",
-            //     },
-            //   },
-            './': {
-                target: 'https://qhome.usky.cn/uskypower/',
-                ws: false,
-                changeOrigin: true,
-                pathRewrite: {
-                    '^./': './'
-                }
-            }
+    // 注释掉的地方是前端配置代理访问后端的示例
+    proxy: {
+      //   [baseURL]: {
+      //     target: `http://你的后端接口地址`,
+      //     ws: true,
+      //     changeOrigin: true,
+      //     pathRewrite: {
+      //       ["^/" + baseURL]: "",
+      //     },
+      //   },
+      './': {
+        target: 'https://qhome.usky.cn/uskypower/',
+        ws: false,
+        changeOrigin: true,
+        pathRewrite: {
+          '^./': './',
         },
-        // public: 'localhost:9999/',  
-        // after: mockServer(),
-    },
-    configureWebpack() {
-        return {
-            externals: {
-                AMap: "AMap"
-            },
-            module: {
-                rules: [{
-                    test: /\.mjs$/,
-                    include: /node_modules/,
-                    type: "javascript/auto"
-                }]
-            },
-            resolve: {
-                alias: {
-                    '@': resolve('src'),
-                    '*': resolve(''),
-                },
-            },
-            plugins: [
-                new Webpack.ProvidePlugin(providePlugin),
-                new WebpackBar({
-                    name: webpackBarName,
-                }),
-                // new UglifyJsPlugin({
-                //     uglifyOptions: {
-                //         output: {
-                //             comments: false, // 去掉注释
-                //         },
-                //         warnings: false,
-                //         compress: {
-                //             drop_console: true,
-                //             drop_debugger: false,
-                //             pure_funcs: ['console.log']//移除console
-                //         }
-                //     }
-                // })
-            ],
-        }
+      },
     },
-    chainWebpack(config) {
-        config.resolve.symlinks(true)
-        config.module
-            .rule('svg')
-            .exclude.add(resolve('src/icons'))
-            .end()
-        config.module
-            .rule('icons')
-            .test(/\.svg$/)
-            .include.add(resolve('src/icons'))
-            .end()
-            .use('svg-sprite-loader')
-            .loader('svg-sprite-loader')
-            .options({
-                symbolId: 'icon-[name]'
-            })
-            .end()
+    // public: 'localhost:9999/',
+    // after: mockServer(),
+  },
+  configureWebpack() {
+    return {
+      externals: {
+        AMap: 'AMap',
+      },
+      module: {
+        rules: [
+          {
+            test: /\.mjs$/,
+            include: /node_modules/,
+            type: 'javascript/auto',
+          },
+        ],
+      },
+      resolve: {
+        alias: {
+          '@': resolve('src'),
+          '*': resolve(''),
+        },
+      },
+      plugins: [
+        new Webpack.ProvidePlugin(providePlugin),
+        new WebpackBar({
+          name: webpackBarName,
+        }),
+        // new UglifyJsPlugin({
+        //     uglifyOptions: {
+        //         output: {
+        //             comments: false, // 去掉注释
+        //         },
+        //         warnings: false,
+        //         compress: {
+        //             drop_console: true,
+        //             drop_debugger: false,
+        //             pure_funcs: ['console.log']//移除console
+        //         }
+        //     }
+        // })
+      ],
+    }
+  },
+  chainWebpack(config) {
+    config.resolve.symlinks(true)
+    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]',
+      })
+      .end()
 
-        config.when(process.env.NODE_ENV === 'development', (config) => {
-            config.devtool('source-map')
-        })
+    config.when(process.env.NODE_ENV === 'development', (config) => {
+      config.devtool('source-map')
+    })
 
-        config.when(process.env.NODE_ENV !== 'development', (config) => {
-            config.performance.set('hints', false)
-            config.devtool('none')
-            config.optimization.splitChunks({
-                chunks: 'all',
-                cacheGroups: {
-                    libs: {
-                        name: 'vue-admin-beautiful-libs',
-                        test: /[\\/]node_modules[\\/]/,
-                        priority: 10,
-                        chunks: 'initial',
-                    },
-                },
-            })
-            config
-                .plugin('banner')
-                .use(Webpack.BannerPlugin, [`${webpackBanner}${time}`])
-                .end()
-            config.module
-                .rule('images')
-                .use('image-webpack-loader')
-                .loader('image-webpack-loader')
-                .options({
-                    bypassOnDebug: true,
-                })
-                .end()
+    config.when(process.env.NODE_ENV !== 'development', (config) => {
+      config.performance.set('hints', false)
+      config.devtool('none')
+      config.optimization.splitChunks({
+        chunks: 'all',
+        cacheGroups: {
+          libs: {
+            name: 'vue-admin-beautiful-libs',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: 'initial',
+          },
+        },
+      })
+      config
+        .plugin('banner')
+        .use(Webpack.BannerPlugin, [`${webpackBanner}${time}`])
+        .end()
+      config.module
+        .rule('images')
+        .use('image-webpack-loader')
+        .loader('image-webpack-loader')
+        .options({
+          bypassOnDebug: true,
         })
+        .end()
+    })
 
-        if (build7z) {
-            config.when(process.env.NODE_ENV === 'production', (config) => {
-                config
-                    .plugin('fileManager')
-                    .use(FileManagerPlugin, [{
-                        onEnd: {
-                            delete: [`./${outputDir}/video`, `./${outputDir}/data`],
-                            archive: [{
-                                source: `./${outputDir}`,
-                                destination: `./${outputDir}/${abbreviation}_${outputDir}_${date}.7z`,
-                            },],
-                        },
-                    },])
-                    .end()
-            })
-        }
-    },
-    runtimeCompiler: true,
-    productionSourceMap: false,
-    css: {
-        requireModuleExtension: true,
-        sourceMap: true,
-        loaderOptions: {
-            sass: {
-                data: `
-                    @import "@/assets/css/index.scss";
-                    @import "@/assets/css/global.scss";
-                    `
-            },
-            less: {
-                lessOptions: {
-                    javascriptEnabled: true,
-                    modifyVars: {
-                        'vab-color-blue': '#1890ff',
-                        'vab-margin': '15px',
-                        'vab-padding': '15px',
-                        'vab-header-height': '60px',
-                        'vab-breadcrumb-height': '37px',
-                        'vab-public-height': 'calc(100vh - 130px)',
-                    },
-                },
+    if (build7z) {
+      config.when(process.env.NODE_ENV === 'production', (config) => {
+        config
+          .plugin('fileManager')
+          .use(FileManagerPlugin, [
+            {
+              onEnd: {
+                delete: [`./${outputDir}/video`, `./${outputDir}/data`],
+                archive: [
+                  {
+                    source: `./${outputDir}`,
+                    destination: `./${outputDir}/${abbreviation}_${outputDir}_${date}.7z`,
+                  },
+                ],
+              },
             },
+          ])
+          .end()
+      })
+    }
+  },
+  runtimeCompiler: true,
+  productionSourceMap: false,
+  css: {
+    requireModuleExtension: true,
+    sourceMap: true,
+    loaderOptions: {
+      sass: {
+        data: `
+              @import "@/assets/css/index.scss";
+              @import "@/assets/css/global.scss";
+              `,
+      },
+      less: {
+        lessOptions: {
+          javascriptEnabled: true,
+          modifyVars: {
+            'vab-color-blue': '#1890ff',
+            'vab-margin': '15px',
+            'vab-padding': '15px',
+            'vab-header-height': '60px',
+            'vab-breadcrumb-height': '37px',
+            'vab-public-height': 'calc(100vh - 130px)',
+          },
         },
+      },
     },
-}
+  },
+}