Merge remote-tracking branch 'origin/master'

ems-ui/package.json

@@ -63,6 +63,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-select": "^3.20.3",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

ems-ui/src/api/device/meterRead.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 条件查询
+export function listMeterReadingByParam(query) {
+  return request({
+    url: '/ems/meterReading/listByParam',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询最后一条
+export function getLastRecord(areaCode, deviceCode) {
+  return request({
+    url: '/ems/meterReading/getLastRecord?areaCode=' + areaCode + '&deviceCode=' + deviceCode,
+    method: 'get'
+  })
+}
+
+// 新增手动抄记录
+export function addMeterReading(data) {
+  return request({
+    url: '/ems/meterReading',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改手动抄记录
+export function updateMeterReading(data) {
+  return request({
+    url: '/ems/meterReading',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除手动抄记录
+export function delMeterReading(id) {
+  return request({
+    url: '/ems/manual/' + id,
+    method: 'delete'
+  })
+}

ems-ui/src/assets/icons/svg/meterReading.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="200" height="200"><path d="M907.264 588.8l-84.48-84.48c-4.608-4.608-11.776-4.608-16.384 0l-21.504 21.504c-4.608 4.608-4.608 11.776 0 16.384l84.48 84.48c4.608 4.608 11.776 4.608 16.384 0l21.504-21.504c4.608-4.608 4.608-12.288 0-16.384zM425.472 857.088H220.16c-29.696 0-53.248-24.064-53.248-53.248V219.648c0-29.696 24.064-53.248 53.248-53.248h503.808c29.696 0 53.248 24.064 53.248 53.248v225.28c0 14.848 11.776 26.624 26.624 26.624s26.624-11.776 26.624-26.624v-225.28c0-58.88-47.616-107.008-107.008-107.008H220.16c-58.88 0-107.008 47.616-107.008 107.008V803.84c0 58.88 47.616 107.008 107.008 107.008h205.824c14.848 0 26.624-11.776 26.624-26.624s-12.288-27.136-27.136-27.136z" ></path><path d="M762.368 569.344c-5.632-5.632-15.872-5.12-22.016 1.536l-208.896 208.896c-2.048 2.048-3.584 4.608-4.608 7.168l-25.6 105.472c-3.584 11.776 6.144 22.016 17.92 17.92l105.472-25.6c2.56-1.024 5.12-2.56 7.168-4.608l208.896-208.896c6.656-6.656 7.168-16.384 1.536-22.016l-79.872-79.872z" ></path><path d="M465.408 470.016c-4.096-5.12-6.144-12.288-5.12-19.968l28.16-140.288-212.48 261.12h184.32c7.168 0 13.312 3.072 17.92 8.192 4.096 5.12 6.144 12.288 5.12 19.968l-28.16 140.288 212.48-261.12H484.352c-7.168 0-13.824-3.072-18.944-8.192z"  ></path></svg>

ems-ui/src/assets/images/mgr/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="1724915935368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9528" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M937.216 537.8304a38.4 38.4 0 0 0 0-51.6608l-256-281.6a38.4 38.4 0 1 0-56.832 51.6608l197.632 217.3696L115.2 473.6a38.4 38.4 0 0 0 0 76.8l706.816 0-197.632 217.3696a38.4 38.4 0 1 0 56.832 51.6608l256-281.6z" p-id="9529" fill="#707070"></path></svg>

ems-ui/src/assets/images/mgr/humidity.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="1724832849510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27772" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M856.4 0S723.1 126.3 723.1 200c0 73.6 59.7 133.3 133.3 133.3S989.7 273.6 989.7 200 856.4 0 856.4 0z m0 288.8c-49.1 0-88.9-39.8-88.9-88.9s88.9-133.3 88.9-133.3 88.9 84.2 88.9 133.3-39.9 88.9-88.9 88.9zM412 0S34.3 427.1 34.3 638.8 203.4 1022 412 1022s377.7-171.6 377.7-383.2S412 0 412 0z m0 955.4c-171.8 0-311-141.9-311-317S412 88.9 412 88.9s311 374.4 311 549.5c0.1 175-139.2 317-311 317z" fill="#00A7EF" p-id="27773"></path><path d="M412 933.1c-159.5 0-288.8-128.4-288.8-286.8s150.1-78.2 288.8 0c139.3 78.5 288.8-158.4 288.8 0S571.5 933.1 412 933.1z" fill="#00A7EF" p-id="27774"></path></svg>

ems-ui/src/assets/images/mgr/overhold.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="1724916615718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14081" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 160c-222.464 0-402.848 196.384-402.848 418.88 0 111.36 45.216 205.12 118.304 301.12h569.088c73.088-96 118.304-189.76 118.304-301.12C914.88 356.384 734.496 160 512 160z m-35.808 80h64v64h-64v-64z m-224 448h-64v-64h64v64z m32-224h-64v-64h64v64zM528.8 799.52c-15.008 11.168-37.6 6.176-50.4-11.072-12.832-17.28-164.224-246.432-149.184-257.6 15.008-11.136 190.72 199.936 203.52 217.216 12.832 17.28 11.072 40.352-3.936 51.456zM732.192 400h64v64h-64v-64z m32 288v-64h64v64h-64z" p-id="14082" fill="#01A7EF"></path></svg>

ems-ui/src/assets/images/mgr/temperature.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="1724832632828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17384" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M572.586667 583.68V162.304a150.801067 150.801067 0 0 0-301.568 0V583.509333a242.961067 242.961067 0 1 0 301.499733 0z m-150.766934 382.976a192.580267 192.580267 0 0 1-110.353066-350.6176 25.053867 25.053867 0 0 0 10.5472-23.4496 105.472 105.472 0 0 1-0.7168-11.434667V162.304a100.522667 100.522667 0 0 1 201.045333 0v418.850133a105.472 105.472 0 0 1-0.682667 11.434667 25.053867 25.053867 0 0 0 10.5472 23.4496 192.580267 192.580267 0 0 1-110.3872 350.446933zM654.5408 246.0672h167.5264a25.122133 25.122133 0 0 0 0-50.244267h-167.5264a25.122133 25.122133 0 1 0 0 50.244267zM822.0672 338.2272h-167.5264a25.122133 25.122133 0 1 0 0 50.244267h167.5264a25.122133 25.122133 0 0 0 0-50.244267z" p-id="17385" fill="#00A7EF"></path><path d="M822.0672 480.631467h-167.5264a25.122133 25.122133 0 1 0 0 50.244266h167.5264a25.122133 25.122133 0 0 0 0-50.244266zM447.146667 651.741867v-464.213334a25.156267 25.156267 0 0 0-50.2784 0v464.213334a92.16 92.16 0 1 0 50.2784 0z m-25.156267 130.4576a41.8816 41.8816 0 1 1 41.915733-41.8816 41.915733 41.915733 0 0 1-42.0864 41.8816z" p-id="17386" fill="#00A7EF"></path></svg>

ems-ui/src/assets/images/mgr/transformer.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="1724834911172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2368" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M316 288c-15.5 0-28 12.5-28 28v392c0 15.5 12.5 28 28 28s28-12.5 28-28V316c0-15.5-12.5-28-28-28zM512 288c-15.5 0-28 12.5-28 28v392c0 15.5 12.5 28 28 28s28-12.5 28-28V316c0-15.5-12.5-28-28-28zM708 288c-15.5 0-28 12.5-28 28v392c0 15.5 12.5 28 28 28s28-12.5 28-28V316c0-15.5-12.5-28-28-28z" p-id="2369" fill="#707070"></path><path d="M904 288V176c0-30.9-25.1-56-56-56h-56V92c0-15.5-12.5-28-28-28s-28 12.5-28 28v28H624V92c0-15.5-12.5-28-28-28s-28 12.5-28 28v28H456V92c0-15.5-12.5-28-28-28s-28 12.5-28 28v28H288V92c0-15.5-12.5-28-28-28s-28 12.5-28 28v28h-56c-30.9 0-56 25.1-56 56v112c-30.9 0-56 25.1-56 56v336c0 30.9 25.1 56 56 56v112c0 30.9 25.1 56 56 56h56c0 30.9 25.1 56 56 56h168c30.9 0 56-25.1 56-56h56c0 30.9 25.1 56 56 56h168c30.9 0 56-25.1 56-56 30.9 0 56-25.1 56-56V736c30.9 0 56-25.1 56-56V344c0-30.9-25.1-56-56-56z m0 392h-56v168h-56v56H624v-56H456v56H288v-56H176V680h-56V344h56V176h672v168h56v336z" p-id="2370" fill="#707070"></path></svg>

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

@@ -1,178 +1,197 @@
 <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="meterCls">
-        <el-select v-model="queryParams.meterCls" >
-          <el-option v-for="item in emsClsOptions" :label="item.name" :value="item.code" :key="item.code" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="服务区" prop="areaCode" >
-        <el-select v-model="queryParams.areaCode" @change="handleAreaSelect">
-          <el-option v-for="item in areaOptions" :label="item.areaName" :value="item.areaCode" :key="item.areaCode" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备代码" prop="deviceCode">
-        <el-input
-          v-model="queryParams.deviceCode"
-          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:device: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:device: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:device:remove']"
-        >删除</el-button>
+    <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"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="areaOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            default-expand-all
+            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="meterCls">
+            <el-select v-model="queryParams.meterCls" >
+              <el-option v-for="item in emsClsOptions" :label="item.name" :value="item.code" :key="item.code" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备代码" prop="deviceCode">
+            <el-input
+              v-model="queryParams.deviceCode"
+              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:device: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:device: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:device:remove']"
+            >删除</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="设备代码" align="center" prop="deviceCode" />
-      <el-table-column label="计量对象" align="left" prop="objName" width="300px">
-        <template slot-scope="scope">
-          <span>{{ "（" + getObjTypeName(scope.row.objType) + "）"+ scope.row.objName }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="计量类别" align="center" prop="meterCls">
-        <template slot-scope="scope">
-          <span>{{ getMeterClsName(scope.row.meterCls) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="采集方式" align="center" prop="colMode" >
-        <template slot-scope="scope">
-          <span>{{ getColModeName(scope.row.colMode) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="采集周期" align="center" prop="colCycle" >
-        <template slot-scope="scope">
-          <span>{{ getColCycleName(scope.row.colCycle) }}</span>
-        </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-cfgwrite"
-            @click=""
-            v-hasPermi="['ems:device:edit']"
-            v-if="scope.row.colMode === 1"
-          >填报</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ems:device:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['ems:device:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="计量对象" align="left" prop="objName" width="300px">
+            <template slot-scope="scope">
+              <span>{{ "（" + getObjTypeName(scope.row.objType) + "）"+ scope.row.objName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="设备代码" align="center" prop="deviceCode" />
+          <el-table-column label="计量类别" align="center" prop="meterCls">
+            <template slot-scope="scope">
+              <span>{{ getMeterClsName(scope.row.meterCls) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="采集方式" align="center" prop="colMode" >
+            <template slot-scope="scope">
+              <span>{{ getColModeName(scope.row.colMode) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="采集周期" align="center" prop="colCycle" >
+            <template slot-scope="scope">
+              <span>{{ getColCycleName(scope.row.colCycle) }}</span>
+            </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:device:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['ems:device: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"
-    />
+        <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>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="计量类别" prop="meterCls">
-          <el-select v-model="form.meterCls" >
-            <el-option v-for="item in emsClsOptions" :label="item.name" :value="item.code" :key="item.code" />
-          </el-select>
-        </el-form-item>
+        <!-- 添加或修改计量设备对话框 -->
+        <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="deviceCode">
+              <el-select v-model="form.areaCode" @change="handleAreaSelect">
+                <el-option v-for="item in areaOptions" :label="item.label" :value="item.id" :key="item.id" />
+              </el-select>
+            </el-form-item>
 
-        <el-form-item label="设备代码" prop="deviceCode">
-          <el-input v-model="form.deviceCode" placeholder="请输入设备代码" />
-        </el-form-item>
+            <el-form-item label="计量类别" prop="meterCls">
+              <el-select v-model="form.meterCls" >
+                <el-option v-for="item in emsClsOptions" :label="item.name" :value="item.code" :key="item.code" />
+              </el-select>
+            </el-form-item>
 
-        <el-form-item label="设备归属" prop="deviceCode">
-          <el-select v-model="form.areaCode" @change="handleAreaSelect">
-            <el-option v-for="item in areaOptions" :label="item.areaName" :value="item.areaCode" :key="item.areaCode" />
-          </el-select>
-        </el-form-item>
+            <el-form-item label="设备代码" prop="deviceCode">
+              <el-input v-model="form.deviceCode" placeholder="请输入设备代码" />
+            </el-form-item>
 
-        <el-form-item label="计量分类" prop="objType">
-          <el-select v-model="form.objType" @change="changeObjOptions">
-            <el-option v-for="item in objTypeOptions" :label="item.name" :value="item.code" :key="item.code" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="计量对象" prop="objCode">
-          <treeselect v-model="objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择计量对象" ref="treeObjCodeOptions"/>
-        </el-form-item>
-        <el-form-item label="采集方式" prop="colMode">
-          <el-select v-model="form.colMode" >
-            <el-option v-for="item in colModeOptions" :label="item.name" :value="item.code" :key="item.code" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="采集周期" prop="colCycle" v-if="form.colMode === 0">
-          <el-select v-model="form.colCycle" >
-            <el-option v-for="item in colCycleOptions" :label="item.name" :value="item.code" :key="item.code" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="规格描述" prop="specDesc">
-          <el-input v-model="form.specDesc" placeholder="请输入规格描述" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+            <el-form-item label="计量分类" prop="objType">
+              <el-select v-model="form.objType" @change="changeObjOptions">
+                <el-option v-for="item in objTypeOptions" :label="item.name" :value="item.code" :key="item.code" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计量对象" prop="objCode">
+              <treeselect v-model="objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择计量对象" ref="treeObjCodeOptions"/>
+            </el-form-item>
+            <el-form-item label="采集方式" prop="colMode">
+              <el-select v-model="form.colMode" >
+                <el-option v-for="item in colModeOptions" :label="item.name" :value="item.code" :key="item.code" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="采集周期" prop="colCycle" v-if="form.colMode === 0">
+              <el-select v-model="form.colCycle" >
+                <el-option v-for="item in colCycleOptions" :label="item.name" :value="item.code" :key="item.code" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="倍率" prop="magnification">
+              <el-input v-model="form.magnification" placeholder="请输入倍率" />
+            </el-form-item>
+            <el-form-item label="规格描述" prop="specDesc">
+              <el-input v-model="form.specDesc" placeholder="请输入规格描述" />
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+          </div>
+        </el-dialog>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/device/meterDevice";
 import { devTreeByFacs } from "@/api/device/device";
-import { listTotalArea, areaTreeSelect, areaTreeSelectByCode } from '@/api/basecfg/area'
+import { areaTreeSelect, areaTreeSelectByCode } from '@/api/basecfg/area'
 import { listBuildingByArea } from "@/api/basecfg/building";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -200,11 +219,17 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 区域名称
+      areaName: undefined,
       objCodeOptions: [],
       areaOptions: [],
       buildingOptions: [],
       selectObjCode: null,
       objCode: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
       // 能源分类树
       emsClsOptions: [
         {"code": 45, "name": "电表"},
@@ -238,6 +263,7 @@ export default {
         objName: null,
         colCycle: null,
         colMode: null,
+        magnification: null,
         specDesc: null
       },
       // 表单参数
@@ -277,7 +303,6 @@ export default {
           } else if ('Zoning'  === option.raw.tier) {
             this.form.objSubType = 3;
           }
-          console.log(this.form.objSubType)
         } else if (2 === this.form.objType) {
           if ('Facs'  === option.raw.tier) {
             this.form.objSubType = 1;
@@ -285,12 +310,11 @@ export default {
             this.form.objSubType = 2;
           }
         }
-
       }
     }
   },
   created() {
-    this.getAreaOptions();
+    this.getAreaTree('Area');
     this.getList();
   },
   methods: {
@@ -434,10 +458,21 @@ export default {
       };
       return modeMap[colMode] || '未知';
     },
-    getAreaOptions() {
-      listTotalArea().then(response => {
+    /** 查询区域树结构 */
+    getAreaTree(tier) {
+      areaTreeSelect(tier).then(response => {
         this.areaOptions = response.data;
-      })
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.areaCode = data.id;
+      this.handleQuery();
     },
     changeObjOptions(objType) {
       if (objType === 1) {

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

@@ -62,7 +62,7 @@
     <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="800px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="箱柜代码" prop="boxCode">
           <el-input v-model="form.boxCode" placeholder="请输入箱柜代码" />

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

@@ -0,0 +1,298 @@
+<template>
+  <div class="app-container">
+    <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"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="areaOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-tabs v-model="activeTab"  @tab-change="handleTabChange">
+          <el-tab-pane label="电表抄报" name="first">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="计量类别" prop="meterCls">
+                <el-select v-model="queryParams.meterCls" >
+                  <el-option v-for="item in emsClsOptions" :label="item.name" :value="item.code" :key="item.code" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="设备代码" prop="deviceCode">
+                <el-input
+                  v-model="queryParams.deviceCode"
+                  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="deviceList" >
+              <el-table-column label="计量对象" align="left" prop="objName" width="300px">
+                <template slot-scope="scope">
+                  <span>{{ "（" + getObjTypeName(scope.row.objType) + "）"+ scope.row.objName }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="设备代码" align="center" prop="deviceCode" />
+
+              <el-table-column label="抄表周期" align="center" prop="colCycle" >
+                <template slot-scope="scope">
+                  <span>{{ getColCycleName(scope.row.colCycle) }}</span>
+                </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"
+                    @click="handleViewRec(scope.row)"
+                    v-hasPermi="['ems:device:edit']"
+                  >填报</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    @click="handleViewRec(scope.row)"
+                    v-hasPermi="['ems:device: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-tab-pane>
+          <el-tab-pane label="水表抄报" name="second">
+
+          </el-tab-pane>
+        </el-tabs>
+
+        <!-- 历史抄表记录 -->
+        <el-dialog :title="title" :visible.sync="recListOpen" width="1200px" append-to-body>
+          <el-form ref="recListForm" :model="recListForm" :rules="rules" label-width="80px">
+            <el-form-item label="抄表历史" prop="recList">
+              <el-table  v-loading="loading" :data="recListForm.recList" max-height="280px">
+                <el-table-column label="设备代码" align="center" prop="deviceCode"/>
+                <el-table-column label="年份" align="center" prop="year" />
+                <el-table-column label="月份" align="center" prop="meterMonth" />
+                <el-table-column label="抄表日期" align="center" prop="meterTime"/>
+                <el-table-column label="抄表示数" align="center" prop="meterReading"/>
+                <el-table-column label="用量" align="center" prop="increase" />
+              </el-table>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="closeRecList">关 闭</el-button>
+          </div>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/device/meterDevice";
+import { listMeterReadingByParam, getLastRecord, addMeterReading, updateMeterReading, delMeterReading } from "@/api/device/meterRead"
+import { areaTreeSelect } from '@/api/basecfg/area'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+
+export default {
+  name: "Device",
+  components: { Treeselect },
+  data() {
+    return {
+      activeTab: 'first',
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 计量设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: "",
+      // 记录表单开启
+      recListOpen: false,
+      // 填报表单开启
+      fillFormOpen: false,
+      // 区域名称
+      areaName: undefined,
+      objCodeOptions: [],
+      areaOptions: [],
+      buildingOptions: [],
+      selectObjCode: null,
+      objCode: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      colCycleOptions: [
+        {"code": 0, "name": "实时"},
+        {"code": 1, "name": "分钟"},
+        {"code": 2, "name": "小时"},
+        {"code": 3, "name": "天"},
+        {"code": 4, "name": "月"}
+      ],
+      colModeOptions: [
+        {"code": 0, "name": "自动抄表"},
+        {"code": 1, "name": "手动抄表"}
+      ],
+      // 能源分类树
+      emsClsOptions: [
+        {"code": 45, "name": "电表"},
+        {"code": 70, "name": "水表"}
+      ],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        areaCode: null,
+        deviceCode: null,
+        meterCls: 45
+      },
+      // 电表表单参数
+      recListForm: {
+        recList: []
+      },
+      sbForm: {},
+      // 表单校验
+      rules: {
+        areaCode: [
+          { required: true, message: "选择服务区", trigger: "blur" }
+        ],
+        deviceCode: [
+          { required: true, message: "设备代码不能为空", trigger: "blur" }
+        ],
+        meterCls: [
+          { required: true, message: "计量类别不能为空", trigger: "blur" }
+        ],
+        objType: [
+          { required: true, message: "计量对象类型 1-区块 2-设备不能为空", trigger: "change" }
+        ],
+        objCode: [
+          { required: true, message: "计量对象编码不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getAreaTree('Area');
+    this.getList();
+  },
+  methods: {
+    /** 查询计量设备列表 */
+    getList() {
+      this.loading = true;
+      listDevice(this.queryParams).then(response => {
+        this.deviceList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleTabChange(newTabName) {
+      console.log('当前激活的Tab:', newTabName);
+      // 根据newTabName给someParam赋值
+      if (newTabName === 'first') {
+        // 电表抄表
+        this.queryParams.meterCls = '45';
+      } else if (newTabName === 'second') {
+        // 水表抄表
+        this.queryParams.meterCls = '70';
+      }
+    },
+    getObjTypeName(objType) {
+      const typeMap = {
+        1: '区块',
+        2: '设备'
+      };
+      return typeMap[objType] || '未知';
+    },
+    getColCycleName(colCycle) {
+      const cycleMap = {
+        0: '实时',
+        1: '分钟',
+        2: '小时',
+        3: '天',
+        4: '月'
+      };
+      return cycleMap[colCycle] || '';
+    },
+    /** 查询区域树结构 */
+    getAreaTree(tier) {
+      areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.areaCode = data.id;
+      this.handleQuery();
+    },
+    handleViewRec(row) {
+      const queryMeterReading = {
+        "areaCode": row.areaCode,
+        "deviceCode": row.deviceCode,
+      };
+
+      listMeterReadingByParam(queryMeterReading).then(response => {
+        this.recListOpen = true;
+        this.recListForm.recList = response.data;
+      })
+    },
+    closeRecList() {
+      this.recListOpen = false;
+    }
+  }
+};
+</script>

ems-ui/src/views/mgr/components/alarm.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="alarm">
+    <div class="alarm-title">历史告警</div>
+    <div class="alarm-body">
+      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
+        <div class="seamless-item" v-for="(item,index) in listData" :key="index">
+          <div >{{item.name}}</div>
+          <div >{{item.type}}</div>
+          <div >{{item.createTime}}</div>
+          <div >
+            <el-button type="text" size="mini">处理</el-button>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+
+    </div>
+  </div>
+</template>
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+export default {
+  name: 'Alarm',
+  props: ['alarmData'],
+  data() {
+    return {
+      listData: []
+    }
+  },
+  components: { vueSeamlessScroll },
+  computed: {
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止
+      }
+    }
+  },
+  watch: {
+    alarmData: {
+      handler(val) {
+        this.listData = val
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+.alarm {
+  margin-top: 10px;
+  .alarm-title {
+    background: #f2f2f2;
+    padding: 5px;
+    font-size: 14px;
+  }
+  .alarm-body {
+    border: 1px solid #f0f1f2;
+    .seamless-warp {
+      overflow: hidden;
+      height: 200px;
+      .seamless-item{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 10px;
+        border-bottom: 1px solid #f0f1f2;
+        >div{
+          font-size: 13px;
+          &:first-of-type{
+            color: #D9001B;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

ems-ui/src/views/mgr/components/panel.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="panel">
+    <div class="panel-title">{{title}}</div>
+    <div class="panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Panel',
+  props: ['title'],
+  data() {
+    return {}
+  },
+}
+</script>
+<style lang='scss' scoped>
+.panel {
+  display: flex;
+  flex-direction: column;
+  .panel-title {
+    background: #f2f2f2;
+    padding: 10px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .panel-body {
+    flex: 1;
+    background: #fff;
+  }
+}
+</style>

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

@@ -0,0 +1,432 @@
+<template>
+  <div class="powerdist">
+    <div class="powerdist-header">
+      <div>室内环境</div>
+      <div class="powerdist-env">
+        <div>
+          <img src="@/assets/images/mgr/temperature.svg" alt="">
+          <span>温度：62.5°C</span>
+        </div>
+        <div>
+          <img src="@/assets/images/mgr/humidity.svg" alt="">
+          <span>湿度：77.88RH</span>
+        </div>
+        <div>
+          <img src="@/assets/images/mgr/smoke.svg" alt="">
+          <span>烟感：正常</span>
+        </div>
+        <div>
+          <img src="@/assets/images/mgr/water.svg" alt="">
+          <span>水侵：正常</span>
+        </div>
+      </div>
+    </div>
+    <div class="powerdist-body">
+      <Panel title="变压器">
+        <div class="transformer">
+          <el-select v-model="transformer" size="mini">
+            <el-option label="变压器1" :value="1"></el-option>
+            <el-option label="变压器2" :value="2"></el-option>
+            <el-option label="变压器3" :value="3"></el-option>
+          </el-select>
+          <div class="transformer-info">
+            <div class="info-header">
+              <span>A相</span>
+              <span>B相</span>
+              <span>C相</span>
+            </div>
+            <div class="arrowImg">
+              <span>10kV</span>
+              <img src="@/assets/images/mgr/arrow.svg" alt="">
+            </div>
+            <img class="transformerImg" src="@/assets/images/mgr/transformer.svg" alt="">
+            <div class="info-right">
+              <div>
+                <img src="@/assets/images/mgr/temperature.svg" alt="">
+                <span>温度：62.5°C</span>
+              </div>
+              <div>
+                <img src="@/assets/images/mgr/overhold.svg" alt="">
+                <span>负载率：72.5%</span>
+              </div>
+            </div>
+          </div>
+          <el-descriptions title="设备参数" :column="2" size="mini" border>
+            <el-descriptions-item label="产品型号">S11-M-400/10</el-descriptions-item>
+            <el-descriptions-item label="额定容量">400kVA</el-descriptions-item>
+            <el-descriptions-item label="额定电压">10±5%/0.4kV</el-descriptions-item>
+            <el-descriptions-item label="额定频率">50HZ</el-descriptions-item>
+            <el-descriptions-item label="相数">3</el-descriptions-item>
+            <el-descriptions-item label="生产厂家">XX电器</el-descriptions-item>
+          </el-descriptions>
+          <alarm :alarmData="transformerAlarmData" />
+        </div>
+      </Panel>
+      <Panel title="配电柜">
+        <div class="power">
+          <el-select v-model="power" size="mini">
+            <el-option label="配电柜1" :value="1"></el-option>
+            <el-option label="配电柜2" :value="2"></el-option>
+            <el-option label="配电柜3" :value="3"></el-option>
+          </el-select>
+          <div class="power-info">
+            <div>
+              <span>205.2A</span>
+              <span>A相</span>
+            </div>
+            <div>
+              <span>205.2A</span>
+              <span>B相</span>
+            </div>
+            <div>
+              <span>205.2A</span>
+              <span>C相</span>
+            </div>
+          </div>
+          <div class="power-data">
+            <div class="power-data-title">实时数据</div>
+            <div class="power-data-body">
+              <div>
+                <div class="data-num">0.76</div>
+                <div class="data-name">功率因素</div>
+              </div>
+              <div>
+                <div class="power-data-row">
+                  <div>
+                    <span class="data-num">233.2V</span>
+                    <span class="data-name">A相电压</span>
+                  </div>
+                  <div>
+                    <span class="data-num">233.2V</span>
+                    <span class="data-name">A相电压</span>
+                  </div>
+                  <div>
+                    <span class="data-num">233.2V</span>
+                    <span class="data-name">A相电压</span>
+                  </div>
+                </div>
+                <div class="power-data-row">
+                  <div>
+                    <span class="data-num">233.2V</span>
+                    <span class="data-name">A相电压</span>
+                  </div>
+                  <div>
+                    <span class="data-num">233.2V</span>
+                    <span class="data-name">A相电压</span>
+                  </div>
+                  <div>
+                    <span class="data-num">233.2V</span>
+                    <span class="data-name">A相电压</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <alarm :alarmData="powerAlarmData" />
+        </div>
+
+      </Panel>
+      <Panel title="空开">
+        <div class="switch">
+          <el-table :data="switchData" style="width: 100%">
+            <el-table-column prop="name" align="center" label="支路">
+            </el-table-column>
+            <el-table-column prop="regularElec" align="center" label="额定电流">
+            </el-table-column>
+            <el-table-column prop="realElec" align="center" label="实时电流">
+            </el-table-column>
+            <el-table-column align="center" label="">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.status" size="mini">
+                </el-switch>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </Panel>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Powerdist',
+  data() {
+    return {
+      transformer: 1,
+      transformerAlarmData: [
+        {
+          name: '变压器油温值：90.3℃',
+          type: '过温预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '变压器油温值：90.3℃',
+          type: '过温预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '变压器油温值：90.3℃',
+          type: '过温预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '变压器油温值：90.3℃',
+          type: '过温预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '变压器油温值：90.3℃',
+          type: '过温预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '变压器油温值：90.3℃',
+          type: '过温预警',
+          createTime: '08-25 17:51:35'
+        }
+      ],
+      powerAlarmData: [
+        {
+          name: '配电柜A相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '配电柜A相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '配电柜A相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '配电柜A相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '配电柜A相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '配电柜B相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        },
+        {
+          name: '配电柜B相电流：579.4A',
+          type: '过流预警',
+          createTime: '08-25 17:51:35'
+        }
+      ],
+      power: 1,
+      switchData: [
+        {
+          name:'总开',
+          regularElec:'63A',
+          realElec:'63A',
+          status:true,
+        },
+        {
+          name:'综合楼空调',
+          regularElec:'63A',
+          realElec:'63A',
+          status:true,
+        },
+        {
+          name:'综合楼照明',
+          regularElec:'63A',
+          realElec:'63A',
+          status:true,
+        },
+        {
+          name:'加油站照明',
+          regularElec:'63A',
+          realElec:'63A',
+          status:false,
+        },
+        {
+          name:'综合楼照明',
+          regularElec:'63A',
+          realElec:'63A',
+          status:true,
+        },
+        {
+          name:'加油站照明',
+          regularElec:'63A',
+          realElec:'63A',
+          status:false,
+        },
+      ]
+    }
+  },
+  components: {
+    Panel: () => import('./components/panel'),
+    alarm: () => import('./components/alarm.vue')
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+.powerdist {
+  background: #f6f7f9;
+  padding: 10px;
+  min-height: inherit;
+  display: flex;
+  flex-direction: column;
+  .powerdist-header {
+    background: #fff;
+    padding: 20px;
+    .powerdist-env {
+      display: flex;
+      color: #515a6e;
+      font-size: 14px;
+      margin-left: 80px;
+      > div {
+        display: flex;
+        align-items: center;
+        margin-left: 70px;
+        img {
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+  .powerdist-body {
+    flex: 1;
+    margin-top: 10px;
+    display: flex;
+    > div {
+      flex: 1;
+      &:not(:first-child) {
+        margin-left: 10px;
+      }
+    }
+    .transformer {
+      padding: 10px;
+      .transformer-info {
+        text-align: center;
+        margin-top: 50px;
+        position: relative;
+      }
+      .transformerImg {
+        height: 150px;
+      }
+      .arrowImg {
+        position: absolute;
+        left: 5%;
+        top: 50%;
+        transform: translateY(-50%);
+        img {
+          width: 80px;
+        }
+        span {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+        }
+      }
+      .info-header {
+        position: absolute;
+        top: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 14px;
+        span {
+          margin-left: 5px;
+          font-weight: bold;
+        }
+      }
+      .info-right {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 14px;
+        > div {
+          display: flex;
+          align-items: center;
+          margin-top: 5px;
+        }
+      }
+    }
+    ::v-deep .el-descriptions__header {
+      margin-bottom: 5px;
+    }
+    .power {
+      padding: 10px;
+      .power-info {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        padding: 0 10px;
+        > div {
+          color: #333333;
+          border: 2px solid #d7d7d7;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          border-radius: 50%;
+          height: 100px;
+          width: 100px;
+          text-align: center;
+          font-weight: bold;
+          font-size: 16px;
+          &:not(:first-of-type) {
+            margin-left: 20px;
+          }
+          span:last-of-type {
+            margin-top: 5px;
+            color: #7f7f7f;
+            font-size: 18px;
+          }
+        }
+      }
+      .power-data {
+        margin-top: 20px;
+        .power-data-title {
+          background: #f2f2f2;
+          padding: 5px;
+          font-size: 14px;
+        }
+        .power-data-body {
+          border: 1px solid #f0f1f2;
+          display: flex;
+          align-items: center;
+          padding: 10px 20px;
+          text-align: center;
+          > div:last-of-type {
+            flex: 1;
+            margin-left: 30px;
+          }
+          .power-data-row {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+            > div {
+              display: flex;
+              flex-direction: column;
+            }
+          }
+          .data-name {
+            margin-top: 5px;
+            font-size: 13px;
+            color: #5a5a5a;
+          }
+          .data-num {
+            font-size: 15px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+    .switch {
+      padding: 10px;
+    }
+  }
+}
+</style>