|
|
@@ -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) {
|
