update

ems-ui/src/api/basecfg/area.js

@@ -64,3 +64,10 @@ export function areaTreeSelectByCode(tier, code) {
     method: 'get'
   })
 }
+
+export function areaTreeSelectByTag(tier, tagCode) {
+  return request({
+    url: '/ems/basecfg/area/areaTreeByTag?tier=' + tier + '&tagCode=' + tagCode,
+    method: 'get'
+  })
+}

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M512 0C229.312 0 0 229.312 0 512s229.312 512 512 512 512-229.312 512-512-229.312-512-512-512z m311.04 823.04a437.76 437.76 0 0 1-139.84 94.336c-54.208 23.04-111.808 34.624-171.2 34.624a439.36 439.36 0 0 1-311.04-128.896 437.76 437.76 0 0 1-94.336-139.904A435.776 435.776 0 0 1 72 512a439.36 439.36 0 0 1 128.896-311.04 437.76 437.76 0 0 1 139.904-94.336A435.776 435.776 0 0 1 512 72a439.36 439.36 0 0 1 311.04 128.896 437.76 437.76 0 0 1 94.336 139.904c23.04 54.208 34.624 111.808 34.624 171.2 0 59.392-11.584 116.992-34.56 171.2a436.096 436.096 0 0 1-94.336 139.904z"  opacity=".45" ></path><path d="M701.824 436.992h-167.04c0.704 0 1.408-0.32 2.112-1.024l118.208-117.76a35.904 35.904 0 0 0-50.816-50.56L511.872 360.064l-92.864-92.8a36.16 36.16 0 0 0-51.136 0.192 36.16 36.16 0 0 0-0.064 51.072l118.208 118.08c0.64 0.704 1.408 1.728 2.112 1.728H321.6a34.688 34.688 0 0 0-34.304 34.56v3.2c0 18.816 15.488 33.856 34.304 33.856h154.368v64H353.536c-18.752 0-33.472 16.256-33.472 35.072v4.032c0 18.752 14.72 32.896 33.472 32.896h122.56v149.184a35.968 35.968 0 1 0 72 0v-149.184h121.792c18.752 0 35.2-14.08 35.2-32.896v-4.032a35.968 35.968 0 0 0-35.2-35.072H548.032v-64h153.792c18.752 0 35.2-14.208 35.2-33.088v-4.032a36.672 36.672 0 0 0-35.2-35.84z"  opacity=".45" ></path></svg>

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
+      <el-tab-pane label="总览" name="first">
+        <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-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="个户" name="second">
+        <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-col>
+        </el-row>
+      </el-tab-pane>
+
+    </el-tabs>
+
+  </div>
+</template>
+
+<script>
+import { areaTreeSelect, areaTreeSelectByTag } from '@/api/basecfg/area'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { addMeterReading, getLastRecord, listMeterReadingByParam, updateMeterReading } from '@/api/device/meterRead'
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    const nowDay = new Date()
+    return {
+      activeTab: 'first',
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 计量设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 记录表单开启
+      recListOpen: false,
+      // 填报表单开启
+      fillFormOpen: false,
+      // 区域名称
+      areaName: undefined,
+      areaOptions: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 能源分类树
+      emsClsOptions: [
+        { code: 45, name: '电表' },
+        { code: 70, name: '水表' }
+      ],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        areaCode: null,
+        deviceCode: null,
+        meterCls: 45
+      },
+      // 电表表单参数
+      recListForm: {
+        year: '',
+        deviceCode: '',
+        recList: []
+      },
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询计量设备列表 */
+    getList() {
+
+    },
+    handleTabChange() {
+      // 根据newTabName给someParam赋值
+      if (this.activeTab === 'first') {
+        this.getAreaTree('Area')
+      } else if (this.activeTab === 'second') {
+        // 水表抄表
+        this.getAreaTreeByTag('Zoning', 'Area_01')
+      }
+      this.handleQuery()
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+
+
+    getObjTagName(objTag) {
+      const tagMap = {
+        0: '公摊表',
+        1: '个户表'
+      }
+      return tagMap[objTag] || '未知'
+    },
+    /** 查询区域树结构 */
+    getAreaTree(tier) {
+      areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTreeByTag(tier, tagCode) {
+      areaTreeSelectByTag(tier, tagCode).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()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+  ::v-deep .el-tabs__content {
+    overflow: initial;
+  }
+}
+.sub-table {
+  .el-icon-delete {
+    cursor: pointer;
+  }
+  .operateBtns {
+    cursor: pointer;
+    i {
+      color: #1990ff;
+      margin-left: 5px;
+    }
+  }
+  ::v-deep .el-date-editor {
+    width: 100% !important;
+  }
+}
+.custom-checkbox-group {
+  max-height: 120px;
+  overflow-y: auto;
+}
+.strategyForm {
+  ::v-deep .el-input.is-disabled .el-input__inner {
+    color: #606266;
+    background: #fff;
+  }
+}
+</style>
+<style lang="scss">
+.custom-dialog {
+  .el-dialog__body {
+    padding-bottom: 0;
+  }
+}
+</style>