tableTransfers.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  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
  10. placeholder="输入设备名称进行查询"
  11. v-model="search.filter"
  12. style="width:300px;margin-right: 10px;"
  13. size="small"
  14. clearable
  15. ></el-input>
  16. <el-button @click="getLeftData" size="small">查找</el-button>
  17. </div>
  18. <div class="search-small" style="padding: 10px">
  19. <floor-cascader :isWidth="false"></floor-cascader>
  20. <cascader :isWidth="false" @change="changeCascader" :isAll="true"></cascader>
  21. </div>
  22. </div>
  23. <el-table
  24. ref="multipleTable"
  25. :data="tableData"
  26. height="300px"
  27. tooltip-effect="dark"
  28. style="width: 100%"
  29. class="data-table"
  30. @selection-change="handleSelectionChange"
  31. v-loading="isLoading1"
  32. border
  33. >
  34. <el-table-column type="selection" width="55"></el-table-column>
  35. <el-table-column label="设备名称" width="120">
  36. <template
  37. slot-scope="scope"
  38. >{{ scope.row.infos.EquipLocalName || scope.row.infos.EquipName }}</template>
  39. </el-table-column>
  40. <el-table-column label="设备编号" width="120">
  41. <template slot-scope="scope">{{ scope.row.infos.EquipLocalID || "--" }}</template>
  42. </el-table-column>
  43. <el-table-column label="设备类" show-overflow-tooltip>
  44. <template slot-scope="scope">{{ getName(scope.row.category) }}</template>
  45. </el-table-column>
  46. <el-table-column prop="address" label="安装位置" show-overflow-tooltip>
  47. <template slot-scope="scope">{{ scope.row.infos.InstallLocation || "--" }}</template>
  48. </el-table-column>
  49. </el-table>
  50. <div class="right">
  51. <my-pagination @change="changePages1" :page="pages1"></my-pagination>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="main-button">
  56. <el-button
  57. class="top"
  58. @click="rightToLeft"
  59. :disabled="SelectionList && SelectionList.length ? false : true"
  60. :type="SelectionList && SelectionList.length ? 'primary' : ''"
  61. icon="el-icon-arrow-left"
  62. circle
  63. ></el-button>
  64. <el-button
  65. class="bottom"
  66. @click="leftToRight"
  67. :disabled="multipleSelection && multipleSelection.length ? false : true"
  68. :type="multipleSelection && multipleSelection.length ? 'primary' : ''"
  69. icon="el-icon-arrow-right"
  70. circle
  71. ></el-button>
  72. </div>
  73. <div class="main-right">
  74. <h4>已关联该系统的设备</h4>
  75. <div class="border-view">
  76. <div class="search">
  77. <div class="search-big">
  78. <el-input
  79. placeholder="输入设备名称、设备类名称进行查询"
  80. v-model="search2.filter"
  81. style="width:200px; margin-bottom: 10px;"
  82. size="small"
  83. clearable
  84. ></el-input>
  85. <el-button @click="getRightData" size="small">查找</el-button>
  86. </div>
  87. </div>
  88. <el-table
  89. ref="multipleTable"
  90. :data="table2Data"
  91. height="300px"
  92. tooltip-effect="dark"
  93. style="width: 100%"
  94. class="data-table"
  95. @selection-change="tableChange"
  96. v-loading="isLoading2"
  97. border
  98. >
  99. <el-table-column type="selection" width="55"></el-table-column>
  100. <el-table-column label="设备名称">
  101. <template
  102. slot-scope="scope"
  103. >{{ scope.row.infos.EquipLocalName || scope.row.infos.EquipName }}</template>
  104. </el-table-column>
  105. </el-table>
  106. <div class="right">
  107. <my-pagination :page="pages2" @change="changePages2" :isSmall="false"></my-pagination>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </el-dialog>
  113. </template>
  114. <script>
  115. import myPagination from "@/components/common/myPagination";
  116. import floorCascader from "@/components/ledger/lib/floorCascader";
  117. import cascader from "@/components/ledger/lib/cascader";
  118. import { getBillEquipList, getEqCode, getBussines, deleteRelation, getGraphyId, getSysToEq, createRelation } from "@/api/scan/request"
  119. import {
  120. mapGetters,
  121. mapActions
  122. } from "vuex";
  123. export default {
  124. props: {
  125. dialog: {
  126. type: Object,
  127. default: function () {
  128. return {
  129. relevance: false
  130. }
  131. }
  132. },
  133. id: {
  134. type: String
  135. }
  136. },
  137. components: {
  138. myPagination,
  139. floorCascader,
  140. cascader
  141. },
  142. computed: {
  143. ...mapGetters("layout", [
  144. "projectId",
  145. "secret",
  146. "userId"
  147. ])
  148. },
  149. data() {
  150. return {
  151. dialogVisible: true,
  152. pages1: {
  153. size: 50,
  154. sizes: [10, 20, 30, 50, 100, 200],
  155. total: 0,
  156. currentPage: 1
  157. },
  158. pages2: {
  159. size: 50,
  160. sizes: [10, 20, 30, 50, 100, 200],
  161. total: 0,
  162. currentPage: 1
  163. },
  164. search: {//第一个table的搜索条件
  165. filter: "",//文本框条件
  166. build: "all",//建筑
  167. floor: "",//楼层
  168. category: "all"//设备类别
  169. },
  170. search2: {//第二个搜索条件
  171. filter: "",//搜索文案
  172. },
  173. tableData: [
  174. ], //第一个表格的数据
  175. table2Data: [
  176. ], //第二个表格的数据
  177. multipleSelection: [], //第一个表格的被选择数组
  178. SelectionList: [], //第二个表格的被选择数组
  179. list: [],
  180. graphyId: "",
  181. isLoading1: false,
  182. isLoading2: false,
  183. };
  184. },
  185. created() {
  186. this.getData();
  187. this.getgraphyId();
  188. },
  189. methods: {
  190. //关闭
  191. close(done) {
  192. this.$emit("close")
  193. done()
  194. },
  195. getgraphyId() {
  196. getGraphyId({
  197. type: "SystemEquip",
  198. secret: this.secret,
  199. ProjId: this.projectId
  200. }).then(res => {
  201. if (res.data.Result == "success") {
  202. this.graphyId = res.data.graph_id
  203. } else {
  204. this.$message.error("请求失败:" + res.data.ResultMsg)
  205. }
  206. }).catch(_ => [
  207. this.$message.error("请求失败")
  208. ])
  209. },
  210. getName(code) {
  211. code = code.substring(2, 6)
  212. let str = ""
  213. this.list.map(item => {
  214. if (item.code == code) {
  215. str = item.facility
  216. }
  217. })
  218. return str
  219. },
  220. getData() {
  221. getEqCode().then(res => {
  222. this.list = this.changeArr(res.data.Content)
  223. });
  224. },
  225. //修改
  226. changeArr(arr) {
  227. let data = [];
  228. arr.map(item => {
  229. if (item.content && item.content.length) {
  230. return item.content.map(children => {
  231. if (children.content && children.content.length) {
  232. return children.content.map(i => {
  233. data.push(i);
  234. });
  235. }
  236. });
  237. }
  238. });
  239. return data;
  240. },
  241. //pages1改变
  242. changePages1() {
  243. this.getLeftData()
  244. },
  245. changePages2() {
  246. this.getRightData()
  247. },
  248. changeCascader(val) {
  249. this.search.category = val.code
  250. this.getLeftData()
  251. },
  252. getAllData() {
  253. console.log(this.id)
  254. this.getLeftData()
  255. this.getRightData()
  256. },
  257. getLeftData() {
  258. this.isLoading1 = true
  259. let param = {
  260. data: {
  261. "limit": { // 分页查询, 选填.
  262. "skip": this.pages1.size * (this.pages1.currentPage - 1), // 跳过多少数据
  263. "count": this.pages1.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
  264. },
  265. filter: {
  266. EquipLocalName: this.search.filter
  267. },
  268. id: "",
  269. excludeSystemId: this.id,
  270. type: [this.search.category == "all" ? "Eq" : this.search.category]
  271. },
  272. secret: this.secret,
  273. ProjId: this.projectId
  274. }
  275. if (this.search.build == "all") {
  276. param.data.id = this.projectId
  277. } else if (this.search.floor && this.search.floor != "all") {
  278. param.data.id = this.search.floor
  279. } else if (this.search.floor == 'all') {
  280. param.data.id = this.search.build
  281. } else {
  282. param.data.id = this.search.ProjId
  283. }
  284. getBillEquipList(param, res => {
  285. this.tableData = res.Content
  286. this.pages1.total = res.TotalCount
  287. this.isLoading1 = false
  288. })
  289. },
  290. getRightData() {
  291. this.isLoading2 = true
  292. let param = {
  293. data: {
  294. "limit": { // 分页查询, 选填.
  295. "skip": this.pages2.size * (this.pages2.currentPage - 1), // 跳过多少数据
  296. "count": this.pages2.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
  297. },
  298. filter: {
  299. EquipLocalName: this.search2.filter
  300. },
  301. criteria: {
  302. fromId: this.id,
  303. graphType: "SystemEquip",
  304. relType: "1",
  305. side: "toId",
  306. type: ["Eq"]
  307. }
  308. },
  309. secret: this.secret,
  310. ProjId: this.projectId
  311. }
  312. getSysToEq(param, res => {
  313. this.table2Data = res.Content
  314. this.pages2.total = res.TotalCount
  315. this.isLoading2 = false
  316. })
  317. },
  318. getList() {
  319. },
  320. //左侧多选框改变
  321. handleSelectionChange(val) {
  322. this.multipleSelection = val;
  323. },
  324. //多选框发生改变
  325. tableChange(val) {
  326. this.SelectionList = val;
  327. },
  328. //关联
  329. leftToRight() {
  330. let param = {
  331. data: {
  332. criterias: []
  333. },
  334. secret: this.secret,
  335. ProjId: this.projectId
  336. }
  337. this.multipleSelection.map(item => {
  338. param.data.criterias.push({
  339. from_id: this.id,
  340. to_id: item.id,
  341. graph_id: this.graphyId,
  342. rel_type: "1",
  343. infos: null
  344. })
  345. })
  346. createRelation(param).then(res => {
  347. if (res.data.Result == "success") {
  348. this.$message.success("关联成功")
  349. this.getAllData()
  350. } else {
  351. this.$message.error("请求失败:" + res.data.ResultMsg)
  352. }
  353. }).catch(_ => {
  354. this.$message.error("请求失败")
  355. })
  356. },
  357. //取消关联
  358. rightToLeft() {
  359. let param = {
  360. data: {
  361. criterias: []
  362. },
  363. secret: this.secret,
  364. ProjId: this.projectId
  365. }
  366. this.SelectionList.map(item => {
  367. param.data.criterias.push({
  368. from_id: this.id,
  369. to_id: item.id,
  370. graph_id: this.graphyId,
  371. rel_type: "1"
  372. })
  373. })
  374. if (!!this.id) {
  375. deleteRelation(param).then(res => {
  376. if (res.data.Result == "success") {
  377. this.$message.success("取消关联成功")
  378. this.getAllData()
  379. } else {
  380. this.$message.error("请求失败:" + res.data.ResultMsg)
  381. }
  382. }).catch(_ => {
  383. this.$message.error("请求失败")
  384. })
  385. } else {
  386. this.$message.error("id为空")
  387. }
  388. }
  389. },
  390. watch: {
  391. dialog: {
  392. deep: true,
  393. handler: function () {
  394. if (this.dialog.relevance) {
  395. this.search = {//第一个table的搜索条件
  396. filter: "",//文本框条件
  397. build: "all",//建筑
  398. floor: "",//楼层
  399. category: "all"//设备类别
  400. }
  401. this.search2 = {//第二个搜索条件
  402. filter: "",//搜索文案
  403. }
  404. this.getAllData()
  405. }
  406. }
  407. }
  408. }
  409. };
  410. </script>
  411. <style lang="less">
  412. #tableTransfers {
  413. height: 500px;
  414. width: 100%;
  415. overflow-x: hidden;
  416. overflow-y: auto;
  417. h4 {
  418. font-size: 20px;
  419. font-weight: 500;
  420. }
  421. .search {
  422. .search-small {
  423. overflow: hidden;
  424. }
  425. border-bottom: #dcdfe6 1px solid;
  426. .search-big {
  427. padding: 10px;
  428. }
  429. }
  430. .main-left {
  431. float: left;
  432. width: 550px;
  433. height: 500px;
  434. }
  435. .border-view {
  436. border: 1px solid #ccc;
  437. }
  438. .main-button {
  439. float: left;
  440. width: 60px;
  441. height: 500px;
  442. position: relative;
  443. .top {
  444. position: absolute;
  445. bottom: 300px;
  446. left: 10px;
  447. }
  448. .bottom {
  449. position: absolute;
  450. bottom: 200px;
  451. left: 10px;
  452. }
  453. }
  454. .el-button + .el-button {
  455. margin: 0;
  456. }
  457. .main-right {
  458. height: 300px;
  459. float: left;
  460. width: 230px;
  461. }
  462. }
  463. </style>