exportExcel.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <div class="export-excel">
  3. <el-dialog
  4. :title="values.relation_maintenance"
  5. :visible.sync="dialogExport"
  6. >
  7. <p class="option-tip">{{values.optionTips}}</p>
  8. <el-row :span="24">
  9. <el-col :span="8">
  10. <p>
  11. <i class="iconfont icon-doc-line"/>
  12. {{values.currentNum}}{{length}}
  13. </p>
  14. <a :href="downloadProject('excel')">
  15. <!-- <a :href=`/api/datacenter/graphic/export?code=对象ID${localStorage.getItem('RelationType')?relType=${localStorage.getItem('RelationType')} : null}${ localStorage.getItem('ZoneType') ? `&zoneType=${localStorage.getItem('ZoneType')}` : null}` >-->
  16. <el-button
  17. type="primary"
  18. class="mt-10"
  19. >
  20. {{values.download}}
  21. </el-button>
  22. </a>
  23. </el-col>
  24. <el-col :span="10">
  25. {{values.lastTime}}
  26. </el-col>
  27. </el-row>
  28. <el-upload
  29. class="upload-demo"
  30. :drag="true"
  31. action="/api/datacenter/graphic/import"
  32. multiple
  33. :show-file-list='false'
  34. name="file"
  35. :headers="headers"
  36. :data="dataId"
  37. :on-progress="progress"
  38. :on-success="success"
  39. :on-error="error"
  40. >
  41. <i class="el-icon-upload"/>
  42. <div
  43. class="el-upload__text"
  44. v-html="values.uploadTxt"
  45. />
  46. <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
  47. </el-upload>
  48. </el-dialog>
  49. <!--手动编辑:手动维护.process结束-->
  50. <el-dialog
  51. :title="values.relation_maintenance"
  52. :visible.sync="dialogProcess"
  53. >
  54. <div class="block">
  55. <el-timeline>
  56. <el-timeline-item
  57. v-for="(activity, index) in activities"
  58. :key="index"
  59. :icon="activity.icon"
  60. :type="activity.type"
  61. :color="activity.color"
  62. :size="activity.size"
  63. >
  64. {{activity.content}}
  65. </el-timeline-item>
  66. </el-timeline>
  67. </div>
  68. <!-- 下载报告-->
  69. <a :href="downloadProject('report')">
  70. <el-button>{{values.downloadFile}}</el-button>
  71. </a>
  72. <footer
  73. slot="footer"
  74. class="dialog-footer "
  75. >
  76. <el-button @click="errBack">{{values.back}}</el-button>
  77. <el-button
  78. type="primary"
  79. @click="finish"
  80. >{{values.done}}
  81. </el-button>
  82. </footer>
  83. </el-dialog>
  84. </div>
  85. </template>
  86. <script>
  87. import {mapGetters} from 'vuex'
  88. import storage from '@/framework/utils/storage'
  89. export default {
  90. name: "exportExcel",
  91. props: ['values','length'],
  92. data() {
  93. return {
  94. // relationCount:localStorage.getItem('count'),
  95. dialogExport: false,
  96. dialogProcess: false,
  97. activities: [{
  98. content: '数据文件处理中..',
  99. size: 'large',
  100. type: 'primary',
  101. icon: 'el-icon-check',
  102. color: '#0bbd87'
  103. }, {
  104. content: '数据处理成功',
  105. color: '#0bbd87',
  106. icon: 'el-icon-check',
  107. size: 'large',
  108. type: 'primary',
  109. }],
  110. }
  111. },
  112. computed: {
  113. ...mapGetters('layout', ['projectId']),
  114. headers() {
  115. return {
  116. 'ProjectId': this.projectId,
  117. 'Comming': 'adm',
  118. 'Account': storage.get("user_name")
  119. }
  120. },
  121. dataId() {
  122. return {
  123. relType: localStorage.getItem('RelationType') || '',
  124. zoneType: localStorage.getItem('ZoneType') || '',
  125. projectId: this.projectId
  126. }
  127. },
  128. },
  129. methods: {
  130. downloadProject(str) {
  131. let relType = localStorage.getItem('RelationType') != '' ? `?relType=${localStorage.getItem('RelationType')}` : '';
  132. let zoneType = localStorage.getItem('ZoneType') != '' ? `&zoneType=${localStorage.getItem('ZoneType')}` : '';
  133. let url;
  134. if (str === 'excel') {
  135. relType = localStorage.getItem('RelationType') ? `&relType=${localStorage.getItem('RelationType')}` : '';
  136. url = `/api/datacenter/graphic/export?projectId=${this.projectId}&code=对象ID${relType}${zoneType}`
  137. } else {
  138. url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}`
  139. }
  140. return url
  141. },
  142. progress(event, file, fileList) {
  143. // console.log(event.file, fileList)
  144. },
  145. success(event, file, fileList) {
  146. this.dialogExport = true
  147. this.dialogProcess = true
  148. },
  149. error(event, file, fileList) {
  150. this.dialogExport = true
  151. this.dialogProcess = true
  152. },
  153. errBack() {
  154. this.dialogProcess = false
  155. },
  156. finish() {
  157. this.dialogProcess = false
  158. this.dialogExport = false
  159. },
  160. }
  161. }
  162. </script>
  163. <style scoped lang="less">
  164. .export-excel {
  165. .mt-10 {
  166. margin-top: 10px;
  167. }
  168. .danger {
  169. color: #d9001b;
  170. }
  171. .font-big {
  172. font-weight: 600;
  173. }
  174. .exist-title {
  175. font-size: 12px;
  176. color: #AAAAAA;
  177. }
  178. .option-tip {
  179. font-size: 18px;
  180. font-weight: 600;
  181. }
  182. .upload-demo {
  183. margin: 20px 0;
  184. }
  185. /deep/ .el-upload-dragger {
  186. width: 600px;
  187. margin: 0 auto;
  188. }
  189. }
  190. </style>