tableTransfers.vue 11 KB

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