|
|
@@ -2,136 +2,310 @@
|
|
|
<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 v-if="activeTab === 'area'">
|
|
|
+ <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="areaList" :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>
|
|
|
</div>
|
|
|
- <div class="head-container">
|
|
|
- <el-tree :data="areaList" :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 v-if="activeTab === 'organ'">
|
|
|
+ <div class="head-container">
|
|
|
+ <el-input v-model="deptName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px" />
|
|
|
+ </div>
|
|
|
+ <div class="head-container">
|
|
|
+ <el-tree :key="treeKey" :data="deptList" :props="defaultDeptProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
|
|
|
+ node-key="deptId" default-expand-all highlight-current @node-click="handleDeptNodeClick"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="activeTab === 'facs'">
|
|
|
+ <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 :key="tableKey" :data="facsOptions" :props="defaultFacsProps" :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode" ref="tree"
|
|
|
+ node-key="id" default-expand-all highlight-current @node-click="handleFacsNodeClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div v-if="activeTab === 'device'"></div>
|
|
|
+
|
|
|
+
|
|
|
</el-col>
|
|
|
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
<el-tab-pane label="地理位置" name="area"></el-tab-pane>
|
|
|
<el-tab-pane label="组织机构" name="organ"></el-tab-pane>
|
|
|
- <el-tab-pane label="设施设备" name="facs"></el-tab-pane>
|
|
|
+ <el-tab-pane label="设施" name="facs"></el-tab-pane>
|
|
|
+ <el-tab-pane label="设备" name="device"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
|
|
|
<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="areaName">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.areaName"
|
|
|
- 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">
|
|
|
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-table
|
|
|
- v-if="refreshTable"
|
|
|
- v-loading="loading"
|
|
|
- :data="areaOptions"
|
|
|
- :default-expand-all="isExpandAll"
|
|
|
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
- >
|
|
|
-
|
|
|
- <el-table-column label="区域名称" align="left" prop="areaName" />
|
|
|
- <el-table-column label="区域简称" align="left" prop="shortName" />
|
|
|
- <el-table-column label="区域编码" align="left" prop="areaCode" />
|
|
|
- <el-table-column label="区域状态" align="center" >
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ objStatusMapping[scope.row.status] }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="区块标签" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
+
|
|
|
+ <!-- 地理位置 -->
|
|
|
+ <div v-if="activeTab === 'area'">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="区域名称" prop="areaName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.areaName"
|
|
|
+ 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
|
|
|
+ :key="tableKey"
|
|
|
+ v-if="refreshTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="areaOptions"
|
|
|
+ :default-expand-all="isExpandAll"
|
|
|
+ row-key="areaCode"
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-table-column label="区域名称" align="left" prop="areaName" />
|
|
|
+ <el-table-column label="区域简称" align="left" prop="shortName" />
|
|
|
+ <el-table-column label="区域编码" align="left" prop="areaCode" />
|
|
|
+ <el-table-column label="区域状态" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ objStatusMapping[scope.row.status] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="区块标签" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
<span v-for="tag in (scope.row.tagNames && scope.row.tagNames.split(',')) || []" :key="tag" :style="getTagStyle(tag.trim())" class="tag-label">
|
|
|
{{ tag.trim() }}
|
|
|
</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-reading"
|
|
|
- @click="handleDevice(scope.row)"
|
|
|
- v-hasPermi="['ems:area:edit']"
|
|
|
- >计量设备</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!-- 计量设备弹框 -->
|
|
|
- <el-dialog :title="dialogTitle" :visible.sync="deviceDialogVisible" width="1000px" append-to-body>
|
|
|
- <el-tabs v-model="activeDeviceTab" @tab-click="handleADTabClick">
|
|
|
- <el-tab-pane label="电表" name="electricMeter"></el-tab-pane>
|
|
|
- <el-tab-pane label="水表" name="waterMeter"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </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-reading"
|
|
|
+ @click="handleDevice(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:edit']"
|
|
|
+ >计量设备</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 水表和电表的已绑定和未绑定表格 -->
|
|
|
- <SubTitle title="已绑定列表" />
|
|
|
- <el-table v-loading="loading" :data="Bound" style="width: 100%">
|
|
|
- <el-table-column label="表计编号" align="left" prop="meterDevice" />
|
|
|
- <el-table-column label="表计名称" align="left" prop="meterDeviceName" />
|
|
|
- <el-table-column label="边界类型" align="left" prop="objType">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ getObjTypeLabel(scope.row.objType) }}
|
|
|
- </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-arrow-down" @click="downToDevice(scope.row)">取消绑定</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <SubTitle title="未绑定列表" />
|
|
|
- <el-table v-loading="loading" :data="Unbound" style="width: 100%">
|
|
|
- <el-table-column label="表计编号" align="left" prop="deviceCode" />
|
|
|
- <el-table-column label="表计名称" align="left" prop="deviceName" width="200px"/>
|
|
|
- <el-table-column label="安装位置" align="left" prop="deviceLocation" width="200px"/>
|
|
|
- <el-table-column label="计量标签" align="center" prop="objTag">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{formatDict(scope.row.objTag,'objTagOptions')}}
|
|
|
- </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">
|
|
|
+ <!-- 组织机构 -->
|
|
|
+ <div v-if="activeTab === 'organ'">
|
|
|
+ <el-form :model="DeptQueryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
|
|
+ <el-form-item label="部门名称" prop="deptName">
|
|
|
+ <el-input
|
|
|
+ v-model="DeptQueryParams.deptName"
|
|
|
+ placeholder="请输入部门名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleDeptQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="DeptQueryParams.status" placeholder="部门状态" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.sys_normal_disable"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDeptQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetDeptQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-if="refreshTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="organOptions"
|
|
|
+ row-key="deptId"
|
|
|
+ :default-expand-all="isExpandAll"
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
+ >
|
|
|
+ <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
|
|
|
+ <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.createTime) }}</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-arrow-up" @click="moveToDevice(scope.row)">绑定</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination v-show="total>0" :total="total" :page.sync="MeterQueryParams.pageNum" :limit.sync="MeterQueryParams.pageSize"
|
|
|
- @pagination="getMeterData" />
|
|
|
-
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="saveByObj">保 存</el-button>
|
|
|
- <el-button @click="MeterCancel">取 消</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-reading"
|
|
|
+ @click="handleDeptDevice(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:edit']"
|
|
|
+ >计量设备</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 设施设备 -->
|
|
|
+ <div v-if="activeTab === 'facs'">
|
|
|
+ <el-tabs v-model="FacsQueryParams.facsCategory" @tab-click="facsCategoryChange">
|
|
|
+ <el-tab-pane label="产能设施" name="E"></el-tab-pane>
|
|
|
+ <el-tab-pane label="储能设施" name="C"></el-tab-pane>
|
|
|
+ <el-tab-pane label="输能设施" name="W"></el-tab-pane>
|
|
|
+ <el-tab-pane label="用能设施" name="Z"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-form :model="FacsQueryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
+ <el-form-item label="设施子类" prop="facsSubtype">
|
|
|
+ <el-select v-model="FacsQueryParams.facsSubCategory">
|
|
|
+ <el-option v-for="item in facsSubCategoryOptions" :label="item.name" :value="item.code" :key="item.code"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设施名称" prop="facsName">
|
|
|
+ <el-input v-model="FacsQueryParams.facsName" placeholder="请输入设施名称" clearable
|
|
|
+ @keyup.enter.native="handleFacsQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleFacsQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetFacsQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table :key="tableKey" v-loading="loading" :data="facsList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center"/>
|
|
|
+ <el-table-column label="设施代码" align="center" prop="facsCode"/>
|
|
|
+ <el-table-column label="设施名称" align="center" prop="facsName"/>
|
|
|
+ <el-table-column label="设施分类" align="center" prop="facsCategoryName"/>
|
|
|
+ <el-table-column label="设施子类" align="center" prop="facsSubCategoryName"/>
|
|
|
+ <el-table-column label="启用状态" align="center" prop="enable">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ padding: '6px 12px',
|
|
|
+ borderRadius: '4px',
|
|
|
+ display: 'inline-block',
|
|
|
+ textAlign: 'center',
|
|
|
+ cursor: 'pointer',
|
|
|
+ color: scope.row.enable === 0 ? 'rgb(255,159,159)' : 'rgb(117,186,255)',
|
|
|
+ backgroundColor: scope.row.enable === 0 ? 'rgb(255,235,235)' : 'rgb(232,244,255)'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ scope.row.enable === 0 ? '关闭' : '启用' }}
|
|
|
+ </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-reading"
|
|
|
+ @click="handleFacsDevice(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:edit']"
|
|
|
+ >计量设备</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!--设备 -->
|
|
|
+ <div v-if="activeTab === 'device'">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
</el-col>
|
|
|
+ <!-- 计量设备弹框 -->
|
|
|
+ <el-dialog :title="dialogTitle" :visible.sync="deviceDialogVisible" width="1000px" append-to-body>
|
|
|
+ <el-tabs v-model="activeDeviceTab" @tab-click="handleADTabClick">
|
|
|
+ <el-tab-pane label="电表" name="electricMeter"></el-tab-pane>
|
|
|
+ <el-tab-pane label="水表" name="waterMeter"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 水表和电表的已绑定和未绑定表格 -->
|
|
|
+ <SubTitle title="已绑定列表" />
|
|
|
+ <el-table v-loading="loading" :data="Bound" style="width: 100%">
|
|
|
+ <el-table-column label="表计编号" align="left" prop="meterDevice" />
|
|
|
+ <el-table-column label="表计名称" align="left" prop="meterDeviceName" />
|
|
|
+ <el-table-column label="边界类型" align="left" prop="objType">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ getObjTypeLabel(scope.row.objType) }}
|
|
|
+ </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-arrow-down" @click="downToDevice(scope.row)">取消绑定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <SubTitle title="未绑定列表" />
|
|
|
+ <el-table v-loading="loading" :data="Unbound" style="width: 100%">
|
|
|
+ <el-table-column label="表计编号" align="left" prop="deviceCode" />
|
|
|
+ <el-table-column label="表计名称" align="left" prop="deviceName" width="200px"/>
|
|
|
+ <el-table-column label="安装位置" align="left" prop="deviceLocation" width="200px"/>
|
|
|
+ <el-table-column label="计量标签" align="center" prop="objTag">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{formatDict(scope.row.objTag,'objTagOptions')}}
|
|
|
+ </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-arrow-up" @click="moveToDevice(scope.row)">绑定</el-button>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 检查是否已绑定 -->
|
|
|
+ <div v-if="isAlreadyBound(scope.row.deviceCode)">
|
|
|
+ <span>已绑定</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-arrow-up"
|
|
|
+ @click="moveToDevice(scope.row)"
|
|
|
+ >绑定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="MeterQueryParams.pageNum" :limit.sync="MeterQueryParams.pageSize"
|
|
|
+ @pagination="getMeterData" />
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="saveByObj">保 存</el-button>
|
|
|
+ <el-button @click="MeterCancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -139,34 +313,56 @@
|
|
|
<script>
|
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
-import {listDetailArea } from '@/api/basecfg/area'
|
|
|
+import { areaTreeSelect, listDetailArea } from '@/api/basecfg/area'
|
|
|
import SubTitle from '@/components/SubTitle/index.vue'
|
|
|
import { getEmsTag } from '@/api/commonApi'
|
|
|
import { delDevice, listDevice } from '@/api/device/meterDevice'
|
|
|
import { addAllByObj, listByObj } from '@/api/basecfg/boundaryRel'
|
|
|
+import { listDept } from '@/api/system/dept'
|
|
|
+import { getFacsCategorygetByCode, listFacs } from '@/api/basecfg/emsfacs'
|
|
|
|
|
|
|
|
|
export default {
|
|
|
name: 'Device',
|
|
|
+ dicts: ['sys_normal_disable'],
|
|
|
components: { SubTitle, Treeselect },
|
|
|
data() {
|
|
|
return {
|
|
|
activeTab: 'area',
|
|
|
areaOptions: [],
|
|
|
organOptions: [],
|
|
|
- facsOptions: [],
|
|
|
+ facsOptions: undefined,
|
|
|
// 区域名称
|
|
|
areaName: undefined,
|
|
|
+ deptName:undefined,
|
|
|
defaultProps: {
|
|
|
children: 'children',
|
|
|
label: 'areaName'
|
|
|
},
|
|
|
+ defaultDeptProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'deptName'
|
|
|
+ },
|
|
|
+ defaultFacsProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+ treeKey: 0,
|
|
|
+ tableKey: 0,
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
// 显示搜索条件
|
|
|
showSearch: true,
|
|
|
// 区域对象表格数据
|
|
|
areaList: [],
|
|
|
+ deptList:[],
|
|
|
+ facsList:[],
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
// 弹出层标题
|
|
|
@@ -180,7 +376,7 @@ export default {
|
|
|
// 标签选项
|
|
|
emsTagOptions: [],
|
|
|
tagCodeToColorMap:{},
|
|
|
- // 查询参数
|
|
|
+ // 地理位置查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
@@ -195,6 +391,24 @@ export default {
|
|
|
tagNames:null,
|
|
|
areaAttr:{}
|
|
|
},
|
|
|
+ // 组织机构查询参数
|
|
|
+ DeptQueryParams: {
|
|
|
+ deptName: undefined,
|
|
|
+ status: undefined
|
|
|
+ },
|
|
|
+ // 设施 查询参数
|
|
|
+ FacsQueryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ facsCode: null,
|
|
|
+ facsName: null,
|
|
|
+ facsCategory: 'E',
|
|
|
+ facsSubCategory: null,
|
|
|
+ enable: null,
|
|
|
+ refArea: null,
|
|
|
+ customAttrs: null
|
|
|
+ },
|
|
|
+ // 水表、电表查询参数
|
|
|
MeterQueryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
@@ -248,6 +462,14 @@ export default {
|
|
|
areaName: '全部',
|
|
|
children: []
|
|
|
},
|
|
|
+ allDeptNode: {
|
|
|
+ deptId: 'all',
|
|
|
+ deptName: '全部',
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ // 设施分类列表
|
|
|
+ facsCategoryOptions: undefined,
|
|
|
+ facsSubCategoryOptions: undefined,
|
|
|
parentAreaCode:'',
|
|
|
dialogTitle: '',
|
|
|
deviceDialogVisible: false,
|
|
|
@@ -258,14 +480,25 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getList();
|
|
|
+ this.getFacsList();
|
|
|
},
|
|
|
created() {
|
|
|
+ this.getAreaTree('0', false)
|
|
|
this.getEmsTag('Area');
|
|
|
this.form.areaAttr = {};
|
|
|
this.getList();
|
|
|
+ this.getDeptList();
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ getAreaTree(areaCode, recursion) {
|
|
|
+ areaTreeSelect(areaCode, recursion).then(response => {
|
|
|
+ this.facsOptions = [{
|
|
|
+ id: '-1',
|
|
|
+ label: '全部',
|
|
|
+ children: response.data
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ },
|
|
|
filterNode(value, data) {
|
|
|
if (!value) return true
|
|
|
return data.label.indexOf(value) !== -1
|
|
|
@@ -311,8 +544,22 @@ export default {
|
|
|
return modeMap[colMode] || '未知'
|
|
|
},
|
|
|
/**分页*/
|
|
|
- handleTabClick() {
|
|
|
-
|
|
|
+ handleTabClick(tab) {
|
|
|
+ // 重置所有查询参数
|
|
|
+ this.reset();
|
|
|
+ if (tab.name === 'area') {
|
|
|
+ this.showSearch = true;
|
|
|
+ this.getList();
|
|
|
+ } else if (tab.name === 'organ') {
|
|
|
+ this.showSearch = true;
|
|
|
+ this.getDeptList();
|
|
|
+ } else if (tab.name === 'facs') {
|
|
|
+ this.showSearch = true;
|
|
|
+ this.getFacsList()
|
|
|
+ }else if (tab.name === 'device') {
|
|
|
+ this.showSearch = true;
|
|
|
+ //this.getDeviceList();
|
|
|
+ }
|
|
|
},
|
|
|
/**电表、水表分页*/
|
|
|
handleADTabClick(tab){
|
|
|
@@ -320,41 +567,79 @@ export default {
|
|
|
this.getMeterData();
|
|
|
},
|
|
|
|
|
|
+ //地理位置
|
|
|
handleNodeClick(data) {
|
|
|
+ console.log("地理位置",data)
|
|
|
if (data.id === 'all') {
|
|
|
- this.areaOptions = this.areaList.slice(1);
|
|
|
+ this.areaOptions = this.areaList.slice(1).map(item => {
|
|
|
+ const { children, ...rest } = item;
|
|
|
+ return rest;
|
|
|
+ });
|
|
|
} else {
|
|
|
// 判断是否为叶子节点
|
|
|
if (!data.children || data.children.length === 0) {
|
|
|
// 叶子节点，展示该节点的数据
|
|
|
this.areaOptions = [data];
|
|
|
} else {
|
|
|
- // 不是叶子节点，展示其下层的数据
|
|
|
- this.areaOptions = data.children;
|
|
|
+ this.areaOptions = data.children.map(child => {
|
|
|
+ const { children, ...rest } = child;
|
|
|
+ return rest;
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
+ //组织机构
|
|
|
+ handleDeptNodeClick(data) {
|
|
|
+ console.log("组织机构", data);
|
|
|
+ if (data.deptId === 'all') {
|
|
|
+ this.organOptions = this.deptList.slice(1).map(item => {
|
|
|
+ const { children, ...rest } = item;
|
|
|
+ return rest;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 判断是否为叶子节点
|
|
|
+ if (!data.children || data.children.length === 0) {
|
|
|
+ this.organOptions = [data];
|
|
|
+ } else {
|
|
|
+ this.organOptions = data.children.map(child => {
|
|
|
+ const { children, ...rest } = child;
|
|
|
+ return rest;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //设施
|
|
|
+ handleFacsNodeClick(data) {
|
|
|
+ this.FacsQueryParams.refArea = data.id
|
|
|
+ this.handleFacsQuery()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
/** 查询区域对象列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
listDetailArea(this.queryParams).then(response => {
|
|
|
this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
|
|
|
+ console.log(" this.areaList1", this.areaList)
|
|
|
this.areaList = this.extractTagNames(this.areaList);
|
|
|
+ console.log(" this.areaList2", this.areaList)
|
|
|
+ this.tableKey += 1; // 改变 key 值以强制重新渲染
|
|
|
// 将“全部”节点添加到区域列表的顶部
|
|
|
this.areaList.unshift(this.allAreaNode);
|
|
|
this.loading = false;
|
|
|
- this.activateFirstOrSecondNode();
|
|
|
+ this.Node();
|
|
|
});
|
|
|
},
|
|
|
- activateFirstOrSecondNode() {
|
|
|
+ Node() {
|
|
|
if (this.areaList.length > 0) {
|
|
|
this.handleNodeClick(this.areaList[0]);}
|
|
|
if (this.areaList[0].children && this.areaList[0].children.length > 1) {
|
|
|
this.handleNodeClick(this.areaList[0].children[1]);
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
// 递归提取 tagNames
|
|
|
extractTagNames(list) {
|
|
|
return list.map(item => {
|
|
|
@@ -370,6 +655,41 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ /** 查询部门列表 */
|
|
|
+ getDeptList() {
|
|
|
+ this.loading = true;
|
|
|
+ listDept(this.DeptQueryParams).then(response => {
|
|
|
+ this.deptList = this.handleTree(response.data, "deptId");
|
|
|
+ console.log(" this.deptList1 ",this.deptList)
|
|
|
+ this.deptList = this.extractTagNames(this.deptList);
|
|
|
+ console.log(" this.deptList2 ",this.deptList)
|
|
|
+ this.treeKey += 1; // 改变 key 值以强制重新渲染
|
|
|
+ this.loading = false;
|
|
|
+ // 将“全部”节点添加到区域列表的顶部
|
|
|
+ this.deptList.unshift(this.allDeptNode);
|
|
|
+ this.deptNode();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deptNode() {
|
|
|
+ if (this.deptList.length > 0) {
|
|
|
+ this.handleDeptNodeClick(this.deptList[0]);}
|
|
|
+ if (this.deptList[0].children && this.deptList[0].children.length > 1) {
|
|
|
+ this.handleDeptNodeClick(this.deptList[0].children[1]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 查询能源设施/系统列表 */
|
|
|
+ getFacsList() {
|
|
|
+ this.loading = true
|
|
|
+ listFacs(this.FacsQueryParams).then(response => {
|
|
|
+ this.facsList = response.rows
|
|
|
+ console.log(" this.facsList", this.facsList)
|
|
|
+ this.total = response.total
|
|
|
+ this.loading = false
|
|
|
+ // 确保在数据更新后更新 key
|
|
|
+ this.tableKey += 1;
|
|
|
+ })
|
|
|
+ },
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
this.open = false;
|
|
|
@@ -407,8 +727,22 @@ export default {
|
|
|
}// 确保 areaAttr 始终为一个空对象
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
+ this.queryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ areaCode: null, // 确保这里也重置areaCode
|
|
|
+ parentCode: null,
|
|
|
+ ancestors: null,
|
|
|
+ areaName: null,
|
|
|
+ shortName: null,
|
|
|
+ desc: null,
|
|
|
+ orderNum: null,
|
|
|
+ status: null,
|
|
|
+ tagNames:null,
|
|
|
+ areaAttr:{}
|
|
|
+ };
|
|
|
},
|
|
|
- /** 搜索按钮操作 */
|
|
|
+ /** 地理位置搜索按钮操作 */
|
|
|
handleQuery() {
|
|
|
this.loading = true;
|
|
|
listDetailArea(this.queryParams).then(response => {
|
|
|
@@ -439,16 +773,37 @@ export default {
|
|
|
}
|
|
|
return result;
|
|
|
},
|
|
|
-
|
|
|
- /** 重置按钮操作 */
|
|
|
+ /** 地理位置重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
this.resetForm("queryForm");
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
-
|
|
|
+ /** 组织机构搜索按钮操作 */
|
|
|
+ handleDeptQuery() {
|
|
|
+ this.getDeptList();
|
|
|
+ },
|
|
|
+ resetDeptQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleDeptQuery();
|
|
|
+ },
|
|
|
+ /** 设施搜索按钮操作 */
|
|
|
+ handleFacsQuery() {
|
|
|
+ this.FacsQueryParams.pageNum = 1
|
|
|
+ this.getFacsList()
|
|
|
+ },
|
|
|
+ resetFacsQuery() {
|
|
|
+ this.FacsQueryParams.refArea = null
|
|
|
+ this.resetForm('queryForm')
|
|
|
+ this.handleFacsQuery()
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id)
|
|
|
+ this.single = selection.length !== 1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
/**计量设备*/
|
|
|
handleDevice(row) {
|
|
|
-
|
|
|
this.queryParams.areaCode = row.areaCode;
|
|
|
if (row && row.ancestors) {
|
|
|
const ancestorsArray = row.ancestors.split(',');
|
|
|
@@ -460,10 +815,35 @@ export default {
|
|
|
this.MeterQueryParams.areaCode = row.areaCode;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- this.getMeterData();
|
|
|
this.dialogTitle = `计量设备 - ${row.areaName}`;
|
|
|
this.deviceDialogVisible = true;
|
|
|
+ this.getMeterData();
|
|
|
+ },
|
|
|
+ /**组织结构计量设备*/
|
|
|
+ handleDeptDevice(row) {
|
|
|
+ console.log("组织结构计量设备",row)
|
|
|
+ this.queryParams.areaCode = row.deptId;
|
|
|
+ if (row && row.ancestors) {
|
|
|
+ const ancestorsArray = row.ancestors.split(',');
|
|
|
+ if (ancestorsArray.length > 1) {
|
|
|
+ this.MeterQueryParams.areaCode= ancestorsArray[1];
|
|
|
+ } else if (ancestorsArray.length === 1) {
|
|
|
+ this.MeterQueryParams.areaCode = row.deptId;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dialogTitle = `计量设备 - ${row.deptName}`;
|
|
|
+ this.deviceDialogVisible = true;
|
|
|
+ this.getMeterData();
|
|
|
+ },
|
|
|
+ /**设施计量设备*/
|
|
|
+ handleFacsDevice(row) {
|
|
|
+ console.log("设施计量设备",row)
|
|
|
+ this.queryParams.areaCode = row.facsCode;
|
|
|
+ this.MeterQueryParams.areaCode = row.refArea;
|
|
|
+
|
|
|
+ this.dialogTitle = `计量设备 - ${row.facsName}`;
|
|
|
+ this.deviceDialogVisible = true;
|
|
|
+ this.getMeterData();
|
|
|
},
|
|
|
getMeterData() {
|
|
|
this.loading = true;
|
|
|
@@ -497,6 +877,9 @@ export default {
|
|
|
};
|
|
|
this.Bound.push(boundRow);
|
|
|
},
|
|
|
+ isAlreadyBound(deviceCode) {
|
|
|
+ return this.Bound.some(boundDevice => boundDevice.meterDevice === deviceCode);
|
|
|
+ },
|
|
|
/**取消绑定设备*/
|
|
|
downToDevice(row){
|
|
|
const index = this.Bound.indexOf(row);
|
|
|
@@ -548,7 +931,16 @@ export default {
|
|
|
this.$message.error('保存失败');
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+ facsCategoryChange() {
|
|
|
+ this.FacsQueryParams.facsSubCategory = ''
|
|
|
+ this.getSubCategorygetByCode()
|
|
|
+ this.handleFacsQuery()
|
|
|
+ },
|
|
|
+ getSubCategorygetByCode() {
|
|
|
+ getFacsCategorygetByCode(this.FacsQueryParams.facsCategory).then(response => {
|
|
|
+ this.facsSubCategoryOptions = response.data.subtypeList || []
|
|
|
+ })
|
|
|
+ },
|
|
|
getEmsTag(tagModel) {
|
|
|
console.log("tagModel", tagModel)
|
|
|
getEmsTag(tagModel).then(response => {
|
