tableTransfers.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. <template>
  2. <el-dialog title="关联设备" :before-close="close" :visible.sync="dialog.relevance" width="900px">
  3. <div id="tableTransfers">
  4. <div class="main-left">
  5. <h4>未关联该系统的设备</h4>
  6. <div class="border-view">
  7. <div class="search">
  8. <div class="search-small" style="padding: 10px 10px 0 10px">
  9. <el-input placeholder="输入设备名称进行查询" v-model="search1" style="width:300px;margin-right: 10px;" size="small"
  10. clearable></el-input>
  11. <el-button @click="getLeftData" size="small">查找</el-button>
  12. </div>
  13. <div class="search-small" style="padding: 10px">
  14. <floor-cascader :isWidth="false" @change="changeBuild"></floor-cascader>
  15. <cascader :isWidth="false" @change="changeCascader" :all="true"></cascader>
  16. </div>
  17. </div>
  18. <el-table ref="multipleTable" :data="tableData" height="300px" tooltip-effect="dark" style="width: 100%"
  19. class="data-table"
  20. @selection-change="handleSelectionChange" v-loading="isLoading1" border>
  21. <el-table-column type="selection" width="55"></el-table-column>
  22. <el-table-column label="设备名称" width="120">
  23. <template slot-scope="scope">{{ scope.row.EquipLocalName || scope.row.EquipName }}</template>
  24. </el-table-column>
  25. <el-table-column label="设备编号" width="120">
  26. <template slot-scope="scope">{{ scope.row.EquipLocalID || "--" }}</template>
  27. </el-table-column>
  28. <el-table-column label="设备类" show-overflow-tooltip>
  29. <template slot-scope="scope">{{ getName(scope.row.Category) }}</template>
  30. </el-table-column>
  31. <el-table-column prop="address" label="安装位置" show-overflow-tooltip>
  32. <template slot-scope="scope">{{ scope.row.InstallLocation || "--" }}</template>
  33. </el-table-column>
  34. </el-table>
  35. <div class="right" style="overflow:hidden;">
  36. <my-pagination @change="changePages1" :page="pages1"></my-pagination>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="main-button">
  41. <el-button class="top" @click="rightToLeft" :disabled="SelectionList && SelectionList.length ? false : true"
  42. :type="SelectionList && SelectionList.length ? 'primary' : ''" icon="el-icon-arrow-left"
  43. circle></el-button>
  44. <el-button class="bottom" @click="leftToRight"
  45. :disabled="multipleSelection && multipleSelection.length ? false : true"
  46. :type="multipleSelection && multipleSelection.length ? 'primary' : ''" icon="el-icon-arrow-right"
  47. circle></el-button>
  48. </div>
  49. <div class="main-right">
  50. <h4>已关联该系统的设备</h4>
  51. <div class="border-view">
  52. <div class="search">
  53. <div class="search-big">
  54. <el-input placeholder="输入设备名称进行查询" v-model="search2" style="width:200px; margin-bottom: 10px;"
  55. size="small" clearable>
  56. </el-input>
  57. <el-button @click="getRightData" size="small">查找</el-button>
  58. </div>
  59. </div>
  60. <el-table ref="multipleTable" :data="table2Data" height="300px" tooltip-effect="dark" style="width: 100%"
  61. class="data-table"
  62. @selection-change="tableChange" v-loading="isLoading2" border>
  63. <el-table-column type="selection" width="55"></el-table-column>
  64. <el-table-column label="设备名称">
  65. <template slot-scope="scope">{{ scope.row.EquipLocalName || scope.row.EquipName }}</template>
  66. </el-table-column>
  67. </el-table>
  68. <div class="right">
  69. <my-pagination :page="pages2" @change="changePages2" :isSmall="false"></my-pagination>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </el-dialog>
  75. </template>
  76. <script>
  77. import myPagination from "@/components/common/myPagination";
  78. import floorCascader from "@/components/ledger/lib/floorCascader";
  79. import cascader from "@/components/ledger/lib/cascader";
  80. import {
  81. getEquipNotInSys,
  82. getEquipInSys,
  83. getEquipBelongs,
  84. sysLinkEquip,
  85. sysUnlinkEquip
  86. } from "@/api/scan/request"
  87. import {
  88. mapGetters,
  89. mapActions
  90. } from "vuex";
  91. export default {
  92. props: {
  93. dialog: {
  94. type: Object,
  95. default: function () {
  96. return {
  97. relevance: false
  98. }
  99. }
  100. },
  101. id: {
  102. type: String
  103. }
  104. },
  105. components: {
  106. myPagination,
  107. floorCascader,
  108. cascader
  109. },
  110. computed: {
  111. ...mapGetters("layout", ["projectId", "secret", "userId"])
  112. },
  113. data() {
  114. return {
  115. dialogVisible: true,
  116. pages1: {
  117. size: 50,
  118. sizes: [10, 20, 30, 50, 100, 200],
  119. total: 0,
  120. currentPage: 1
  121. },
  122. pages2: {
  123. size: 50,
  124. sizes: [10, 20, 30, 50, 100, 200],
  125. total: 0,
  126. currentPage: 1
  127. },
  128. search1: '', //左侧输条件
  129. search2: '',//右侧输入条件
  130. buildingId: '',//建筑id
  131. floorId: '',//楼层id
  132. category: '',//设备类型
  133. tableData: [], //第一个表格的数据
  134. table2Data: [], //第二个表格的数据
  135. multipleSelection: [], //第一个表格的被选择数组
  136. SelectionList: [], //第二个表格的被选择数组
  137. List: [],
  138. isLoading1: false,
  139. isLoading2: false,
  140. };
  141. },
  142. created() {
  143. this.getAllData();
  144. },
  145. methods: {
  146. //关闭
  147. close(done) {
  148. this.$emit("close")
  149. done()
  150. },
  151. //根据设备类型编码获取名称
  152. getName(code) {
  153. let str = ""
  154. this.List.map(item => {
  155. if (item.code == code) {
  156. str = item.facility
  157. }
  158. })
  159. return str
  160. },
  161. //获取物理世界所有设备类型
  162. getAllData() {
  163. let param = {
  164. data: {
  165. distinct: true,
  166. orders: "equipName asc",
  167. pageNumber: 1,
  168. pageSize: 500,
  169. projection: [
  170. "equipCode", "equipName"
  171. ]
  172. }
  173. }
  174. getEquipBelongs(param, res => {
  175. this.List = this.formatOptions(res.content)
  176. })
  177. },
  178. //格式化List数据
  179. formatOptions(arr) {
  180. let data = [];
  181. arr.map(t => {
  182. let temp = {};
  183. temp.code = t.equipCode;
  184. temp.facility = t.equipName;
  185. data.push(temp)
  186. })
  187. return data;
  188. },
  189. //获取两侧数据
  190. getAllTable() {
  191. this.pages1.currentPage = 1
  192. this.pages2.currentPage = 1
  193. this.getLeftData()
  194. this.getRightData()
  195. },
  196. //pages1改变
  197. changePages1(page) {
  198. this.pages1.PageNumber = page
  199. this.getLeftData()
  200. },
  201. changePages2(page) {
  202. this.pages2.PageNumber = page
  203. this.getRightData()
  204. },
  205. //修改设备类型
  206. changeCascader(val) {
  207. this.category = val.code
  208. this.getLeftData()
  209. },
  210. //获取未关联该系统的设备
  211. getLeftData() {
  212. this.isLoading1 = true
  213. let param = {
  214. data: {
  215. Filters: '',
  216. Orders: "EquipID desc",
  217. PageNumber: this.pages1.currentPage,
  218. PageSize: this.pages1.size
  219. },
  220. sysId: this.id
  221. }
  222. if (this.search1 != '') {
  223. param.data.Filters = `EquipLocalName contain '${this.search1}' || EquipName contain '${this.search1}';`
  224. }
  225. //建筑id
  226. if (this.buildingId == "noKnow") {
  227. param.data.Filters += `buildingId isNull;`
  228. } else if (this.buildingId && this.buildingId != "all") {
  229. param.data.Filters += `buildingId='${this.buildingId}';`
  230. }
  231. //楼层id
  232. if (this.floorId == "noKnow") {
  233. param.data.Filters += `floorId isNull;`
  234. } else if (this.floorId && this.floorId != "all") {
  235. param.data.Filters += `floorId='${this.floorId}';`
  236. }
  237. //设备类型
  238. if (this.category) {
  239. param.data.Filters += `category='${this.category}';`
  240. }
  241. if (param.data.Filters) {
  242. param.data.Filters = param.data.Filters.substring(0, param.data.Filters.length - 1)
  243. } else {
  244. delete param.data.Filters;
  245. }
  246. getEquipNotInSys(param, res => {
  247. this.tableData = res.Content
  248. this.pages1.total = res.Total
  249. this.isLoading1 = false
  250. })
  251. },
  252. //获取已关联该系统的设备
  253. getRightData() {
  254. this.isLoading2 = true
  255. let param = {
  256. Filters: `sysId='${this.id}'`,
  257. Orders: "EquipID desc",
  258. PageNumber: this.pages2.currentPage,
  259. PageSize: this.pages2.size
  260. }
  261. if (this.search2 != '') {
  262. param.Filters += `;EquipLocalName contain '${this.search2}' || EquipName contain '${this.search2}'`
  263. }
  264. getEquipInSys(param, res => {
  265. this.table2Data = res.Content
  266. this.pages2.total = res.Total
  267. this.isLoading2 = false
  268. })
  269. },
  270. //左侧多选框改变
  271. handleSelectionChange(val) {
  272. this.multipleSelection = val
  273. },
  274. //右侧多选框发生改变
  275. tableChange(val) {
  276. this.SelectionList = val;
  277. },
  278. //关联
  279. leftToRight() {
  280. let relationList = this.multipleSelection
  281. relationList = relationList.map(t => {
  282. return t.EquipID || t.EquipId
  283. })
  284. this.relationChange(relationList)
  285. },
  286. //取消关联
  287. rightToLeft() {
  288. let tempIDs = this.SelectionList.map(t => {
  289. return {
  290. EquipID: t.EquipId,
  291. SysID: t.SysID
  292. }
  293. })
  294. sysUnlinkEquip(tempIDs, res => {
  295. this.$message.success('修改关联关系成功')
  296. this.getAllTable()
  297. })
  298. },
  299. //更新设备 系统关系
  300. relationChange(arr) {
  301. let param = {
  302. sysId: this.id,
  303. equipIdList: arr
  304. }
  305. sysLinkEquip(param, res => {
  306. this.$message.success('修改关联关系成功')
  307. this.getAllTable()
  308. })
  309. },
  310. //修改楼层
  311. changeBuild(val) {
  312. this.buildingId = val[0]
  313. if (val[1]) {
  314. this.floorId = val[1]
  315. }
  316. this.getLeftData()
  317. },
  318. },
  319. watch: {
  320. dialog: {
  321. deep: true,
  322. handler: function () {
  323. if (this.dialog.relevance) {
  324. this.search1 = ''
  325. this.search2 = ''
  326. this.getAllTable()
  327. }
  328. }
  329. }
  330. }
  331. };
  332. </script>
  333. <style lang="less">
  334. #tableTransfers {
  335. height: 500px;
  336. width: 100%;
  337. overflow-x: hidden;
  338. overflow-y: auto;
  339. h4 {
  340. font-size: 20px;
  341. font-weight: 500;
  342. }
  343. .search {
  344. .search-small {
  345. overflow: hidden;
  346. }
  347. border-bottom: #dcdfe6 1px solid;
  348. .search-big {
  349. padding: 10px;
  350. }
  351. }
  352. .main-left {
  353. float: left;
  354. width: 550px;
  355. height: 500px;
  356. }
  357. .border-view {
  358. border: 1px solid #ccc;
  359. }
  360. .main-button {
  361. float: left;
  362. width: 60px;
  363. height: 500px;
  364. position: relative;
  365. .top {
  366. position: absolute;
  367. bottom: 300px;
  368. left: 10px;
  369. }
  370. .bottom {
  371. position: absolute;
  372. bottom: 200px;
  373. left: 10px;
  374. }
  375. }
  376. .el-button + .el-button {
  377. margin: 0;
  378. }
  379. .main-right {
  380. height: 300px;
  381. float: left;
  382. width: 230px;
  383. }
  384. }
  385. </style>