+ 设备分析，告警分析

ems-ui/.env.74

@@ -0,0 +1,14 @@
+# 页面标题
+VUE_APP_TITLE = 常泰大桥服务区能源管理
+
+# 开发环境配置
+ENV = 'development'
+
+# 若依管理系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 网关路由
+EMS_REWRITE_URL = '74/ems'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

ems-ui/.env.78

@@ -0,0 +1,14 @@
+# 页面标题
+VUE_APP_TITLE = 常泰大桥服务区能源管理
+
+# 开发环境配置
+ENV = 'development'
+
+# 若依管理系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 网关路由
+EMS_REWRITE_URL = '74/ems'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

ems-ui/package.json

@@ -6,6 +6,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
+    "74": "vue-cli-service serve --mode 74",
+    "78": "vue-cli-service serve --mode 78",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",

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

@@ -1,32 +1,25 @@
 <template>
-  <div
-      class="grid-content bg-purple"
-      v-resize='initChart'
-  >
-    <div class="grid-title">{{ title }}</div>
-    <div class="filters">
-      <slot name="filters"></slot>
-    </div>
-    <div class="grid-chart" :id="id">
-    </div>
-  </div>
+  <block :title="title" :on-resize='initChart'>
+    <template v-slot:main>
+      <div class="filters">
+        <slot name="filters"></slot>
+      </div>
+      <div class="grid-chart" :id="id">
 
+      </div>
+    </template>
+  </block>
 </template>
 
 <script>
 
+import Block from '@/components/Block/block.vue';
 import { copyObj, uuid } from '@/utils';
 import * as echarts from 'echarts';
 import SwitchTag from '../../SwitchTag/index.vue';
 
 const basicSerie = {
   type: 'line',
-  areaStyle: {
-    color: '#d7e4fc',
-    emphasis: {
-      color: '#6093f5',
-    },
-  },
 };
 const opts = {
   grid: {
@@ -54,7 +47,10 @@ const opts = {
   series: [],
 };
 export default {
-  components: { SwitchTag },
+  components: {
+    Block,
+    SwitchTag,
+  },
   props: {
     title: {
       default: '标题',
@@ -92,11 +88,19 @@ export default {
       const chartDom = document.getElementById(this.id);
       this.refCharts = echarts.init(chartDom);
       const option = copyObj(opts);
+      const legend = [];
       this.optCfg.series.forEach((item, index) => {
         const serie = copyObj(basicSerie);
         Object.assign(serie, item);
+        const { name } = item;
         option.series.push(serie);
+        if (name) {
+          legend.push(name);
+        }
       });
+      option.legend = {
+        data: legend,
+      };
       option.xAxis = this.optCfg.xAxis;
       option.yAxis.name = this.optCfg.unit || "kw·h"
       option && this.refCharts && this.refCharts.setOption(option);

ems-ui/src/components/Block/index.scss

@@ -22,6 +22,7 @@
   }
 
   .filters {
+    width: 100%;
     box-sizing: border-box;
     padding: 0 10px;
     display: flex;

ems-ui/src/components/Block/table/index.scss

@@ -0,0 +1,9 @@
+@import "src/assets/styles";
+
+.grid-content {
+  .grid-chart {
+    flex-grow: 1;
+    width: 100%;
+  }
+}
+

ems-ui/src/components/Block/table/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <block :title="title" :on-resize="onResize">
+    <template v-slot:main>
+      <el-table
+          :data="tableData"
+          style="width: 100%">
+        <el-table-column
+            prop="date"
+            label="日期"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="name"
+            label="姓名"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="地址">
+        </el-table-column>
+      </el-table>
+    </template>
+  </block>
+
+</template>
+
+<script>
+
+import Block from '@/components/Block/block.vue';
+
+export default {
+  components: { Block },
+  props: {
+    title: {
+      default: '标题',
+      type: String,
+    },
+    onResize: {
+      type: Function,
+      default: () => {
+        return () => {
+        };
+      },
+    },
+    ds: {
+      type: Array,
+      default: [],
+    },
+  },
+};
+</script>
+<style src="./index.scss" lang="scss" />

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

@@ -16,7 +16,15 @@
         <DeviceWaring />
       </el-col>
       <el-col :span="12">
-        <PieChartBlock title="设备状态统计" :opt-cfg="devcStat"></PieChartBlock>
+        <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
+          <template v-slot:filters>
+            <SwitchTag
+                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
+                :defTag="{val: 'day'}"
+                :tagClick="onSwitchTagClick"
+            />
+          </template>
+        </LineChartBlock>
       </el-col>
     </el-row>
     <el-row type="flex" :gutter="20" style="margin-top: 20px">
@@ -56,106 +64,36 @@ export default {
     return {
       areaTag: [],
       defArea: {},
-      devcStat: {
-        series: [
-          {
-            type: 'pie',
-            radius: ['50%', '70%'],
-            data: [
-              {
-                value: 8,
-                name: '故障',
-              },
-              {
-                value: 75,
-                name: '运行',
-              },
-              {
-                value: 2,
-                name: '未运行',
-              },
-            ],
-          },
-        ],
-      },
-      supplyerIndex: {
-        series: [
-          {
-            type: 'pie',
-            radius: ['0%', '70%'],
-            data: [
-              {
-                value: 7,
-                name: '西门子',
-              },
-              {
-                value: 6,
-                name: '施耐德',
-              },
-              {
-                value: 9,
-                name: '通用电器',
-              },
-              {
-                value: 14,
-                name: '飞利浦',
-              },
-              {
-                value: 18,
-                name: '霍尼韦尔',
-              },
-            ],
-          },
-        ],
-      },
-      devcNum: {
-        categories: ['空调', '灯具', '杀菌设备', '出纳机', '感应器'],
-        series: [
-          {
-            name: '故障',
-            data: [1, 0, 0, 1, 1],
-          },
-          {
-            name: '运行',
-            data: [20, 109, 20, 20, 10],
-          },
-          {
-            name: '未运行',
-            data: [1, 2, 4, 0, 1],
-          },
-        ],
-      },
-      devcFault: {
+      devcWarningHis: {
         unit: '  ',
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: [
-            '1月',
-            '2月',
-            '03月',
-            '04月',
-            '05月',
-            '06月',
-            '07月',
-            '08月',
-          ],
+          data:  ["一月","二月","三月","四月","五月","六月","七月"],
         },
-        series: [
+        series:  [
           {
-            data: [
-              73, 57, 37, 40, 37, 40, 73, 57,
-            ],
+            name: '紧急',
             type: 'line',
-            areaStyle: {
-              color: '#d7e4fc',
-              emphasis: {
-                color: '#6093f5',
-              },
-            },
+            data: [122, 142, 111, 134, 90, 30, 110],
           },
-        ],
-      },
+          {
+            name: '重要',
+            type: 'line',
+            data: [220, 152, 171, 214, 190, 230, 210],
+          },
+          {
+            name: '次要',
+            type: 'line',
+            data: [120, 162, 161, 134, 260, 130, 200],
+          },
+          {
+            name: '警告',
+            type: 'line',
+            data: [20, 182, 131, 144, 130, 140, 90],
+          }
+        ]
+      }
     };
   },
   mounted() {