RelationMaintain.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  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. <footer
  68. slot="footer"
  69. class="dialog-footer "
  70. style="float: right"
  71. >
  72. <el-button @click="dialogTableVisibleMore = false">{{values.cancel}}</el-button>
  73. <el-button
  74. type="primary"
  75. @click="computedUpdate"
  76. >{{values.promptly}}
  77. </el-button>
  78. </footer>
  79. </div>
  80. </el-dialog>
  81. <!--设定设备对象源/末端-->
  82. <!-- <el-dialog-->
  83. <!-- :title="values.title"-->
  84. <!-- :visible.sync="dialogEquipment"-->
  85. <!-- >-->
  86. <!-- <span class="font-big">{{values.underDesign}}</span>-->
  87. <!-- <footer-->
  88. <!-- slot="footer"-->
  89. <!-- class="dialog-footer"-->
  90. <!-- >-->
  91. <!-- <el-button-->
  92. <!-- type="primary"-->
  93. <!-- @click="dialogEquipment = false"-->
  94. <!-- >{{values.confirm}}-->
  95. <!-- </el-button>-->
  96. <!-- </footer>-->
  97. <!-- </el-dialog> -->
  98. <el-dialog
  99. :title="values.title"
  100. :visible.sync="dialogEquipment"
  101. >
  102. <h4>{{values.equipmentSetting}}</h4>
  103. <setCascader @change="changeCader" :RelationTypeName="RelationTypeName"/>
  104. <!-- <el-row :span="24" style="margin-top: 15px">-->
  105. <!-- <el-col :span="8">-->
  106. <!-- <p class="">{{values.originEquipment}}</p>-->
  107. <!-- <el-select v-model="assetValue" placeholder="请选择" clearable filterable size="small" @change="changeVal">-->
  108. <!-- <el-option v-for="item in assetOptions" :key="item.Code" :label="item.Name" :value="item.Code"></el-option>-->
  109. <!-- </el-select>-->
  110. <!-- </el-col>-->
  111. <!-- </el-row>-->
  112. <footer
  113. slot="footer"
  114. class="dialog-footer"
  115. >
  116. <el-button @click="dialogEquipment = false">{{values.cancel}}</el-button>
  117. <el-button
  118. type="primary"
  119. @click="handleAddSource"
  120. >{{values.preservation}}
  121. </el-button>
  122. </footer>
  123. </el-dialog>
  124. <!--手动编辑:提示引导-->
  125. <el-dialog
  126. :title="values.title"
  127. :visible.sync="dialogManualTip"
  128. >
  129. <p class="font-big">{{values.tips}}</p>
  130. <p
  131. class="font-big"
  132. v-for="item in values.device"
  133. >{{item}}</p>
  134. <footer
  135. slot="footer"
  136. class="dialog-footer "
  137. >
  138. <el-button @click="dialogManualTip = false">{{values.confirm}}
  139. </el-button>
  140. </footer>
  141. </el-dialog>
  142. <!--手动编辑:手动维护-->
  143. <el-dialog
  144. :title="values.title"
  145. :visible.sync="dialogManualOption"
  146. >
  147. <p class="option-tip">{{values.optionTips}}</p>
  148. <el-row :span="24">
  149. <el-col :span="8">
  150. <p>
  151. <i class="iconfont icon-doc-line"/>
  152. {{values.currentNum}} 0
  153. </p>
  154. <a :href="downloadProject('excel')">
  155. <el-button
  156. type="primary"
  157. class="mt-10"
  158. >
  159. {{values.download}}
  160. </el-button>
  161. </a>
  162. </el-col>
  163. <el-col :span="10">
  164. {{values.lastTime}}
  165. </el-col>
  166. </el-row>
  167. <el-upload
  168. class="upload-demo"
  169. drag
  170. action="/api/datacenter/graphic/import"
  171. multiple
  172. :show-file-list='false'
  173. name="file"
  174. :headers="headers"
  175. :data="dataId"
  176. :on-progress="progress"
  177. :on-success="success"
  178. :on-error="error"
  179. accept="xlsx,xls"
  180. >
  181. <i class="el-icon-upload"/>
  182. <div
  183. class="el-upload__text"
  184. v-html="values.uploadTxt"
  185. />
  186. <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
  187. </el-upload>
  188. </el-dialog>
  189. <!--手动编辑:手动维护.process结束-->
  190. <el-dialog
  191. :title="values.title"
  192. :visible.sync="dialogProcess"
  193. >
  194. <div class="block">
  195. <el-timeline>
  196. <el-timeline-item
  197. v-for="(activity, index) in activities"
  198. :key="index"
  199. :icon="activity.icon"
  200. :type="activity.type"
  201. :color="activity.color"
  202. :size="activity.size"
  203. >
  204. {{activity.content}}
  205. </el-timeline-item>
  206. </el-timeline>
  207. </div>
  208. <!-- 下载报告-->
  209. <a :href="downloadProject('report')">
  210. <el-button>{{values.downloadFile}}</el-button>
  211. </a>
  212. <footer
  213. slot="footer"
  214. class="dialog-footer "
  215. >
  216. <el-button @click="errBack">{{values.back}}</el-button>
  217. <el-button
  218. type="primary"
  219. @click="finish"
  220. >{{values.done}}
  221. </el-button>
  222. </footer>
  223. </el-dialog>
  224. </div>
  225. </template>
  226. <script>
  227. import {mapGetters} from 'vuex'
  228. import storage from '@/framework/utils/storage'
  229. import setCascader from "./setCascader";
  230. import getCascader from "./getCascader";
  231. import {addSource, calcSpecial} from "@/api/relation/api";
  232. export default {
  233. name: "RelationMaintain",
  234. props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading', 'ManualMaintenance'],
  235. components: {setCascader,getCascader},
  236. created() {
  237. // this.showCascader()
  238. },
  239. mounted() {
  240. this.$nextTick(() => {
  241. console.log(this.$refs.child1, '===')
  242. })
  243. },
  244. data() {
  245. return {
  246. dialogTableVisible: false,
  247. dialogTableVisibleMore: false,
  248. dialogEquipment: false,
  249. dialogManualTip: false,
  250. dialogManualOption: false,
  251. dialogProcess: false,
  252. originEquipment: [],
  253. endEquipment: [],
  254. props: {
  255. multiple: true,
  256. label: 'FamilyName',
  257. value: 'lId',
  258. children: 'Items',
  259. },
  260. activities: [{
  261. content: '数据文件处理中..',
  262. size: 'large',
  263. type: 'primary',
  264. icon: 'el-icon-check',
  265. color: '#0bbd87'
  266. }, {
  267. content: '数据处理成功',
  268. color: '#0bbd87',
  269. icon: 'el-icon-check',
  270. size: 'large',
  271. type: 'primary',
  272. }],
  273. vals: [],
  274. val: [],
  275. idArr: [],//存储所有选择的id
  276. secondary: [],//单独存储二级数据
  277. list: [],//获取后台数据,重新组合,添加唯一标识和源端标识
  278. resultOrigin: [],//最终传给后台的源端数据
  279. resultEnd: [],//最终传给后台的末端数据
  280. ops: [],
  281. filterOps: [],//为清空第二个选择器
  282. isResouceShow: 0,
  283. assetOptions: [],
  284. assetValue: '',
  285. assetValueLast: '',
  286. RelationTypeName: '',//卡片名称
  287. deviceGroup: [],
  288. deviceValue: '',
  289. number: 0
  290. }
  291. },
  292. computed: {
  293. ...mapGetters('layout', ['projectId']),
  294. headers() {
  295. return {
  296. 'ProjectId': this.projectId,
  297. 'Comming': 'adm',
  298. 'Account': storage.get("user_name")
  299. }
  300. },
  301. dataId() {
  302. return {
  303. relType: this.ManualMaintenance.RelationType || '',
  304. zoneType: this.ManualMaintenance.ZoneType || '',
  305. projectId: this.projectId
  306. }
  307. },
  308. disOptions() {
  309. let arr = this.list.length && this.deepCopy(this.list).map(item => {
  310. item.Items.length && item.Items.map(i => {
  311. if (this.idArr.includes(i.lId)) {
  312. i.disabled = true
  313. }
  314. return i
  315. })
  316. return item
  317. })
  318. this.filterOps = arr
  319. return arr
  320. },
  321. },
  322. methods: {
  323. deepCopy(obj) {
  324. return JSON.parse(JSON.stringify(obj))
  325. },
  326. dialogEquipmentOpen(relation) {
  327. this.RelationTypeName = relation.RelationTypeName
  328. this.dialogEquipment = true
  329. },
  330. changeCader(val) { //勾选的设备类
  331. this.sourceList = []
  332. val.forEach(i => this.sourceList.push({
  333. SourceType: i,
  334. ProjectId: this.projectId,
  335. CalcName: this.RelationTypeName
  336. }))
  337. },
  338. handleAddSource() { //保存设备类
  339. let params = {
  340. Content: this.sourceList
  341. }
  342. addSource(params, res => {
  343. ++this.number
  344. this.$message.success('保存成功')
  345. })
  346. this.dialogEquipment = false
  347. },
  348. // showCascader() {
  349. // ++this.isResouceShow
  350. // let copy = this.deepCopy(this.source)
  351. // copy.forEach(item => {
  352. // item.Items.forEach(child => {
  353. // child.lId = this.list.length
  354. // this.list.push(child)
  355. // child.Items.forEach(i => {
  356. // i.lId = i.Id + i.BlockId
  357. // i.IsSource == true && this.ops.push([child.lId, i.lId])
  358. // i.IsSource == false && this.filterOps.push([child.lId, i.lId])
  359. // })
  360. // })
  361. // })
  362. // },
  363. showCascader(relation) {
  364. this.RelationTypeName = relation.RelationTypeName
  365. // this.$refs.getUpdate.getData()
  366. },
  367. downloadProject(str) {
  368. let relType = this.ManualMaintenance.RelationType ? `?relType=${this.ManualMaintenance.RelationType}` : ''
  369. let zoneType = this.ManualMaintenance.ZoneType ? `&zoneType=${this.ManualMaintenance.ZoneType}` : null
  370. let url;
  371. if (str === 'excel') {
  372. relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
  373. // url = `/api/datacenter/graphic/export?code=对象ID${relType}${zoneType}`
  374. if (zoneType) {
  375. url = '/api/datacenter/graphic/export?code=对象ID' + relType + zoneType
  376. } else {
  377. url = '/api/datacenter/graphic/export?code=对象ID' + relType
  378. }
  379. } else {
  380. url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}`
  381. }
  382. return url
  383. },
  384. progress(event, file, fileList) {
  385. // console.log(event.file, fileList)
  386. },
  387. success(event, file, fileList) {
  388. this.dialogManualOption = true
  389. this.dialogProcess = true
  390. },
  391. error(event, file, fileList) {
  392. this.dialogManualOption = true
  393. this.dialogProcess = true
  394. },
  395. errBack() {
  396. this.dialogProcess = false
  397. },
  398. finish() {
  399. this.dialogProcess = false
  400. this.dialogManualOption = false
  401. },
  402. promptly() {
  403. if (this.isComputed.IsAutomatic && !this.isComputed.IsSource) { //需要自动计算并且不需要配置云末端
  404. this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
  405. }
  406. this.dialogTableVisible = false
  407. },
  408. sourceOptions(val) {
  409. // this.ops = val
  410. this.idArr = val.map(item => item[1])
  411. this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
  412. let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
  413. //接口需要的数据格式
  414. filterList.forEach(item => {
  415. let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Type, Statistics} = item
  416. this.resultOrigin.push({
  417. BlockId,
  418. BuildingId,
  419. Domain,
  420. // Id,
  421. MepSystemType,
  422. ProjectId,
  423. Source: true,
  424. SourceId: Id,
  425. SourceType: Type,
  426. Statistics
  427. })
  428. })
  429. },
  430. endOptions(val) {
  431. this.idArr = val.map(item => item[1])
  432. this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
  433. let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
  434. //接口需要的数据格式
  435. filterList.forEach(item => {
  436. let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Type, Statistics} = item
  437. this.resultEnd.push({
  438. BlockId,
  439. BuildingId,
  440. Domain,
  441. // Id,
  442. MepSystemType,
  443. ProjectId,
  444. Source: false,
  445. SourceId: Id,
  446. SourceType: Type,
  447. Statistics
  448. })
  449. })
  450. },
  451. computedUpdate() {
  452. // if (!this.resultOrigin.length && !this.ops.length) {
  453. // this.$message({
  454. // showClose: true,
  455. // message: '请选择源端设备类',
  456. // type: 'warning'
  457. // });
  458. // return false
  459. // } else {
  460. // if (this.resultOrigin.length || this.resultEnd.length) {
  461. // this.resultOrigin.push(...this.resultEnd)
  462. // this.$emit('openComputed', this.resultOrigin)
  463. // }
  464. // this.dialogTableVisibleMore = false
  465. //
  466. // }
  467. // this.resultOrigin.push(...this.resultEnd)
  468. // this.$emit('openComputed', this.resultOrigin)
  469. this.dialogTableVisibleMore = false
  470. let params = {
  471. ProjectId: this.projectId,
  472. RelationType: this.isComputed.RelationType
  473. }
  474. calcSpecial(params, res => {
  475. this.$message.success('计算成功')
  476. })
  477. },
  478. }
  479. }
  480. </script>
  481. <style scoped lang="less">
  482. .relation-maintain {
  483. .mt-10 {
  484. margin-top: 10px;
  485. }
  486. .danger {
  487. color: #d9001b;
  488. }
  489. .font-big {
  490. font-weight: 600;
  491. }
  492. .exist-title {
  493. font-size: 12px;
  494. color: #AAAAAA;
  495. }
  496. .option-tip {
  497. font-size: 18px;
  498. font-weight: 600;
  499. }
  500. .upload-demo {
  501. margin: 20px 0;
  502. }
  503. /deep/ .el-upload-dragger {
  504. width: 600px;
  505. margin: 0 auto;
  506. }
  507. }
  508. </style>