RelationMaintain.vue 15 KB

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