floorTable.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <template>
  2. <div class="filterTable-container">
  3. <el-table
  4. ref="filterTable"
  5. :data="tableData"
  6. style="width: 100%"
  7. height="100%"
  8. :header-cell-style="{ background: '#d9d9d9', color: '#2b2b2b' }"
  9. >
  10. <el-table-column prop="FloorName" label="模型文件" width="180">
  11. <template slot-scope="scope">
  12. <i
  13. v-if="scope.row.Status == 4"
  14. class="iconfont icon-yun--tianchong"
  15. style="color: #67c23a; cursor: pointer; fontsize: 18px"
  16. title="模型校验完成..."
  17. @click="toPathControl(scope.row)"
  18. ></i>
  19. <i
  20. v-else-if="scope.row.Status == 31"
  21. class="iconfont icon-yun--tianchong1"
  22. style="color: #f56c6c; cursor: pointer; fontsize: 18px"
  23. title="同步到数据中心出问题..."
  24. @click="toPathControl(scope.row)"
  25. ></i>
  26. <i
  27. v-else-if="scope.row.Status == 21"
  28. class="iconfont icon-yun--tianchong1"
  29. style="color: #f56c6c; cursor: pointer; fontsize: 18px"
  30. title="模型数据导出出问题..."
  31. @click="toPathControl(scope.row)"
  32. ></i>
  33. <i
  34. v-else
  35. class="iconfont icon-yun--tianchong2"
  36. style="color: #e6a23c; cursor: pointer; fontsize: 18px"
  37. title="模型校验进行中..."
  38. @click="toPathControl(scope.row)"
  39. ></i>
  40. <span style="margin-left: 10px">{{ scope.row.FloorName }}</span>
  41. </template>
  42. </el-table-column>
  43. <el-table-column
  44. prop="Note"
  45. label="备注"
  46. :show-overflow-tooltip="true"
  47. width="240"
  48. ></el-table-column>
  49. <el-table-column label="版本号">
  50. <template slot-scope="scope">
  51. <span style="margin-right: 5px">{{ scope.row.Version }}</span>
  52. <i
  53. v-show="scope.row.Version && scope.row.Status == 4"
  54. class="iconfont icon-warn"
  55. style="cursor: pointer; position: relative; top: 1px"
  56. title="查看版本更新信息"
  57. @click="handleClickVersion(scope.row)"
  58. ></i>
  59. </template>
  60. </el-table-column>
  61. <el-table-column prop="RevitVersion" label="revit版本"></el-table-column>
  62. <el-table-column
  63. prop="AcceptTime"
  64. label="上传时间"
  65. width="200"
  66. ></el-table-column>
  67. <el-table-column prop="UserName" label="上传人"></el-table-column>
  68. <el-table-column prop="address" align="center" label="操作" width="240">
  69. <template slot-scope="scope">
  70. <div class="operate" v-show="scope.row.Status == 4">
  71. <el-button
  72. title="下载模型"
  73. type="primary"
  74. size="mini"
  75. class="iconfont icon-download"
  76. @click="downloadModel(scope.row)"
  77. ></el-button>
  78. <el-button
  79. title="替换模型"
  80. type="primary"
  81. size="mini"
  82. class="iconfont icon-replace"
  83. @click="repliaceModel(scope.row)"
  84. ></el-button>
  85. <el-button
  86. title="查看版本日志"
  87. type="primary"
  88. size="mini"
  89. class="iconfont icon-Log"
  90. @click="queryModelLog(scope.row)"
  91. ></el-button>
  92. <el-button
  93. title="下载BIMID模型"
  94. type="primary"
  95. size="mini"
  96. class="el-icon-download"
  97. @click="downloadModelBIMID(scope.row)"
  98. ></el-button>
  99. </div>
  100. <div :class="['upLoad-loading']" v-show="scope.row.Status != 4">
  101. <div class="progress">
  102. <el-progress
  103. :text-inside="false"
  104. :stroke-width="20"
  105. :percentage="100"
  106. :color="scope.row.Status ? '#909399' : '#67C23A'"
  107. ></el-progress>
  108. </div>
  109. <div class="progress-right">
  110. <span v-if="!scope.row.Status">上传中...</span>
  111. <span v-else-if="scope.row.Status == 1">等待检查...</span>
  112. <span v-else>模型检查中...</span>
  113. <!-- <span v-show="!scope.row.Status">上传中...</span>
  114. <span v-show="scope.row.Status == 1">等待检查...</span>
  115. <span v-show="scope.row.Status == 10">模型检查中...</span>
  116. <span v-show="scope.row.Status == 11">未通过检查</span>
  117. <span v-show="scope.row.Status == 2 || scope.row.Status == 20">等待数据导出...</span>
  118. <span v-show="scope.row.Status == 21">模型数据导出失败</span>
  119. <span v-show="scope.row.Status == 3">处理导出数据中...</span>
  120. <span v-show="scope.row.Status == 31">同步到数据中心失败</span> -->
  121. </div>
  122. </div>
  123. </template>
  124. </el-table-column>
  125. </el-table>
  126. <version-dialog
  127. :dialogVisible.sync="dialogVisible"
  128. :modelFile="modelFile"
  129. ref="addSpaceDialog"
  130. ></version-dialog>
  131. </div>
  132. </template>
  133. <script>
  134. import { mapGetters } from "vuex";
  135. import versionDialog from "@/components/model/file/versionDialog";
  136. export default {
  137. components: {
  138. versionDialog,
  139. },
  140. props: {
  141. tableData: Array,
  142. persentList: Array,
  143. modelFolderName: String,
  144. },
  145. data() {
  146. return {
  147. maxHeight: 0,
  148. dialogVisible: false,
  149. modelFile: null,
  150. };
  151. },
  152. computed: {
  153. ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"]),
  154. },
  155. methods: {
  156. // 查看日志
  157. queryModelLog(item) {
  158. this.$emit("openModelLog", item);
  159. },
  160. // 查看版本信息
  161. handleClickVersion(item) {
  162. this.modelFile = item;
  163. this.dialogVisible = true;
  164. },
  165. // 替换日志
  166. repliaceModel(item) {
  167. if (item.Status != 4) {
  168. this.$alert("正在识别模型对象,请稍后再替换。", "替换模型", {
  169. confirmButtonText: "确定",
  170. callback: (action) => {},
  171. });
  172. } else {
  173. this.$emit("replaceModel", item);
  174. }
  175. },
  176. filterTag(Id, precent) {
  177. this.$refs.filterTable.data.map((item) => {
  178. if (item.Id == Id) {
  179. if (precent >= 100) {
  180. // 如过precent == 100 不能关闭进度条,
  181. if (precent == 100) {
  182. item.precent = 99;
  183. } else if (precent == 101) {
  184. // 如过precent == 101 则返回结果为suceess 不能关闭进度条,
  185. item.precent = 100;
  186. this.$emit("percentFinish");
  187. }
  188. return;
  189. } else {
  190. item.precent = precent;
  191. }
  192. }
  193. });
  194. },
  195. // 下载模型文件
  196. downloadModel(item) {
  197. let url =
  198. item.FetchUrl ||
  199. (item.Url.match(/(\/image-service\S*)$/g)
  200. ? item.Url.match(/(\/image-service\S*)$/g)[0]
  201. : "");
  202. if (url) {
  203. let a = document.createElement("a");
  204. a.href = url;
  205. a.target = "_blank";
  206. a.download = `${this.modelFolderName}${item.FloorName}模型文件v${item.Version}.rvt`;
  207. document.body.appendChild(a);
  208. a.click();
  209. document.body.removeChild(a);
  210. } else {
  211. this.$message({
  212. message: "该文件夹下没有资源",
  213. type: "error",
  214. });
  215. }
  216. },
  217. // 下载BIMID模型文件
  218. downloadModelBIMID(item) {
  219. let url =
  220. item.FetchUrl ||
  221. (item.Url.match(/(\/image-service\S*)$/g)
  222. ? item.Url.match(/(\/image-service\S*)$/g)[0]
  223. : "");
  224. if (url) {
  225. let a = document.createElement("a");
  226. a.href = url;
  227. a.target = "_blank";
  228. a.download = `${this.projectId}${item.FolderId}${item.FloorName}.rvt`;
  229. document.body.appendChild(a);
  230. a.click();
  231. document.body.removeChild(a);
  232. } else {
  233. this.$message({
  234. message: "该文件夹下没有资源",
  235. type: "error",
  236. });
  237. }
  238. },
  239. // 停止上传
  240. closeUpdate(item) {
  241. if (this.userInfo.userName == item.UserName) {
  242. this.$emit("closeUpdateFile", item);
  243. } else {
  244. this.$message({
  245. message: "您不是该文件的上传者,不能停止该文件上传!",
  246. type: "error",
  247. });
  248. }
  249. },
  250. // 跳转至模型流程处理监控
  251. toPathControl(row) {
  252. this.$router.push({
  253. path: "/model/path",
  254. query: {
  255. Id: row.CurrentModelId,
  256. Size: row.Size,
  257. OriginalName: row.OriginalName,
  258. },
  259. });
  260. },
  261. },
  262. watch: {
  263. persentList: {
  264. immediate: true,
  265. deep: true,
  266. handler: function (val, oldVal) {
  267. if (val.length != 0) {
  268. val.map((item) => {
  269. if (item.precent != 0) {
  270. this.filterTag(item.Id, item.precent);
  271. }
  272. });
  273. }
  274. },
  275. },
  276. },
  277. };
  278. </script>
  279. <style scoped lang="less">
  280. .box-card {
  281. height: 100%;
  282. .filterTable-container {
  283. height: calc(100% - 54px);
  284. margin-bottom: 8px;
  285. }
  286. .operate {
  287. .iconfont {
  288. font-size: 12px;
  289. padding: 7px 12px;
  290. }
  291. }
  292. .icon-termination {
  293. color: #f56c6c;
  294. background: #fff;
  295. padding: 0;
  296. border: 0;
  297. font-size: 20px;
  298. margin-left: 5px;
  299. }
  300. .upLoad {
  301. display: flex;
  302. justify-content: center;
  303. align-items: center;
  304. padding: 4px 0;
  305. .progress {
  306. // width: 150px;
  307. width: 175px;
  308. height: 20px;
  309. }
  310. .progress-right {
  311. height: 20px;
  312. line-height: 20px;
  313. }
  314. }
  315. .upLoad-loading {
  316. position: relative;
  317. justify-content: center;
  318. .progress {
  319. width: 220px;
  320. height: 20px;
  321. }
  322. .progress-right {
  323. position: absolute;
  324. left: 50%;
  325. top: 50%;
  326. transform: translate(-50%, -50%);
  327. color: #fff;
  328. }
  329. }
  330. }
  331. /deep/ .el-icon-warning {
  332. display: none;
  333. // color: transparent;
  334. }
  335. /deep/ .el-progress__text {
  336. display: none;
  337. }
  338. /deep/ .upLoad-loading .el-progress-bar {
  339. padding-right: 44px;
  340. margin-right: -44px;
  341. }
  342. /deep/ .el-progress-bar__inner {
  343. text-align: center;
  344. }
  345. </style>