alarm

src/components/coms/table/table2.vue

@@ -9,7 +9,7 @@
       :sortable="col.sortable"
       :show-overflow-tooltip="!col.slot"
       :fixed="col.fixed"
-      :align="col.align ? col.align : 'center'"
+      :align="'center'"
       :resizable="col.resizable"
       :header-align="'center'"
     >

src/router/index.js

@@ -2,497 +2,511 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import Home from '../views/Home/Home.vue'
 
 const routes = [{
-  path: '/',
-  redirect: '/monitor/home'
-},
-{
-  path: '/monitor/home', // 驾驶舱
-  name: 'Home',
-  component: Home,
-},
-{
-  path: '/monitor/about',
-  name: 'About',
-  component: () =>
-    import( /* webpackChunkName: "about" */ '../views/About.vue'),
-},
-{
-  path: '/monitor/demo',
-  name: 'Demo',
-  component: () =>
-    import( /* webpackChunkName: "Demo" */ '../views/Demo.vue'),
-},
-{
-  path: '/monitor/status', // 状态监视
-  name: 'Status',
-  component: () =>
-    import( /* webpackChunkName: "status" */ '../views/Status/Status.vue'),
-},
-{
-  path: '/monitor/agc', // AGC 监视
-  name: 'Agc',
-  component: () =>
-    import( /* webpackChunkName: "agc" */ '../views/Agc/Agc.vue'),
-},
-{
-  path: '/monitor/windsite',
-  name: 'WindSite',
-  component: () =>
-    import( /* webpackChunkName: "windsite" */ '../views/WindSite/WindSite.vue'),
-  children: [{
-    path: 'home/:wpId', // 场站监视
-    component: () =>
-      import( /* webpackChunkName: "windsitehome" */ '../views/WindSite/pages/Home/Home.vue'),
-  }, {
-    path: 'draughtfanlist/:wpId', // 风机列表
-    component: () =>
-      import( /* webpackChunkName: "windsitedraughtfanlist" */ '../views/WindSite/pages/DraughtFanList.vue'),
-  }, {
-    path: 'matrix/:wpId', // 风场矩阵
-    component: () =>
-      import( /* webpackChunkName: "windsitematrix" */ '../views/WindSite/pages/Matrix.vue'),
-  }, {
-    path: 'lightmatrix/:wpId',
-    component: () =>
-      import( /* webpackChunkName: "windsitelightmatrix" */ '../views/WindSite/pages/LightMatrix.vue'),
-  }, {
-    path: 'box/:wpId',
-    component: () =>
-      import( /* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue'),
-  }, {
-    path: 'info/:wpId/:wtId', // 单机状态监视
-    component: () =>
-      import( /* webpackChunkName: "info" */ '../views/WindSite/pages/Info/Info.vue'),
-  }, {
-    path: 'tower/:wpId', // 测风塔
-    component: () =>
-      import( /* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue'),
-  }, {
-    path: 'inverter-info/:wpId',
-    component: () =>
-      import( /* webpackChunkName: "inverter-info" */ '../views/WindSite/pages/Inverter-Info.vue'),
-  }, {
-    path: 'map/:wpId',
-    component: () =>
-      import( /* webpackChunkName: "windsitemap" */ '../views/WindSite/pages/Map.vue'),
-  }, {
-    path: 'map1/:wpId',
-    component: () =>
-      import( /* webpackChunkName: "windsitemap1" */ '../views/WindSite/pages/Map1.vue'),
-  },
-  {
-    path: 'boosterstation/:wpId', // 升压站
-    component: () =>
-      import( /* webpackChunkName: "boosterstation" */ '../views/WindSite/pages/BoosterStation.vue'),
-  },
-  {
-    path: "generalappearance/:wpId", // 总样貌
-    component: () =>
-      import( /* webpackChunkName: "generalappearance" */ "../views/WindSite/pages/GeneralAppearance.vue"),
-  },
-  ]
-},
-{
-  path: '/monitor/lightmatrix', // 光伏明细矩阵
-  name: 'LightMatrix',
-  component: () =>
-    import( /* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue'),
-},
-{
-  path: '/monitor/lightmatrix1', // 基础矩阵
-  name: 'LightMatrix1',
-  component: () =>
-    import( /* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue'),
-},
-{
-  path: '/monitor/lightmatrix2', // 欠发矩阵
-  name: 'LightMatrix2',
-  component: () =>
-    import( /* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue'),
-}, {
-  path: '/monitor/lightmatrix3', // 明细矩阵
-  name: 'LightMatrix3',
-  component: () =>
-    import( /* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue'),
-}, {
-  path: '/decision/decision1', //风机绩效榜
-  name: 'decision1',
-  component: () =>
-    import( /* webpackChunkName: "decision1" */ '../views/Decision/Decision1.vue'),
-},
-{
-  path: '/decision/decision1Mx', //风机绩效榜明细
-  name: 'decision1Mx',
-  component: () =>
-    import( /* webpackChunkName: "decision1Mx" */ '../views/Decision/Decision1Mx.vue'),
-},
-{
-  path: '/decision/decision2', //五项损失率
-  name: 'decision2',
-  component: () =>
-    import( /* webpackChunkName: "decision2" */ '../views/Decision/Decision2.vue'),
-},
-{
-  path: '/decision/decision2Cndb', //场内对标
-  name: 'decision2Cndb',
-  component: () =>
-    import( /* webpackChunkName: "decision2Cndb" */ '../views/Decision/Decision2Cndb.vue'),
-},
-{
-  path: '/decision/decision2Cjdb', //场际对标
-  name: 'decision2Cjdb',
-  component: () =>
-    import( /* webpackChunkName: "decision2Cjdb" */ '../views/Decision/Decision2Cjdb.vue'),
-},
-{
-  path: '/decision/decision2Xmdb', //项目对标
-  name: 'decision2Xmdb',
-  component: () =>
-    import( /* webpackChunkName: "decision2Xmdb" */ '../views/Decision/Decision2Xmdb.vue'),
-},
-{
-  path: '/decision/decision2Xldb', //线路对标
-  name: 'decision2Xldb',
-  component: () =>
-    import( /* webpackChunkName: "decision2Xldb" */ '../views/Decision/Decision2Xldb.vue'),
-},
-{
-  path: '/decision/decision3', //性能对标
-  name: 'decision3',
-  component: () =>
-    import( /* webpackChunkName: "decision3" */ '../views/Decision/Decision3.vue'),
-},
-{
-  path: '/decision/decision4', //值际对标
-  name: 'decision4',
-  component: () =>
-    import( /* webpackChunkName: "decision4" */ '../views/Decision/Decision4.vue'),
-},
-{
-  path: '/decision/decision4czzl', //操作指令统计
-  name: 'decision4czzl',
-  component: () =>
-    import( /* webpackChunkName: "decision4czzl" */ '../views/Decision/Decision4Czzl.vue'),
-},
-{
-  path: '/health',
-  name: 'health',
-  component: () =>
-    import('../views/HealthControl/Health.vue'),
-},
-{
-  path: '/health/healthDay', //风机  日  信息量化评级管理
-  name: 'healthDay',
-  component: () =>
-    import('../views/HealthControl/HealthDay.vue'),
-},
-{
-  path: '/health/healthMonth', //风机  月  信息量化评级管理
-  name: 'healthMonth',
-  component: () =>
-    import('../views/HealthControl/HealthMonth.vue'),
-},
-{
-  path: '/health/healthYear', //风机  年  信息量化评级管理
-  name: 'healthYear',
-  component: () =>
-    import('../views/HealthControl/HealthYear.vue'),
-},
-{
-  path: '/health/health1',
-  name: 'health1',
-  component: () =>
-    import('../views/HealthControl/Health1.vue'),
-},
-{
-  path: '/health/health2', // 健康管理首页
-  name: 'health2',
-  component: () =>
-    import('../views/HealthControl/Health2.vue'),
-},
-{
-  path: '/health/health3/:wpId', // 场站健康管理
-  name: 'health3',
-  component: () =>
-    import('../views/HealthControl/Health3.vue'),
-},
-{
-  path: '/health/health4',
-  name: 'health4',
-  children: [{
-    path: "/health/health0/:wpId/:wtId",
-    name: "health0",
-    component: () =>
-      import("../views/HealthControl/Health0.vue"),
-  }, {
-    path: "/health/health10/:wtId",
-    name: "health10",
-    component: () =>
-      import( /* webpackChunkName: "health8" */ "../views/HealthControl/Health10.vue"),
-  }, {
-    path: 'healthLineChart/:wtId', // 风机健康趋势
-    component: () =>
-      import( /* webpackChunkName: "healthLineChart" */ '../views/HealthControl/healthLineChart.vue'),
-  },
-  {
-    path: 'healthLineChart2/:wtId', // 健康趋势
-    component: () =>
-      import( /* webpackChunkName: "healthLineChart2" */ '../views/HealthControl/healthLineChart2.vue'),
-  }
-  ],
-  component: () =>
-    import('../views/HealthControl/Health4.vue'),
-},
-{
-  path: '/health/health5/',
-  name: 'health5',
-  component: () =>
-    import('../views/HealthControl/Health5.vue'),
-},
-{
-  path: '/health/health6', // 健康总览
-  name: 'health6',
-  component: () =>
-    import('../views/HealthControl/Health6.vue'),
-},
-{
-  path: '/cutAnalyse', // 切入切出分析
-  name: 'cutAnalyse',
-  component: () =>
-    import('../views/cutAnalyse/index.vue'),
-},
-{
-  path: '/cutAnalyse', // 切入切出分析
-  name: 'cutAnalyse',
-  component: () =>
-    import('../views/cutAnalyse/index.vue'),
-},
-{
-  path: '/wtSaturability', // 单机饱和度
-  name: 'wtSaturability',
-  component: () =>
-    import('../views/wtSaturability/index.vue'),
-},
-{
-  path: '/windAnalysis', // 风资源分析
-  name: 'windAnalysis',
-  component: () =>
-    import('../views/windAnalysis/index.vue'),
-},
-{
-  path: '/powerRank', // 发电效率排行
-  name: 'powerRank',
-  component: () =>
-    import('../views/powerRank/index.vue'),
-},
-{
-  path: '/totalPowerRank', // 总发电效率排行
-  name: 'totalPowerRank',
-  component: () =>
-    import('../views/totalPowerRank/index.vue'),
-},
-{
-  path: '/warningRank', // 报警排行
-  name: 'warningRank',
-  component: () =>
-    import('../views/warningRank/index.vue'),
-},
-{
-  path: '/realSearch', // 测点数据查询
-  name: 'realSearch',
-  component: () =>
-    import('../views/realSearch/index.vue'),
-},
-{
-  path: '/singleAnalysis', // 单机月度分析
-  name: 'singleAnalysis',
-  component: () =>
-    import('../views/singleAnalysis/index.vue'),
-},
-{
-  path: '/performanceAnalysis', // 单机信息总览
-  name: 'performanceAnalysis',
-  component: () => import('../views/performanceAnalysis/index.vue'),
-},
-{
-  path: "/performanceAnalysis/detail/:wpId/:wtId", // 单机信息总览详情
-  name: "performanceAnalysisDetail",
-  component: () => import( /* webpackChunkName: "performanceAnalysisDetail" */ "../views/NewPages/dj1.vue"),
-},
-{
-  path: '/historySearch', // 测点历史数据查询
-  name: 'historySearch',
-  component: () =>
-    import('../views/historySearch/index.vue'),
-},
-{
-  path: '/knowledge', //故障知识列表
-  name: 'knowledge1',
-  component: () =>
-    import('../views/Knowledge/Knowledge1.vue'),
-},
-{
-  path: '/knowledge2', //安全措施知识
-  name: 'knowledge2',
-  component: () =>
-    import('../views/Knowledge/Knowledge2.vue'),
-},
-{
-  path: '/knowledge3', //风险辨识知识
-  name: 'knowledge3',
-  component: () =>
-    import('../views/Knowledge/Knowledge3.vue'),
-},
-{
-  path: '/knowledge4', //作业指导知识
-  name: 'knowledge4',
-  component: () =>
-    import('../views/Knowledge/Knowledge4.vue'),
-},
-{
-  path: '/knowledge5', //特征参数
-  name: 'knowledge5',
-  component: () =>
-    import('../views/Knowledge/Knowledge5.vue'),
-},
-{
-  path: '/knowledge6', //排查检修方案
-  name: 'knowledge6',
-  component: () =>
-    import('../views/Knowledge/Knowledge6.vue'),
-},
-{
-  path: '/knowledge7', //预警知识
-  name: 'knowledge7',
-  component: () =>
-    import('../views/Knowledge/Knowledge7.vue'),
-},
-{
-  path: "/health/health8",
-  name: "health8",
-  component: () =>
-    import( /* webpackChunkName: "health8" */ "../views/HealthControl/Health8.vue"),
-},
-{
-  path: "/monitor/sandtable",
-  name: "sandtable",
-  component: () =>
-    import( /* webpackChunkName: "sandtable" */ "../views/SandTable/SandTable.vue"),
-},
-{
-  path: "/new/pf1",
-  name: "pf1",
-  component: () =>
-    import( /* webpackChunkName: "pf1" */ "../views/NewPages/power-forecast-1.vue"),
-},
-{
-  path: "/new/fs",
-  name: "fs",
-  component: () =>
-    import( /* webpackChunkName: "fs" */ "../views/NewPages/forecast-system.vue"),
-},
-{
-  path: '/new/ztfx', // 专题分析
-  name: 'ztfx',
-  component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/ztfx.vue'),
-},
-{
-  path: '/new/fdlyl', // 风能利用率
-  name: 'fdlyl',
-  component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/fdlyl.vue'),
-},
-{
-  path: '/new/intelligentalarmcenter',
-  name: 'intelligentalarmcenter',
-  component: () =>
-    import( /* webpackChunkName: "intelligentalarmcenter" */ '../views/NewPages/intelligent-alarm-center.vue'),
-},
-{
-  path: '/new/personnel',
-  name: 'personnel',
-  component: () =>
-    import( /* webpackChunkName: "personnel" */ '../views/NewPages/personnel.vue'),
-},
-{
-  path: '/new/znzhfx/:wtId/:year/:month',
-  name: 'znzhfx',
-  component: () =>
-    import( /* webpackChunkName: "ztfx" */ '../views/NewPages/znzhfx.vue'),
-},
-{
-  path: '/new/alarmcenter',
-  name: 'alarmcenter',
-  component: () =>
-    import( /* webpackChunkName: "personnel" */ '../views/NewPages/alarm-center.vue'),
-},
-{
-  path: '/new/knowledgebase',
-  name: 'knowledgebase',
-  component: () =>
-    import( /* webpackChunkName: "knowledgebase" */ '../views/NewPages/knowledge-base.vue'),
-},
-{
-  path: "/new/dj",
-  name: "dj",
-  component: () =>
-    import( /* webpackChunkName: "dj" */ "../views/NewPages/dj.vue"),
-},
-{
-  path: "/new/dj2",
-  name: "dj2",
-  component: () =>
-    import( /* webpackChunkName: "dj2" */ "../views/NewPages/dj2.vue"),
-},
-{
-  path: "/new/dialog",
-  name: "dialog",
-  component: () =>
-    import( /* webpackChunkName: "dj2" */ "../views/NewPages/dialogs.vue"),
-}, // 三率管理/复位及时率
-{
-  path: '/fwjsl',
-  name: 'fwjsl',
-  component: () =>
-    import('../views/Decision/slgl/fwjsl.vue')
-},
-// 三率管理/状态转换率
-{
-  path: '/ztzhl',
-  name: 'ztzhl',
-  component: () =>
-    import('../views/Decision/slgl/ztzhl.vue')
-},
-// 三率管理/消缺及时率
-{
-  path: '/xqjsl',
-  name: 'xqjsl',
-  component: () =>
-    import('../views/Decision/slgl/xqjsl.vue')
-},
-{
-  path: "/new/powerforecast2",
-  name: "powerforecast2",
-  component: () => import(/* webpackChunkName: "powerforecast2" */ "../views/NewPages/power-forecast-2.vue"),
-},
-{
-  path: "/new/alarmcenter1",
-  name: "alarmcenter1",
-  component: () => import(/* webpackChunkName: "powerforecast2" */ "../views/NewPages/alarm-center-1.vue"),
-},
-{
-  path: "/new/historysearch",
-  name: "historysearch",
-  component: () => import(/* webpackChunkName: "historysearch" */ "../views/NewPages/history-search.vue"),
-},
+        path: '/',
+        redirect: '/monitor/home'
+    },
+    {
+        path: '/monitor/home', // 驾驶舱
+        name: 'Home',
+        component: Home,
+    },
+    {
+        path: '/monitor/about',
+        name: 'About',
+        component: () =>
+            import ( /* webpackChunkName: "about" */ '../views/About.vue'),
+    },
+    {
+        path: '/monitor/demo',
+        name: 'Demo',
+        component: () =>
+            import ( /* webpackChunkName: "Demo" */ '../views/Demo.vue'),
+    },
+    {
+        path: '/monitor/status', // 状态监视
+        name: 'Status',
+        component: () =>
+            import ( /* webpackChunkName: "status" */ '../views/Status/Status.vue'),
+    },
+    {
+        path: '/monitor/agc', // AGC 监视
+        name: 'Agc',
+        component: () =>
+            import ( /* webpackChunkName: "agc" */ '../views/Agc/Agc.vue'),
+    },
+    {
+        path: '/monitor/windsite',
+        name: 'WindSite',
+        component: () =>
+            import ( /* webpackChunkName: "windsite" */ '../views/WindSite/WindSite.vue'),
+        children: [{
+                path: 'home/:wpId', // 场站监视
+                component: () =>
+                    import ( /* webpackChunkName: "windsitehome" */ '../views/WindSite/pages/Home/Home.vue'),
+            }, {
+                path: 'draughtfanlist/:wpId', // 风机列表
+                component: () =>
+                    import ( /* webpackChunkName: "windsitedraughtfanlist" */ '../views/WindSite/pages/DraughtFanList.vue'),
+            }, {
+                path: 'matrix/:wpId', // 风场矩阵
+                component: () =>
+                    import ( /* webpackChunkName: "windsitematrix" */ '../views/WindSite/pages/Matrix.vue'),
+            }, {
+                path: 'lightmatrix/:wpId',
+                component: () =>
+                    import ( /* webpackChunkName: "windsitelightmatrix" */ '../views/WindSite/pages/LightMatrix.vue'),
+            }, {
+                path: 'box/:wpId',
+                component: () =>
+                    import ( /* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue'),
+            }, {
+                path: 'info/:wpId/:wtId', // 单机状态监视
+                component: () =>
+                    import ( /* webpackChunkName: "info" */ '../views/WindSite/pages/Info/Info.vue'),
+            }, {
+                path: 'tower/:wpId', // 测风塔
+                component: () =>
+                    import ( /* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue'),
+            }, {
+                path: 'inverter-info/:wpId',
+                component: () =>
+                    import ( /* webpackChunkName: "inverter-info" */ '../views/WindSite/pages/Inverter-Info.vue'),
+            }, {
+                path: 'map/:wpId',
+                component: () =>
+                    import ( /* webpackChunkName: "windsitemap" */ '../views/WindSite/pages/Map.vue'),
+            }, {
+                path: 'map1/:wpId',
+                component: () =>
+                    import ( /* webpackChunkName: "windsitemap1" */ '../views/WindSite/pages/Map1.vue'),
+            },
+            {
+                path: 'boosterstation/:wpId', // 升压站
+                component: () =>
+                    import ( /* webpackChunkName: "boosterstation" */ '../views/WindSite/pages/BoosterStation.vue'),
+            },
+            {
+                path: "generalappearance/:wpId", // 总样貌
+                component: () =>
+                    import ( /* webpackChunkName: "generalappearance" */ "../views/WindSite/pages/GeneralAppearance.vue"),
+            },
+        ]
+    },
+    {
+        path: '/monitor/lightmatrix', // 光伏明细矩阵
+        name: 'LightMatrix',
+        component: () =>
+            import ( /* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue'),
+    },
+    {
+        path: '/monitor/lightmatrix1', // 基础矩阵
+        name: 'LightMatrix1',
+        component: () =>
+            import ( /* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue'),
+    },
+    {
+        path: '/monitor/lightmatrix2', // 欠发矩阵
+        name: 'LightMatrix2',
+        component: () =>
+            import ( /* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue'),
+    }, {
+        path: '/monitor/lightmatrix3', // 明细矩阵
+        name: 'LightMatrix3',
+        component: () =>
+            import ( /* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue'),
+    }, {
+        path: '/decision/decision1', //风机绩效榜
+        name: 'decision1',
+        component: () =>
+            import ( /* webpackChunkName: "decision1" */ '../views/Decision/Decision1.vue'),
+    },
+    {
+        path: '/decision/decision1Mx', //风机绩效榜明细
+        name: 'decision1Mx',
+        component: () =>
+            import ( /* webpackChunkName: "decision1Mx" */ '../views/Decision/Decision1Mx.vue'),
+    },
+    {
+        path: '/decision/decision2', //五项损失率
+        name: 'decision2',
+        component: () =>
+            import ( /* webpackChunkName: "decision2" */ '../views/Decision/Decision2.vue'),
+    },
+    {
+        path: '/decision/decision2Cndb', //场内对标
+        name: 'decision2Cndb',
+        component: () =>
+            import ( /* webpackChunkName: "decision2Cndb" */ '../views/Decision/Decision2Cndb.vue'),
+    },
+    {
+        path: '/decision/decision2Cjdb', //场际对标
+        name: 'decision2Cjdb',
+        component: () =>
+            import ( /* webpackChunkName: "decision2Cjdb" */ '../views/Decision/Decision2Cjdb.vue'),
+    },
+    {
+        path: '/decision/decision2Xmdb', //项目对标
+        name: 'decision2Xmdb',
+        component: () =>
+            import ( /* webpackChunkName: "decision2Xmdb" */ '../views/Decision/Decision2Xmdb.vue'),
+    },
+    {
+        path: '/decision/decision2Xldb', //线路对标
+        name: 'decision2Xldb',
+        component: () =>
+            import ( /* webpackChunkName: "decision2Xldb" */ '../views/Decision/Decision2Xldb.vue'),
+    },
+    {
+        path: '/decision/decision3', //性能对标
+        name: 'decision3',
+        component: () =>
+            import ( /* webpackChunkName: "decision3" */ '../views/Decision/Decision3.vue'),
+    },
+    {
+        path: '/decision/decision4', //值际对标
+        name: 'decision4',
+        component: () =>
+            import ( /* webpackChunkName: "decision4" */ '../views/Decision/Decision4.vue'),
+    },
+    {
+        path: '/decision/decision4czzl', //操作指令统计
+        name: 'decision4czzl',
+        component: () =>
+            import ( /* webpackChunkName: "decision4czzl" */ '../views/Decision/Decision4Czzl.vue'),
+    },
+    {
+        path: '/health',
+        name: 'health',
+        component: () =>
+            import ('../views/HealthControl/Health.vue'),
+    },
+    {
+        path: '/health/healthDay', //风机  日  信息量化评级管理
+        name: 'healthDay',
+        component: () =>
+            import ('../views/HealthControl/HealthDay.vue'),
+    },
+    {
+        path: '/health/healthMonth', //风机  月  信息量化评级管理
+        name: 'healthMonth',
+        component: () =>
+            import ('../views/HealthControl/HealthMonth.vue'),
+    },
+    {
+        path: '/health/healthYear', //风机  年  信息量化评级管理
+        name: 'healthYear',
+        component: () =>
+            import ('../views/HealthControl/HealthYear.vue'),
+    },
+    {
+        path: '/health/health1',
+        name: 'health1',
+        component: () =>
+            import ('../views/HealthControl/Health1.vue'),
+    },
+    {
+        path: '/health/health2', // 健康管理首页
+        name: 'health2',
+        component: () =>
+            import ('../views/HealthControl/Health2.vue'),
+    },
+    {
+        path: '/health/health3/:wpId', // 场站健康管理
+        name: 'health3',
+        component: () =>
+            import ('../views/HealthControl/Health3.vue'),
+    },
+    {
+        path: '/health/health4',
+        name: 'health4',
+        children: [{
+                path: "/health/health0/:wpId/:wtId",
+                name: "health0",
+                component: () =>
+                    import ("../views/HealthControl/Health0.vue"),
+            }, {
+                path: "/health/health10/:wtId",
+                name: "health10",
+                component: () =>
+                    import ( /* webpackChunkName: "health8" */ "../views/HealthControl/Health10.vue"),
+            }, {
+                path: 'healthLineChart/:wtId', // 风机健康趋势
+                component: () =>
+                    import ( /* webpackChunkName: "healthLineChart" */ '../views/HealthControl/healthLineChart.vue'),
+            },
+            {
+                path: 'healthLineChart2/:wtId', // 健康趋势
+                component: () =>
+                    import ( /* webpackChunkName: "healthLineChart2" */ '../views/HealthControl/healthLineChart2.vue'),
+            }
+        ],
+        component: () =>
+            import ('../views/HealthControl/Health4.vue'),
+    },
+    {
+        path: '/health/health5/',
+        name: 'health5',
+        component: () =>
+            import ('../views/HealthControl/Health5.vue'),
+    },
+    {
+        path: '/health/health6', // 健康总览
+        name: 'health6',
+        component: () =>
+            import ('../views/HealthControl/Health6.vue'),
+    },
+    {
+        path: '/cutAnalyse', // 切入切出分析
+        name: 'cutAnalyse',
+        component: () =>
+            import ('../views/cutAnalyse/index.vue'),
+    },
+    {
+        path: '/cutAnalyse', // 切入切出分析
+        name: 'cutAnalyse',
+        component: () =>
+            import ('../views/cutAnalyse/index.vue'),
+    },
+    {
+        path: '/wtSaturability', // 单机饱和度
+        name: 'wtSaturability',
+        component: () =>
+            import ('../views/wtSaturability/index.vue'),
+    },
+    {
+        path: '/windAnalysis', // 风资源分析
+        name: 'windAnalysis',
+        component: () =>
+            import ('../views/windAnalysis/index.vue'),
+    },
+    {
+        path: '/powerRank', // 发电效率排行
+        name: 'powerRank',
+        component: () =>
+            import ('../views/powerRank/index.vue'),
+    },
+    {
+        path: '/totalPowerRank', // 总发电效率排行
+        name: 'totalPowerRank',
+        component: () =>
+            import ('../views/totalPowerRank/index.vue'),
+    },
+    {
+        path: '/warningRank', // 报警排行
+        name: 'warningRank',
+        component: () =>
+            import ('../views/warningRank/index.vue'),
+    },
+    {
+        path: '/realSearch', // 测点数据查询
+        name: 'realSearch',
+        component: () =>
+            import ('../views/realSearch/index.vue'),
+    },
+    {
+        path: '/singleAnalysis', // 单机月度分析
+        name: 'singleAnalysis',
+        component: () =>
+            import ('../views/singleAnalysis/index.vue'),
+    },
+    {
+        path: '/performanceAnalysis', // 单机信息总览
+        name: 'performanceAnalysis',
+        component: () =>
+            import ('../views/performanceAnalysis/index.vue'),
+    },
+    {
+        path: "/performanceAnalysis/detail/:wpId/:wtId", // 单机信息总览详情
+        name: "performanceAnalysisDetail",
+        component: () =>
+            import ( /* webpackChunkName: "performanceAnalysisDetail" */ "../views/NewPages/dj1.vue"),
+    },
+    {
+        path: '/historySearch', // 测点历史数据查询
+        name: 'historySearch',
+        component: () =>
+            import ('../views/historySearch/index.vue'),
+    },
+    {
+        path: '/knowledge', //故障知识列表
+        name: 'knowledge1',
+        component: () =>
+            import ('../views/Knowledge/Knowledge1.vue'),
+    },
+    {
+        path: '/knowledge2', //安全措施知识
+        name: 'knowledge2',
+        component: () =>
+            import ('../views/Knowledge/Knowledge2.vue'),
+    },
+    {
+        path: '/knowledge3', //风险辨识知识
+        name: 'knowledge3',
+        component: () =>
+            import ('../views/Knowledge/Knowledge3.vue'),
+    },
+    {
+        path: '/knowledge4', //作业指导知识
+        name: 'knowledge4',
+        component: () =>
+            import ('../views/Knowledge/Knowledge4.vue'),
+    },
+    {
+        path: '/knowledge5', //特征参数
+        name: 'knowledge5',
+        component: () =>
+            import ('../views/Knowledge/Knowledge5.vue'),
+    },
+    {
+        path: '/knowledge6', //排查检修方案
+        name: 'knowledge6',
+        component: () =>
+            import ('../views/Knowledge/Knowledge6.vue'),
+    },
+    {
+        path: '/knowledge7', //预警知识
+        name: 'knowledge7',
+        component: () =>
+            import ('../views/Knowledge/Knowledge7.vue'),
+    },
+    {
+        path: "/health/health8",
+        name: "health8",
+        component: () =>
+            import ( /* webpackChunkName: "health8" */ "../views/HealthControl/Health8.vue"),
+    },
+    {
+        path: "/monitor/sandtable",
+        name: "sandtable",
+        component: () =>
+            import ( /* webpackChunkName: "sandtable" */ "../views/SandTable/SandTable.vue"),
+    },
+    {
+        path: "/new/pf1",
+        name: "pf1",
+        component: () =>
+            import ( /* webpackChunkName: "pf1" */ "../views/NewPages/power-forecast-1.vue"),
+    },
+    {
+        path: "/new/fs",
+        name: "fs",
+        component: () =>
+            import ( /* webpackChunkName: "fs" */ "../views/NewPages/forecast-system.vue"),
+    },
+    {
+        path: '/new/ztfx', // 专题分析
+        name: 'ztfx',
+        component: () =>
+            import ( /* webpackChunkName: "ztfx" */ '../views/NewPages/ztfx.vue'),
+    },
+    {
+        path: '/new/fdlyl', // 风能利用率
+        name: 'fdlyl',
+        component: () =>
+            import ( /* webpackChunkName: "ztfx" */ '../views/NewPages/fdlyl.vue'),
+    },
+    {
+        path: '/new/intelligentalarmcenter',
+        name: 'intelligentalarmcenter',
+        component: () =>
+            import ( /* webpackChunkName: "intelligentalarmcenter" */ '../views/NewPages/intelligent-alarm-center.vue'),
+    },
+    {
+        path: '/new/personnel',
+        name: 'personnel',
+        component: () =>
+            import ( /* webpackChunkName: "personnel" */ '../views/NewPages/personnel.vue'),
+    },
+    {
+        path: '/new/znzhfx/:wtId/:year/:month',
+        name: 'znzhfx',
+        component: () =>
+            import ( /* webpackChunkName: "ztfx" */ '../views/NewPages/znzhfx.vue'),
+    },
+    {
+        path: '/new/alarmcenter',
+        name: 'alarmcenter',
+        component: () =>
+            import ( /* webpackChunkName: "personnel" */ '../views/NewPages/alarm-center.vue'),
+    },
+    {
+        path: '/new/knowledgebase',
+        name: 'knowledgebase',
+        component: () =>
+            import ( /* webpackChunkName: "knowledgebase" */ '../views/NewPages/knowledge-base.vue'),
+    },
+    {
+        path: "/new/dj",
+        name: "dj",
+        component: () =>
+            import ( /* webpackChunkName: "dj" */ "../views/NewPages/dj.vue"),
+    },
+    {
+        path: "/new/dj2",
+        name: "dj2",
+        component: () =>
+            import ( /* webpackChunkName: "dj2" */ "../views/NewPages/dj2.vue"),
+    },
+    {
+        path: "/new/dialog",
+        name: "dialog",
+        component: () =>
+            import ( /* webpackChunkName: "dj2" */ "../views/NewPages/dialogs.vue"),
+    }, // 三率管理/复位及时率
+    {
+        path: '/fwjsl',
+        name: 'fwjsl',
+        component: () =>
+            import ('../views/Decision/slgl/fwjsl.vue')
+    },
+    // 三率管理/状态转换率
+    {
+        path: '/ztzhl',
+        name: 'ztzhl',
+        component: () =>
+            import ('../views/Decision/slgl/ztzhl.vue')
+    },
+    // 三率管理/消缺及时率
+    {
+        path: '/xqjsl',
+        name: 'xqjsl',
+        component: () =>
+            import ('../views/Decision/slgl/xqjsl.vue')
+    },
+    {
+        path: "/new/powerforecast2",
+        name: "powerforecast2",
+        component: () =>
+            import ( /* webpackChunkName: "powerforecast2" */ "../views/NewPages/power-forecast-2.vue"),
+    },
+    {
+        path: "/new/alarmcenter1",
+        name: "alarmcenter1",
+        component: () =>
+            import ( /* webpackChunkName: "powerforecast2" */ "../views/NewPages/alarm-center-1.vue"),
+    },
+
+    {
+        path: "/new/alarmcenter2",
+        name: "alarmcenter2",
+        component: () =>
+            import ( /* webpackChunkName: "powerforecast2" */ "../views/NewPages/alarm-center-2.vue"),
+    },
+    {
+        path: "/new/historysearch",
+        name: "historysearch",
+        component: () =>
+            import ( /* webpackChunkName: "historysearch" */ "../views/NewPages/history-search.vue"),
+    },
 ]
 const router = createRouter({
-  history: createWebHashHistory(),
-  base: '/zhfx/',
-  routes
+    history: createWebHashHistory(),
+    base: '/zhfx/',
+    routes
 })
 
 router.beforeEach((to, from, next) => {
-  next()
+    next()
 })
 
 export default router

