|
@@ -22,10 +22,16 @@
|
|
|
<el-autocomplete v-model="queryParams.objName" placeholder="请输入对象名称" clearable
|
|
|
:fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="创建时间" prop="recordTime">
|
|
|
- <el-date-picker clearable v-model="queryParams.recordTime" type="date" value-format="yyyy-MM-dd"
|
|
|
- placeholder="请选择日期">
|
|
|
- </el-date-picker>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.recordTimeRange"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="维护标题" prop="maintainTitle">
|
|
|
<el-input v-model="queryParams.maintainTitle" placeholder="请输入维护标题" clearable
|
|
@@ -40,7 +46,6 @@
|
|
|
<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"
|
|
@@ -57,13 +62,11 @@
|
|
|
|
|
|
<el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="园区编号" align="center" prop="areaCode" />
|
|
|
<el-table-column label="记录编号" align="center" prop="recordCode" />
|
|
|
<el-table-column label="目标对象" align="center" prop="objName">
|
|
|
<template slot-scope="scope">
|
|
|
- <span v-if="scope.row.objType">({{ dict.type.device_type[scope.row.objType].label }}) {{
|
|
|
- scope.row.objName
|
|
|
- }}</span>
|
|
|
- <span v-else>({{ dict.type.device_type[scope.row.objType].label }}){{ scope.row.objName }}</span>
|
|
|
+ {{ scope.row.objName }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="安装位置" align="center" prop="insLocation" />
|
|
@@ -90,22 +93,22 @@
|
|
|
<!-- 查看设备台账对话框 -->
|
|
|
<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="areaCode">
|
|
|
+ <el-select v-model="form.areaCode">
|
|
|
+ <el-option v-for="item in areaOptionsForSelect" :label="item.label" :value="item.id" :key="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="记录编号" prop="recordCode">
|
|
|
<el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="对象类型">
|
|
|
<el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions" :disabled="isViewOnly">
|
|
|
- <!-- <el-option v-for = "item in objTypeOptions"-->
|
|
|
- <!-- :label="item.name"-->
|
|
|
- <!-- :value="item.code"-->
|
|
|
- <!-- :key="item.code" />-->
|
|
|
- <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label"
|
|
|
+ <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label"
|
|
|
:value="dict.value"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label=" " prop="objCode" v-if="showObjCode">
|
|
|
- <el-cascader v-model="form.objCode" :options="AllCode" placeholder="请选择具体数据" @change="handleSelect"
|
|
|
- :props="{ value: 'value', label: 'label', children: 'children' }" :disabled="isViewOnly"></el-cascader>
|
|
|
+ <el-form-item label=" " prop="objCode">
|
|
|
+ <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据" @select="handleSelect"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="创建时间" prop="recordTime">
|
|
|
<el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
|
|
@@ -148,6 +151,11 @@
|
|
|
<!-- 添加或修改设备台账对话框 -->
|
|
|
<el-dialog :title="title" :visible.sync="addOrUpdateOpen" width="500px" append-to-body>
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="园区编码" prop="areaCode">
|
|
|
+ <el-select v-model="form.areaCode">
|
|
|
+ <el-option v-for="item in areaOptionsForSelect" :label="item.label" :value="item.id" :key="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="记录编号" prop="recordCode">
|
|
|
<el-input v-model="form.recordCode" placeholder="请输入记录编号" />
|
|
|
</el-form-item>
|
|
@@ -157,9 +165,8 @@
|
|
|
:value="dict.value"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label=" " prop="objCode" v-if="showObjCode">
|
|
|
- <el-cascader v-model="form.objCode" :options="AllCode" placeholder="请选择具体数据" @change="handleSelect"
|
|
|
- :props="{ value: 'value', label: 'label', children: 'children' }"></el-cascader>
|
|
|
+ <el-form-item label=" " prop="objCode">
|
|
|
+ <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据" @select="handleSelect"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="创建时间" prop="recordTime">
|
|
|
<el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
|
|
@@ -200,7 +207,7 @@ import Treeselect from '@riophae/vue-treeselect'
|
|
|
export default {
|
|
|
name: 'Rbook',
|
|
|
components: {Treeselect},
|
|
|
- dicts: ['device_type'],
|
|
|
+ dicts: ['device_type'],
|
|
|
data () {
|
|
|
return {
|
|
|
isViewOnly: false, // 添加这个标志变量
|
|
@@ -218,6 +225,7 @@ export default {
|
|
|
total: 0,
|
|
|
// 设备台账表格数据
|
|
|
rbookList: [],
|
|
|
+ areaOptionsForSelect:[],
|
|
|
// 弹出层标题
|
|
|
title: '',
|
|
|
// 是否显示弹出层
|
|
@@ -247,18 +255,21 @@ export default {
|
|
|
areaCode: ''
|
|
|
},
|
|
|
queryFacsParams: {
|
|
|
- areaCode: ''
|
|
|
+ areaCode: '',
|
|
|
+ objType: null,
|
|
|
},
|
|
|
-
|
|
|
- objTypeOptions: [
|
|
|
- {code: 1, name: '设施'},
|
|
|
- {code: 0, name: '设备'},
|
|
|
+ objTypeOptiOns:[
|
|
|
+ {code: '1', name: '区域'},
|
|
|
+ {code: '2', name: '设备'},
|
|
|
+ {code: '3', name: '设施'}
|
|
|
],
|
|
|
-
|
|
|
- // 表单参数
|
|
|
+ // 表单参数
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
+ areaCode: [
|
|
|
+ {required: true, message: '园区编号不能为空', trigger: 'blur'}
|
|
|
+ ],
|
|
|
recordCode: [
|
|
|
{required: true, message: '记录编号不能为空', trigger: 'blur'}
|
|
|
],
|
|
@@ -279,8 +290,11 @@ export default {
|
|
|
},
|
|
|
async created () {
|
|
|
await this.getAreaTreeByTag('0', false)
|
|
|
- this.getList()
|
|
|
+ // 确保默认选中第一个Tab,并设置 queryParams.objType
|
|
|
+ this.queryParams.objType = this.dict.type.device_type[0].value;
|
|
|
+ this.getList(true); // 调用 getList 并传递一个参数来强制刷新
|
|
|
},
|
|
|
+
|
|
|
// 当对象类型有值时,显示对象代码输入框
|
|
|
watch: {
|
|
|
'form.objType' (newVal) {
|
|
@@ -289,19 +303,24 @@ export default {
|
|
|
// 根据名称筛选区域树
|
|
|
areaName (val) {
|
|
|
this.$refs.tree.filter(val)
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
/** 查询设备台账列表 */
|
|
|
- getList () {
|
|
|
+ getList(refresh = false) {
|
|
|
+ if (refresh) {
|
|
|
+ // 强制刷新时重置页码
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ }
|
|
|
this.loading = true
|
|
|
listRbook(this.queryParams).then(response => {
|
|
|
- console.log('设备台账搜索参数!!!!!', this.queryParams)
|
|
|
+ console.log('设备台账搜索参数!!!!!', this.queryParams)
|
|
|
this.rbookList = response.rows
|
|
|
this.total = response.total
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
/** 查询区域树结构 */
|
|
|
async getAreaTreeByTag(areaCode, recursion) {
|
|
|
await areaTreeSelect(areaCode, recursion).then(response => {
|
|
@@ -310,7 +329,10 @@ export default {
|
|
|
label: '全部',
|
|
|
children: []
|
|
|
}].concat(response.data)
|
|
|
- this.queryParams.areaCode = '-1'
|
|
|
+ this.form.areaCode = '-1'
|
|
|
+ // 创建一个新的数组仅包含“全部”下的前三个子项
|
|
|
+ this.areaOptionsForSelect = response.data.slice(0, 3);
|
|
|
+
|
|
|
})
|
|
|
},
|
|
|
// 筛选节点
|
|
@@ -319,7 +341,8 @@ export default {
|
|
|
return data.label.indexOf(value) !== -1
|
|
|
},
|
|
|
handleNodeClick (data, node) {
|
|
|
- this.queryParams.areaCode = data.id
|
|
|
+ this.form.areaCode = data.id
|
|
|
+ console.log('Selected areaCode:', this.form.areaCode);
|
|
|
this.getList()
|
|
|
},
|
|
|
// 取消按钮
|
|
@@ -374,127 +397,70 @@ export default {
|
|
|
this.single = selection.length !== 1
|
|
|
this.multiple = !selection.length
|
|
|
},
|
|
|
+ getAreaLabelById(id) {
|
|
|
+ const item = this.areaOptions.find(item => item.id === id);
|
|
|
+ return item ? item.label : 'default';
|
|
|
+ },
|
|
|
|
|
|
- /**对象类型*/
|
|
|
changeObjOptions (objType) {
|
|
|
- if (objType == 1) {
|
|
|
- this.queryFacsParams.areaCode = this.areaCode
|
|
|
- // 设施
|
|
|
- listAllFacs(this.queryFacsParams).then(response => {
|
|
|
- this.objCodeOptions = response.data
|
|
|
- console.log('设施多少数据!!!', this.objCodeOptions)
|
|
|
- this.AllCode = this.objCodeOptions.map(item => ({
|
|
|
- value: item.facsCode,
|
|
|
- label: item.facsName
|
|
|
- }))
|
|
|
+ console.log("objType",objType)
|
|
|
+ if (objType === '1') {
|
|
|
+ // 区域逻辑
|
|
|
+ areaTreeSelect(this.form.areaCode, true).then(response => {
|
|
|
+ this.objCodeOptions = [{
|
|
|
+ id: this.form.areaCode,
|
|
|
+ label: this.getAreaLabelById(this.form.areaCode),
|
|
|
+ children: response.data
|
|
|
+ }]
|
|
|
+ console.log("this.objCodeOptions ",this.objCodeOptions )
|
|
|
})
|
|
|
- } else if (objType == 0) {
|
|
|
- // 设备
|
|
|
- devTreeByFacs(this.areaCode).then(response => {
|
|
|
+ } else if (objType === '2') {
|
|
|
+ // 设备逻辑
|
|
|
+ areaTreeSelect(this.form.areaCode, true).then(response => {
|
|
|
+ this.objCodeOptions = [{
|
|
|
+ id: this.form.areaCode,
|
|
|
+ label: this.getAreaLabelById(this.form.areaCode),
|
|
|
+ children: response.data
|
|
|
+ }]
|
|
|
+ console.log("this.objCodeOptions ",this.objCodeOptions )
|
|
|
+ })
|
|
|
+ } else if (objType === '3') {
|
|
|
+ // 设施逻辑
|
|
|
+ const devcCategory = 'Z';
|
|
|
+ devTreeByFacs(this.form.areaCode, devcCategory).then(response => {
|
|
|
this.objCodeOptions = response.data
|
|
|
- console.log('设备多少数据!!!', this.objCodeOptions)
|
|
|
- this.AllCode = this.buildTree(this.objCodeOptions)
|
|
|
-
|
|
|
+ console.log("this.objCodeOptions ",this.objCodeOptions )
|
|
|
})
|
|
|
-
|
|
|
}
|
|
|
},
|
|
|
- buildTree (data) {
|
|
|
- return data.map(item => {
|
|
|
- const node = {
|
|
|
- value: item.id,
|
|
|
- label: item.label,
|
|
|
- children: item.children ? this.buildTree(item.children) : undefined
|
|
|
- }
|
|
|
- return node
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
/** 数据自动填补*/
|
|
|
handleSelect (value) {
|
|
|
+ console.log("数据自动填补", value);
|
|
|
+ if (value && value.id && value.label) {
|
|
|
+ // 将 label 值填入“目标对象”输入框
|
|
|
+ this.form.objName = value.label;
|
|
|
+ // 找到选中的id所在的层级路径,并以"/"连接
|
|
|
+ const pathLabels = this.findPathLabel(this.objCodeOptions, value.id);
|
|
|
+ if (pathLabels) {
|
|
|
+ this.form.insLocation = pathLabels.join('/');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- // 检查 value 是否为数组
|
|
|
- if (Array.isArray(value)) {
|
|
|
- // 检查数组是否至少有一个元素,并且第一个元素的首字母是否为字母
|
|
|
- if (value.length > 0 && /^[a-zA-Z]/.test(value[0][0])) {
|
|
|
- this.queryFacsParams.areaCode = this.areaCode
|
|
|
-
|
|
|
- // 获取能源设施所有信息
|
|
|
- listAllFacs(this.queryFacsParams).then(response => {
|
|
|
- const data = response.data
|
|
|
- console.log('data', data)
|
|
|
- // 循环输出
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- if (value.includes(data[i].facsCode)) {
|
|
|
- this.form.objName = data[i].facsName
|
|
|
- this.form.insLocation = data[i].refAreaName
|
|
|
- console.log('设施名字', this.form.objName)
|
|
|
- console.log('设施地址', this.form.insLocation)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- } else if (value.length > 0) {
|
|
|
- // 获取能源设备所有信息
|
|
|
- devTreeByFacs(this.areaCode).then(response => {
|
|
|
- const data = response.data
|
|
|
- console.log('data', data)
|
|
|
-
|
|
|
- function findDeviceById (data, path = [], ids) {
|
|
|
- for (const item of data) {
|
|
|
- const currentPath = [...path, {label: item.label, tier: item.tier}]
|
|
|
- if (ids.includes(item.id)) {
|
|
|
- // 找到 tier 为 'Device' 的层级,并获取最后一个“-”后面的数据
|
|
|
- const deviceTierIndex = currentPath.findIndex(p => p.tier === 'Device')
|
|
|
- let lastSegment = ''
|
|
|
- let deviceLabel = ''
|
|
|
- if (deviceTierIndex !== -1) {
|
|
|
- deviceLabel = currentPath[deviceTierIndex].label
|
|
|
- lastSegment = deviceLabel.split('-').pop()
|
|
|
- }
|
|
|
- return {labels: currentPath, lastSegment, deviceLabel, found: true}
|
|
|
- }
|
|
|
- if (item.children && item.children.length) {
|
|
|
- const result = findDeviceById(item.children, currentPath, ids)
|
|
|
- if (result.found) {
|
|
|
- return result
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return {labels: [], lastSegment: null, deviceLabel: '', found: false}
|
|
|
- }
|
|
|
-
|
|
|
- let lastResult = {labels: [], lastSegment: null, deviceLabel: '', found: false}
|
|
|
- value.forEach(id => {
|
|
|
- const result = findDeviceById(data, [], [id])
|
|
|
- if (result.found) {
|
|
|
- lastResult = result
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- if (lastResult.found) {
|
|
|
- // 构建 insLocation 和 objName
|
|
|
- let insLocationParts = [lastResult.labels[0].label] // 第一层的 label
|
|
|
- if (lastResult.deviceLabel) {
|
|
|
- let deviceLabelParts = lastResult.deviceLabel.split('-')
|
|
|
- deviceLabelParts.pop() // 移除最后一个“-”后面的数据
|
|
|
- insLocationParts = insLocationParts.concat(deviceLabelParts.join('-'))
|
|
|
- }
|
|
|
-
|
|
|
- this.form.insLocation = insLocationParts.join(' / ')
|
|
|
- this.form.objName = lastResult.lastSegment
|
|
|
- console.log('设备名字', this.form.objName)
|
|
|
- console.log('设备地址', this.form.insLocation)
|
|
|
- } else {
|
|
|
- console.log('没有找到匹配的设备')
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- console.log('value 为空数组或不满足条件')
|
|
|
+// 递归函数,用于找到id所在的层级路径,并返回路径上的label数组
|
|
|
+ findPathLabel (options, id, path = []) {
|
|
|
+ for (let i = 0; i < options.length; i++) {
|
|
|
+ const option = options[i];
|
|
|
+ if (option.id === id) {
|
|
|
+ return path.concat(option.label);
|
|
|
+ } else if (option.children && option.children.length > 0) {
|
|
|
+ const foundLabels = this.findPathLabel(option.children, id, path.concat(option.label));
|
|
|
+ if (foundLabels) {
|
|
|
+ return foundLabels;
|
|
|
+ }
|
|
|
}
|
|
|
- } else {
|
|
|
- console.log('value 不是数组')
|
|
|
}
|
|
|
+ return null;
|
|
|
},
|
|
|
|
|
|
/**编辑按钮操作*/
|
|
@@ -503,11 +469,12 @@ export default {
|
|
|
this.title = '编辑设备台账'
|
|
|
},
|
|
|
|
|
|
- // /** 新增按钮操作 */
|
|
|
+ /** 新增按钮操作 */
|
|
|
handleAdd () {
|
|
|
this.reset()
|
|
|
this.addOrUpdateOpen = true
|
|
|
this.title = '添加设备台账'
|
|
|
+
|
|
|
},
|
|
|
/**查看按钮*/
|
|
|
handleViewRec (row) {
|
|
@@ -522,11 +489,6 @@ export default {
|
|
|
this.open = true
|
|
|
this.title = '查看设备台账'
|
|
|
this.isViewOnly = true // 设置为查看模式
|
|
|
- // if (this.form.objType === 1) {
|
|
|
- // this.form.objType = "设施";
|
|
|
- // } else if (this.form.objType === 0) {
|
|
|
- // this.form.objType = "设备";
|
|
|
- // }
|
|
|
})
|
|
|
},
|
|
|
/** 提交按钮 */
|