123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376 |
- <template>
- <el-dialog title="关联设备" :before-close="close" :visible.sync="dialog.relevance" width="900px">
- <div id="tableTransfers">
- <div class="main-left">
- <h4>未关联该系统的设备</h4>
- <div class="border-view">
- <div class="search">
- <div class="search-small" style="padding: 10px 10px 0 10px">
- <el-input placeholder="输入设备名称进行查询" v-model="search1" style="width:300px;margin-right: 10px;" size="small" clearable></el-input>
- <el-button @click="getLeftData" size="small">查找</el-button>
- </div>
- <div class="search-small" style="padding: 10px">
- <floor-cascader :isWidth="false" @change="changeBuild"></floor-cascader>
- <cascader :isWidth="false" @change="changeCascader" :all="true"></cascader>
- </div>
- </div>
- <el-table ref="multipleTable" :data="tableData" height="300px" tooltip-effect="dark" style="width: 100%" class="data-table"
- @selection-change="handleSelectionChange" v-loading="isLoading1" border>
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column label="设备名称" width="120">
- <template slot-scope="scope">{{ scope.row.EquipLocalName || scope.row.EquipName }}</template>
- </el-table-column>
- <el-table-column label="设备编号" width="120">
- <template slot-scope="scope">{{ scope.row.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.InstallLocation || "--" }}</template>
- </el-table-column>
- </el-table>
- <div class="right">
- <my-pagination @change="changePages1" :page="pages1"></my-pagination>
- </div>
- </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" style="width:200px; margin-bottom: 10px;" size="small" clearable>
- </el-input>
- <el-button @click="getRightData" size="small">查找</el-button>
- </div>
- </div>
- <el-table ref="multipleTable" :data="table2Data" height="300px" tooltip-effect="dark" style="width: 100%" class="data-table"
- @selection-change="tableChange" v-loading="isLoading2" border>
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column label="设备名称">
- <template slot-scope="scope">{{ scope.row.EquipLocalName || scope.row.EquipName }}</template>
- </el-table-column>
- </el-table>
- <div class="right">
- <my-pagination :page="pages2" @change="changePages2" :isSmall="false"></my-pagination>
- </div>
- </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 {
- getEquipNotInSys,
- getEquipInSys,
- getEquipBelongs,
- sysLinkEquip
- } 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("layout", ["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
- },
- search1: '', //左侧输条件
- search2: '',//右侧输入条件
- buildingId: '',//建筑id
- floorId: '',//楼层id
- category: '',//设备类型
- tableData: [], //第一个表格的数据
- table2Data: [], //第二个表格的数据
- multipleSelection: [], //第一个表格的被选择数组
- SelectionList: [], //第二个表格的被选择数组
- List: [],
- isLoading1: false,
- isLoading2: false,
- };
- },
- created() {
- this.getAllData();
- },
- methods: {
- //关闭
- close(done) {
- this.$emit("close")
- done()
- },
- //根据设备类型编码获取名称
- getName(code) {
- let str = ""
- this.List.map(item => {
- if (item.code == code) {
- str = item.facility
- }
- })
- return str
- },
- //获取物理世界所有设备类型
- getAllData() {
- let param = {
- data: {
- Distinct: true,
- Orders: "EquipName asc",
- PageNumber: 1,
- PageSize: 500,
- Projection: [
- "EquipCode", "EquipName"
- ]
- }
- }
- getEquipBelongs(param, res => {
- this.List = this.formatOptions(res.Content)
- })
- },
- //格式化List数据
- formatOptions(arr) {
- let data = [];
- arr.map(t => {
- let temp = {};
- temp.code = t.EquipCode;
- temp.facility = t.EquipName;
- data.push(temp)
- })
- return data;
- },
- //获取两侧数据
- getAllTable() {
- this.pages1.currentPage = 1
- this.pages2.currentPage = 1
- this.getLeftData()
- this.getRightData()
- },
- //pages1改变
- changePages1() {
- this.getLeftData()
- },
- changePages2() {
- this.getRightData()
- },
- //修改设备类型
- changeCascader(val) {
- this.category = val.code
- this.getLeftData()
- },
- //获取未关联该系统的设备
- getLeftData() {
- this.isLoading1 = true
- let param = {
- data: {
- Filters: '',
- Orders: "EquipID desc",
- PageNumber: this.pages1.currentPage,
- PageSize: this.pages1.size
- },
- sysId: this.id
- }
- if (this.search1 != '') {
- param.data.Filters = `EquipLocalName contain "${this.search1}";`
- }
- //建筑id
- if (this.buildingId == "noKnow") {
- param.data.Filters += `buildingId isNull;`
- } else if (this.buildingId && this.buildingId != "all") {
- param.data.Filters += `buildingId='${this.buildingId}';`
- }
- //楼层id
- if (this.floorId == "noKnow") {
- param.data.Filters += `floorId isNull;`
- } else if (this.floorId && this.floorId != "all") {
- param.data.Filters += `floorId='${this.floorId}';`
- }
- //设备类型
- if (this.category) {
- param.data.Filters += `category='${this.category}';`
- }
- if (param.data.Filters) {
- param.data.Filters = param.data.Filters.substring(0, param.data.Filters.length - 1)
- } else {
- delete param.data.Filters;
- }
- getEquipNotInSys(param, res => {
- this.tableData = res.Content
- this.pages1.total = res.Total
- this.isLoading1 = false
- })
- },
- //获取已关联该系统的设备
- getRightData() {
- this.isLoading2 = true
- let param = {
- Filters: `sysId='${this.id}'`,
- Orders: "EquipID desc",
- PageNumber: this.pages1.currentPage,
- PageSize: this.pages1.size
- }
- if (this.search2 != '') {
- param.Filters += `;EquipLocalName contain "${this.search2}"`
- }
- getEquipInSys(param, res => {
- this.table2Data = res.Content
- this.pages2.total = res.Total
- this.isLoading2 = false
- })
- },
- //左侧多选框改变
- handleSelectionChange(val) {
- this.multipleSelection = val
- },
- //右侧多选框发生改变
- tableChange(val) {
- this.SelectionList = val;
- },
- //关联
- leftToRight() {
- let relationList = this.multipleSelection.concat(this.table2Data)
- relationList = relationList.map(t => {
- return t.EquipID || t.EquipId
- })
- this.relationChange(relationList)
- },
- //取消关联
- rightToLeft() {
- let relationList = [];
- let tempIDs = this.SelectionList.map(t => {
- return t.EquipId
- })
- this.table2Data.map(t => {
- if (tempIDs.indexOf(t.EquipId) < 0) {
- relationList.push(t.EquipId)
- }
- })
- this.relationChange(relationList)
- },
- //更新设备 系统关系
- relationChange(arr) {
- let param = {
- SysID: this.id,
- EquipIdList: arr
- }
- sysLinkEquip(param, res => {
- this.$message.success('修改关联关系成功')
- this.getAllTable()
- })
- },
- //修改楼层
- changeBuild(val) {
- this.buildingId = val[0]
- if (val[1]) {
- this.floorId = val[1]
- }
- this.getLeftData()
- },
- },
- watch: {
- dialog: {
- deep: true,
- handler: function () {
- if (this.dialog.relevance) {
- this.search1 = ''
- this.search2 = ''
- this.getAllTable()
- }
- }
- }
- }
- };
- </script>
- <style lang="less">
- #tableTransfers {
- height: 500px;
- width: 100%;
- overflow-x: hidden;
- overflow-y: auto;
- h4 {
- font-size: 20px;
- font-weight: 500;
- }
- .search {
- .search-small {
- overflow: hidden;
- }
- border-bottom: #dcdfe6 1px solid;
- .search-big {
- padding: 10px;
- }
- }
- .main-left {
- float: left;
- width: 550px;
- 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: 300px;
- float: left;
- width: 230px;
- }
- }
- </style>
|