src/views/NewPages/alarm-center-1.vue

@@ -6,129 +6,97 @@
           <div class="query-item">
             <div class="lable">风场：</div>
             <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <el-select
+                v-model="wpvalue"
+                clearable
+                placeholder="请选择"
+                popper-class="select"
+              >
+                <el-option
+                  v-for="item in wpoptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
               </el-select>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">开始日期：</div>
             <div class="search-input">
-              <el-date-picker v-model="value2" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+              <el-date-picker
+                v-model="startdate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">结束日期：</div>
             <div class="search-input">
-              <el-date-picker v-model="value3" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+              <el-date-picker
+                v-model="enddate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">规则：</div>
-            <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-              </el-select>
-            </div>
+              <el-cascader
+                style="width: 240px"
+                size="mini"
+                popper-class="search-select"
+                :options="cascaderOptions"
+                :props="cascaderProps"
+                v-model="cascaderSel"
+                collapse-tags
+                :clearable='true'
+              ></el-cascader>
           </div>
         </div>
         <div class="query-actions">
-          <button class="btn green">搜索</button>
-          <button class="btn green">筛选</button>
+          <button class="btn green" @click="searchData">搜索</button>
+          <button class="btn green" @click="searchTree">筛选</button>
           <button class="btn green">导出</button>
         </div>
       </div>
     </div>
     <panel-3 class="table-panel">
       <table-2 :data="tableData" :height="'88vh'">
