Merge branch 'master' of http://git.xt.wenhq.top:8083/hs/zhny_ui

# Conflicts:
#	ems-ui/src/views/mgr/poweruse.vue
#	ems-ui/vue.config.js

demo/ny_code/src/views/net/right.vue

@@ -10,7 +10,7 @@ const { lineOption, itemList } = useRight();
       <div
         class="h-[90px] bg-[url('assets/images/net/r1-top.png')] bg-center flex items-center justify-center"
       >
-        <span class="text-[#B3E3E8] text-xs">保护：</span>
+        <span class="text-[#B3E3E8] text-xs ">保护：</span>
         <span class="value">正常</span>
       </div>
       <div class="flex justify-between">

ems-ui/package.json

@@ -42,6 +42,7 @@
     "@logicflow/core": "^2.0.6",
     "@logicflow/extension": "^2.0.10",
     "@riophae/vue-treeselect": "^0.4.0",
+    "autofit.js": "^3.1.3",
     "axios": "0.24.0",
     "bpmn-js": "^17.11.1",
     "clipboard": "2.0.8",

ems-ui/src/api/analysis/prod.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request';
 
-// 查询光伏并网计量光伏并网计量-小时列表
+// 查询光伏并网计量光伏并网计量-日数据列表
 export function listProd(query) {
   return request({
-    url: '/ems/prod/list',
+    url: '/ems/prod/day/list',
     method: 'get',
     params: query,
   });

ems-ui/src/api/mgr/pgSupplyH.js

@@ -45,7 +45,7 @@ export function delPgSupplyH(id) {
 // 查询光伏供应计量
 export function listPvSupplyH(query) {
   return request({
-    url: '/ems/prod/list',
+    url: '/ems/prod/pv/hour/list',
     method: 'get',
     params: query
   })

ems-ui/src/assets/images/home/cost.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728635985572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="76396" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M326.523 138.551a11.328 11.328 0 0 1-0.5-3.226c0 4.717-0.54 5.2 0.54 3.33-0.001-0.034-0.04-0.069-0.04-0.104z m-0.347 4.786l78 91.315H619.9s116.109-91.766 61.619-110.91c0 0-54.876-28.23-184.9-27.745-142.084 0.52-166.323 36.242-170.061 42.658 0.269 0.867 0.539 1.734 0.809 2.566zM619.9 262.4H404.173C235.193 314.489 96 485.883 96 644.1 96 835.089 218.93 928 512 928s416-92.911 416-283.9c0.034-158.217-139.119-329.611-308.1-381.7z m20.5 337.483v55.455h-92.447v27.745H640.4v55.455l-92.448-0.624v56.114H486.3v-56.567l-92.411-0.658v-53.722H486.3v-27.745h-92.416v-55.455h79.154l-79.154-138.656H455.5l61.621 138.656 61.657-138.656H640.4l-76.724 138.656H640.4z" fill="#C2F4FF" p-id="76397"></path></svg>

ems-ui/src/assets/images/home/down-arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728635651065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="73665" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z" fill="#00C852" p-id="73666"></path></svg>

ems-ui/src/assets/images/home/up-arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728635680397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="73903" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M573.056 272l308.8 404.608A76.8 76.8 0 0 1 820.736 800H203.232a76.8 76.8 0 0 1-61.056-123.392L450.976 272a76.8 76.8 0 0 1 122.08 0z" fill="#d81e06" p-id="73904"></path></svg>

ems-ui/src/assets/images/net/price1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728890547978" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3789" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 0L51.2 281.6v460.8L512 1024l460.8-281.6v-460.8L512 0z m204.8 512h-153.6v51.2h153.6v102.4h-153.6v153.6H460.8v-153.6H307.2v-102.4h153.6v-51.2H307.2V409.6h153.6L358.4 307.2l51.2-51.2 102.4 102.4 102.4-102.4 51.2 51.2-102.4 102.4h153.6v102.4z" fill="#B3E3E8" p-id="3790"></path></svg>

ems-ui/src/assets/images/source/elec1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728716516438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="80901" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M910.29248 0H113.705813A57.173333 57.173333 0 0 0 56.959147 56.746667V853.333333a56.746667 56.746667 0 0 0 56.746666 56.746667h85.333334V1024H312.959147v-113.92h144.64V1024h115.2v-113.92h138.24V1024H824.959147v-113.92h85.333333A56.32 56.32 0 0 0 967.039147 853.333333V56.746667A56.746667 56.746667 0 0 0 910.29248 0z m6.4 810.666667A50.346667 50.346667 0 0 1 867.625813 862.72H158.079147A50.346667 50.346667 0 0 1 107.305813 810.666667V104.106667a50.346667 50.346667 0 0 1 50.773334-50.346667H867.625813a50.346667 50.346667 0 0 1 50.773334 50.346667z" p-id="80902" fill="#B3E3E8"></path><path d="M621.01248 184.32L205.01248 512h252.16l-113.493333 226.986667 416-327.68h-252.16l113.493333-226.986667z" p-id="80903" fill="#B3E3E8"></path></svg>

ems-ui/src/assets/images/title/dec.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728608573065" class="icon" viewBox="0 0 38103 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57618" xmlns:xlink="http://www.w3.org/1999/xlink" width="1190.71875" height="32"><path d="M1024 29.789091h18432l1210.181818 930.909091H0L1024 29.789091zM24732.392727 1024h-1057.512727l-744.727273-930.909091h1057.512728l744.727272 930.909091z" fill="#1396DB" p-id="57619"></path><path d="M24732.392727 930.909091h-1057.512727l-744.727273-930.909091h1057.512728l744.727272 930.909091zM27405.963636 930.909091h-1053.789091l-744.727272-930.909091h1053.789091l744.727272 930.909091zM30079.534545 930.909091h-1053.78909l-744.727273-930.909091h1053.789091l744.727272 930.909091zM32756.829091 930.909091h-1057.512727l-744.727273-930.909091h1057.512727l744.727273 930.909091zM35430.4 930.909091h-1053.789091l-744.727273-930.909091h1053.789091l744.727273 930.909091zM38103.970909 930.909091H37050.181818l-744.727273-930.909091h1053.789091l744.727273 930.909091z" fill="#1396DB" p-id="57620"></path></svg>

ems-ui/src/assets/images/title/title.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728559473057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43703" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M447.226703 147.463062L550.841379 251.077738 289.919117 512 550.841379 772.922262l-103.614676 103.614676a28.248276 28.248276 0 0 1-39.943062 0l-344.558344-344.558345a28.248276 28.248276 0 0 1 0-39.950124l344.558344-344.558345a28.248276 28.248276 0 0 1 39.943062 0z m247.172414 74.907366l269.658042 269.658041a28.248276 28.248276 0 0 1 0 39.943062l-269.658042 269.658041a28.248276 28.248276 0 0 1-39.943062 0L384.798014 531.971531a28.248276 28.248276 0 0 1 0-39.943062l269.658041-269.658041a28.248276 28.248276 0 0 1 39.943062 0z" p-id="43704" fill="#22A7DB"></path></svg>

ems-ui/src/assets/images/title/title1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728608480738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="49247" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M928 512l-529.472 512V0z" fill="#194A75" p-id="49248"></path><path d="M625.472 512L96 1024V0z" fill="#33D9FB" p-id="49249"></path></svg>

ems-ui/src/components/Block/block.vue

@@ -3,7 +3,7 @@
       class="grid-content bg-purple"
       v-resize='onResize'
   >
-    <div class="grid-title">{{ title }}</div>
+     <SubTitle :title ="title"/>
     <div class="grid-main-content">
       <slot name="main"></slot>
     </div>
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-
+import SubTitle from '@/components/SubTitle/index.vue'
 export default {
   props: {
     title: {
@@ -27,6 +27,7 @@ export default {
       },
     },
   },
+  components: {SubTitle}
 };
 </script>
 <style src="./index.scss" lang="scss" />

ems-ui/src/components/Block/charts/LineChartBlock.vue

@@ -39,7 +39,7 @@ const opts = {
   },
   yAxis: {
     type: 'value',
-    name: 'kw·h',
+    name: 'kW·h',
     minInterval: 1,
     nameLocation: 'middle',
     nameTextStyle: {
@@ -106,7 +106,7 @@ export default {
         data: legend,
       };
       option.xAxis = this.optCfg.xAxis;
-      option.yAxis.name = this.optCfg.unit || "kw·h"
+      option.yAxis.name = this.optCfg.unit || "kW·h"
       option && this.refCharts && this.refCharts.setOption(option);
       this.refCharts.resize();
     },

ems-ui/src/components/SubTitle/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="panel-title">{{title}}</div>
+</template>
+<script>
+export default {
+  name: 'SubTitle',
+props:['title'],
+  data () {
+    return {
+    };
+  },
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+ .panel-title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+    &::before {
+      content: '';
+      display: inline-block;
+      height: 14px;
+      width: 3px;
+      border-radius: 6px;
+      background: #409eff;
+      margin-right: 5px;
+    }
+  }
+</style>

ems-ui/src/layout/components/Navbar.vue

@@ -105,7 +105,7 @@ export default {
           location.href = '/index';
         })
       }).catch(() => {});
-    }
+    },
   }
 }
 </script>
