RelationMaintain.vue 12 KB

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