|
|
@@ -89,8 +89,8 @@
|
|
|
@pagination="getList" />
|
|
|
|
|
|
<!-- 添加或修改能源设施/系统对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body >
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
|
|
|
<el-form-item label="归属区域" prop="refArea">
|
|
|
<treeselect v-model="form.refArea" :options="areaOptions" :show-count="true" placeholder="请选择归属园区" />
|
|
|
</el-form-item>
|
|
|
@@ -112,7 +112,7 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="设备模型" prop="facsModel">
|
|
|
- <el-select v-model="form.facsModel" style="width:100%">
|
|
|
+ <el-select v-model="form.facsModel" style="width:100%" @change="handleModelChange">
|
|
|
<el-option
|
|
|
v-for="item in modelList"
|
|
|
:label="item.modelName"
|
|
|
@@ -121,6 +121,56 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <!-- 这里可以展示属性名称和属性值 -->
|
|
|
+ <div v-if="attrList.length > 0" class="attr-list-container">
|
|
|
+ <h3 >模型属性:</h3>
|
|
|
+ <ul>
|
|
|
+ <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
|
|
|
+ <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}):</span>
|
|
|
+ <!-- 使用 el-input 组件允许用户编辑属性值 -->
|
|
|
+ <el-input
|
|
|
+ v-model="attrValuesMap[attr.attrKey]"
|
|
|
+ placeholder="点击编辑"
|
|
|
+ size="small"
|
|
|
+ @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
|
|
|
+
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
|
|
|
+ <el-form-item label="" prop="attrList" >
|
|
|
+ <el-table class="attr-table" v-loading="loading" :data="form.customAttrs" max-height="280px" key="'customAttrs'" >
|
|
|
+ <el-table-column label="标识" align="center" prop="attrKey">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input size="mini" v-model="scope.row.attrKey" placeholder="请输入标识" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="属性名" align="center" prop="attrName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input size="mini" v-model="scope.row.attrName" placeholder="请输入属性名" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="属性值" align="center" prop="attrValue" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input size="mini" v-model="scope.row.attrValue" placeholder="请输入属性值" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作">
|
|
|
+ <template slot="header">
|
|
|
+ <div class="operateBtns" @click="addCustomAttr" >
|
|
|
+ <span>添加</span><i class="el-icon-circle-plus-outline"></i>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i class="el-icon-delete" @click="deleteCustomAttr(scope.$index)"></i>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </h3>
|
|
|
|
|
|
<el-form-item label="启用状态" prop="enable">
|
|
|
<el-select v-model="form.enable" style="width:100%">
|
|
|
@@ -163,7 +213,6 @@
|
|
|
</div>
|
|
|
<div v-for="(item, index) in attrData" :key="index">
|
|
|
<p>属性名称:{{ item.attrName }}</p>
|
|
|
-<!-- <p>属性标识：{{ item.attrKey }}</p>-->
|
|
|
<p>属性值：{{ item.attrValue }}</p>
|
|
|
<p>属性单位：{{ item.attrUnit }}</p>
|
|
|
<!-- 在每个条目之后添加横线，除了最后一个条目 -->
|
|
|
@@ -219,13 +268,17 @@ import { areaTreeSelect } from '@/api/basecfg/area'
|
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
import {getModelByCode, listAllModel, listModel} from '@/api/basecfg/objModel'
|
|
|
-
|
|
|
+import {getObjAttr} from "@/api/basecfg/objAttribute";
|
|
|
+import { addAttrValueBatch, getAttrValue, listAttrValue} from "@/api/basecfg/objAttributeValue";
|
|
|
export default {
|
|
|
name: 'Facs',
|
|
|
- components: { Treeselect },
|
|
|
+ components: {Treeselect},
|
|
|
data() {
|
|
|
return {
|
|
|
- code:'',
|
|
|
+ attrList: [], // 属性模板数组
|
|
|
+ attrValues: [],
|
|
|
+ attrValuesMap: {},
|
|
|
+
|
|
|
showDrawer: false,
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
@@ -241,7 +294,7 @@ export default {
|
|
|
total: 0,
|
|
|
// 能源设施/系统表格数据
|
|
|
facsList: [],
|
|
|
- modelList:[],
|
|
|
+ modelList: [],
|
|
|
// 弹出层标题
|
|
|
title: '',
|
|
|
// 是否显示弹出层
|
|
|
@@ -258,8 +311,8 @@ export default {
|
|
|
facsCategoryOptions: undefined,
|
|
|
facsSubCategoryOptions: undefined,
|
|
|
enableOptions: [
|
|
|
- { code: 0, name: '关闭' },
|
|
|
- { code: 1, name: '启用' }
|
|
|
+ {code: 0, name: '关闭'},
|
|
|
+ {code: 1, name: '启用'}
|
|
|
],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
@@ -270,7 +323,8 @@ export default {
|
|
|
facsCategory: 'E',
|
|
|
facsSubCategory: null,
|
|
|
enable: null,
|
|
|
- refArea: null
|
|
|
+ refArea: null,
|
|
|
+ customAttrs: null
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {
|
|
|
@@ -279,21 +333,23 @@ export default {
|
|
|
facsName: null,
|
|
|
facsCategory: null,
|
|
|
facsSubCategory: null,
|
|
|
- facsModel:null,
|
|
|
+ facsModel: null,
|
|
|
enable: null,
|
|
|
refArea: null,
|
|
|
createTime: null,
|
|
|
- updateTime: null
|
|
|
+ updateTime: null,
|
|
|
+ customAttrs: [] // 自定义属性数组
|
|
|
},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
- facsCode: [{ required: true, message: '设施代码不能为空', trigger: 'blur' }],
|
|
|
- facsName: [{ required: true, message: '设施名称不能为空', trigger: 'blur' }],
|
|
|
- facsCategory: [{ required: true, message: '设施分类不能为空', trigger: 'change' }],
|
|
|
- refArea: [{ required: true, message: '归属区域代码不能为空', trigger: 'blur' }]
|
|
|
+ facsCode: [{required: true, message: '设施代码不能为空', trigger: 'blur'}],
|
|
|
+ facsName: [{required: true, message: '设施名称不能为空', trigger: 'blur'}],
|
|
|
+ facsCategory: [{required: true, message: '设施分类不能为空', trigger: 'change'}],
|
|
|
+ refArea: [{required: true, message: '归属区域代码不能为空', trigger: 'blur'}]
|
|
|
},
|
|
|
curRow: {},
|
|
|
attrData: [],
|
|
|
+ attrUnits:[],
|
|
|
abilityData: [],
|
|
|
eventData: [],
|
|
|
attrForm: {
|
|
|
@@ -328,7 +384,8 @@ export default {
|
|
|
// 根据名称筛选区域树
|
|
|
areaName(val) {
|
|
|
this.$refs.tree.filter(val);
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
created() {
|
|
|
this.getList()
|
|
|
@@ -336,6 +393,11 @@ export default {
|
|
|
this.getAllFacsCategory()
|
|
|
this.getSubCategorygetByCode()
|
|
|
this.getFacsModel()
|
|
|
+ this.$set(this.form, 'customAttrs', []);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
/** 查询能源设施/系统列表 */
|
|
|
@@ -386,12 +448,62 @@ export default {
|
|
|
const id = row.id || this.ids
|
|
|
getFacs(id).then(response => {
|
|
|
this.form = response.data
|
|
|
+ console.log('修改按钮展示的数据', this.form)
|
|
|
this.open = true
|
|
|
this.title = '修改能源设施'
|
|
|
+ // 获取自定义属性值
|
|
|
})
|
|
|
},
|
|
|
- /** 提交按钮 */
|
|
|
+ /** 提交按钮 */
|
|
|
submitForm() {
|
|
|
+ // 重置 attrList 和 form.customAttrs
|
|
|
+ if (!this.attrList) {
|
|
|
+ this.attrList = [];
|
|
|
+ }
|
|
|
+ if (!this.form.customAttrs) {
|
|
|
+ this.form.customAttrs = [];
|
|
|
+ }
|
|
|
+ // 准备要发送的数据
|
|
|
+ let dataToSubmit = [];
|
|
|
+ // 添加模型属性数据
|
|
|
+ this.attrList.forEach(attr => {
|
|
|
+ const attrName=attr.attrName;
|
|
|
+ const attrKey = attr.attrKey;
|
|
|
+ const attrValue = this.attrValuesMap[attrKey];
|
|
|
+ const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey);
|
|
|
+ if (existingIndex === -1) {
|
|
|
+ // 如果attrKey不存在于dataToSubmit中，则添加
|
|
|
+ dataToSubmit.push({
|
|
|
+ modelCode: this.form.facsModel, // 这里填写模型代码
|
|
|
+ objCode: this.form.facsCode, // 这里填写设备代码
|
|
|
+ objType: 1, // 这里填写对象类型
|
|
|
+ attrKey: attrKey,
|
|
|
+ attrValue: attrValue,
|
|
|
+ attrName: attrName
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加自定义属性数据
|
|
|
+ this.form.customAttrs.forEach(customAttr => {
|
|
|
+ const attrName= customAttr.attrName;
|
|
|
+ const attrKey = customAttr.attrKey;
|
|
|
+ const attrValue = customAttr.attrValue;
|
|
|
+ const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey);
|
|
|
+ if (existingIndex === -1) {
|
|
|
+ // 如果attrKey不存在于dataToSubmit中，则添加
|
|
|
+ dataToSubmit.push({
|
|
|
+ modelCode: '', // 这里填写模型代码
|
|
|
+ objCode: this.form.facsCode, // 这里填写设备代码
|
|
|
+ objType: 1, // 这里填写对象类型
|
|
|
+ attrKey: attrKey,
|
|
|
+ attrValue: attrValue,
|
|
|
+ attrName:attrName
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
this.$refs['form'].validate(valid => {
|
|
|
if (valid) {
|
|
|
if (this.form.id != null) {
|
|
|
@@ -399,13 +511,51 @@ export default {
|
|
|
this.$modal.msgSuccess('修改成功')
|
|
|
this.open = false
|
|
|
this.getList()
|
|
|
- })
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('修改失败:', error);
|
|
|
+ this.$message.error('修改失败');
|
|
|
+ });
|
|
|
+
|
|
|
+ if (dataToSubmit.length > 0) {
|
|
|
+ addAttrValueBatch(dataToSubmit)
|
|
|
+ .then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('属性添加成功');
|
|
|
+ } else {
|
|
|
+ this.$message.error('属性添加失败');
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('属性添加失败:', error);
|
|
|
+ this.$message.error('属性添加失败');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // this.$message.info('没有属性需要添加');
|
|
|
+ }
|
|
|
} else {
|
|
|
addFacs(this.form).then(response => {
|
|
|
this.$modal.msgSuccess('新增成功')
|
|
|
this.open = false
|
|
|
this.getList()
|
|
|
- })
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('新增失败:', error);
|
|
|
+ this.$message.error('新增失败');
|
|
|
+ });
|
|
|
+
|
|
|
+ if (dataToSubmit.length > 0) {
|
|
|
+ addAttrValueBatch(dataToSubmit)
|
|
|
+ .then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('属性添加成功');
|
|
|
+ } else {
|
|
|
+ this.$message.error('属性添加失败');
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('属性添加失败:', error);
|
|
|
+ this.$message.error('属性添加失败');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // this.$message.info('没有属性需要添加');
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -413,17 +563,33 @@ export default {
|
|
|
// 设配详情
|
|
|
handleDetail(row) {
|
|
|
this.showDrawer = true
|
|
|
- this.curRow= row
|
|
|
- console.log("data",this.curRow)
|
|
|
+ this.curRow = row
|
|
|
+ console.log("data", this.curRow)
|
|
|
this.subKey = this.$options.data().subKey
|
|
|
getModelByCode(this.curRow.facsModel).then(response => {
|
|
|
- const code=response.data
|
|
|
- console.log("code",code)
|
|
|
- this.attrData=response.data.attrList
|
|
|
- this.eventData=response.data.eventList
|
|
|
- this.abilityData=response.data.abilityList
|
|
|
+ const code = response.data
|
|
|
+ console.log("code", code)
|
|
|
+ this.eventData = response.data.eventList
|
|
|
+ this.abilityData = response.data.abilityList
|
|
|
|
|
|
})
|
|
|
+
|
|
|
+ getObjAttr(1, this.curRow.facsCode).then(response => {
|
|
|
+ console.log("response值", response.data);
|
|
|
+ const attrs = response.data.attrs;
|
|
|
+ const attrValues = response.data.attrValues;
|
|
|
+
|
|
|
+ // 合并 attrs 和 attrValues 数组
|
|
|
+ const mergedData = attrValues.map(attrValue => {
|
|
|
+ const attr = attrs.find(a => a.attrKey === attrValue.attrKey);
|
|
|
+ return {
|
|
|
+ ...attrValue,
|
|
|
+ attrName: attr ? attr.attrName : attrValue.attrName,
|
|
|
+ attrUnit: attr ? attr.attrUnit : ''
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.attrData = mergedData;
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
/** 删除按钮操作 */
|
|
|
@@ -431,14 +597,15 @@ export default {
|
|
|
const ids = row.id || this.ids
|
|
|
this.$modal
|
|
|
.confirm('是否确认删除能源设施编号为"' + ids + '"的数据项？')
|
|
|
- .then(function() {
|
|
|
+ .then(function () {
|
|
|
return delFacs(ids)
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.getList()
|
|
|
this.$modal.msgSuccess('删除成功')
|
|
|
})
|
|
|
- .catch(() => {})
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
},
|
|
|
/** 导出按钮操作 */
|
|
|
handleExport() {
|
|
|
@@ -472,40 +639,108 @@ export default {
|
|
|
this.facsCategoryOptions = response.data
|
|
|
})
|
|
|
},
|
|
|
- getSubCategorygetByCode () {
|
|
|
+ getSubCategorygetByCode() {
|
|
|
getFacsCategorygetByCode(this.queryParams.facsCategory).then(response => {
|
|
|
- this.facsSubCategoryOptions = response.data.subtypeList||[];
|
|
|
+ this.facsSubCategoryOptions = response.data.subtypeList || [];
|
|
|
})
|
|
|
},
|
|
|
- facsCategoryChange () {
|
|
|
+ facsCategoryChange() {
|
|
|
this.queryParams.facsSubCategory = ''
|
|
|
this.getSubCategorygetByCode()
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
- getFacsModel(){
|
|
|
- listAllModel(1).then(response => {
|
|
|
- this.modelList = response.data;
|
|
|
- console.log("ListAllmodel",this.modelList)
|
|
|
|
|
|
+
|
|
|
+ /**自定义属性表格*/
|
|
|
+ addCustomAttr() {
|
|
|
+ // 添加一个新的自定义属性
|
|
|
+ if (!Array.isArray(this.form.customAttrs)) {
|
|
|
+ this.form.customAttrs = [];
|
|
|
+ }
|
|
|
+ this.form.customAttrs.push({
|
|
|
+ attrKey: '',
|
|
|
+ attrName: '',
|
|
|
+ attrValue: ''
|
|
|
+ });
|
|
|
+ // 强制更新视图
|
|
|
+ this.$forceUpdate();
|
|
|
+
|
|
|
+ },
|
|
|
+ deleteCustomAttr(index) {
|
|
|
+ // 删除指定索引的自定义属性
|
|
|
+ if (this.form.customAttrs.length > 0) {
|
|
|
+ this.form.customAttrs.splice(index, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**模型属性*/
|
|
|
+ updateAttrValue(attrKey, newValue) {
|
|
|
+ this.attrValuesMap[attrKey] = newValue;
|
|
|
+ },
|
|
|
+
|
|
|
+ getFacsModel() {
|
|
|
+ listAllModel(1).then(response => {
|
|
|
+ this.modelList = response.data;
|
|
|
+ this.modelList.forEach(model => {
|
|
|
+ console.log(model.modelCode);
|
|
|
});
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleModelChange(modelCode) {
|
|
|
+ console.log("新增的界面进入",modelCode)
|
|
|
+ if (modelCode) {
|
|
|
+ this.getModelByCode(modelCode);
|
|
|
+ console.log("新增的界面进入",this.form.facsCode)
|
|
|
+ this.getObjAttr(1, this.form.facsCode);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ getModelByCode(modelCode) {
|
|
|
+ getModelByCode(modelCode).then(response => {
|
|
|
+ // this.attrList = response.data.attrList;
|
|
|
+ const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0);
|
|
|
+ this.attrList = filteredAttrList;
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getObjAttr(objType, facsCode) {
|
|
|
+ getObjAttr(objType, facsCode).then(response => {
|
|
|
+ // const attrs = response.data.attrs;
|
|
|
+ const attrs = response.data.attrs.filter(attr => attr.attrType === 0);
|
|
|
+ console.log("attrs", attrs);
|
|
|
+ const attrValues = response.data.attrValues || []; // 确保是一个数组
|
|
|
+ console.log("attrValues", attrValues);
|
|
|
+
|
|
|
+ // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
|
|
|
+ const attrValuesMap = {};
|
|
|
+
|
|
|
+ // 遍历 attrs 数组
|
|
|
+ attrs.forEach(attr => {
|
|
|
+ // 查找 attrValues 数组中是否有匹配的 attrKey
|
|
|
+ const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey);
|
|
|
+ // 如果找到匹配的 attrValue，更新 attrValuesMap
|
|
|
+ if (attrValueObj) {
|
|
|
+ attrValuesMap[attr.attrKey] = attrValueObj.attrValue;
|
|
|
+ } else {
|
|
|
+ // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
|
|
|
+ attrValuesMap[attr.attrKey] = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新 attrValuesMap 到组件的数据中
|
|
|
+ this.attrValuesMap = attrValuesMap;
|
|
|
+ // 打印更新后的 attrValuesMap，用于调试
|
|
|
+ console.log("Updated attrValuesMap", this.attrValuesMap);
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+}
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.sub-table {
|
|
|
- .el-icon-delete {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .operateBtns {
|
|
|
- cursor: pointer;
|
|
|
- i {
|
|
|
- color: #1990ff;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
.drawer-content {
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
@@ -520,4 +755,25 @@ export default {
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
}
|
|
|
|
|
|
+.attr-list-container {
|
|
|
+ border: 1px solid #ccc; /* 给ul添加外框 */
|
|
|
+ padding: 10px; /* 内边距 */
|
|
|
+ margin: 10px 0; /* 外边距 */
|
|
|
+ font-weight: bold; /* 加粗标题 */
|
|
|
+}
|
|
|
+
|
|
|
+.attr-list-container h3 {
|
|
|
+ font-weight: bold; /* 加粗标题 */
|
|
|
+}
|
|
|
+
|
|
|
+.attr-item {
|
|
|
+ list-style-type: none; /* 移除列表项前的默认符号 */
|
|
|
+ margin-bottom: 5px; /* 列表项之间的间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.attr-name {
|
|
|
+ font-weight: bold; /* 加粗属性名称 */
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
