调整树形结构

ems-ui/src/assets/images/energy.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="1729242926827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51923" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M467.301105 179.2821l-190.958547 373.403017h229.636774l-103.020311 291.911153 407.824207-452.827176h-255.422259l124.427129-212.486994H467.301105z" fill="#f4ea2a" p-id="51924"></path></svg>

ems-ui/src/assets/images/water.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="1729236205235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40108" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 0l299.872 299.84c165.6 165.664 165.6 434.176 0 599.808s-434.144 165.6-599.744 0c-165.6-165.6-165.6-434.144 0-599.744L512 0.032z m0 89.952l-254.88 254.912a359.36 359.36 0 0 0-105.6 254.912c0 199.072 161.408 360.48 360.48 360.48s360.48-161.408 360.48-360.48c0-99.552-40.352-189.696-105.6-254.912L512 89.984z m224.128 346.688l0.832 1.024a273.984 273.984 0 0 1 58.88 170.304 275.712 275.712 0 1 1-548.864-37.632l-0.16 1.44c93.824 34.784 157.472 44.096 190.912 28 63.616-30.624 91.264-37.664 178.784-61.248 72-19.392 47.68-111.168 119.552-101.856zM109.12 149.312l44.96 44.96a63.616 63.616 0 1 1-89.92 0L109.12 149.344z m0 38.976l-25.472 25.472a36.064 36.064 0 1 0 50.976 0l-25.472-25.472z m742.144-132.576l59.968 59.968a84.832 84.832 0 1 1-119.936 0l59.968-59.968z m0 46.784l-36.608 36.544a51.744 51.744 0 1 0 73.216 0l-36.608-36.544z" p-id="40109" fill="#1296db"></path></svg>

ems-ui/src/router/index.js