@@ -149,6 +149,14 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    .large-screen{
+      display: inline-block;
+      color: #409EFF;
+      position: relative;
+      top: -15px;
+      margin-right: 50px;
+      cursor: pointer;
+    }
 
     &:focus {
       outline: none;

ems-ui/src/layout/components/Sidebar/Link.vue

@@ -16,7 +16,7 @@ export default {
   },
   computed: {
     isExternal() {
-      return isExternal(this.to)
+      return isExternal(this.to)||this.to.includes('largeScreen')
     },
     type() {
       if (this.isExternal) {

ems-ui/src/router/index.js

@@ -1,11 +1,11 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from 'vue';
+import Router from 'vue-router';
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
-
+import Layout from '@/layout';
+import LargeScreen from '@/views/largeScreen/index.vue'
 /**
  * Note: 路由配置项
  *
@@ -67,6 +67,88 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
+  //智慧园区管理平台
+  {
+    path: '/largeScreen',
+    name: 'largeScreen',
+    redirect: { name: 'home' },
+    component: LargeScreen,
+    hidden: true,
+    children: [
+      {
+        path: 'home',
+        name: 'home',
+        meta: {
+          title: '首页'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/home/left.vue'),
+          right: () => import('@/views/largeScreen/home/right.vue')
+        }
+      },
+      {
+        path: 'source',
+        name: 'source',
+        meta: {
+          title: '源'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/source/left.vue'),
+          right: () => import('@/views/largeScreen/source/right.vue')
+        }
+      },
+      {
+        path: 'storage',
+        name: 'storage',
+        meta: {
+          title: '储'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/storage/left.vue'),
+          right: () => import('@/views/largeScreen/storage/right.vue')
+        }
+      },
+      {
+        path: 'soc',
+        name: 'soc',
+        meta: {
+          title: '荷'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/soc/left.vue'),
+          right: () => import('@/views/largeScreen/soc/right.vue')
+        }
+      },
+      {
+        path: 'net',
+        name: 'net',
+        meta: {
+          title: '网'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/net/left.vue'),
+          right: () => import('@/views/largeScreen/net/right.vue')
+        }
+      },
+      {
+        path: 'device',
+        name: 'device',
+        meta: {
+          title: '设备'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/device/left.vue'),
+          right: () => import('@/views/largeScreen/device/right.vue')
+        }
+      }
+    ]
+  },
   {
     path: '',
     component: Layout,
@@ -94,7 +176,7 @@ export const constantRoutes = [
       }
     ]
   }
-]
+];
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
@@ -168,22 +250,22 @@ export const dynamicRoutes = [
       }
     ]
   }
-]
+];
 
 // 防止连续点击多次路由报错
 let routerPush = Router.prototype.push;
 let routerReplace = Router.prototype.replace;
 // push
 Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(err => err)
-}
+  return routerPush.call(this, location).catch(err => err);
+};
 // replace
 Router.prototype.replace = function push(location) {
-  return routerReplace.call(this, location).catch(err => err)
-}
+  return routerReplace.call(this, location).catch(err => err);
+};
 
 export default new Router({
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
-})
+});

ems-ui/src/views/alarm/alarm-info/index.vue

@@ -1,149 +1,114 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="所属服务区" prop="areaCode" label-width="100ox">
-        <el-select v-model="queryParams.areaCode"  >
-          <el-option v-for="item in areaOptions" :label="item.label" :value="item.id" :key="item.id" />
-        </el-select>
-      </el-form-item>
+    <el-row :gutter="10">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="告警类型" prop="alarmType">
+            <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
+              <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="子系统" prop="systemCode">
+            <el-select v-model="queryParams.systemCode" placeholder="请选择子系统">
+              <el-option v-for="subsystem in subsystemList" :key="subsystem.systemCode" :label="subsystem.systemName"
+                :value="subsystem.systemCode"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="告警状态" prop="alarmState">
+            <el-select v-model="queryParams.alarmState" placeholder="请选择告警状态">
+              <el-option v-for="dict in dict.type.alarm_state" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-      <el-form-item label="告警类型" prop="alarmType">
-        <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
-          <el-option
-              v-for="dict in dict.type.alarm_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="子系统" prop="systemCode">
-        <el-select v-model="queryParams.systemCode" placeholder="请选择子系统">
-          <el-option
-              v-for="subsystem in subsystemList"
-              :key="subsystem.systemCode"
-              :label="subsystem.systemName"
-              :value="subsystem.systemCode"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="告警状态" prop="alarmState">
-        <el-select v-model="queryParams.alarmState" placeholder="请选择告警状态">
-          <el-option
-              v-for="dict in dict.type.alarm_state"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:alarm-info:add']">新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+              v-hasPermi="['ems:alarm-info:edit']">修改
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+              v-hasPermi="['ems:alarm-info:remove']">删除
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:alarm-info:export']">导出
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['ems:alarm-info:add']"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['ems:alarm-info:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['ems:alarm-info:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['ems:alarm-info:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+        <el-table v-loading="loading" :data="alarmInfoList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="园区代码" align="left" prop="areaCode" />
+          <el-table-column label="子系统" align="center" prop="subSystemName" />
+          <el-table-column label="对象类型" align="center" prop="objType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="对象代码" align="center" prop="objCode" />
+          <el-table-column label="告警时间" align="center" prop="alarmDate" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.alarmDate, '{y}-{m}-{d}') + " " + parseTime(scope.row.alarmTime,
+                '{hh}:{mm}:{s}')}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="告警代码" align="center" prop="alarmCode" />
+          <el-table-column label="告警描述" align="center" prop="alarmMsg" />
+          <el-table-column label="告警类型" align="center" prop="alarmType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="告警状态" align="center" prop="alarmState">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['ems:alarm-info:edit']">修改
+              </el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                @click="handleDelete(scope.row)" v-hasPermi="['basecfg:alarm-info:remove']">
+                删除</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
 
-    <el-table v-loading="loading" :data="alarmInfoList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="园区代码" align="left" prop="areaCode" />
-      <el-table-column label="子系统" align="center" prop="subSystemName" />
-      <el-table-column label="对象类型" align="center" prop="objType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="对象代码" align="center" prop="objCode" />
-      <el-table-column label="告警时间" align="center" prop="alarmDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.alarmDate, '{y}-{m}-{d}') +" "+ parseTime(scope.row.alarmTime, '{hh}:{mm}:{s}')}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警代码" align="center" prop="alarmCode" />
-      <el-table-column label="告警描述" align="center" prop="alarmMsg" />
-      <el-table-column label="告警类型" align="center" prop="alarmType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="告警状态" align="center" prop="alarmState">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['ems:alarm-info:edit']"
-          >修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['basecfg:alarm-info:remove']">
-            删除</el-button>
+      </el-col></el-row>
 
-        </template>
-      </el-table-column>
-    </el-table>
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
 
     <!-- 添加或修改能源设施告警对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -153,37 +118,23 @@
         </el-form-item>
         <el-form-item label="对象类型" prop="objType">
           <el-select v-model="form.objType" placeholder="请选择对象类型">
-            <el-option
-                v-for="dict in dict.type.obj_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.obj_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="对象代码" prop="objCode">
           <el-input v-model="form.objCode" placeholder="请输入对象代码" />
         </el-form-item>
         <el-form-item label="告警时间" prop="alarmTime">
-          <el-date-picker
-              v-model="form.alarmTime"
-              type="datetime"
-              format="yyyy-MM-dd HH:mm"
-              value-format="yyyy-MM-dd HH:mm:00"
-              :style="{width: '100%'}"
-              placeholder="请选择告警时间"
-              @change="dateChange" clearable
-          >
+          <el-date-picker v-model="form.alarmTime" type="datetime" format="yyyy-MM-dd HH:mm"
+            value-format="yyyy-MM-dd HH:mm:00" :style="{ width: '100%' }" placeholder="请选择告警时间" @change="dateChange"
+            clearable>
           </el-date-picker>
         </el-form-item>
         <el-form-item label="子系统" prop="systemCode">
           <el-select v-model="form.systemCode" placeholder="请选择子系统">
-            <el-option
-                v-for="subsystem in subsystemList"
-                :key="subsystem.systemCode"
-                :label="subsystem.systemName"
-                :value="subsystem.systemCode"
-            ></el-option>
+            <el-option v-for="subsystem in subsystemList" :key="subsystem.systemCode" :label="subsystem.systemName"
+              :value="subsystem.systemCode"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警代码" prop="alarmCode">
@@ -194,22 +145,14 @@
         </el-form-item>
         <el-form-item label="告警类型" prop="alarmType">
           <el-select v-model="form.alarmType" placeholder="请选择告警类型">
-            <el-option
-                v-for="dict in dict.type.alarm_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警状态" prop="alarmState">
           <el-select v-model="form.alarmState" placeholder="请选择告警状态">
-            <el-option
-                v-for="dict in dict.type.alarm_state"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_state" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
@@ -222,15 +165,15 @@
 </template>
 
 <script>
-import { listSubsystem } from '@/api/adapter/subsystem';
-import { addAlarmInfo, delAlarmInfo, getAlarmInfo, listAlarmInfo, updateAlarmInfo } from '@/api/alarm/alarm-info';
+import {listSubsystem} from '@/api/adapter/subsystem';
+import {addAlarmInfo, delAlarmInfo, getAlarmInfo, listAlarmInfo, updateAlarmInfo} from '@/api/alarm/alarm-info';
 import dayjs from 'dayjs';
-import { areaTreeSelect } from '@/api/basecfg/area'
+import {areaTreeSelect} from '@/api/basecfg/area'
 
 export default {
   name: 'Alarm-info',
   dicts: ['obj_type', 'alarm_type', 'alarm_state'],
-  data() {
+  data () {
     return {
       subsystemList: [],
       // 遮罩层
@@ -318,16 +261,24 @@ export default {
           },
         ],
       },
+      areaName: undefined,
+      areaOptions: [],
     };
   },
-  created() {
+  watch: {
+     // 根据名称筛选区域树
+     areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created () {
     this.getAreaTree("Area");
     this.getList();
     this.getSubList();
   },
   methods: {
     /** 查询能源设施告警列表 */
-    getList() {
+    getList () {
       this.loading = true;
       listAlarmInfo(this.queryParams).then(response => {
         this.alarmInfoList = response.rows;
@@ -336,12 +287,12 @@ export default {
       });
     },
     // 取消按钮
-    cancel() {
+    cancel () {
       this.open = false;
       this.reset();
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         areaCode: null,
@@ -355,42 +306,42 @@ export default {
       };
       this.resetForm('form');
     },
-    async getSubList() {
-      const { rows } = await listSubsystem({
+    async getSubList () {
+      const {rows} = await listSubsystem({
         pageNum: 1,
         pageSize: 999,
       });
       this.subsystemList = rows;
     },
-    dateChange(val) {
+    dateChange (val) {
       this.$refs.form.alarmTime = val;
       this.$refs.form.alarmDate = dayjs(val).format('YYYY-MM-DD');
       this.form.alarmDate = dayjs(val).format('YYYY-MM-DD');
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm('queryForm');
       this.handleQuery();
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset();
       this.open = true;
       this.title = '添加能源设施告警';
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate (row) {
       this.reset();
       const id = row.id || this.ids;
       getAlarmInfo(id).then(response => {
@@ -400,7 +351,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
@@ -420,26 +371,40 @@ export default {
       });
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids;
       this.$modal.confirm('是否确认删除能源设施告警编号为"' + ids + '"的数据项？').then(function () {
         return delAlarmInfo(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/alarm-info/export', {
         ...this.queryParams,
       }, `alarm-info_${new Date().getTime()}.xlsx`);
     },
-    getAreaTree(tier) {
+    getAreaTree (tier) {
       areaTreeSelect(tier).then(response => {
-        this.areaOptions = response.data;
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+        this.queryParams.areaCode = '-1'
       });
-    }
+    },
+     // 筛选节点
+     filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
   },
 };
 </script>

ems-ui/src/views/alarm/index.vue

@@ -1,141 +1,104 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="策略名称" prop="policyName">
-        <el-input
-          v-model="queryParams.policyName"
-          placeholder="请输入策略名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="对象类型" prop="alarmObjType">
-        <el-select v-model="queryParams.alarmObjType" placeholder="请选择告警对象类型" clearable>
-          <el-option
-            v-for="dict in dict.type.obj_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="告警代码" prop="alarmCode">
-        <el-input
-          v-model="queryParams.alarmCode"
-          placeholder="请输入告警代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警类型" prop="alarmType">
-        <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
-          <el-option
-            v-for="dict in dict.type.alarm_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ems:alarm-strategy:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['ems:alarm-strategy:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['ems:alarm-strategy:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['ems:alarm-strategy:export']"
-        >导出</el-button>
+    <el-row :gutter="10">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="策略名称" prop="policyName">
+            <el-input v-model="queryParams.policyName" placeholder="请输入策略名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="对象类型" prop="alarmObjType">
+            <el-select v-model="queryParams.alarmObjType" placeholder="请选择告警对象类型" clearable>
+              <el-option v-for="dict in dict.type.obj_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="告警代码" prop="alarmCode">
+            <el-input v-model="queryParams.alarmCode" placeholder="请输入告警代码" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="告警类型" prop="alarmType">
+            <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
+              <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:alarm-strategy:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+              v-hasPermi="['ems:alarm-strategy:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+              v-hasPermi="['ems:alarm-strategy:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:alarm-strategy:export']">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <el-table v-loading="loading" :data="alarmList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="策略代码" align="left" prop="policyCode" />
-      <el-table-column label="策略名称" align="center" prop="policyName" />
-      <el-table-column label="告警对象类型" align="center" prop="alarmObjType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.obj_type" :value="scope.row.alarmObjType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警对象指标" align="center" prop="alarmObjIndex" />
-      <el-table-column label="告警规则" align="center" prop="alarmRuleType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_thre_type" :value="scope.row.alarmRuleType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警阈值" align="center" prop="alarmThresholdValue" />
-      <el-table-column label="告警代码" align="center" prop="alarmCode" />
-      <el-table-column label="告警描述" align="center" prop="alarmMsg" />
-      <el-table-column label="告警类型" align="center" prop="alarmType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <el-table v-loading="loading" :data="alarmList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="策略代码" align="left" prop="policyCode" />
+          <el-table-column label="策略名称" align="center" prop="policyName" />
+          <el-table-column label="告警对象类型" align="center" prop="alarmObjType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.obj_type" :value="scope.row.alarmObjType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="告警对象指标" align="center" prop="alarmObjIndex" />
+          <el-table-column label="告警规则" align="center" prop="alarmRuleType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_thre_type" :value="scope.row.alarmRuleType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="告警阈值" align="center" prop="alarmThresholdValue" />
+          <el-table-column label="告警代码" align="center" prop="alarmCode" />
+          <el-table-column label="告警描述" align="center" prop="alarmMsg" />
+          <el-table-column label="告警类型" align="center" prop="alarmType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
 
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ems:alarm-strategy:edit']"
-          >修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:alarm-strategy:remove']">
-            删除</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['ems:alarm-strategy:edit']">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                @click="handleDelete(scope.row)" v-hasPermi="['ems:alarm-strategy:remove']">
+                删除</el-button>
 
-        </template>
-      </el-table-column>
-    </el-table>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
+      </el-col>
+    </el-row>
 
     <!-- 添加或修改能源设施告警策略对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -148,12 +111,8 @@
         </el-form-item>
         <el-form-item label="告警对象类型" prop="alarmObjType">
           <el-select v-model="form.alarmObjType" placeholder="请选择告警对象类型">
-            <el-option
-              v-for="dict in dict.type.obj_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.obj_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警对象指标" prop="alarmObjIndex">
@@ -161,12 +120,8 @@
         </el-form-item>
         <el-form-item label="告警规则" prop="alarmRuleType">
           <el-select v-model="form.alarmRuleType" placeholder="请选择告警规则">
-            <el-option
-              v-for="dict in dict.type.alarm_thre_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_thre_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警阈值" prop="alarmThresholdValue">
@@ -180,12 +135,8 @@
         </el-form-item>
         <el-form-item label="告警类型" prop="alarmType">
           <el-select v-model="form.alarmType" placeholder="请选择告警类型">
-            <el-option
-              v-for="dict in dict.type.alarm_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
@@ -198,12 +149,12 @@
 </template>
 
 <script>
-import { listAlarm, getAlarm, delAlarm, addAlarm, updateAlarm } from "@/api/alarm/alarm";
-
+import {listAlarm, getAlarm, delAlarm, addAlarm, updateAlarm} from "@/api/alarm/alarm";
+import {areaTreeSelect} from '@/api/basecfg/area'
 export default {
   name: "Alarm",
   dicts: ['obj_type', 'alarm_thre_type', 'alarm_type'],
-  data() {
+  data () {
     return {
       // 遮罩层
       loading: true,
@@ -230,33 +181,43 @@ export default {
         policyName: null,
         alarmObjType: null,
         alarmCode: null,
-        alarmType: null
+        alarmType: null,
+        areaCode:null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         policyCode: [
-          { required: true, message: "策略代码不能为空", trigger: "blur" }
+          {required: true, message: "策略代码不能为空", trigger: "blur"}
         ],
         policyName: [
-          { required: true, message: "策略名称不能为空", trigger: "blur" }
+          {required: true, message: "策略名称不能为空", trigger: "blur"}
         ],
         alarmObjType: [
-          { required: true, message: "告警对象类型不能为空", trigger: "change" }
+          {required: true, message: "告警对象类型不能为空", trigger: "change"}
         ],
         alarmObjIndex: [
-          { required: true, message: "告警对象指标不能为空", trigger: "blur" }
+          {required: true, message: "告警对象指标不能为空", trigger: "blur"}
         ],
-      }
+      },
+      areaName: undefined,
+      areaOptions: [],
     };
   },
-  created() {
+  watch: {
+     // 根据名称筛选区域树
+     areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+ async created () {
+    await this.getAreaTreeByTag('Area')
     this.getList();
   },
   methods: {
     /** 查询能源设施告警策略列表 */
-    getList() {
+    getList () {
       this.loading = true;
       listAlarm(this.queryParams).then(response => {
         this.alarmList = response.rows;
@@ -264,13 +225,34 @@ export default {
         this.loading = false;
       });
     },
+     /** 查询区域树结构 */
+     async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+        this.queryParams.areaCode = '-1'
+      })
+    },
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
     // 取消按钮
-    cancel() {
+    cancel () {
       this.open = false;
       this.reset();
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         policyCode: null,
@@ -286,29 +268,29 @@ export default {
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm("queryForm");
       this.handleQuery();
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset();
       this.open = true;
       this.title = "添加能源设施告警策略";
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate (row) {
       this.reset();
       const id = row.id || this.ids
       getAlarm(id).then(response => {
@@ -318,7 +300,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
@@ -338,17 +320,17 @@ export default {
       });
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除能源设施告警策略编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除能源设施告警策略编号为"' + ids + '"的数据项？').then(function () {
         return delAlarm(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/alarm/export', {
         ...this.queryParams
       }, `alarm_${new Date().getTime()}.xlsx`)

ems-ui/src/views/analysis/device/index.scss

@@ -1,7 +1,7 @@
 @import "../../../assets/styles";
 
 .power-index-content {
-  background: rgba(245, 247, 249, 1);
+  background: #fff;
 
   .gl-filters {
     height: 50px;

ems-ui/src/views/analysis/device/warn.vue

@@ -1,98 +1,71 @@
 <template>
   <div class="app-container power-index-content">
-    <el-row type="flex" :gutter="20">
-      <el-col :span="24">
-        <div class="gl-filters">
-          <SwitchTag
-              :ds="areaTag"
-              :def-tag="defArea"
-              :tagClick="onSwitchTagClick"
-          />
+    <el-row :gutter="10">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :default-expand-all="true" :expand-on-click-node="false"  :filter-node-method="filterNode" node-key="id" highlight-current @node-click="handleNodeClick" />
         </div>
       </el-col>
-    </el-row>
-    <el-row :gutter="20" style="margin-top: 20px">
-      <el-col :span="12">
-        <DeviceWaring />
-      </el-col>
-      <el-col :span="12">
-        <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
-          <template v-slot:filters>
-            <SwitchTag
-                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
-                :defTag="dateType"
-                :tagClick="onDateTypeSwitch"
-            />
-          </template>
-        </LineChartBlock>
-      </el-col>
-    </el-row>
-    <el-row type="flex" :gutter="20" style="margin-top: 20px">
-      <el-col :span="12">
-        <BlockTable title="实时告警" :table-data="realTimeTableData">
-          <template v-slot:columns>
-            <el-table-column
-                type="index"
-                label="序号"
-                align="center"
-            />
-            <el-table-column
-                prop="subSystemName"
-                label="子系统"
-                align="center"
-            />
-            <el-table-column
-                prop="objName"
-                label="对象名称"
-                align="center"
-            />
-            <el-table-column
-                prop="alarmMsg"
-                label="描述"
-                align="center"
-            />
-            <el-table-column
-                prop="alarmTime"
-                label="时间"
-                align="center"
-            />
-            <el-table-column
-                label="操作"
-                align="center"
-                width="100"
-            >
-              <template slot-scope="scope">
-                <el-dropdown @command="(cmd)=>handleCommand(cmd, scope.row)"
-                             v-if="![ALARM_STATE.dissolved.value, ALARM_STATE.dissolved.value].includes(scope.row.alarmState)">
-          <span class="el-dropdown-link">
-            <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState"></dict-tag>
-            <i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item :command="ALARM_STATE.disposing.code"
-                                      v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
-                    </el-dropdown-item>
-                    <el-dropdown-item :command="ALARM_STATE.disposed.code">已处理</el-dropdown-item>
-                    <el-dropdown-item :command="ALARM_STATE.dissolved.code">已消散</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
+      <el-col :span="20" :xs="24">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <DeviceWaring />
+          </el-col>
+          <el-col :span="12">
+            <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
+              <template v-slot:filters>
+                <SwitchTag :ds="[{ val: 'day', text: '按日' }, { val: 'month', text: '按月' }, { val: 'year', text: '按年' }]"
+                  :defTag="dateType" :tagClick="onDateTypeSwitch" />
               </template>
-            </el-table-column>
-          </template>
-        </BlockTable>
-      </el-col>
-      <el-col :span="12">
-        <BarChartBlock title="告警统计报表" :opt-cfg="subSysIndex">
-          <template v-slot:filters>
-            <SwitchTag
-                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
-                :defTag="dateType"
-                :tagClick="onSubSysDateTypeSwitch"
-            />
-          </template>
-        </BarChartBlock>
+            </LineChartBlock>
+          </el-col>
+        </el-row>
+        <el-row type="flex" :gutter="20" style="margin-top: 20px">
+          <el-col :span="12">
+            <BlockTable title="实时告警" :table-data="realTimeTableData">
+              <template v-slot:columns>
+                <el-table-column type="index" label="序号" align="center" />
+                <el-table-column prop="subSystemName" label="子系统" align="center" />
+                <el-table-column prop="objName" label="对象名称" align="center" />
+                <el-table-column prop="alarmMsg" label="描述" align="center" />
+                <el-table-column prop="alarmTime" label="时间" align="center" />
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-dropdown @command="(cmd) => handleCommand(cmd, scope.row)"
+                      v-if="![ALARM_STATE.dissolved.value, ALARM_STATE.dissolved.value].includes(scope.row.alarmState)">
+                      <span class="el-dropdown-link">
+                        <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState"></dict-tag>
+                        <i class="el-icon-arrow-down el-icon--right"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="ALARM_STATE.disposing.code"
+                          v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
+                        </el-dropdown-item>
+                        <el-dropdown-item :command="ALARM_STATE.disposed.code">已处理</el-dropdown-item>
+                        <el-dropdown-item :command="ALARM_STATE.dissolved.code">已消散</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </template>
+                </el-table-column>
+              </template>
+            </BlockTable>
+          </el-col>
+          <el-col :span="12">
+            <BarChartBlock title="告警统计报表" :opt-cfg="subSysIndex">
+              <template v-slot:filters>
+                <SwitchTag :ds="[{ val: 'day', text: '按日' }, { val: 'month', text: '按月' }, { val: 'year', text: '按年' }]"
+                  :defTag="dateType" :tagClick="onSubSysDateTypeSwitch" />
+              </template>
+            </BarChartBlock>
+          </el-col>
+        </el-row>
       </el-col>
     </el-row>
+
   </div>
 </template>
 
@@ -102,18 +75,17 @@ import {
   fetchAlarmIndexDay, fetchAlarmIndexMonth, fetchAlarmIndexYear, fetchSubSysIndexDay, fetchSubSysIndexMonth,
   fetchSubSysIndexYear, listAlarmInfo, updateAlarmInfo,
 } from '@/api/alarm/alarm-info';
-import { ApiCode } from '@/api/apiEmums';
+import {ApiCode} from '@/api/apiEmums';
 import Block from '@/components/Block/block.vue';
 import BlockTable from '@/components/Block/BlockTable/index.vue';
 import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
 import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
-import { ALARM_STATE } from '@/enums/alarm';
-import { DateTool } from '@/utils/DateTool';
+import {ALARM_STATE} from '@/enums/alarm';
+import {DateTool} from '@/utils/DateTool';
 import DeviceWaring from '@/views/analysis/device/DevcWarning/index.vue';
 import Tag from '@/views/basecfg/tag/index.vue';
 import dayjs from 'dayjs';
-import { mapGetters, mapMutations } from 'vuex';
-import * as areaApi from '../../../api/basecfg/area';
+import {areaTreeSelect} from '@/api/basecfg/area'
 import LineChartBlock from '../../../components/Block/charts/LineChartBlock.vue';
 import SwitchTag from '../../../components/SwitchTag/index.vue';
 
@@ -129,12 +101,13 @@ export default {
     LineChartBlock,
     SwitchTag,
   },
-  data() {
+  data () {
     return {
+      areaName: undefined,
+      areaOptions: [],
       ALARM_STATE,
-      areaTag: [],
-      defArea: {},
-      dateType: { val: 'day' },
+      dateType: {val: 'day'},
+      areaCode: '',
       devcWarningHis: {
         unit: '  ',
         xAxis: {
@@ -154,36 +127,42 @@ export default {
       realTimeTableData: [],
     };
   },
-  computed: {
-    // 监听选中的区域，以更新数据
-    selectedServiceArea() {
-      return this.$store.state.userState.selectedServiceArea;
-    },
-    ...mapGetters('userState', ['getSelectedArea']),
-  },
   watch: {
-    selectedServiceArea(val) {
-      this.queryCharts();
-    },
-  },
-  mounted() {
-    this.initData();
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
+    }
   },
-  created() {
+  async mounted () {
+    await this.getAreaTreeByTag('Area')
+    this.queryCharts()
   },
   methods: {
-    ...mapMutations('userState', ['setSelectedArea']),
-    onSwitchTagClick(item) {
-      this.setSelectedArea(item);
+    /** 查询区域树结构 */
+    async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+        this.areaCode = '-1'
+      })
     },
-    async onDateTypeSwitch(item) {
-      if (!this.selectedServiceArea) {
-        return;
-      }
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.areaCode = data.id
+      this.queryCharts()
+    },
+    async onDateTypeSwitch (item) {
       if (item.val === 'day') {
         const xaxis = DateTool.getTime(60);
-        const { data } = await fetchAlarmIndexDay({
-          areaCode: this.selectedServiceArea.val,
+        const {data} = await fetchAlarmIndexDay({
+          areaCode: this.areaCode,
         });
         const series = this.toSeries(data, xaxis);
         this.devcWarningHis.xAxis.data = xaxis;
@@ -192,27 +171,24 @@ export default {
       }
       if (item.val === 'month') {
         const xaxis = DateTool.getDayOfRange(
-            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
-        const { data } = await fetchAlarmIndexMonth({ areaCode: this.selectedServiceArea.val });
+          dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+        const {data} = await fetchAlarmIndexMonth({areaCode: this.areaCode});
         const series = this.toSeries(data, xaxis);
         this.devcWarningHis.xAxis.data = xaxis;
         this.devcWarningHis.series = series;
         return;
       }
       const xaxis = DateTool.getMonthsOfYearAgo();
-      const { data } = await fetchAlarmIndexYear({ areaCode: this.selectedServiceArea.val });
+      const {data} = await fetchAlarmIndexYear({areaCode: this.areaCode});
       const series = this.toSeries(data, xaxis);
       this.devcWarningHis.xAxis.data = xaxis;
       this.devcWarningHis.series = series;
     },
-    async onSubSysDateTypeSwitch(item) {
-      if (!this.selectedServiceArea) {
-        return;
-      }
+    async onSubSysDateTypeSwitch (item) {
       if (item.val === 'day') {
         const xaxis = DateTool.getTime(60);
-        const { data } = await fetchSubSysIndexDay({
-          areaCode: this.selectedServiceArea.val,
+        const {data} = await fetchSubSysIndexDay({
+          areaCode: this.areaCode,
         });
         const series = this.subSysIndexToSeries(data, xaxis);
         this.subSysIndex.xAxis.data = xaxis;
@@ -221,20 +197,20 @@ export default {
       }
       if (item.val === 'month') {
         const xaxis = DateTool.getDayOfRange(
-            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
-        const { data } = await fetchSubSysIndexMonth({ areaCode: this.selectedServiceArea.val });
+          dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+        const {data} = await fetchSubSysIndexMonth({areaCode: this.areaCode});
         const series = this.subSysIndexToSeries(data, xaxis);
         this.subSysIndex.xAxis.data = xaxis;
         this.subSysIndex.series = series;
         return;
       }
       const xaxis = DateTool.getMonthsOfYearAgo();
-      const { data } = await fetchSubSysIndexYear({ areaCode: this.selectedServiceArea.val });
+      const {data} = await fetchSubSysIndexYear({areaCode: this.areaCode});
       const series = this.subSysIndexToSeries(data, xaxis);
       this.subSysIndex.xAxis.data = xaxis;
       this.subSysIndex.series = series;
     },
-    toSeries(data, xaxis) {
+    toSeries (data, xaxis) {
       const dayGroup = _.groupBy(data, 'alarmType');
       const series = [];
       Object.keys(dayGroup).forEach((alarmType) => {
@@ -255,7 +231,7 @@ export default {
       return series;
     },
 
-    subSysIndexToSeries(data, xaxis) {
+    subSysIndexToSeries (data, xaxis) {
       const dayGroup = _.groupBy(data, 'systemCode');
       const series = [];
       Object.keys(dayGroup).forEach((subSysCode) => {
@@ -274,32 +250,12 @@ export default {
       });
       return series;
     },
-    async initData() {
-      const {
-        rows,
-        total,
-      } = await areaApi.listArea({
-        pageNum: 1,
-        pageSize: 10,
-      });
-      if (rows.length > 0) {
-        rows.forEach(item => {
-          this.areaTag.push({
-            val: item.areaCode,
-            text: item.areaName,
-          });
-        });
-        this.defArea = this.areaTag[0];
-        this.setSelectedArea(this.areaTag[0]);
-      }
-      this.queryCharts();
-    },
-    queryCharts() {
+    queryCharts () {
       this.onDateTypeSwitch(this.dateType);
       this.onSubSysDateTypeSwitch(this.dateType);
       this.getRealTimeAlarm();
     },
-    async getRealTimeAlarm() {
+    async getRealTimeAlarm () {
       let result = [];
       const {
         code,
@@ -307,7 +263,7 @@ export default {
       } = await listAlarmInfo({
         pageNum: 1,
         pageSize: 10,
-        areaCode: this.selectedServiceArea.val,
+        areaCode: this.areaCode,
         alarmStateList: [
           ALARM_STATE.new.value, ALARM_STATE.disposing.value,
         ],
@@ -317,8 +273,7 @@ export default {
       }
       this.realTimeTableData = result;
     },
-    async handleCommand(command, data) {
-      debugger
+    async handleCommand (command, data) {
       await updateAlarmInfo({
         id: data.id,
         alarmState: ALARM_STATE[command].value,
@@ -328,4 +283,4 @@ export default {
   },
 };
 </script>
-<style src="./index.scss" lang="scss" />
+<style src="./index.scss" scoped lang="scss" />

ems-ui/src/views/analysis/power/save.vue

@@ -109,8 +109,8 @@
           <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="充电电量(kW.h)" align="center" prop="chargeElecQuantity" />
-      <el-table-column label="放电电量(kW.h)" align="center" prop="dischargeElecQuantity" />
+      <el-table-column label="充电电量(kW·h)" align="center" prop="chargeElecQuantity" />
+      <el-table-column label="放电电量(kW·h)" align="center" prop="dischargeElecQuantity" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button

ems-ui/src/views/basecfg/cacfg/index.vue

@@ -87,7 +87,7 @@
           <el-input v-model="form.regionName" placeholder="请输入地区名称" />
         </el-form-item>
         <el-form-item label="因子值" prop="factorValue">
-          <el-input v-model="form.factorValue" placeholder="请输入因子值 单位: kgCO2/kWh" />
+          <el-input v-model="form.factorValue" placeholder="请输入因子值 单位: kgCO2/kW·h" />
         </el-form-item>
         <el-form-item label="数据版本" prop="version">
           <el-input v-model="form.version" placeholder="请输入数据版本" />

ems-ui/src/views/devmgr/el/index.vue

@@ -1,166 +1,125 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="对象类型" prop="objType">
-        <el-select v-model="queryParams.objType" placeholder="请选择对象类型" clearable>
-          <el-option
-            v-for="dict in dict.type.device_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="目标对象" prop="objName">
-        <el-autocomplete
-          v-model="queryParams.objName"
-          placeholder="请输入对象名称"
-          clearable
-          :fetch-suggestions="querySearch"
-          @select="handleSelect"
-        ></el-autocomplete>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="recordTime">
-        <el-date-picker clearable
-                        v-model="queryParams.recordTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="维护标题" prop="maintainTitle">
-        <el-input
-          v-model="queryParams.maintainTitle"
-          placeholder="请输入维护标题"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="维护人" prop="maintainPerson">
-        <el-input
-          v-model="queryParams.maintainPerson"
-          placeholder="请输入维护人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ems:rbook:add']"
-        >新增
-        </el-button>
+    <el-row :gutter="10">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['ems:rbook:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <el-col :span="18" :xs="24" >
+        <el-tabs v-model="queryParams.objType" @tab-click="resetQuery">
+          <el-tab-pane v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label" :name="dict.value">
+          </el-tab-pane>
+        </el-tabs>
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="目标对象" prop="objName">
+            <el-autocomplete v-model="queryParams.objName" placeholder="请输入对象名称" clearable
+              :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="recordTime">
+            <el-date-picker clearable v-model="queryParams.recordTime" type="date" value-format="yyyy-MM-dd"
+              placeholder="请选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="维护标题" prop="maintainTitle">
+            <el-input v-model="queryParams.maintainTitle" placeholder="请输入维护标题" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="维护人" prop="maintainPerson">
+            <el-input v-model="queryParams.maintainPerson" placeholder="请输入维护人" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-    <el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="记录编号" align="center" prop="recordCode"/>
-      <el-table-column label="目标对象" align="center" prop="objName">
-        <template slot-scope="scope">
-          <span v-if="scope.row.objType">({{ dict.type.device_type[scope.row.objType].label }}) {{
-              scope.row.objName
-            }}</span>
-          <span v-else>({{ dict.type.device_type[scope.row.objType].label }}){{ scope.row.objName }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="安装位置" align="center" prop="insLocation"/>
-      <el-table-column label="维护标题" align="center" prop="maintainTitle"/>
-      <el-table-column label="创建时间" align="center" prop="recordTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="维护人" align="center" prop="maintainPerson"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-document" @click="handleViewRec(scope.row)">
-            查看
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:rbook:add']">新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:rbook:export']">导出
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="记录编号" align="center" prop="recordCode" />
+          <el-table-column label="目标对象" align="center" prop="objName">
+            <template slot-scope="scope">
+              <span v-if="scope.row.objType">({{ dict.type.device_type[scope.row.objType].label }}) {{
+                scope.row.objName
+                }}</span>
+              <span v-else>({{ dict.type.device_type[scope.row.objType].label }}){{ scope.row.objName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="安装位置" align="center" prop="insLocation" />
+          <el-table-column label="维护标题" align="center" prop="maintainTitle" />
+          <el-table-column label="创建时间" align="center" prop="recordTime" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="维护人" align="center" prop="maintainPerson" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-document" @click="handleViewRec(scope.row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+    </el-row>
     <!-- 查看设备台账对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="记录编号" prop="recordCode">
-          <el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly"/>
+          <el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="对象类型">
-          <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions"
-                     :disabled="isViewOnly">
-<!--            <el-option v-for = "item in objTypeOptions"-->
-<!--                       :label="item.name"-->
-<!--                       :value="item.code"-->
-<!--                       :key="item.code" />-->
-            <el-option
-              v-for="dict in dict.type.device_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+          <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions" :disabled="isViewOnly">
+            <!--            <el-option v-for = "item in objTypeOptions"-->
+            <!--                       :label="item.name"-->
+            <!--                       :value="item.code"-->
+            <!--                       :key="item.code" />-->
+            <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="    " prop="objCode" v-if="showObjCode">
-          <el-cascader
-            v-model="form.objCode"
-            :options="AllCode"
-            placeholder="请选择具体数据"
-            @change="handleSelect"
-            :props="{ value: 'value', label: 'label', children: 'children' }"
-            :disabled="isViewOnly"
-          ></el-cascader>
+          <el-cascader v-model="form.objCode" :options="AllCode" placeholder="请选择具体数据" @change="handleSelect"
+            :props="{ value: 'value', label: 'label', children: 'children' }" :disabled="isViewOnly"></el-cascader>
         </el-form-item>
         <el-form-item label="创建时间" prop="recordTime">
-          <el-date-picker clearable
-                          v-model="form.recordTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择日期 yyyy-MM-dd HH:mm:ss"
-                          :disabled="isViewOnly"
-          >
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择日期 yyyy-MM-dd HH:mm:ss" :disabled="isViewOnly">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName">
-          <el-input v-model="form.objName" placeholder="请输入对象名称" :disabled="isViewOnly"/>
+          <el-input v-model="form.objName" placeholder="请输入对象名称" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="安装位置" prop="insLocation">
-          <el-input v-model="form.insLocation" placeholder="请输入安装位置" :disabled="isViewOnly"/>
+          <el-input v-model="form.insLocation" placeholder="请输入安装位置" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="维护标题" prop="maintainTitle">
-          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" :disabled="isViewOnly"/>
+          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="维护内容">
           <!-- 只读模式下显示内容 -->
@@ -169,7 +128,7 @@
           <editor v-else v-model="form.maintainContent" :min-height="192"></editor>
         </el-form-item>
         <el-form-item label="维护人" prop="maintainPerson">
-          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" :disabled="isViewOnly"/>
+          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" :disabled="isViewOnly" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -180,8 +139,7 @@
           编辑
         </el-button>
         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedRow)"
-                   v-hasPermi="['ems:rbook:remove']"
-        >删除
+          v-hasPermi="['ems:rbook:remove']">删除
         </el-button>
         <el-button v-if="isViewOnly" @click="cancel">取 消</el-button>
       </div>
@@ -191,50 +149,37 @@
     <el-dialog :title="title" :visible.sync="addOrUpdateOpen" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="记录编号" prop="recordCode">
-          <el-input v-model="form.recordCode" placeholder="请输入记录编号"/>
+          <el-input v-model="form.recordCode" placeholder="请输入记录编号" />
         </el-form-item>
         <el-form-item label="对象类型">
           <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions">
-            <el-option
-              v-for="dict in dict.type.device_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+            <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="   " prop="objCode" v-if="showObjCode">
-          <el-cascader
-            v-model="form.objCode"
-            :options="AllCode"
-            placeholder="请选择具体数据"
-            @change="handleSelect"
-            :props="{ value: 'value', label: 'label', children: 'children' }"
-          ></el-cascader>
+          <el-cascader v-model="form.objCode" :options="AllCode" placeholder="请选择具体数据" @change="handleSelect"
+            :props="{ value: 'value', label: 'label', children: 'children' }"></el-cascader>
         </el-form-item>
         <el-form-item label="创建时间" prop="recordTime">
-          <el-date-picker clearable
-                          v-model="form.recordTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择日期 "
-          >
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择日期 ">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName">
-          <el-input v-model="form.objName" placeholder="请输入对象名称"/>
+          <el-input v-model="form.objName" placeholder="请输入对象名称" />
         </el-form-item>
         <el-form-item label="安装位置" prop="insLocation">
-          <el-input v-model="form.insLocation" placeholder="请输入安装位置"/>
+          <el-input v-model="form.insLocation" placeholder="请输入安装位置" />
         </el-form-item>
         <el-form-item label="维护标题" prop="maintainTitle">
-          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题"/>
+          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" />
         </el-form-item>
         <el-form-item label="维护内容">
-          <editor v-model="form.maintainContent" :min-height="192"/>
+          <editor v-model="form.maintainContent" :min-height="192" />
         </el-form-item>
         <el-form-item label="维护人" prop="maintainPerson">
-          <el-input v-model="form.maintainPerson" placeholder="请输入维护人"/>
+          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -246,16 +191,17 @@
 </template>
 
 <script>
-import { listRbook, getRbook, delRbook, addRbook, updateRbook } from '@/api/device/rbook'
-import { listAllFacs } from '@/api/basecfg/emsfacs'
-import { devTreeByFacs, listDevice, listDevRecursionByArea } from '@/api/device/device'
+import {listRbook, getRbook, delRbook, addRbook, updateRbook} from '@/api/device/rbook'
+import {listAllFacs} from '@/api/basecfg/emsfacs'
+import {devTreeByFacs, listDevice, listDevRecursionByArea} from '@/api/device/device'
+import {areaTreeSelect} from '@/api/basecfg/area'
 import Treeselect from '@riophae/vue-treeselect'
 
 export default {
   name: 'Rbook',
-  components: { Treeselect },
+  components: {Treeselect},
   dicts: ['device_type'],
-  data() {
+  data () {
     return {
       isViewOnly: false, // 添加这个标志变量
       // 遮罩层
@@ -297,48 +243,56 @@ export default {
         maintainTitle: null,
         maintainContent: null,
         maintainPerson: null,
-        recordTimeRange: []
+        recordTimeRange: [],
+        areaCode: ''
       },
       queryFacsParams: {
         areaCode: ''
       },
       objTypeOptions: [
-      { code: 1, name: '设施' },
-      { code: 0, name: '设备' },
-    ],
+        {code: 1, name: '设施'},
+        {code: 0, name: '设备'},
+      ],
 
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         recordCode: [
-          { required: true, message: '记录编号不能为空', trigger: 'blur' }
+          {required: true, message: '记录编号不能为空', trigger: 'blur'}
         ],
         objType: [
-          { required: true, message: '对象类型不能为空', trigger: 'change' }
+          {required: true, message: '对象类型不能为空', trigger: 'change'}
         ],
         maintainTitle: [
-          { required: true, message: '维护标题不能为空', trigger: 'blur' }
+          {required: true, message: '维护标题不能为空', trigger: 'blur'}
         ],
         recordTime: [
-          { required: true, message: '日期 yyyy-MM-dd 不能为空', trigger: 'blur' }
+          {required: true, message: '日期 yyyy-MM-dd 不能为空', trigger: 'blur'}
         ]
-      }
+      },
+      areaName: undefined,
+      areaOptions: [],
     }
 
   },
-  created() {
+  async created () {
+    await this.getAreaTreeByTag('Area')
     this.getList()
   },
   // 当对象类型有值时，显示对象代码输入框
   watch: {
-    'form.objType'(newVal) {
+    'form.objType' (newVal) {
       this.showObjCode = !!newVal
+    },
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
     }
   },
   methods: {
     /** 查询设备台账列表 */
-    getList() {
+    getList () {
       this.loading = true
       listRbook(this.queryParams).then(response => {
         console.log('设备台账搜索参数！！！！！', this.queryParams)
@@ -347,16 +301,35 @@ export default {
         this.loading = false
       })
     },
-
+    /** 查询区域树结构 */
+    async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+        this.queryParams.areaCode = '-1'
+      })
+    },
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
     // 取消按钮
-    cancel() {
+    cancel () {
       // this.isViewOnly = true; // 切换回只读模式
       this.addOrUpdateOpen = false
       this.open = false
       this.reset()
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         recordCode: null,
@@ -375,34 +348,34 @@ export default {
       this.dateRange = []
     },
     // 搜索建议的方法
-    querySearch(queryString, cb) {
+    querySearch (queryString, cb) {
       const results = this.rbookList.filter(item => {
         return item.objName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
       })
       // 调用回调函数，返回建议列表
-      cb(results.map(item => ({ value: item.objName })))
+      cb(results.map(item => ({value: item.objName})))
     },
 
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1
       this.getList()
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm('queryForm')
       this.handleQuery()
     },
 
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id)
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
 
     /**对象类型*/
-    changeObjOptions(objType) {
+    changeObjOptions (objType) {
       if (objType == 1) {
         this.queryFacsParams.areaCode = this.areaCode
         // 设施
@@ -425,7 +398,7 @@ export default {
 
       }
     },
-    buildTree(data) {
+    buildTree (data) {
       return data.map(item => {
         const node = {
           value: item.id,
@@ -437,7 +410,7 @@ export default {
     },
 
     /** 数据自动填补*/
-    handleSelect(value) {
+    handleSelect (value) {
 
       // 检查 value 是否为数组
       if (Array.isArray(value)) {
@@ -466,9 +439,9 @@ export default {
             const data = response.data
             console.log('data', data)
 
-            function findDeviceById(data, path = [], ids) {
+            function findDeviceById (data, path = [], ids) {
               for (const item of data) {
-                const currentPath = [...path, { label: item.label, tier: item.tier }]
+                const currentPath = [...path, {label: item.label, tier: item.tier}]
                 if (ids.includes(item.id)) {
                   // 找到 tier 为 'Device' 的层级，并获取最后一个“-”后面的数据
                   const deviceTierIndex = currentPath.findIndex(p => p.tier === 'Device')
@@ -478,7 +451,7 @@ export default {
                     deviceLabel = currentPath[deviceTierIndex].label
                     lastSegment = deviceLabel.split('-').pop()
                   }
-                  return { labels: currentPath, lastSegment, deviceLabel, found: true }
+                  return {labels: currentPath, lastSegment, deviceLabel, found: true}
                 }
                 if (item.children && item.children.length) {
                   const result = findDeviceById(item.children, currentPath, ids)
@@ -487,10 +460,10 @@ export default {
                   }
                 }
               }
-              return { labels: [], lastSegment: null, deviceLabel: '', found: false }
+              return {labels: [], lastSegment: null, deviceLabel: '', found: false}
             }
 
-            let lastResult = { labels: [], lastSegment: null, deviceLabel: '', found: false }
+            let lastResult = {labels: [], lastSegment: null, deviceLabel: '', found: false}
             value.forEach(id => {
               const result = findDeviceById(data, [], [id])
               if (result.found) {
@@ -524,19 +497,19 @@ export default {
     },
 
     /**编辑按钮操作*/
-    handleEdit() {
+    handleEdit () {
       this.isViewOnly = false // 切换到编辑模式
       this.title = '编辑设备台账'
     },
 
     // /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset()
       this.addOrUpdateOpen = true
       this.title = '添加设备台账'
     },
     /**查看按钮*/
-    handleViewRec(row) {
+    handleViewRec (row) {
       this.selectedRow = row
       const id = row.id || this.ids
       getRbook(id).then(response => {
@@ -556,7 +529,7 @@ export default {
       })
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       // 确保 objCode 是一个数组
       if (!Array.isArray(this.form.objCode)) {
         this.form.objCode = [this.form.objCode]
@@ -585,9 +558,9 @@ export default {
     },
 
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除设备台账编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设备台账编号为"' + ids + '"的数据项？').then(function () {
         return delRbook(ids)
       }).then(() => {
         this.getList()
@@ -598,7 +571,7 @@ export default {
     },
 
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/rbook/export', {
         ...this.queryParams
       }, `rbook_${new Date().getTime()}.xlsx`)

ems-ui/src/views/largeScreen/center.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="center">
+    <!-- <img src="@/assets/images/center.jpg" alt=""> -->
+  </div>
+</template>
+<script>
+export default {
+name: 'index',
+  data () {
+    return {
+    };
+  },
+  components: {},
+  computed: {},
+  mounted(){},
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+.center{
+  background: url("~@/assets/images/center.jpg") no-repeat;
+  background-size:cover ;
+  width: calc(100% - 806px);
+  margin:auto auto 0;
+  height: calc(100% - 90px);
+}
+</style>

ems-ui/src/views/largeScreen/components/AppLink.vue

@@ -0,0 +1,82 @@
+<template>
+  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
+    <slot />
+  </a>
+  <router-link
+    v-else
+    v-bind="$attrs"
+    :to="to"
+    :exact="exact"
+    :active-class="activeClass"
+  >
+    <a
+      v-bind="$attrs"
+      :href="to"
+      @click="handleClick"
+      :class="isActive ? activeClass : inactiveClass"
+    >
+      <slot />
+    </a>
+  </router-link>
+</template>
+
+<script>
+
+export default {
+  name: 'AppLink',
+  inheritAttrs: false,
+
+  props: {
+    to: {
+      type: [String, Object],
+      required: true,
+    },
+    exact: {
+      type: Boolean,
+      default: false,
+    },
+    activeClass: {
+      type: String,
+      default: 'router-link-active',
+    },
+    inactiveClass: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+
+  watch: {
+    '$route.path': function(newPath) {
+      this.isActive = this.isActiveRoute(newPath);
+    },
+  },
+  computed: {
+    isExternalLink() {
+      return typeof this.to === 'string' && this.to.startsWith('http');
+    },
+  },
+  created() {
+    this.isActive = this.isActiveRoute(this.$route.path);
+  },
+
+  methods: {
+    isActiveRoute(path) {
+      if (this.exact) {
+        return path === this.to;
+      } else {
+        return path.startsWith(this.to);
+      }
+    },
+
+    handleClick () {
+      this.$router.push(this.to)
+    },
+  },
+};
+</script>

ems-ui/src/views/largeScreen/components/CusModule.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="module">
+    <div class="title">
+      <div class="title-name">
+        <img src="@/assets/images/title/title1.svg" alt="">
+        <span>{{ title }}</span>
+      </div>
+      <slot name="title-right"></slot>
+    </div>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CustomModule',
+  props: ['title'],
+  data () {
+    return {
+    };
+  },
+  mounted () { },
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+.module {
+  padding: 0 15px 0 10px;
+}
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .title-name {
+    display: flex;
+    align-items: center;
+    img {
+      height: 22px;
+    }
+
+    span {
+      font-size: 20px;
+      font-weight: bold;
+      color: #C1D8E3;
+      text-shadow: 0px 2px 2px #333333;
+      margin-left: 5px;
+    }
+  }
+}
+.content {
+  margin-top: 5px;
+}
+</style>

ems-ui/src/views/largeScreen/components/CusProgress.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="Progress-wrapper" v-bind="$attrs">
+    <template v-if="isMore">
+      <div class="more-item" v-for="(value, index) in values" :key="index" :style="{
+        width: `${widthPercent(value)}%`,
+        backgroundColor: colors[index],
+        height: `${addUnit(strokeWidth)}`
+      }"></div>
+    </template>
+    <template v-else>
+      <div class="wrapper" :style="{
+        height: `${addUnit(strokeWidth)}`
+      }">
+        <div :style="{
+          background: `linear-gradient(90deg, ${gradient})`,
+          width: `${Progress}%`,
+          height: `${addUnit(strokeWidth)}`
+        }"></div>
+      </div>
+      <div class="label" :style="{ width: addUnit(labelWidth) }" v-if="showLabel || showPercent">
+        <span v-if="showLabel">
+          <span class="value">{{ numToStr(value, 0) }}&nbsp;</span>
+          <span class="unit text-xs">{{ unit }}</span>
+        </span>
+        <span v-if="showPercent" class="unit"> {{ Progress }}%</span>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'zh-progress',
+  props: {
+    total: {
+      type: Number,
+      default: 100
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: '#17caf8'
+    },
+    showLabel: {
+      type: Boolean,
+      default: false
+    },
+    showPercent: {
+      type: Boolean,
+      default: false
+    },
+    unit: {
+      type: String
+    },
+    values: {
+      type: Array,
+      default () {
+        return [1, 2];
+      }
+    },
+    colors: {
+      type: Array,
+      default () {
+        return ['#14b6df', '#06b869'];
+      }
+    },
+    isMore: {
+      type: Boolean,
+      default: false
+    },
+    labelWidth: {
+      type: [Number, String],
+      default: 70
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 6
+    }
+  },
+  data () {
+    return {};
+  },
+  computed: {
+    gradient () {
+      return this.hex2Rgba(this.color, 0) + ',' + this.color;
+    },
+    Progress () {
+      return this.getPercent(this.value, this.total, 1);
+    },
+    sum () {
+      return this.values.reduce((sum, value) => sum + Number(value || 0), 0);
+    }
+  },
+  methods: {
+    hex2Rgba (bgColor, alpha = 1) {
+      let color = bgColor.slice(1); // 去掉'#'号
+      let rgba = [
+        parseInt("0x" + color.slice(0, 2)),
+        parseInt("0x" + color.slice(2, 4)),
+        parseInt("0x" + color.slice(4, 6)),
+        alpha,
+      ];
+      return "rgba(" + rgba.toString() + ")";
+    },
+    getPercent (value, total, fixed) {
+      return total && Number(((value / total) * 100).toFixed(fixed));
+    },
+    numToStr (num, fixed = 2) {
+      const million = 10000; // 一万
+      const billion = 100000000; // 一亿
+      let unit = "";
+      let result = Number(num);
+      if (num >= billion) {
+        unit = "亿";
+        result = num / billion;
+      } else if (num >= million) {
+        unit = "万";
+        result = num / million;
+      }
+      return result.toFixed(fixed) + unit;
+    },
+    addUnit (value, defaultUnit = "px") {
+      if (!value) return "";
+      if (typeof (value) == "string") {
+        return value;
+      } else if (typeof (value) == "number") {
+        return `${value}${defaultUnit}`;
+      }
+    },
+    widthPercent (v) {
+      return this.getPercent(v, Number(this.sum), 2);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.Progress-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+  .more-item {
+    // height: 10px;
+    border-radius: 8px;
+    margin-right: 2px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+  .wrapper {
+    width: 100%;
+    // height: 10px;
+    border-radius: 10px;
+    background-color: rgba(9, 67, 119, 1);
+    // overflow: hidden;
+    div {
+      position: relative;
+      height: 100%;
+      border-radius: 10px;
+      z-index: 1;
+    }
+  }
+  .label {
+    display: flex;
+    flex-direction: column;
+    > span {
+      font-size: 14px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>