计量设备调整

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

@@ -9,21 +9,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="设备名称" prop="deviceName">
-        <el-input
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="计量介质" prop="meterCls">
-        <el-input
-          v-model="queryParams.meterCls"
-          placeholder="请输入计量介质"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <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>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -79,15 +68,27 @@
 
     <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="id" />
       <el-table-column label="设备代码" align="center" prop="deviceCode" />
-      <el-table-column label="设备名称" align="center" prop="deviceName" />
-      <el-table-column label="计量介质" align="center" prop="meterCls" />
-      <el-table-column label="计量对象类型" align="center" prop="meterObjType" />
-      <el-table-column label="计量对象编码" align="center" prop="objCode" />
-      <el-table-column label="采集周期" align="center" prop="colCycle" />
-      <el-table-column label="采集方式" align="center" prop="colMode" />
-      <el-table-column label="规格描述" align="center" prop="specDesc" />
+      <el-table-column label="计量对象" align="center" prop="objType" >
+        <template slot-scope="scope">
+          <span>{{ "（" + getObjTypeName(scope.row.objCode) + "）"+ + 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="colCycle">
+        <template slot-scope="scope">
+          <span>{{ getColCycleName(scope.row.colCycle) }}</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" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -122,23 +123,29 @@
         <el-form-item label="设备代码" prop="deviceCode">
           <el-input v-model="form.deviceCode" placeholder="请输入设备代码" />
         </el-form-item>
-        <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
-        </el-form-item>
-        <el-form-item label="计量介质" prop="meterCls">
-          <el-input v-model="form.meterCls" placeholder="请输入计量介质" />
+
+        <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="objType">
-          <el-input v-model="form.objType" placeholder="请输入计量对象" />
+          <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">
-          <el-input v-model="form.objCode" placeholder="请输入计量对象编码" />
+          <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择计量对象" />
         </el-form-item>
         <el-form-item label="采集周期" prop="colCycle">
-          <el-input v-model="form.colCycle" placeholder="请输入采集周期" />
+          <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="colMode">
-          <el-input v-model="form.colMode" placeholder="请输入采集方式" />
+          <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="specDesc">
           <el-input v-model="form.specDesc" placeholder="请输入规格描述" />
@@ -154,9 +161,13 @@
 
 <script>
 import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/device/meterDevice";
+import Treeselect from '@riophae/vue-treeselect';
+import request from '@/utils/request'
+import { areaTreeSelect } from '@/api/basecfg/area'
 
 export default {
   name: "Device",
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
@@ -177,15 +188,37 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      objCodeOptions: [],
+      // 能源分类树
+      emsClsOptions: [
+        {"code": 25, "name": "天然气表"},
+        {"code": 45, "name": "电表"},
+        {"code": 70, "name": "水表"}
+      ],
+      objTypeOptions: [
+        {"code": 1, "name": "区块"},
+        {"code": 2, "name": "设备"}
+      ],
+      colCycleOptions: [
+        {"code": 0, "name": "实时"},
+        {"code": 1, "name": "分钟"},
+        {"code": 2, "name": "小时"},
+        {"code": 3, "name": "天"},
+        {"code": 4, "name": "月"}
+      ],
+      colModeOptions: [
+        {"code": 0, "name": "自动抄表"},
+        {"code": 1, "name": "手动抄表"}
+      ],
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         deviceCode: null,
-        deviceName: null,
         meterCls: null,
         objType: null,
         objCode: null,
+        objName: null,
         colCycle: null,
         colMode: null,
         specDesc: null
@@ -197,9 +230,6 @@ export default {
         deviceCode: [
           { required: true, message: "设备代码不能为空", trigger: "blur" }
         ],
-        deviceName: [
-          { required: true, message: "设备名称不能为空", trigger: "blur" }
-        ],
         meterCls: [
           { required: true, message: "计量介质不能为空", trigger: "blur" }
         ],
@@ -241,7 +271,6 @@ export default {
       this.form = {
         id: null,
         deviceCode: null,
-        deviceName: null,
         meterCls: null,
         meterObjType: null,
         objCode: null,
@@ -318,6 +347,45 @@ export default {
       this.download('ems/meterDevice/export', {
         ...this.queryParams
       }, `device_${new Date().getTime()}.xlsx`)
+    },
+    getMeterClsName(meterCls) {
+      const clsMap = {
+        25: '天然气表',
+        45: '电表',
+        70: '水表'
+      };
+      return clsMap[meterCls] || '未知';
+    },
+    getObjTypeName(objType) {
+      const typeMap = {
+        1: '区块',
+        2: '设备'
+      };
+      return typeMap[objType] || '未知';
+    },
+    getColCycleName(colCycle) {
+      const cycleMap = {
+        0: '实时',
+        1: '分钟',
+        2: '小时',
+        3: '天',
+        4: '月'
+      };
+      return cycleMap[colCycle] || '未知';
+    },
+    getColModeName(colMode) {
+      const modeMap = {
+        0: '自动抄表',
+        1: '手动抄表'
+      };
+      return modeMap[colMode] || '未知';
+    },
+    changeObjOptions(code) {
+      if (code === 1) {
+        areaTreeSelect('Zoning').then(response => {
+          this.objCodeOptions = response.data;
+        });
+      }
     }
   }
 };