@@ -52,11 +52,6 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/test',
-    component: () => import('@/views/largeScreen/test.vue'),
-    hidden: true
-  },
-  {
     path: '/404',
     component: () => import('@/views/error/404'),
     hidden: true

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

@@ -388,11 +388,11 @@ export default {
     },
     getAreaTree (tier) {
       areaTreeSelect(tier).then(response => {
-        this.areaOptions = [{
+        this.areaOptions =[{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.queryParams.areaCode = '-1'
       });
     },

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

@@ -228,12 +228,11 @@ export default {
      /** 查询区域树结构 */
      async getAreaTreeByTag (tier) {
       await areaTreeSelect(tier).then(response => {
-        this.areaOptions = response.data
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.queryParams.areaCode = '-1'
       })
     },

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

@@ -144,8 +144,8 @@ export default {
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.areaCode = '-1'
       })
     },

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

@@ -270,8 +270,8 @@ export default {
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.selectedLabel = '全部'
         this.queryParams.areaCode = '-1'
       })

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

@@ -3,28 +3,13 @@
     <el-row :gutter="20">
       <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"
-          />
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
         </div>
         <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
-          <el-tree
-            :data="treeAreaOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-            style="height: calc(100vh - 50px); overflow-y: auto;"
-          />
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+            :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+            @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
         </div>
       </el-col>
       <el-col :span="20" :xs="24">
@@ -35,27 +20,23 @@
           <el-tab-pane label="用能设备" name="Z"></el-tab-pane>
         </el-tabs>
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-                 label-width="68px"
-        >
+          label-width="68px">
           <el-form-item label="设备分类" prop="deviceSubCategory">
             <el-select v-model="queryParams.deviceSubCategory">
               <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
-                         :key="item.code"
-              />
+                :key="item.code" />
             </el-select>
           </el-form-item>
           <el-form-item label="归属设施" prop="refFacs">
             <el-select v-model="queryParams.refFacs">
               <el-option v-for="item in facsOptions" :label="item.facsName" :value="item.facsCode"
-                         :key="item.facsCode"
-              />
+                :key="item.facsCode" />
             </el-select>
           </el-form-item>
           <el-form-item label="子系统" prop="subsystemCode">
             <el-select v-model="queryParams.subsystemCode">
               <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
-                         :key="item.systemCode"
-              />
+                :key="item.systemCode" />
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -65,11 +46,11 @@
         </el-form>
 
         <el-table v-loading="loading" :data="deviceList">
-          <el-table-column label="设备名称" align="left" prop="deviceName"/>
-          <el-table-column label="归属区域" align="left" prop="areaPath" width="280px"/>
-          <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
-          <el-table-column label="归属设施" align="center" prop="refFacsName"/>
-          <el-table-column label="子系统" align="center" prop="subsystemName"/>
+          <el-table-column label="设备名称" align="left" prop="deviceName" />
+          <el-table-column label="归属区域" align="left" prop="areaPath" width="280px" />
+          <el-table-column label="设备分类" align="center" prop="deviceCategoryName" />
+          <el-table-column label="归属设施" align="center" prop="refFacsName" />
+          <el-table-column label="子系统" align="center" prop="subsystemName" />
           <!--          <el-table-column label="设备状态" align="center" prop="deviceStatus">-->
           <!--            <template slot-scope="scope">-->
           <!--              <dict-tag :options="dict.type.sys_device_stat" :value="scope.row.deviceStatus"/>-->
@@ -77,22 +58,20 @@
           <!--          </el-table-column>-->
           <el-table-column label="设备状态" align="center" prop="deviceStatus">
             <template slot-scope="scope">
-                <span
-                  :style="{
-                        padding: '6px 12px',
-                        borderRadius: '4px',
-                        display: 'inline-block',
-                        textAlign: 'center',
-                        cursor: 'pointer',
-                        color: getDeviceStatusTextColor(scope.row.deviceStatus),
-                        backgroundColor: getDeviceStatusBgColor(scope.row.deviceStatus),
-                        minWidth: '70px',
-                        height: '35px',
-                        textAlign: 'center'
-                 }"
-                >
-                  {{ getDeviceStatusText(scope.row.deviceStatus) }}
-                   </span>
+              <span :style="{
+                padding: '6px 12px',
+                borderRadius: '4px',
+                display: 'inline-block',
+                textAlign: 'center',
+                cursor: 'pointer',
+                color: getDeviceStatusTextColor(scope.row.deviceStatus),
+                backgroundColor: getDeviceStatusBgColor(scope.row.deviceStatus),
+                minWidth: '70px',
+                height: '35px',
+                textAlign: 'center'
+              }">
+                {{ getDeviceStatusText(scope.row.deviceStatus) }}
+              </span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -102,13 +81,8 @@
           </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-dialog :visible.sync="open" title="设备状态详情" custom-class="detail-dialog">
@@ -213,19 +187,19 @@
 </template>
 
 <script>
-import { listDevRecursionByArea } from '@/api/device/device'
-import { areaTreeSelect } from '@/api/basecfg/area'
-import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
-import { listSubsystemAll } from '@/api/adapter/subsystem'
-import { getModelByCode } from '@/api/basecfg/objModel'
+import {listDevRecursionByArea} from '@/api/device/device'
+import {areaTreeSelect} from '@/api/basecfg/area'
+import {getFacsCategorygetByCode, listAllFacs} from '@/api/basecfg/emsfacs'
+import {listSubsystemAll} from '@/api/adapter/subsystem'
+import {getModelByCode} from '@/api/basecfg/objModel'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
   name: 'Device',
   dicts: ['sys_device_stat'],
-  components: { Treeselect },
-  data() {
+  components: {Treeselect},
+  data () {
     return {
       // 遮罩层
       loading: true,
@@ -276,7 +250,7 @@ export default {
       }
     }
   },
-  created() {
+  created () {
     this.getList()
     this.getAreaTree('Building')
     this.getFacsOptions()
@@ -284,7 +258,7 @@ export default {
     this.getSubCategorygetByCode()
   },
   methods: {
-    getDeviceStatusText(status) {
+    getDeviceStatusText (status) {
       const statusMap = {
         0: '运行',
         1: '故障',
@@ -292,20 +266,20 @@ export default {
       }
       return statusMap[status] || ''
     },
-    getDeviceStatusTextColor(status) {
+    getDeviceStatusTextColor (status) {
       if (status === 0) return 'rgb(232,244,255)'
       if (status === 1) return '#FFFFFF'
       if (status === 2) return 'rgb(255,235,235)'
       return '#000000' // 默认黑色文字
     },
-    getDeviceStatusBgColor(status) {
+    getDeviceStatusBgColor (status) {
       if (status === 0) return 'rgb(117,186,255)'
       if (status === 1) return 'rgb(242,197,92)'
       if (status === 2) return 'rgb(255,159,159)'
       return 'transparent' // 默认无背景色
     },
     /** 查询能源设备列表 */
-    getList() {
+    getList () {
       this.loading = true
       listDevRecursionByArea(this.queryParams).then(response => {
         this.deviceList = response.rows
@@ -314,45 +288,45 @@ export default {
       })
     },
     /** 查询区域树结构 */
-    getAreaTree(tier) {
+    getAreaTree (tier) {
       areaTreeSelect(tier).then(response => {
         this.treeAreaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
       })
     },
     // 筛选节点
-    filterNode(value, data) {
+    filterNode (value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
     // 节点单击事件
-    handleNodeClick(data) {
+    handleNodeClick (data) {
       this.queryParams.locationType = data.tier
       this.queryParams.locationRef = data.id
       this.handleQuery()
     },
     // 取消按钮
-    cancel() {
+    cancel () {
       this.open = false
       this.reset()
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1
       this.getList()
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.queryParams.locationType = null
       this.queryParams.locationRef = null
       this.resetForm('queryForm')
       this.handleQuery()
     },
     // 设备状态详情
-    handleDetail(row) {
+    handleDetail (row) {
       this.reset()
       this.curRow = row
       console.log('设备data', this.curRow)
@@ -365,7 +339,7 @@ export default {
         this.abilityData = response.data.abilityList
       })
     },
-    getFacsOptions() {
+    getFacsOptions () {
       const getFacsParams = {
         facsCategory: this.queryParams.deviceCategory,
         subCategory: this.queryParams.deviceSubCategory
@@ -374,17 +348,17 @@ export default {
         this.facsOptions = response.data
       })
     },
-    getSubsystem() {
+    getSubsystem () {
       listSubsystemAll().then(response => {
         this.subsystemOptions = response.data
       })
     },
-    getSubCategorygetByCode() {
+    getSubCategorygetByCode () {
       getFacsCategorygetByCode(this.queryParams.deviceCategory).then(response => {
         this.subCategoryOptions = response.data.subtypeList || []
       })
     },
-    deviceCategoryChange() {
+    deviceCategoryChange () {
       this.reset()
       if (this.queryParams.deviceCategory === 'E' || this.queryParams.deviceCategory === 'W'
         || this.queryParams.deviceCategory === 'T' || this.queryParams.deviceCategory === 'C') {
@@ -396,7 +370,7 @@ export default {
       this.getFacsOptions()
       this.handleQuery()
     },
-    reset() {
+    reset () {
       this.queryParams.pageNum = 1
       this.queryParams.pageSize = 10
       this.queryParams.deviceSubCategory = ''
@@ -409,15 +383,18 @@ export default {
 
 <style lang="scss" scoped>
 .detail-dialog .el-dialog {
-  width: 80%; /* 调整弹框宽度 */
+  width: 80%;
+  /* 调整弹框宽度 */
 }
 
 .section-title {
-  font-size: 18px; /* 标题字体大小 */
-  font-weight: bold; /* 字体加粗 */
-  margin-top: 20px; /* 标题顶部间距 */
-  margin-bottom: 10px; /* 标题底部间距 */
+  font-size: 18px;
+  /* 标题字体大小 */
+  font-weight: bold;
+  /* 字体加粗 */
+  margin-top: 20px;
+  /* 标题顶部间距 */
+  margin-bottom: 10px;
+  /* 标题底部间距 */
 }
-
-
 </style>

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

@@ -307,8 +307,8 @@ export default {
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.queryParams.areaCode = '-1'
       })
     },

ems-ui/src/views/index.vue

@@ -1,98 +1,421 @@
 <template>
-  <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>常泰大桥服务区能源管理系统</h2>
-        <p>
-          服务区能源管理系统是一个综合性的工具，旨在帮助服务区有效管理、监测和控制其能源消耗，以实现能源效益最大化和减少环境影响。
-        </p>
-      </el-col>
-    </el-row>
-    <el-divider />
-    <el-row :gutter="20">
-
-    </el-row>
+  <div class="home">
+    <div class="home-row">
+      <el-card class="box-card">
+        <div slot="header" class="box-header">
+          <span>能耗汇总</span>
+          <div class="header-right">
+            <div :class="{ 'selected': activeDate === item.value }" v-for="item in dateList" :key="item.name"
+              @click="dateChange(item)">{{ item.name }}</div>
+          </div>
+        </div>
+        <div class="summary">
+          <div class="summary-item">
+            <div>
+              <div class="summary-bg">
+                <img class="energyImg" src="@/assets/images/energy.svg" alt="">
+              </div>
+              <div class="summary-title">
+                <div>电消耗</div>
+                <div class="summary-value">
+                  <span class="value">122</span>
+                  <span class="unit">kW·h</span>
+                </div>
+                <div class="summary-value">
+                  <span class="value">182</span>
+                  <span class="unit">元</span>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="summary-bg">
+                <img src="@/assets/images/water.svg" alt="">
+              </div>
+              <div class="summary-title">
+                <div>水消耗</div>
+                <div class="summary-value">
+                  <span class="value">132</span>
+                  <span class="unit">吨</span>
+                </div>
+                <div class="summary-value">
+                  <span class="value">162</span>
+                  <span class="unit">元</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="summay-chart">
+            <SubTitle title="费用" style="padding-left: 30px;"/>
+            <div class="cost">
+              <span>总费用</span>
+              <span>344元</span>
+            </div>
+            <BaseChart  height="250px" :option="useOptions" />
+          </div>
+
+        </div>
+
+      </el-card>
+    </div>
+    <el-card class="box-card">
+      <div slot="header" class="box-header">
+        <span>用能趋势分析</span>
+        <div class="header-right">
+          <div :class="{ 'selected': activeDimension === item.value }" v-for="item in dimensionList" :key="item.name"
+            @click="dimensionChange(item)">{{ item.name }}</div>
+        </div>
+      </div>
+      <BaseChart width="100%" height="250px" :option="energyOptions" />
+    </el-card>
   </div>
 </template>
 
 <script>
+import BaseChart from '@/components/BaseChart'
+import SubTitle from '@/components/SubTitle/index.vue'
 export default {
   name: "Index",
-  data() {
+  data () {
     return {
-      // 版本号
-      version: "3.6.4",
+      activeDate: '1',
+      dateList: [
+        {name: '上月', value: '1'},
+        {name: '本月', value: '2'},
+        {name: '去年', value: '3'},
+        {name: '本年', value: '4'},
+      ],
+      activeDimension: '1',
+      dimensionList: [
+        {name: '小时', value: '1'},
+        {name: '天', value: '2'},
+        {name: '月', value: '3'},
+        {name: '年', value: '4'},
+      ],
+      consumList: [
+        {
+          name: '综合能耗',
+          value: '',
+          unit: '',
+          cost: ''
+        }
+      ]
     };
   },
+  components: {BaseChart,SubTitle},
+  computed: {
+    useOptions () {
+      return {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          show: false,
+          orient: 'vertical',
+          top: '5%',
+          left: '5%'
+        },
+        series: [
+          {
+            name: '费用',
+            type: 'pie',
+            radius: ['35%', '55%'],
+            data: [{
+              name: '水费', value: '162',
+              itemStyle: {
+                normal: {
+                  color: '#1396DB'
+                }
+              }
+            }, {
+              name: '电费', value: '182',
+              itemStyle: {
+                normal: {
+                  color: '#F4EA29'
+                }
+              }
+            }],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              }
+            },
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: '{b}\n{d}%',
+            },
+
+            labelLine: {
+              show: true,
+              length: 30, // 标签线长度
+              lineStyle: {
+                width: 1,
+                type: 'dashed', // 设置虚线样式
+              }
+            }
+          }
+        ]
+      }
+
+    },
+    energyOptions () {
+      const dataArr = []
+      let dataObj = {
+        name: "用能趋势分析",
+        type: "bar",
+        year: ["2015", "2016", "2017", "2018", "2019", "2020"],
+        val: [
+          {
+            name: '水',
+            value: ["0", "0", "20", "11", "18", "5"]
+          },
+          {
+            name: '电',
+            value: ["4", "10", "2", "22", "12", "3"]
+          }
+        ]
+      }
+      dataObj.val.map(item => {
+        const newArr = {
+          name: item.name,
+          type: 'bar',
+          smooth: true,
+          symbolSize: 8,
+          data: item.value,
+          barWidth: '17%',
+          itemStyle: {
+            normal: {
+              color: item.name === '水' ? '#1396DB' : '#F4EA29'
+            }
+          }
+        }
+
+        dataArr.push(newArr)
+      })
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            dataView: {
+              show: true,
+              readOnly: false
+            },
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            restore: {
+              show: true
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        // color: ['#f0c725', '#16f892'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        legend: {
+          x: 'center',
+          top: '0',
+          textStyle: {
+            // color: '#c1cadf',
+            fontSize: 14
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '6%',
+          top: '5%',
+          bottom: '10%',
+          containLabel: false
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: true,
+          data: dataObj.year,
+          axisLine: {
+            lineStyle: {
+              // color: 'rgba(240,199,37,1)'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            // color: '#c1cadf',
+            fontSize: '15'
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '(处)',
+          nameTextStyle: {
+            // color: '#c1cadf',
+            align: 'right',
+            lineHeight: 10
+          },
+          axisLine: {
+            lineStyle: {
+              // color: 'rgba(240,199,37,1)'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            // color: '#c1cadf',
+            fontSize: '15'
+          },
+          splitLine: {
+            show: false
+          }
+        }],
+        series: dataArr
+      }
+
+    }
+  },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
+    dateChange (item) {
+      this.activeDate = item.value
     },
+    dimensionChange (item) {
+      this.activeDimension = item.value
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
 .home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
+  padding: 0 10px;
+}
 
-  ul {
-    padding: 0;
-    margin: 0;
+.home-row {
+  display: flex;
+  justify-content: space-between;
+
+  .box-card:last-of-type {
+    margin-left: 10px;
   }
+}
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
+.box-card {
+  margin-top: 10px;
+  width: 100%;
 
-  ul {
-    list-style-type: none;
-  }
+  .box-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: bold;
 
-  h4 {
-    margin-top: 0px;
-  }
+    .header-right {
+      display: flex;
+      color: #98999b;
+      font-weight: normal;
+      font-size: 14px;
 
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
+      >div {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        &:not(:last-of-type):after {
+          content: '';
+          height: 12px;
+          width: 1px;
+          background: #d5d8e0;
+          margin: 0 3px;
+        }
+      }
 
-  p {
-    margin-top: 10px;
+      .selected {
+        color: #409EFF;
+      }
+    }
+  }
+}
 
-    b {
-      font-weight: 700;
+.summary {
+  display: flex;
+  justify-content: space-around;
+  .summay-chart {
+    flex: 1;
+    position: relative;
+    .cost{
+      position: absolute;
+      top: 53%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
   }
+  .summary-item {
+    flex: 1;
+    display: flex;
+    justify-content: space-around;
+
+    >div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
+      .summary-bg {
+        margin-top: 20px;
+        width: 140px;
+        height: 140px;
+        border-radius: 50%;
+        border: 3px solid #d5d8e0;
+        box-shadow: 0px 4px 10px 0px rgba(69, 89, 120, 0.3);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          height: 60px;
+        }
+
+        .energyImg {
+          height: 90px;
+        }
+      }
+
+      .summary-title {
+        margin-left: 10px;
+
+        >div:first-child {
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 10px;
+        }
+
+        .summary-value {
+          margin-top: 5px;
+        }
+
+        .value {
+          font-size: 18px;
+          font-weight: bold;
+        }
+
+        .unit {
+          margin-left: 10px;
+          font-size: 12px;
+          color: #bbbcbf;
+        }
+      }
     }
   }
 }
 </style>
-

ems-ui/src/views/largeScreen/soc/right.vue

@@ -54,12 +54,12 @@ export default {
           value: 345,
           unit: "kW·h",
         },
-        {
-          name: "燃气",
-          image: require("@/assets/images/soc/item2.png"),
-          value: 7945,
-          unit: "kg",
-        },
+        // {
+        //   name: "燃气",
+        //   image: require("@/assets/images/soc/item2.png"),
+        //   value: 7945,
+        //   unit: "kg",
+        // },
         {
           name: "水",
           image: require("@/assets/images/soc/item3.png"),
@@ -287,16 +287,16 @@ export default {
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
-
+  padding: 0 40px;
   .soc-stats-item {
     position: relative;
-    width: 100px;
+    width: 120px;
     height: 138px;
     background-size: cover;
 
     .soc-stats-info {
       position: absolute;
-      bottom: 15px;
+      bottom: -2px;
       width: 100%;
       text-align: center;
 

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

@@ -1,48 +0,0 @@
-<template>
-  <div style="min-height: 580px;">
-    <el-table :data="papers" style="width: 100%;">
-      <el-table-column :label="`${$t('print.paperSize')} (mm)`">
-        <template #default="{ row }">
-          {{ row.paperNo + ' - ' + row.width + ' * ' + row.height }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="`${$t('print.printer')}`">
-        <template #default="{ row }">
-          <el-select style="width: 300px" v-model="row.printer">
-            <el-option
-              v-for="printer in printers"
-              :key="printer.label"
-              :label="printer.label"
-              :value="printer.value">
-            </el-option>
-          </el-select>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      papers: [
-        // 示例数据
-        { paperNo: 'A4', width: 210, height: 297, printer: '' },
-        // 更多paper对象...
-      ],
-      printers: [
-        // 打印机选项
-        { label: 'Printer 1', value: 'printer1' },
-        { label: 'Printer 2', value: 'printer2' },
-        // 更多打印机...
-      ]
-    };
-  },
-  methods: {
-    $t (val) {
-      return val==='print.paperSize'?'纸张尺寸':'打印机'
-    }
-  }
-}
-</script>

ems-ui/src/views/mgr/powergrid.vue

@@ -581,8 +581,8 @@ export default {
           this.areaOptions = [{
             id: '-1',
             label: '全部',
-            children: response.data
-          }]
+            children: []
+          }].concat(response.data)
         })
         listPgSupplyH({
           startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
@@ -598,8 +598,8 @@ export default {
           this.areaOptions = [{
             id: '-1',
             label: '全部',
-            children: response.data
-          }]
+            children: []
+          }].concat(response.data)
         })
         listPvSupplyH({
           startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),

ems-ui/src/views/mgr/powerstore.vue

@@ -262,10 +262,10 @@ export default {
     async getAreaList () {
       await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
         this.areaOptions = [{
-          id: '-1',
-          label: '全部',
-          children: response.data
-        }]
+            id: '-1',
+            label: '全部',
+            children: []
+          }].concat(response.data)
       })
     },
     /** 查询储能计量-小时列表 */

ems-ui/src/views/mgr/poweruse.vue

@@ -15,14 +15,14 @@
             <div>
               <SubTitle title="能耗统计" />
               <!-- 图表容器 -->
-              <div ref="sumBySubCategoryChart" style="height: 380px;"  />
+              <div ref="sumBySubCategoryChart" style="height: 380px;" />
             </div>
             <div>
               <SubTitle title="能耗总览" />
-              <el-table  border stripe show-summary :data="tableData"  style="width: 100%;margin-top: 20px;">
-                <el-table-column prop="name" align="center" label="设施名称" >
+              <el-table border stripe show-summary :data="tableData" style="width: 100%;margin-top: 20px;">
+                <el-table-column prop="name" align="center" label="设施名称">
                 </el-table-column>
-                <el-table-column prop="value" align="center" label="能耗(kW·h)" >
+                <el-table-column prop="value" align="center" label="能耗(kW·h)">
                 </el-table-column>
               </el-table>
             </div>
@@ -48,15 +48,15 @@
               <SubTitle :title="`设施汇总电耗【${selectedLabel}】`" />
               <div>
                 <el-select v-model="objCode" placeholder="选择设施" clearable @visible-change="handleObjSelectClick"
-                @change="getList">
-                <el-option v-for="item in objOptions" :label="item.facsName" :value="item.facsCode"
-                  :key="item.facsCode" />
+                  @change="getList">
+                  <el-option v-for="item in objOptions" :label="item.facsName" :value="item.facsCode"
+                    :key="item.facsCode" />
 
-              </el-select>
-              <el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
-                value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-                align="right">
-              </el-date-picker>
+                </el-select>
+                <el-date-picker v-model="dateRange" type="datetimerange" @change="getList"
+                  :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+                </el-date-picker>
               </div>
             </div>
             <!-- 表格  -->
@@ -77,7 +77,7 @@
                 </template>
               </el-table-column>
             </el-table>
-            <SubTitle title="设施时段电耗"  style="margin-top: 20px;"/>
+            <SubTitle title="设施时段电耗" style="margin-top: 20px;" />
             <!--柱状图-->
             <div class="container-block" style="margin-top: 20px;">
               <BaseChart width="100%" height="300px" :option="barChartOptions" />
@@ -348,7 +348,7 @@ export default {
         console.log("pie图", response.data)
         this.tableData = response.data.map(item => ({
           name: item.objName,
-          value:item.elecQuantity||0
+          value: item.elecQuantity || 0
         }))
 
       })
@@ -383,8 +383,8 @@ export default {
         },
         legend: {
           orient: 'vertical',
-          top:'5%',
-          left:'5%'
+          top: '5%',
+          left: '5%'
         },
         series: [
           {
@@ -433,8 +433,8 @@ export default {
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
       })
     },
     async getFacsObj (areaCode, category, subCategory) {
@@ -492,7 +492,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
 .is-active {
   background-color: #409eff;
   color: white;
@@ -502,15 +501,17 @@ export default {
   display: flex;
   margin-top: 20px;
 
-  >div:first-child{
+  >div:first-child {
     flex: 3;
   }
-  >div:last-child{
+
+  >div:last-child {
     flex: 2;
   }
 }
-.container-block{
-  padding-left:20px ;
+
+.container-block {
+  padding-left: 20px;
   // .panel-title{
 
   // }

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

@@ -59,8 +59,8 @@ export default {
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.areaCode = '-1'
       })
     },

ems-ui/src/views/task/report/index.vue

@@ -221,8 +221,8 @@ export default {
         this.areaOptions = [{
           id: '-1',
           label: '全部',
-          children: response.data
-        }]
+          children: []
+        }].concat(response.data)
         this.queryParams.areaCode = '-1'
       })
     },