tableTransfers.vue 11 KB

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