<template> <div id="equipRules"> <!-- 查询条件 --> <div class="query-area"> <el-row> <el-col :span="22"> <el-form ref="form" :model="form" :inline="true"> <el-row> <div class="query-item special"> <el-input :placeholder="`请输入${typeName}标识关键字`" v-model="form.EquipmentMark" @keyup.enter.native="queryTableData"> <i slot="suffix" class="el-input__icon el-icon-search" @click="queryTableData"></i> </el-input> </div> <div class="query-item"> <label style="padding-right:9px">数据源</label> <dataSource :Related="null" @change="changeDataSource" :typeName="typeName"></dataSource> </div> <div class="query-item"> <dictionary-device @change="changeDictionary" :Related="null" :typeName="typeName"></dictionary-device> </div> <div class="query-item"> <label style="padding-right:9px">位置标签</label> <locationFlag :Related="null" @change="changeLocationFlag" :typeName="typeName"></locationFlag> </div> </el-row> </el-form> </el-col> <el-col :span="2"> <el-tooltip class="item" effect="dark" :content="`填充${typeName}标识与实例对应规则`" placement="left"> <el-button size="small" type="primary" @click="toAddRelation" icon="el-icon-edit-outline" style="float:right;margin-left:10px;" :disabled="isPending"></el-button> </el-tooltip> <el-tooltip class="item" effect="dark" :content="`根据${typeName}标识自动填充实例`" placement="left"> <el-button size="small" type="primary" @click="autoGroupRela" :icon="autoLoading?'iconfont icon-jiazai':'iconfont icon-zidong'" style="float:right;padding:7px 14px;width:44px;margin-left:0;" :disabled="autoLoading"></el-button> </el-tooltip> </el-col> </el-row> </div> <el-row> <el-col :span="12" style="margin-left:-5px;font-size:13px;"> <span class="iconfont icon-juxing"></span> 点位表中出现的所有{{typeName}}</el-col> <el-col :span="12" style="font-size:13px;"> <span class="iconfont icon-juxing"></span> 对应物理世界中的{{typeName}}实例</el-col> </el-row> <!-- 列表区域 --> <div class="table-area"> <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle"> <el-table-column prop="EquipmentMark" :label="`${typeName}标识`" show-overflow-tooltip min-width="100"></el-table-column> <el-table-column prop="LocationFlag" label="位置标签" min-width="200"> <template slot-scope="scope"> <el-tooltip :content="scope.row.LocationFlag.toString()" placement="top"> <div class="tool-tip">{{scope.row.LocationFlag.toString()}}</div> </el-tooltip> </template> </el-table-column> <el-table-column prop="Datasource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column> <el-table-column prop="SubTypeName" :label="`${typeName}类型`" show-overflow-tooltip min-width="100"></el-table-column> <el-table-column prop="ObjectLocalName" :label="`${typeName}实例`" show-overflow-tooltip min-width="400" class-name="td-bl"></el-table-column> <!-- <el-table-column label="所在建筑楼层" min-width="100"> <template slot-scope="scope"> <el-tooltip :content="scope.row.BuildLocalName?scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:scope.row.BuildLocalName:''" placement="top"> <div class="tool-tip">{{scope.row.BuildLocalName?scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:scope.row.BuildLocalName:''}} </div> </el-tooltip> </template> </el-table-column> <el-table-column prop="RoomLocalName" label="所在业务空间" show-overflow-tooltip min-width="100"></el-table-column> <el-table-column prop="CascadeEquipLocalName" label="所属设备实例" show-overflow-tooltip min-width="100"></el-table-column> --> <el-table-column prop="action" label="操作" min-width="100"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" content="清除对应规则" placement="left"> <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain :disabled="isPending||scope.row.Related=='False'" icon="el-icon-delete"></el-button> </el-tooltip> </template> </el-table-column> </el-table> </div> <!-- 分页 --> <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination> <!-- 清除对应关系弹窗 --> <del-relation-dialog ref="del" @refresh="refresh" :typeName="'system'"></del-relation-dialog> </div> </template> <script> import tools from "@/utils/tools"; import { mapGetters, mapActions } from "vuex"; import applyRulesDialog from "@/components/point/dynamicdata/applyRulesDialog"; import delRelationDialog from "@/components/point/dynamicdata/delRelationDialog"; import dictionaryDevice from "@/components/point/dynamicdata/dictionaryDevice"; import dataSource from "@/components/point/dynamicdata/dataSource"; import locationFlag from "@/components/point/dynamicdata/locationFlag"; import equipRules from "@/components/point/dynamicdata/equipRules"; import { dynamicClashConfirm, dynamicExecute, dynamicQuery, dynamicQueryPoint, dynamicPointTypeList, queryLinkSys, //数据中心系统查询 } from "@/api/scan/request"; export default { computed: { ...mapGetters("layout", ["projectId"]) }, data() { return { headerStyle: { backgroundColor: '#e1e4e5', color: '#2b2b2b', lineHeight: '30px' }, sourceList: [], //数据源 DynEquipList: [], //数据字典部件类型 LocFlagList: [], //位置标签 tableData: [], //列表数据 page: { pageSize: 50, pageSizes: [10, 20, 50, 100], pageNumber: 1, total: 0 }, form: { EquipmentMark: "", //部件标识关键字 SubTypeName: [], //数据字典部件类型 LocationFlag: [], //位置标签 Datasource: [] //数据源 }, //查询条件 loading: false, //列表loading autoLoading: false, //自动对应实例 }; }, components: { applyRulesDialog, delRelationDialog, dictionaryDevice, dataSource, locationFlag }, props: { typeName: {}, isPending: { default: false } }, created() { this.init(); }, mounted() { }, methods: { //获取查询条件-提示信息 init() { this.getTableData() }, //清除对应关系 handleDelete(index, row) { this.$refs.del.showDialog(row); }, //改变pagesize handleSizeChange(pageSize) { this.page.pageSize = pageSize; this.getTableData(); }, //改变pageno handleCurrentChange(pageNo) { this.page.pageNumber = pageNo; this.getTableData(); }, //跳转至填充对应规则 toAddRelation() { this.$router.push({ path: "systemRela", query: { typeName: this.typeName } }); }, //获取表格数据 getTableData() { let param = { PageNumber: this.page.pageNumber, PageSize: this.page.pageSize, TypeNameList: [this.typeName] }; //处理查询条件 if (this.form.EquipmentMark && this.form.EquipmentMark.length) { param.EquipmentMark = this.form.EquipmentMark; } if (this.form.SubTypeName.length) { param.SubTypeCodeList = this.form.SubTypeName; } if (this.form.LocationFlag.length) { param.LocationFlagList = this.form.LocationFlag; } if (this.form.Datasource.length) { param.DatasourceList = this.form.Datasource; } this.loading = true; // 查询对应关系(P1) dynamicQuery(param, res => { let dyData = res.Content; let tempArr = dyData.map(t => { if (t.Related == 'True') { t.SysID = t.TypeCode + t.ProjectId + t.ObjectID; return t.SysID; } return undefined; }).filter(item => item); if (tempArr.length) { queryLinkSys({ PageSize: this.page.pageSize, Filters: `SysID in ${JSON.stringify(tempArr)}` }, response => { let Data = response.Content; dyData.forEach(item => { Data.forEach(t => { if (t.SysID == item.SysID) { if (t.SysLocalName && t.SysLocalID) { item.ObjectLocalName = t.SysLocalName + '/' + t.SysLocalID; } else if (t.SysLocalName || t.SysLocalID) { item.ObjectLocalName = t.SysLocalName || t.SysLocalID; } } }) }) this.loading = false; this.tableData = dyData; }) } else { this.loading = false; this.tableData = dyData; } this.page.total = res.PageSize < 50 ? res.PageSize : res.Total; }); }, //刷新列表 refresh() { this.page.pageNumber = 1; this.$emit('refresh', this.typeName); this.getTableData(); }, //数据字典部件类型修改 changeDictionary(val) { this.page.pageNumber = 1; this.form.SubTypeName = val; this.getTableData(); }, //数据源修改 changeDataSource(val) { this.page.pageNumber = 1; this.form.Datasource = val; this.getTableData(); }, //修改位置标签 changeLocationFlag(val) { this.page.pageNumber = 1; this.form.LocationFlag = val; this.getTableData(); }, //查询列表 queryTableData() { this.page.pageNumber = 1; this.getTableData(); }, //自动对应实例 autoGroupRela() { this.$emit('autoGroupRela', 'system'); } }, watch: { projectId() { this.init(); } } }; </script> <style lang="scss" scoped> #equipRules { height: calc(100% - 54px); /deep/ .text-right { text-align: right; } .query-item { float: left; & + .query-item { margin-left: 10px; } } /deep/ .special .el-input__inner { width: 220px; } /deep/ .table-area { width: 100%; height: calc(100% - 71px); margin-bottom: 10px; td div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .td-bl { border-left: 1px solid #ebeef5; } .tool-tip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } </style>