index.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <div class="filterTable-container">
  3. <el-table
  4. ref="filterTable"
  5. :data="tableData"
  6. style="width: 100%"
  7. size="small"
  8. height="100%"
  9. :header-cell-style="{ background: '#d9d9d9', color: '#2b2b2b', height: '41px' }"
  10. >
  11. <el-table-column prop="FloorName" align="center" label="楼层本地名" width="100"></el-table-column>
  12. <el-table-column prop="Version" label="版本号" align="center"></el-table-column>
  13. <!-- <el-table-column label="版本号">
  14. <template slot-scope="scope">
  15. <span style="margin-right: 5px">{{ scope.row.Version }}</span>
  16. <i
  17. v-show="scope.row.Version && scope.row.Status === 4"
  18. class="iconfont icon-warn"
  19. style="cursor: pointer; position: relative; top: 1px"
  20. title="查看版本更新信息"
  21. @click="handleClickVersion(scope.row)"
  22. ></i>
  23. </template>
  24. </el-table-column> -->
  25. <el-table-column prop="AcceptTime" label="时间" width="240" align="center"></el-table-column>
  26. <el-table-column prop="UserName" label="上传人"></el-table-column>
  27. <el-table-column prop="address" align="center" label="操作" width="240">
  28. <template slot-scope="scope">
  29. <div class="operate" v-show="scope.row.Status === 4">
  30. <el-button
  31. title="下载模型"
  32. type="primary"
  33. size="mini"
  34. class="el-icon-download"
  35. @click="downloadModel(scope.row)"
  36. ></el-button>
  37. <el-button
  38. title="替换模型"
  39. type="primary"
  40. size="mini"
  41. class="el-icon-refresh"
  42. @click="replaceModel(scope.row)"
  43. ></el-button>
  44. <el-button
  45. title="查看版本日志"
  46. type="primary"
  47. size="mini"
  48. class="el-icon-bank-card"
  49. @click="queryModelLog(scope.row)"
  50. ></el-button>
  51. <el-button
  52. title="下载BIMID模型"
  53. type="primary"
  54. size="mini"
  55. class="el-icon-download"
  56. @click="downloadModelBIMID(scope.row)"
  57. ></el-button>
  58. </div>
  59. <div :class="['upLoad-loading']" v-show="scope.row.Status !== 4">
  60. <div class="progress">
  61. <el-progress
  62. :text-inside="false"
  63. :stroke-width="20"
  64. :percentage="100"
  65. :color="scope.row.Status ? '#909399' : '#67C23A'"
  66. ></el-progress>
  67. </div>
  68. <div class="progress-right">
  69. <span v-if="!scope.row.Status">上传中...</span>
  70. <span v-else-if="scope.row.Status === 1">等待检查...</span>
  71. <span v-else>模型检查中...</span>
  72. <!-- <span v-show="!scope.row.Status">上传中...</span>
  73. <span v-show="scope.row.Status == 1">等待检查...</span>
  74. <span v-show="scope.row.Status == 10">模型检查中...</span>
  75. <span v-show="scope.row.Status == 11">未通过检查</span>
  76. <span v-show="scope.row.Status == 2 || scope.row.Status == 20">等待数据导出...</span>
  77. <span v-show="scope.row.Status == 21">模型数据导出失败</span>
  78. <span v-show="scope.row.Status == 3">处理导出数据中...</span>
  79. <span v-show="scope.row.Status == 31">同步到数据中心失败</span> -->
  80. </div>
  81. </div>
  82. </template>
  83. </el-table-column>
  84. </el-table>
  85. </div>
  86. </template>
  87. <script lang="ts">
  88. import { Vue, Component, Prop, Emit, Ref } from "vue-property-decorator";
  89. import { UserModule } from "@/store/modules/user";
  90. import { ElTable } from "element-ui/types/table";
  91. @Component({
  92. name: "FloorTable",
  93. components: {},
  94. })
  95. export default class extends Vue {
  96. @Prop({ default: [] }) private tableData!: any[];
  97. @Prop({ default: "" }) private modelFolderName!: string;
  98. @Ref("filterTable") readonly filterTable!: ElTable;
  99. private get projectId() {
  100. return UserModule.projectId;
  101. }
  102. /**
  103. * 查看日志
  104. */
  105. @Emit("openModelLog")
  106. private queryModelLog(item: any) {
  107. return item;
  108. }
  109. /**
  110. * 替换模型
  111. */
  112. private replaceModel(item: any) {
  113. if (item.Status !== 4) {
  114. this.$alert("正在识别模型对象,请稍后再替换。", "替换模型", { confirmButtonText: "确定" });
  115. } else {
  116. this.$emit("replaceModel", item);
  117. }
  118. }
  119. /**
  120. * 下载模型文件
  121. */
  122. private downloadModel(item: any) {
  123. let url = item.Url.match(/(\/image-service\S*)$/g) ? item.Url.match(/(\/image-service\S*)$/g)[0] : "";
  124. if (url) {
  125. let a = document.createElement("a");
  126. a.href = url;
  127. a.download = `${this.modelFolderName}${item.FloorName}模型文件v${item.Version}.rvt`;
  128. a.click();
  129. document.body.removeChild(a);
  130. } else {
  131. this.$message({
  132. message: "该文件夹下没有资源",
  133. type: "error",
  134. });
  135. }
  136. }
  137. /**
  138. * 下载BIMID模型文件
  139. */
  140. private downloadModelBIMID(item: any) {
  141. let url = item.Url.match(/(\/image-service\S*)$/g) ? item.Url.match(/(\/image-service\S*)$/g)[0] : "";
  142. if (url) {
  143. let a = document.createElement("a");
  144. a.href = url;
  145. a.download = `${this.projectId}${item.FolderId}${item.FloorName}.rvt`;
  146. a.click();
  147. document.body.removeChild(a);
  148. } else {
  149. this.$message({
  150. message: "该文件夹下没有资源",
  151. type: "error",
  152. });
  153. }
  154. }
  155. }
  156. </script>
  157. <style scoped lang="scss">
  158. .box-card {
  159. height: 100%;
  160. .filterTable-container {
  161. height: calc(100% - 51px);
  162. }
  163. .operate {
  164. .iconfont {
  165. font-size: 12px;
  166. padding: 7px 12px;
  167. }
  168. }
  169. .icon-termination {
  170. color: #f56c6c;
  171. background: #fff;
  172. padding: 0;
  173. border: 0;
  174. font-size: 20px;
  175. margin-left: 5px;
  176. }
  177. .upLoad {
  178. display: flex;
  179. justify-content: center;
  180. align-items: center;
  181. padding: 4px 0;
  182. .progress {
  183. // width: 150px;
  184. width: 175px;
  185. height: 20px;
  186. }
  187. .progress-right {
  188. height: 20px;
  189. line-height: 20px;
  190. }
  191. }
  192. .upLoad-loading {
  193. position: relative;
  194. justify-content: center;
  195. .progress {
  196. width: 220px;
  197. height: 20px;
  198. }
  199. .progress-right {
  200. position: absolute;
  201. left: 50%;
  202. top: 50%;
  203. transform: translate(-50%, -50%);
  204. color: #fff;
  205. }
  206. }
  207. }
  208. ::v-deep .el-icon-warning {
  209. display: none;
  210. // color: transparent;
  211. }
  212. ::v-deep .el-progress__text {
  213. display: none;
  214. }
  215. ::v-deep .upLoad-loading .el-progress-bar {
  216. padding-right: 44px;
  217. margin-right: -44px;
  218. }
  219. ::v-deep .el-progress-bar__inner {
  220. text-align: center;
  221. }
  222. </style>