-        <template v-slot:v1="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v2="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v3="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v4="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v5="scope">
+        <template v-for="(item, i) in column" :key="i" #[item]="scope">
           <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.count / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{
+              scope.data.count && scope.data.count
+            }}</span>
           </div>
           <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v6="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v7="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v8="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v9="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.time / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{ scope.data.count && scope.data.time }}</span>
           </div>
         </template>
       </table-2>
@@ -143,6 +111,59 @@ export default {
   components: { Panel3, Table2 },
   data() {
     return {
+      wpvalue: "",
+      wpoptions: "",
+      options: [],
+      cascaderOptions: [],
+      cascaderSel: [],
+      cascaderProps: { multiple: true },
+      column: [
+        "风机偏航过程震动",
+        "齿轮箱轴承温升超过40度",
+        "三相电流不平衡",
+        "断轴或联轴器打滑",
+        "风速突变",
+      ],
+      columnObj: [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+        {
+          name: "风机偏航过程震动",
+          field: "风机偏航过程震动",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "齿轮箱轴承温升超过40度",
+          field: "齿轮箱轴承温升超过40度",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "三相电流不平衡",
+          field: "三相电流不平衡",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "断轴或联轴器打滑",
+          field: "断轴或联轴器打滑",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "风速突变",
+          align: "left",
+          field: "风速突变",
+          slot: true,
+        },
+      ],
+      startdate: new Date(
+        new Date(new Date().setDate(new Date().getDate() - 1))
+      ).formatDate("yyyy-MM-dd"),
+      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
       tableData: {
         column: [
           {
@@ -161,100 +182,157 @@ export default {
             align: "left",
             slot: true,
           },
-          {
-            name: "齿轮箱温控阀故障或换热器效率低",
-            field: "v3",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "齿轮箱轴承温升速度超过1.5",
-            field: "v4",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "齿轮箱轴承温升超过40度",
-            field: "v5",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "滤网压差",
-            field: "v6",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "解缆动作",
-            field: "v7",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "液压泵运行",
-            field: "v8",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "偏航",
-            field: "v9",
-            align: "left",
-            slot: true,
-          },
         ],
         data: [
           {
             name: "MG01_01",
             v1: {
-              v1: 12,
-              v2: 0,
-            },
-            v2: {
-              v1: 0,
-              v2: 0,
-            },
-            v3: {
-              v1: 0,
-              v2: 0,
-            },
-            v4: {
-              v1: 87,
-              v2: 123,
-            },
-            v5: {
-              v1: 0,
-              v2: 0,
-            },
-            v6: {
-              v1: 7,
-              v2: 343,
-            },
-            v7: {
-              v1: 0,
-              v2: 0,
-            },
-            v8: {
-              v1: 0,
-              v2: 0,
-            },
-            v9: {
-              v1: 0,
-              v2: 0,
+              count: 12,
+              time: 0,
             },
           },
         ],
       },
     };
   },
+  created() {
+    this.search();
+  },
   methods: {
     tabSelect(tab) {},
-  },
-  created() {
-    for (let i = 1; i < 40; i++) {
-      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
-    }
+    async search() {
+      const { data } = await this.API.requestData({
+        subUrl: "powercompare/windfarmAjax",
+      });
+      console.warn(data);
+      this.wpoptions = data.data;
+      this.wpvalue = data.data[0].id;
+      this.searchData();
+    },
+    async searchTree() {
+      console.warn(this.cascaderSel);
+      let arr = [];
+      let columnObj = [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+      ];
+      this.cascaderSel.forEach((e) => {
+        let obj = {
+          name: e[1],
+          field: e[1],
+          align: "left",
+          slot: true,
+        };
+        columnObj.push(obj);
+
+        arr.push(e[1]);
+      });
+      this.columnObj = columnObj;
+      this.column = arr;
+      this.searchData()
+      console.warn(arr);
+    },
+    async searchData() {
+      const { data } = await this.API.requestData({
+        baseURL: "http://192.168.10.18:8075/",
+        subUrl: "alarm/count/query/new",
+        data: {
+          stationid: this.wpvalue,
+          startdate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
+          enddate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
+        },
+      });
+      console.warn(data);
+      ////////
+      const resData = data.data;
+      // const resData =this.resdata;
+      const column = this.columnObj;
+      let dataAll = []; // 总数据集合
+      resData.forEach((e) => {
+        let obj = {
+          name: Object.keys(e)[0],
+        };
+        let wpid = Object.keys(e)[0];
+        e[wpid].forEach((k) => {
+          column.forEach((c) => {
+            if (k.alertText == c.name) {
+              let obj1 = {
+                count: k.count,
+                time: k.time,
+              };
+              obj[k.alertText] = obj1;
+            }
+          });
+        });
+        dataAll.push(obj);
+      });
+      console.info(dataAll);
+      this.tableData.column = column;
+      this.tableData.data = dataAll;
+      ///////////////////// 获取规则list
+      const map = {};
+      var windNum = [];
+      for (let i in resData) {
+        for (let k in resData[i]) {
+          map[k] = resData[i][k];
+        }
+      }
+      // nmap为新的map 整理数据结构
+      const nmap = {};
+      for (let kv in map) {
+        var nchildMap = {};
+        var childrenMap = map[kv];
+        for (var ckv in childrenMap) {
+          var cckey = childrenMap[ckv].alertText;
+          var ccvalue = childrenMap[ckv];
+          nchildMap[cckey] = ccvalue;
+        }
+        nmap[kv] = nchildMap;
+      }
+      windNum = Object.keys(nmap);
+      var cascaderOptions = [];
+      var root = {}; // 原始根节点
+      var clumnsOnes = nmap[windNum[0]];
+      console.warn(clumnsOnes);
+      for (let k in clumnsOnes) {
+        let f = clumnsOnes[k].relatePartsText
+          ? clumnsOnes[k].relatePartsText
+          : "其他";
+        let fvalue = clumnsOnes[k].relateParts ? clumnsOnes[k].relateParts : "";
+
+        if (root[f]) {
+          // 已经存在此子节点
+          if (!root[f].children[k]) {
+            // 不存在子节点
+            root[f].children[k] = {};
+            root[f].children[k].value = root[f].children[k].label = k;
+            root[f].fobj.children.push(root[f].children[k]);
+          }
+        } // 不存在子节点
+        else {
+          root[f] = {};
+          // root[f].value = fvalue;
+          // root[f].label = f;
+          root[f].children = {};
+          root[f].children[k] = {};
+          root[f].children[k].value = root[f].children[k].label = k;
+
+          // 将对象放入 cascaderOptions
+          let childrenArray = [];
+          childrenArray.push(root[f].children[k]);
+          let fobj = {};
+          fobj.value = fvalue;
+          fobj.label = f;
+          fobj.children = childrenArray;
+          cascaderOptions.push(fobj);
+          root[f].fobj = fobj;
+        }
+      }
+      this.cascaderOptions = cascaderOptions;
+      console.warn(cascaderOptions);
+    },
   },
 };
 </script>

src/views/NewPages/alarm-center-2.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="alarm-center-1">
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">风场：</div>
+            <div class="search-input">
+              <el-select
+                v-model="wpvalue"
+                clearable
+                placeholder="请选择"
+                popper-class="select"
+              >
+                <el-option
+                  v-for="item in wpoptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">开始日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="startdate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">结束日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="enddate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+        
+        </div>
+        <div class="query-actions">
+          <button class="btn green" @click="searchData">搜索</button>
+          <button class="btn green">导出</button>
+        </div>
+      </div>
+    </div>
+    <panel-3 class="table-panel">
+      <table-2 :data="tableData" :height="'88vh'">
+        <template v-for="(item, i) in column" :key="i" #[item]="scope">
+          <div class="bar">
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.count / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{
+              scope.data.count && scope.data.count
+            }}</span>
+          </div>
+          <div class="bar">
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.time / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{ scope.data.count && scope.data.time }}</span>
+          </div>
+        </template>
+      </table-2>
+    </panel-3>
+  </div>
+</template>
+
+<script>
+import Panel3 from "../../components/coms/panel/panel3.vue";
+import Table2 from "../../components/coms/table/table2.vue";
+export default {
+  components: { Panel3, Table2 },
+  data() {
+    return {
+      wpvalue: "",
+      wpoptions: "",
+      options: [],
+      cascaderOptions: [],
+      cascaderSel: [],
+      column: [
+        "风机偏航过程震动",
+        "齿轮箱轴承温升超过40度",
+        "三相电流不平衡",
+        "断轴或联轴器打滑",
+        "风速突变",
+      ],
+      columnObj: [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+        {
+          name: "风机偏航过程震动",
+          field: "风机偏航过程震动",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "齿轮箱轴承温升超过40度",
+          field: "齿轮箱轴承温升超过40度",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "三相电流不平衡",
+          field: "三相电流不平衡",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "断轴或联轴器打滑",
+          field: "断轴或联轴器打滑",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "风速突变",
+          align: "left",
+          field: "风速突变",
+          slot: true,
+        },
+      ],
+      startdate: new Date(
+        new Date(new Date().setDate(new Date().getDate() - 1))
+      ).formatDate("yyyy-MM-dd"),
+      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
+      tableData: {
+        column: [
+          {
+            name: "风机编号",
+            field: "name",
+          },
+          {
+            name: "主轴温度温差大于8度",
+            field: "v1",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "浆叶角过小",
+            field: "v2",
+            align: "left",
+            slot: true,
+          },
+        ],
+        data: [
+          {
+            name: "MG01_01",
+            v1: {
+              count: 12,
+              time: 0,
+            },
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.search();
+    this.searchTree();
+  },
+  methods: {
+    tabSelect(tab) {},
+    async search() {
+      const { data } = await this.API.requestData({
+        subUrl: "powercompare/windfarmAjax",
+      });
+      console.warn(data);
+      this.wpoptions = data.data;
+      this.wpvalue = data.data[0].id;
+      this.searchData();
+    },
+    async searchTree() {
+      const { data } = await this.API.requestData({
+        baseURL: "http://192.168.10.18:8075/",
+        subUrl: "Stoptype/treeType",
+      });
+      console.warn(data);
+      this.cascaderOptions = data.data;
+      let arr = [];
+      let columnObj = [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+      ];
+      data.data.forEach((e) => {
+        let obj = {
+          name: e.name,
+          field: e.name,
+          align: "left",
+          slot: true,
+        };
+        columnObj.push(obj);
+        arr.push(e.name);
+      });
+      this.column = arr;
+      this.columnObj = columnObj;
+    },
+    async searchData() {
+      const { data } = await this.API.requestData({
+        baseURL: "http://192.168.10.18:8075/",
+        subUrl: "shutdown/list",
+        data: {
+          stId: this.wpvalue,
+          endDate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
+          startDate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
+        },
+      });
+      console.warn(data);
+      ////////
+      const resData = data.data;
+      // const resData =this.resdata;
+      const column = this.columnObj;
+      let dataAll = []; // 总数据集合
+      resData.forEach((e) => {
+        let obj = {
+          name: Object.keys(e)[0],
+        };
+        let wpid = Object.keys(e)[0];
+        e[wpid].forEach((k) => {
+          column.forEach((c) => {
+            if (k.type == c.name) {
+              let obj1 = {
+                count: k.count,
+                time: k.time,
+              };
+              obj[k.type] = obj1;
+            }
+          });
+        });
+        dataAll.push(obj);
+      });
+      console.info(dataAll);
+      this.tableData.column = column;
+      this.tableData.data = dataAll;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.alarm-center-1 {
+  .action-bar {
+    display: flex;
+
+    .query {
+      justify-content: flex-start;
+    }
+  }
+
+  .table-panel {
+    width: 100%;
+    background: transparent;
+    padding: 0;
+
+    .bar {
+      display: flex;
+      align-items: center;
+      height: 16px;
+      margin: 8px 0;
+
+      .bar-percent {
+        height: 100%;
+        background: @green;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>