|
@@ -0,0 +1,465 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-dialog title="关联设备" :before-close="close" :visible.sync="dialog.relevance" width="1000px">
|
|
|
|
+ <div id="tableTransfers">
|
|
|
|
+ <div class="main-left">
|
|
|
|
+ <h4>未关联该系统的设备</h4>
|
|
|
|
+ <div class="border-view">
|
|
|
|
+ <div class="search">
|
|
|
|
+ <div class="search-small">
|
|
|
|
+ <el-input
|
|
|
|
+ placeholder="输入设备名称进行查询"
|
|
|
|
+ v-model="search.filter"
|
|
|
|
+ style="width:280px;"
|
|
|
|
+ size="small"
|
|
|
|
+ clearable
|
|
|
|
+ ></el-input>
|
|
|
|
+ <el-button @click="getLeftData" size="small">查找</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="search-small">
|
|
|
|
+ <floor-cascader :isWidth="false"></floor-cascader>
|
|
|
|
+ <cascader :isWidth="false" @change="changeCascader" :isAll="true"></cascader>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-table
|
|
|
|
+ ref="multipleTable"
|
|
|
|
+ :data="tableData"
|
|
|
|
+ height="350px"
|
|
|
|
+ tooltip-effect="dark"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
+ v-loading="isLoading1"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
+ <el-table-column label="设备名称" width="120">
|
|
|
|
+ <template
|
|
|
|
+ slot-scope="scope"
|
|
|
|
+ >{{ scope.row.infos.EquipLocalName || scope.row.infos.EquipName }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="设备编号" width="120">
|
|
|
|
+ <template slot-scope="scope">{{ scope.row.infos.EquipLocalID || "--" }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="设备类" show-overflow-tooltip>
|
|
|
|
+ <template slot-scope="scope">{{ getName(scope.row.category) }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="address" label="安装位置" show-overflow-tooltip>
|
|
|
|
+ <template slot-scope="scope">{{ scope.row.infos.InstallLocation || "--" }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <my-pagination @change="changePages1" :page="pages1"></my-pagination>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="main-button">
|
|
|
|
+ <el-button
|
|
|
|
+ class="top"
|
|
|
|
+ @click="rightToLeft"
|
|
|
|
+ :disabled="SelectionList && SelectionList.length ? false : true"
|
|
|
|
+ :type="SelectionList && SelectionList.length ? 'primary' : ''"
|
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
|
+ circle
|
|
|
|
+ ></el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ class="bottom"
|
|
|
|
+ @click="leftToRight"
|
|
|
|
+ :disabled="multipleSelection && multipleSelection.length ? false : true"
|
|
|
|
+ :type="multipleSelection && multipleSelection.length ? 'primary' : ''"
|
|
|
|
+ icon="el-icon-arrow-right"
|
|
|
|
+ circle
|
|
|
|
+ ></el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="main-right">
|
|
|
|
+ <h4>已关联该系统的设备</h4>
|
|
|
|
+ <div class="border-view">
|
|
|
|
+ <div class="search">
|
|
|
|
+ <div class="search-big">
|
|
|
|
+ <el-input
|
|
|
|
+ placeholder="输入设备名称、设备类名称进行查询"
|
|
|
|
+ v-model="search2.filter"
|
|
|
|
+ style="width:220px;"
|
|
|
|
+ size="small"
|
|
|
|
+ clearable
|
|
|
|
+ ></el-input>
|
|
|
|
+ <el-button @click="getRightData" size="small">查找</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-table
|
|
|
|
+ ref="multipleTable"
|
|
|
|
+ :data="table2Data"
|
|
|
|
+ height="350px"
|
|
|
|
+ tooltip-effect="dark"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ @selection-change="tableChange"
|
|
|
|
+ v-loading="isLoading2"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
+ <el-table-column label="设备名称">
|
|
|
|
+ <template
|
|
|
|
+ slot-scope="scope"
|
|
|
|
+ >{{ scope.row.infos.EquipLocalName || scope.row.infos.EquipName }}</template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <my-pagination :page="pages2" @change="changePages2" :isSmall="false"></my-pagination>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import myPagination from "@/components/common/myPagination";
|
|
|
|
+import floorCascader from "@/components/ledger/lib/floorCascader";
|
|
|
|
+import cascader from "@/components/ledger/lib/cascader";
|
|
|
|
+
|
|
|
|
+import { getBillEquipList, getEqCode, getBussines, deleteRelation, getGraphyId, getSysToEq, createRelation } from "@/api/scan/request"
|
|
|
|
+import {
|
|
|
|
+ mapGetters,
|
|
|
|
+ mapActions
|
|
|
|
+ } from "vuex";
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ dialog: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: function () {
|
|
|
|
+ return {
|
|
|
|
+ relevance: false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ id: {
|
|
|
|
+ type: String
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ myPagination,
|
|
|
|
+ floorCascader,
|
|
|
|
+ cascader
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters("peojMess", [
|
|
|
|
+ "projectId",
|
|
|
|
+ "secret",
|
|
|
|
+ "userId"
|
|
|
|
+ ])
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ dialogVisible: true,
|
|
|
|
+ pages1: {
|
|
|
|
+ size: 50,
|
|
|
|
+ sizes: [10, 20, 30, 50, 100, 200],
|
|
|
|
+ total: 0,
|
|
|
|
+ currentPage: 1
|
|
|
|
+ },
|
|
|
|
+ pages2: {
|
|
|
|
+ size: 50,
|
|
|
|
+ sizes: [10, 20, 30, 50, 100, 200],
|
|
|
|
+ total: 0,
|
|
|
|
+ currentPage: 1
|
|
|
|
+ },
|
|
|
|
+ search: {//第一个table的搜索条件
|
|
|
|
+ filter: "",//文本框条件
|
|
|
|
+ build: "all",//建筑
|
|
|
|
+ floor: "",//楼层
|
|
|
|
+ category: "all"//设备类别
|
|
|
|
+ },
|
|
|
|
+ search2: {//第二个搜索条件
|
|
|
|
+ filter: "",//搜索文案
|
|
|
|
+ },
|
|
|
|
+ tableData: [
|
|
|
|
+ ], //第一个表格的数据
|
|
|
|
+ table2Data: [
|
|
|
|
+ ], //第二个表格的数据
|
|
|
|
+ multipleSelection: [], //第一个表格的被选择数组
|
|
|
|
+ SelectionList: [], //第二个表格的被选择数组
|
|
|
|
+ list: [],
|
|
|
|
+ graphyId: "",
|
|
|
|
+ isLoading1: false,
|
|
|
|
+ isLoading2: false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getData();
|
|
|
|
+ this.getgraphyId();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //关闭
|
|
|
|
+ close(done) {
|
|
|
|
+ this.$emit("close")
|
|
|
|
+ done()
|
|
|
|
+ },
|
|
|
|
+ getgraphyId() {
|
|
|
|
+ getGraphyId({
|
|
|
|
+ type: "SystemEquip",
|
|
|
|
+ secret: this.secret,
|
|
|
|
+ ProjId: this.projectId
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.data.Result == "success") {
|
|
|
|
+ this.graphyId = res.data.graph_id
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error("请求失败:" + res.data.ResultMsg)
|
|
|
|
+ }
|
|
|
|
+ }).catch(_ => [
|
|
|
|
+ this.$message.error("请求失败")
|
|
|
|
+ ])
|
|
|
|
+ },
|
|
|
|
+ getName(code) {
|
|
|
|
+ code = code.substring(2, 6)
|
|
|
|
+ let str = ""
|
|
|
|
+ this.list.map(item => {
|
|
|
|
+ if (item.code == code) {
|
|
|
|
+ str = item.facility
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return str
|
|
|
|
+ },
|
|
|
|
+ getData() {
|
|
|
|
+ getEqCode().then(res => {
|
|
|
|
+ this.list = this.changeArr(res.data.Content)
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //修改
|
|
|
|
+ changeArr(arr) {
|
|
|
|
+ let data = [];
|
|
|
|
+ arr.map(item => {
|
|
|
|
+ if (item.content && item.content.length) {
|
|
|
|
+ return item.content.map(children => {
|
|
|
|
+ if (children.content && children.content.length) {
|
|
|
|
+ return children.content.map(i => {
|
|
|
|
+ data.push(i);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ return data;
|
|
|
|
+ },
|
|
|
|
+ //pages1改变
|
|
|
|
+ changePages1() {
|
|
|
|
+ this.getLeftData()
|
|
|
|
+ },
|
|
|
|
+ changePages2() {
|
|
|
|
+ this.getRightData()
|
|
|
|
+ },
|
|
|
|
+ changeCascader(val) {
|
|
|
|
+ this.search.category = val.code
|
|
|
|
+ this.getLeftData()
|
|
|
|
+ },
|
|
|
|
+ getAllData() {
|
|
|
|
+ console.log(this.id)
|
|
|
|
+ this.getLeftData()
|
|
|
|
+ this.getRightData()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ getLeftData() {
|
|
|
|
+ this.isLoading1 = true
|
|
|
|
+ let param = {
|
|
|
|
+ data: {
|
|
|
|
+ "limit": { // 分页查询, 选填.
|
|
|
|
+ "skip": this.pages1.size * (this.pages1.currentPage - 1), // 跳过多少数据
|
|
|
|
+ "count": this.pages1.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
|
|
|
|
+ },
|
|
|
|
+ filter: {
|
|
|
|
+ EquipLocalName: this.search.filter
|
|
|
|
+ },
|
|
|
|
+ id: "",
|
|
|
|
+ excludeSystemId: this.id,
|
|
|
|
+ type: [this.search.category == "all" ? "Eq" : this.search.category]
|
|
|
|
+ },
|
|
|
|
+ secret: this.secret,
|
|
|
|
+ ProjId: this.projectId
|
|
|
|
+ }
|
|
|
|
+ if (this.search.build == "all") {
|
|
|
|
+ param.data.id = this.projectId
|
|
|
|
+ } else if (this.search.floor && this.search.floor != "all") {
|
|
|
|
+ param.data.id = this.search.floor
|
|
|
|
+ } else if (this.search.floor == 'all') {
|
|
|
|
+ param.data.id = this.search.build
|
|
|
|
+ } else {
|
|
|
|
+ param.data.id = this.search.ProjId
|
|
|
|
+ }
|
|
|
|
+ getBillEquipList(param, res => {
|
|
|
|
+ this.tableData = res.Content
|
|
|
|
+ this.pages1.total = res.TotalCount
|
|
|
|
+ this.isLoading1 = false
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ getRightData() {
|
|
|
|
+ this.isLoading2 = true
|
|
|
|
+ let param = {
|
|
|
|
+ data: {
|
|
|
|
+ "limit": { // 分页查询, 选填.
|
|
|
|
+ "skip": this.pages2.size * (this.pages2.currentPage - 1), // 跳过多少数据
|
|
|
|
+ "count": this.pages2.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
|
|
|
|
+ },
|
|
|
|
+ filter: {
|
|
|
|
+ EquipLocalName: this.search2.filter
|
|
|
|
+ },
|
|
|
|
+ criteria: {
|
|
|
|
+ fromId: this.id,
|
|
|
|
+ graphType: "SystemEquip",
|
|
|
|
+ relType: "1",
|
|
|
|
+ side: "toId",
|
|
|
|
+ type: ["Eq"]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ secret: this.secret,
|
|
|
|
+ ProjId: this.projectId
|
|
|
|
+ }
|
|
|
|
+ getSysToEq(param, res => {
|
|
|
|
+ this.table2Data = res.Content
|
|
|
|
+ this.pages2.total = res.TotalCount
|
|
|
|
+ this.isLoading2 = false
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ getList() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //左侧多选框改变
|
|
|
|
+ handleSelectionChange(val) {
|
|
|
|
+ this.multipleSelection = val;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //多选框发生改变
|
|
|
|
+ tableChange(val) {
|
|
|
|
+ this.SelectionList = val;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //关联
|
|
|
|
+ leftToRight() {
|
|
|
|
+ let param = {
|
|
|
|
+ data: {
|
|
|
|
+ criterias: []
|
|
|
|
+ },
|
|
|
|
+ secret: this.secret,
|
|
|
|
+ ProjId: this.projectId
|
|
|
|
+ }
|
|
|
|
+ this.multipleSelection.map(item => {
|
|
|
|
+ param.data.criterias.push({
|
|
|
|
+ from_id: this.id,
|
|
|
|
+ to_id: item.id,
|
|
|
|
+ graph_id: this.graphyId,
|
|
|
|
+ rel_type: "1",
|
|
|
|
+ infos: null
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ createRelation(param).then(res => {
|
|
|
|
+ if (res.data.Result == "success") {
|
|
|
|
+ this.$message.success("关联成功")
|
|
|
|
+ this.getAllData()
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error("请求失败:" + res.data.ResultMsg)
|
|
|
|
+ }
|
|
|
|
+ }).catch(_ => {
|
|
|
|
+ this.$message.error("请求失败")
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //取消关联
|
|
|
|
+ rightToLeft() {
|
|
|
|
+ let param = {
|
|
|
|
+ data: {
|
|
|
|
+ criterias: []
|
|
|
|
+ },
|
|
|
|
+ secret: this.secret,
|
|
|
|
+ ProjId: this.projectId
|
|
|
|
+ }
|
|
|
|
+ this.SelectionList.map(item => {
|
|
|
|
+ param.data.criterias.push({
|
|
|
|
+ from_id: this.id,
|
|
|
|
+ to_id: item.id,
|
|
|
|
+ graph_id: this.graphyId,
|
|
|
|
+ rel_type: "1"
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ if (!!this.id) {
|
|
|
|
+ deleteRelation(param).then(res => {
|
|
|
|
+ if (res.data.Result == "success") {
|
|
|
|
+ this.$message.success("取消关联成功")
|
|
|
|
+ this.getAllData()
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error("请求失败:" + res.data.ResultMsg)
|
|
|
|
+ }
|
|
|
|
+ }).catch(_ => {
|
|
|
|
+ this.$message.error("请求失败")
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error("id为空")
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ dialog: {
|
|
|
|
+ deep: true,
|
|
|
|
+ handler: function () {
|
|
|
|
+ if (this.dialog.relevance) {
|
|
|
|
+ this.search = {//第一个table的搜索条件
|
|
|
|
+ filter: "",//文本框条件
|
|
|
|
+ build: "all",//建筑
|
|
|
|
+ floor: "",//楼层
|
|
|
|
+ category: "all"//设备类别
|
|
|
|
+ }
|
|
|
|
+ this.search2 = {//第二个搜索条件
|
|
|
|
+ filter: "",//搜索文案
|
|
|
|
+ }
|
|
|
|
+ this.getAllData()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="less">
|
|
|
|
+#tableTransfers {
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ h4 {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ }
|
|
|
|
+ .search {
|
|
|
|
+ height: 100px;
|
|
|
|
+ .search-small {
|
|
|
|
+ height: 45px;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ }
|
|
|
|
+ border-bottom: #dcdfe6 1px solid;
|
|
|
|
+ .search-big {
|
|
|
|
+ padding: 25px 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .main-left {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 600px;
|
|
|
|
+ height: 500px;
|
|
|
|
+ }
|
|
|
|
+ .border-view {
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ }
|
|
|
|
+ .main-button {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 60px;
|
|
|
|
+ height: 500px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .top {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 300px;
|
|
|
|
+ left: 10px;
|
|
|
|
+ }
|
|
|
|
+ .bottom {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 200px;
|
|
|
|
+ left: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .el-button + .el-button {
|
|
|
|
+ margin: 0;
|
|
|
|
+ }
|
|
|
|
+ .main-right {
|
|
|
|
+ height: 500px;
|
|
|
|
+ float: left;
|
|
|
|
+ width: 300px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|