|
|
@@ -1,6 +1,11 @@
|
|
|
<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="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"
|
|
|
@@ -53,23 +58,13 @@
|
|
|
v-hasPermi="['ems:device:remove']"
|
|
|
>删除</el-button>
|
|
|
</el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="warning"
|
|
|
- plain
|
|
|
- icon="el-icon-download"
|
|
|
- size="mini"
|
|
|
- @click="handleExport"
|
|
|
- v-hasPermi="['ems:device:export']"
|
|
|
- >导出</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="center" prop="objName" >
|
|
|
+ <el-table-column label="计量对象" align="left" prop="objName" width="300px">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ "（" + getObjTypeName(scope.row.objType) + "）"+ scope.row.objName }}</span>
|
|
|
</template>
|
|
|
@@ -79,14 +74,14 @@
|
|
|
<span>{{ getMeterClsName(scope.row.meterCls) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="采集周期" align="center" prop="colCycle">
|
|
|
+ <el-table-column label="采集方式" align="center" prop="colMode" >
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ getColCycleName(scope.row.colCycle) }}</span>
|
|
|
+ <span>{{ getColModeName(scope.row.colMode) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="采集方式" align="center" prop="colMode" >
|
|
|
+ <el-table-column label="采集周期" align="center" prop="colCycle" >
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ getColModeName(scope.row.colMode) }}</span>
|
|
|
+ <span>{{ getColCycleName(scope.row.colCycle) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
@@ -94,6 +89,14 @@
|
|
|
<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']"
|
|
|
@@ -120,33 +123,40 @@
|
|
|
<!-- 添加或修改计量设备对话框 -->
|
|
|
<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-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-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="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="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择计量对象" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="采集周期" prop="colCycle">
|
|
|
- <el-select v-model="form.colCycle" >
|
|
|
- <el-option v-for="item in colCycleOptions" :label="item.name" :value="item.code" :key="item.code" />
|
|
|
- </el-select>
|
|
|
+ <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>
|
|
|
@@ -162,9 +172,10 @@
|
|
|
<script>
|
|
|
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/device/meterDevice";
|
|
|
import { devTreeByFacs } from "@/api/device/device";
|
|
|
-import Treeselect from '@riophae/vue-treeselect';
|
|
|
-import request from '@/utils/request'
|
|
|
-import { areaTreeSelect } from '@/api/basecfg/area'
|
|
|
+import { listTotalArea, 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";
|
|
|
|
|
|
export default {
|
|
|
name: "Device",
|
|
|
@@ -190,9 +201,12 @@ export default {
|
|
|
// 是否显示弹出层
|
|
|
open: false,
|
|
|
objCodeOptions: [],
|
|
|
+ areaOptions: [],
|
|
|
+ buildingOptions: [],
|
|
|
+ selectObjCode: null,
|
|
|
+ objCode: null,
|
|
|
// 能源分类树
|
|
|
emsClsOptions: [
|
|
|
- {"code": 25, "name": "天然气表"},
|
|
|
{"code": 45, "name": "电表"},
|
|
|
{"code": 70, "name": "水表"}
|
|
|
],
|
|
|
@@ -215,6 +229,8 @@ export default {
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
+ areaCode: null,
|
|
|
+ bldgCode: null,
|
|
|
deviceCode: null,
|
|
|
meterCls: null,
|
|
|
objType: null,
|
|
|
@@ -228,28 +244,53 @@ export default {
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
+ areaCode: [
|
|
|
+ { required: true, message: "选择服务区", trigger: "blur" }
|
|
|
+ ],
|
|
|
deviceCode: [
|
|
|
{ required: true, message: "设备代码不能为空", trigger: "blur" }
|
|
|
],
|
|
|
meterCls: [
|
|
|
- { required: true, message: "计量介质不能为空", trigger: "blur" }
|
|
|
+ { required: true, message: "计量类别不能为空", trigger: "blur" }
|
|
|
],
|
|
|
- meterObjType: [
|
|
|
+ objType: [
|
|
|
{ required: true, message: "计量对象类型 1-区块 2-设备不能为空", trigger: "change" }
|
|
|
],
|
|
|
objCode: [
|
|
|
{ required: true, message: "计量对象编码不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
- colCycle: [
|
|
|
- { required: true, message: "采集周期不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
- colMode: [
|
|
|
- { required: true, message: "采集方式不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
+ ]
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
+ watch:{
|
|
|
+ objCode: {
|
|
|
+ handler(id) {
|
|
|
+ const option = this.$refs.treeObjCodeOptions.getNode(id);
|
|
|
+ this.objCode = option.id;
|
|
|
+ this.form.objCode = option.id;
|
|
|
+
|
|
|
+ if (1 === this.form.objType) {
|
|
|
+ if ('Area' === option.raw.tier) {
|
|
|
+ this.form.objSubType = 1;
|
|
|
+ } else if ('Building' === option.raw.tier) {
|
|
|
+ this.form.objSubType = 2;
|
|
|
+ } 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;
|
|
|
+ } else if ('Device' === option.raw.tier) {
|
|
|
+ this.form.objSubType = 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
+ this.getAreaOptions();
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -274,11 +315,13 @@ export default {
|
|
|
deviceCode: null,
|
|
|
meterCls: null,
|
|
|
meterObjType: null,
|
|
|
+ objSubType: null,
|
|
|
objCode: null,
|
|
|
colCycle: null,
|
|
|
colMode: null,
|
|
|
specDesc: null
|
|
|
};
|
|
|
+ this.objCode = null;
|
|
|
this.resetForm("form");
|
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
|
@@ -313,16 +356,22 @@ export default {
|
|
|
this.title = "修改计量设备";
|
|
|
});
|
|
|
|
|
|
+ this.objCode = row.objCode;
|
|
|
if (row.objType === 1) {
|
|
|
- areaTreeSelect('Zoning').then(response => {
|
|
|
+ areaTreeSelectByCode('Area', row.areaCode).then(response => {
|
|
|
this.objCodeOptions = response.data;
|
|
|
});
|
|
|
} else if (row.objType === 2) {
|
|
|
- devTreeByFacs().then(response =>{
|
|
|
+ devTreeByFacs(row.areaCode).then(response =>{
|
|
|
this.objCodeOptions = response.data;
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ handleAreaSelect(areaCode) {
|
|
|
+ listBuildingByArea(areaCode).then(response => {
|
|
|
+ this.buildingOptions = response.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
/** 提交按钮 */
|
|
|
submitForm() {
|
|
|
this.$refs["form"].validate(valid => {
|
|
|
@@ -353,15 +402,9 @@ export default {
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
- /** 导出按钮操作 */
|
|
|
- handleExport() {
|
|
|
- this.download('ems/meterDevice/export', {
|
|
|
- ...this.queryParams
|
|
|
- }, `device_${new Date().getTime()}.xlsx`)
|
|
|
- },
|
|
|
+
|
|
|
getMeterClsName(meterCls) {
|
|
|
const clsMap = {
|
|
|
- 25: '天然气表',
|
|
|
45: '电表',
|
|
|
70: '水表'
|
|
|
};
|
|
|
@@ -382,7 +425,7 @@ export default {
|
|
|
3: '天',
|
|
|
4: '月'
|
|
|
};
|
|
|
- return cycleMap[colCycle] || '未知';
|
|
|
+ return cycleMap[colCycle] || '';
|
|
|
},
|
|
|
getColModeName(colMode) {
|
|
|
const modeMap = {
|
|
|
@@ -391,13 +434,18 @@ export default {
|
|
|
};
|
|
|
return modeMap[colMode] || '未知';
|
|
|
},
|
|
|
+ getAreaOptions() {
|
|
|
+ listTotalArea().then(response => {
|
|
|
+ this.areaOptions = response.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
changeObjOptions(objType) {
|
|
|
if (objType === 1) {
|
|
|
- areaTreeSelect('Zoning').then(response => {
|
|
|
+ areaTreeSelectByCode('Area', this.form.areaCode).then(response => {
|
|
|
this.objCodeOptions = response.data;
|
|
|
});
|
|
|
} else if (objType === 2) {
|
|
|
- devTreeByFacs().then(response =>{
|
|
|
+ devTreeByFacs(this.form.areaCode).then(response =>{
|
|
|
this.objCodeOptions = response.data;
|
|
|
})
|
|
|
}
|
