123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473 |
- <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="search.filter"
- 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"></floor-cascader>
- <cascader :isWidth="false" @change="changeCascader" :isAll="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.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>
- <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.filter"
- 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.infos.EquipLocalName || scope.row.infos.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 { 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("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
- },
- 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 {
- 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>
|