RelationMaintain.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
  1. <template>
  2. <div class="relation-maintain">
  3. <!--计算无需配置源末端的关系时提示-->
  4. <el-dialog
  5. :title="values.title"
  6. :visible.sync="dialogTableVisible"
  7. >
  8. <span class="font-big">{{values.autoComputed}}</span>
  9. <footer
  10. slot="footer"
  11. class="dialog-footer "
  12. >
  13. <el-button @click="dialogTableVisible = false">{{values.cancel}}</el-button>
  14. <el-button
  15. type="primary"
  16. @click="promptly"
  17. >{{values.promptly}}
  18. </el-button>
  19. </footer>
  20. </el-dialog>
  21. <!-- 计算需配置源末端的关系且已配置时提示-->
  22. <el-dialog
  23. :title="values.title"
  24. :visible.sync="dialogTableVisibleMore"
  25. >
  26. <div
  27. v-loading="TableVisibleMoreLoading"
  28. style="overflow:hidden"
  29. >
  30. <p class="font-big">{{values.existComputed}}</p>
  31. <p class="exist-title">{{values.existTitle}}</p>
  32. <!-- <getCascader :RelationTypeName="RelationTypeName" :number="number"/>-->
  33. <!-- <el-row :span="24" style="margin-top: 10px">-->
  34. <!-- <el-col :span="8">-->
  35. <!-- <p class="demonstration">{{values.originEquipment}}</p>-->
  36. <!-- <el-select v-model="deviceValue" multiple placeholder="请选择">-->
  37. <!-- <el-option-->
  38. <!-- v-for="item in deviceGroup"-->
  39. <!-- :key="item.value"-->
  40. <!-- :label="item.label"-->
  41. <!-- :value="item.value">-->
  42. <!-- </el-option>-->
  43. <!-- </el-select>-->
  44. <!-- <el-cascader-->
  45. <!-- :key="isResouceShow"-->
  46. <!-- :options="list"-->
  47. <!-- v-model="ops"-->
  48. <!-- :props="props"-->
  49. <!-- @change="sourceOptions"-->
  50. <!-- collapse-tags-->
  51. <!-- clearable-->
  52. <!-- />-->
  53. <!-- </el-col>-->
  54. <!-- <el-col :span="8">-->
  55. <!-- <p class="demonstration">{{values.endEquipment}}</p>-->
  56. <!-- <el-cascader-->
  57. <!-- :options="list"-->
  58. <!-- v-model="filterOps"-->
  59. <!-- :key="isResouceShow"-->
  60. <!-- :props="props"-->
  61. <!-- @change="endOptions"-->
  62. <!-- collapse-tags-->
  63. <!-- clearable-->
  64. <!-- />-->
  65. <!-- </el-col>-->
  66. <!-- </el-row>-->
  67. <el-row :gutter="20" style="margin-bottom: 20px">
  68. <el-col :span="12">
  69. <p>源端设备类:</p>
  70. <el-select
  71. v-model="setValue"
  72. placeholder="请选择"
  73. :props="props"
  74. multiple
  75. disabled
  76. >
  77. <el-option
  78. v-for="item in setOriginOption"
  79. :key="item.value"
  80. :label="item.label"
  81. :value="item.value"
  82. disabled
  83. />
  84. </el-select>
  85. </el-col>
  86. <el-col :span="12">
  87. <p>末端设备类:</p>
  88. <el-select
  89. v-model="setEndValue"
  90. placeholder="请选择"
  91. :props="props"
  92. >
  93. <el-option
  94. v-for="item in setEndOptions"
  95. :key="item.value"
  96. :label="item.label"
  97. :value="item.value"
  98. disabled
  99. />
  100. </el-select>
  101. </el-col>
  102. </el-row>
  103. <footer
  104. slot="footer"
  105. class="dialog-footer "
  106. style="float: right"
  107. >
  108. <el-button @click="dialogTableVisibleMore = false">{{values.cancel}}</el-button>
  109. <el-button
  110. type="primary"
  111. @click="computedUpdate"
  112. >{{values.promptly}}
  113. </el-button>
  114. </footer>
  115. </div>
  116. </el-dialog>
  117. <!--设定设备对象源/末端-->
  118. <!-- <el-dialog-->
  119. <!-- :title="values.title"-->
  120. <!-- :visible.sync="dialogEquipment"-->
  121. <!-- >-->
  122. <!-- <span class="font-big">{{values.underDesign}}</span>-->
  123. <!-- <footer-->
  124. <!-- slot="footer"-->
  125. <!-- class="dialog-footer"-->
  126. <!-- >-->
  127. <!-- <el-button-->
  128. <!-- type="primary"-->
  129. <!-- @click="dialogEquipment = false"-->
  130. <!-- >{{values.confirm}}-->
  131. <!-- </el-button>-->
  132. <!-- </footer>-->
  133. <!-- </el-dialog> -->
  134. <el-dialog
  135. :title="values.title"
  136. :visible.sync="dialogEquipment"
  137. >
  138. <h4>{{values.equipmentSetting}}</h4>
  139. <el-row :gutter="20">
  140. <el-col :span="12">
  141. <p>源端设备类:</p>
  142. <el-select
  143. v-model="value"
  144. placeholder="请选择"
  145. multiple
  146. @change="changeVal"
  147. >
  148. <el-option
  149. v-for="item in oraginOption"
  150. :key="item.value"
  151. :label="item.label"
  152. :value="item.value"
  153. />
  154. </el-select>
  155. </el-col>
  156. <el-col :span="12">
  157. <p>末端设备类:</p>
  158. <el-select
  159. v-model="endValue"
  160. placeholder="请选择"
  161. >
  162. <el-option
  163. v-for="item in endOption"
  164. :key="item.value"
  165. :label="item.label"
  166. :value="item.value"
  167. disabled
  168. />
  169. </el-select>
  170. </el-col>
  171. </el-row>
  172. <!-- <setCascader @change="changeCader" :RelationTypeName="RelationTypeName"/>-->
  173. <!-- <el-row :span="24" style="margin-top: 15px">-->
  174. <!-- <el-col :span="8">-->
  175. <!-- <p class="">{{values.originEquipment}}</p>-->
  176. <!-- <el-select v-model="assetValue" placeholder="请选择" clearable filterable size="small" @change="changeVal">-->
  177. <!-- <el-option v-for="item in assetOptions" :key="item.Code" :label="item.Name" :value="item.Code"></el-option>-->
  178. <!-- </el-select>-->
  179. <!-- </el-col>-->
  180. <!-- </el-row>-->
  181. <footer
  182. slot="footer"
  183. class="dialog-footer"
  184. >
  185. <el-button @click="dialogEquipment = false">{{values.cancel}}</el-button>
  186. <el-button
  187. type="primary"
  188. @click="handleAddSource"
  189. :disabled="disabled"
  190. >{{values.preservation}}
  191. </el-button>
  192. </footer>
  193. </el-dialog>
  194. <!--手动编辑:提示引导-->
  195. <el-dialog
  196. :title="values.title"
  197. :visible.sync="dialogManualTip"
  198. >
  199. <p class="font-big">{{values.tips}}</p>
  200. <p
  201. class="font-big"
  202. v-for="item in values.device"
  203. >{{item}}</p>
  204. <footer
  205. slot="footer"
  206. class="dialog-footer "
  207. >
  208. <el-button @click="dialogManualTip = false">{{values.confirm}}
  209. </el-button>
  210. </footer>
  211. </el-dialog>
  212. <!--手动编辑:手动维护-->
  213. <el-dialog
  214. :title="values.title"
  215. :visible.sync="dialogManualOption"
  216. >
  217. <p class="option-tip">{{values.optionTips}}</p>
  218. <el-row :span="24">
  219. <el-col :span="8">
  220. <p>
  221. <i class="iconfont icon-doc-line"/>
  222. {{values.currentNum}} 0
  223. </p>
  224. <a :href="downloadProject('excel')">
  225. <el-button
  226. type="primary"
  227. class="mt-10"
  228. >
  229. {{values.download}}
  230. </el-button>
  231. </a>
  232. </el-col>
  233. <el-col :span="10">
  234. {{values.lastTime}}
  235. </el-col>
  236. </el-row>
  237. <el-upload
  238. class="upload-demo"
  239. drag
  240. action="/api/datacenter/graphic/import"
  241. multiple
  242. :show-file-list='false'
  243. name="file"
  244. :headers="headers"
  245. :data="dataId"
  246. :on-progress="progress"
  247. :on-success="success"
  248. :on-error="error"
  249. accept="xlsx,xls"
  250. >
  251. <i class="el-icon-upload"/>
  252. <div
  253. class="el-upload__text"
  254. v-html="values.uploadTxt"
  255. />
  256. <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
  257. </el-upload>
  258. </el-dialog>
  259. <!--手动编辑:手动维护.process结束-->
  260. <el-dialog
  261. :title="values.title"
  262. :visible.sync="dialogProcess"
  263. >
  264. <div class="block">
  265. <el-timeline>
  266. <el-timeline-item
  267. v-for="(activity, index) in activities"
  268. :key="index"
  269. :icon="activity.icon"
  270. :type="activity.type"
  271. :color="activity.color"
  272. :size="activity.size"
  273. >
  274. {{activity.content}}
  275. </el-timeline-item>
  276. </el-timeline>
  277. </div>
  278. <!-- 下载报告-->
  279. <a :href="downloadProject('report')">
  280. <el-button>{{values.downloadFile}}</el-button>
  281. </a>
  282. <footer
  283. slot="footer"
  284. class="dialog-footer "
  285. >
  286. <el-button @click="errBack">{{values.back}}</el-button>
  287. <el-button
  288. type="primary"
  289. @click="finish"
  290. >{{values.done}}
  291. </el-button>
  292. </footer>
  293. </el-dialog>
  294. </div>
  295. </template>
  296. <script>
  297. import {mapGetters} from 'vuex'
  298. import storage from '@/framework/utils/storage'
  299. import {addSource, calcSpecial, sourceQuery} from "@/api/relation/api";
  300. import deviceList from "@/data/deviceList.js"
  301. export default {
  302. name: "RelationMaintain",
  303. props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading', 'ManualMaintenance'],
  304. created() {
  305. },
  306. mounted() {
  307. },
  308. data() {
  309. return {
  310. dialogTableVisible: false,
  311. dialogTableVisibleMore: false,
  312. dialogEquipment: false,
  313. dialogManualTip: false,
  314. dialogManualOption: false,
  315. dialogProcess: false,
  316. originEquipment: [],
  317. endEquipment: [],
  318. props: {
  319. multiple: true,
  320. label: 'FamilyName',
  321. value: 'lId',
  322. children: 'Items',
  323. },
  324. activities: [{
  325. content: '数据文件处理中..',
  326. size: 'large',
  327. type: 'primary',
  328. icon: 'el-icon-check',
  329. color: '#0bbd87'
  330. }, {
  331. content: '数据处理成功',
  332. color: '#0bbd87',
  333. icon: 'el-icon-check',
  334. size: 'large',
  335. type: 'primary',
  336. }],
  337. vals: [],
  338. val: [],
  339. idArr: [],//存储所有选择的id
  340. secondary: [],//单独存储二级数据
  341. list: [],//获取后台数据,重新组合,添加唯一标识和源端标识
  342. resultOrigin: [],//最终传给后台的源端数据
  343. resultEnd: [],//最终传给后台的末端数据
  344. ops: [],
  345. filterOps: [],//为清空第二个选择器
  346. isResouceShow: 0,
  347. RelationTypeName: '',//卡片名称
  348. value: [],
  349. oraginOption: [],
  350. endValue: [],
  351. endOption: [],
  352. setValue: [],
  353. setOriginOption: [],
  354. setEndValue: [],
  355. setEndOptions: [],
  356. disabled: false
  357. }
  358. },
  359. computed: {
  360. ...mapGetters('layout', ['projectId']),
  361. headers() {
  362. return {
  363. 'ProjectId': this.projectId,
  364. 'Comming': 'adm',
  365. 'Account': storage.get("user_name")
  366. }
  367. },
  368. dataId() {
  369. return {
  370. relType: this.ManualMaintenance.RelationType || '',
  371. zoneType: this.ManualMaintenance.ZoneType || '',
  372. projectId: this.projectId
  373. }
  374. },
  375. disOptions() {
  376. let arr = this.list.length && this.deepCopy(this.list).map(item => {
  377. item.Items.length && item.Items.map(i => {
  378. if (this.idArr.includes(i.lId)) {
  379. i.disabled = true
  380. }
  381. return i
  382. })
  383. return item
  384. })
  385. this.filterOps = arr
  386. return arr
  387. },
  388. },
  389. methods: {
  390. deepCopy(obj) {
  391. return JSON.parse(JSON.stringify(obj))
  392. },
  393. //查询原末端回显数据
  394. handleSourceQuery() {
  395. let param = {
  396. filters: `projectId='${this.projectId}';calcName='${this.RelationTypeName}'`
  397. }
  398. sourceQuery(param, res => {
  399. this.value = []
  400. this.setValue = []
  401. res.content && res.content.forEach(({sourceType}) => this.value.push(sourceType))
  402. //启动计算
  403. res.content && res.content.forEach(({sourceType}) => this.setValue.push(sourceType))
  404. // this.setOriginOption = this.oraginOption.forEach(i => this.setValue.includes(i.value))
  405. this.changeVal(this.value)
  406. this.setValue && this.handleSetValue()
  407. })
  408. },
  409. dialogEquipmentOpen(relation) { //设定源末端
  410. this.RelationTypeName = relation.relationTypeName
  411. this.oraginOption = deviceList[relation.relationTypeName] && deviceList[relation.relationTypeName].filter(i => i.select)
  412. this.data = deviceList[relation.relationTypeName]
  413. this.disabled = this.data != undefined ? false : true
  414. // console.log(this.data, relation.RelationTypeName)
  415. this.dialogEquipment = true
  416. },
  417. changeVal(val) {
  418. // 末端展示数据
  419. this.endOption = this.data && this.data.filter(i => !val.includes(i.value))
  420. // 启动计算末端展示数据
  421. // this.setEndOptions = this.data && this.data.filter(i => !val.includes(i.value))
  422. this.sourceList = []
  423. val.forEach(i => this.sourceList.push({
  424. sourceType: i,
  425. projectId: this.projectId,
  426. calcName: this.RelationTypeName
  427. }))
  428. },
  429. handleAddSource() { //保存设备类
  430. if (this.sourceList.length) {
  431. let params = {
  432. content: this.sourceList
  433. }
  434. addSource(params, res => {
  435. this.$message.success('保存成功')
  436. })
  437. }
  438. this.dialogEquipment = false
  439. },
  440. // showCascader() {
  441. // ++this.isResouceShow
  442. // let copy = this.deepCopy(this.source)
  443. // copy.forEach(item => {
  444. // item.Items.forEach(child => {
  445. // child.lId = this.list.length
  446. // this.list.push(child)
  447. // child.Items.forEach(i => {
  448. // i.lId = i.Id + i.BlockId
  449. // i.IsSource == true && this.ops.push([child.lId, i.lId])
  450. // i.IsSource == false && this.filterOps.push([child.lId, i.lId])
  451. // })
  452. // })
  453. // })
  454. // },
  455. showCascader(relation) {
  456. this.RelationTypeName = relation.relationTypeName
  457. },
  458. handleSetValue() {
  459. let device = deviceList[this.RelationTypeName]
  460. this.setOriginOption = device && device.filter(i => this.setValue.includes(i.value))
  461. this.setEndOptions = device && device.filter(i => !this.setValue.includes(i.value))
  462. },
  463. downloadProject(str) {
  464. let relType = this.ManualMaintenance.RelationType ? `?relType=${this.ManualMaintenance.RelationType}` : ''
  465. let zoneType = this.ManualMaintenance.ZoneType ? `&zoneType=${this.ManualMaintenance.ZoneType}` : null
  466. let url;
  467. if (str === 'excel') {
  468. relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
  469. // url = `/api/datacenter/graphic/export?code=对象ID${relType}${zoneType}`
  470. if (zoneType) {
  471. url = `/api/datacenter/graphic/export${relType}${zoneType}&projectId=${this.projectId}&code=对象ID`
  472. } else {
  473. url = `/api/datacenter/graphic/export${relType}&projectId=${this.projectId}&code=对象ID`
  474. }
  475. } else {
  476. url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}&projectId=${this.projectId}`
  477. }
  478. return url
  479. },
  480. progress(event, file, fileList) {
  481. // console.log(event.file, fileList)
  482. },
  483. success(event, file, fileList) {
  484. this.dialogManualOption = true
  485. this.dialogProcess = true
  486. },
  487. error(event, file, fileList) {
  488. this.dialogManualOption = true
  489. this.dialogProcess = true
  490. },
  491. errBack() {
  492. this.dialogProcess = false
  493. },
  494. finish() {
  495. this.dialogProcess = false
  496. this.dialogManualOption = false
  497. },
  498. promptly() {
  499. if (this.isComputed.automatic && !this.isComputed.source) { //需要自动计算并且不需要配置云末端
  500. this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
  501. }
  502. this.dialogTableVisible = false
  503. },
  504. sourceOptions(val) {
  505. // this.ops = val
  506. this.idArr = val.map(item => item[1])
  507. this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
  508. let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
  509. //接口需要的数据格式
  510. filterList.forEach(item => {
  511. let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Type, Statistics} = item
  512. this.resultOrigin.push({
  513. BlockId,
  514. BuildingId,
  515. Domain,
  516. // Id,
  517. MepSystemType,
  518. ProjectId,
  519. Source: true,
  520. SourceId: Id,
  521. SourceType: Type,
  522. Statistics
  523. })
  524. })
  525. },
  526. endOptions(val) {
  527. this.idArr = val.map(item => item[1])
  528. this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
  529. let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
  530. //接口需要的数据格式
  531. filterList.forEach(item => {
  532. let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Type, Statistics} = item
  533. this.resultEnd.push({
  534. BlockId,
  535. BuildingId,
  536. Domain,
  537. // Id,
  538. MepSystemType,
  539. ProjectId,
  540. Source: false,
  541. SourceId: Id,
  542. SourceType: Type,
  543. Statistics
  544. })
  545. })
  546. },
  547. computedUpdate() {
  548. // if (!this.resultOrigin.length && !this.ops.length) {
  549. // this.$message({
  550. // showClose: true,
  551. // message: '请选择源端设备类',
  552. // type: 'warning'
  553. // });
  554. // return false
  555. // } else {
  556. // if (this.resultOrigin.length || this.resultEnd.length) {
  557. // this.resultOrigin.push(...this.resultEnd)
  558. // this.$emit('openComputed', this.resultOrigin)
  559. // }
  560. // this.dialogTableVisibleMore = false
  561. //
  562. // }
  563. // this.resultOrigin.push(...this.resultEnd)
  564. // this.$emit('openComputed', this.resultOrigin)
  565. this.dialogTableVisibleMore = false
  566. let params = {
  567. projectId: this.projectId,
  568. relationType: this.isComputed.relationType
  569. }
  570. calcSpecial(params, res => {
  571. this.$message.success('计算成功')
  572. })
  573. },
  574. }
  575. }
  576. </script>
  577. <style scoped lang="less">
  578. .relation-maintain {
  579. .mt-10 {
  580. margin-top: 10px;
  581. }
  582. .danger {
  583. color: #d9001b;
  584. }
  585. .font-big {
  586. font-weight: 600;
  587. }
  588. .exist-title {
  589. font-size: 12px;
  590. color: #AAAAAA;
  591. }
  592. .option-tip {
  593. font-size: 18px;
  594. font-weight: 600;
  595. }
  596. .upload-demo {
  597. margin: 20px 0;
  598. }
  599. /deep/ .el-upload-dragger {
  600. width: 600px;
  601. margin: 0 auto;
  602. }
  603. }
  604. </style>