floorTable.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <el-table
  3. ref="filterTable"
  4. :data="tableData"
  5. style="width: 100%"
  6. :header-cell-style="{background:'#ccc',color:'#000'}"
  7. height="600"
  8. >
  9. <el-table-column prop="FloorName" label="模型文件" width="180">
  10. <template slot-scope="scope">
  11. <i class="el-icon-document-checked icon_font"></i>
  12. <span style="margin-left: 10px">{{ scope.row.FloorName }}</span>
  13. </template>
  14. </el-table-column>
  15. <el-table-column prop="Note" label="备注" width="180"></el-table-column>
  16. <el-table-column prop="Version" label="版本号"></el-table-column>
  17. <el-table-column prop="AcceptTime" label="上传时间"></el-table-column>
  18. <el-table-column prop="UserName" label="上传人"></el-table-column>
  19. <el-table-column prop="address" label="操作">
  20. <template slot-scope="scope">
  21. <div class="operate" v-show="!scope.row.isDown">
  22. <el-button
  23. type="primary"
  24. class="iconfont icon-download"
  25. @click="downloadModel(scope.row)"
  26. ></el-button>
  27. <el-button type="primary" class="iconfont icon-replace" @click="repliaceModel(scope.row)"></el-button>
  28. <el-button type="primary" class="iconfont icon-Log" @click="queryModelLog(scope.row)"></el-button>
  29. </div>
  30. <div :class="[scope.row.Status == 1 ||scope.row.Status == 2 ? 'upLoad-loading':'','upLoad']" v-show="scope.row.isDown">
  31. <div class="progress">
  32. <el-progress
  33. :text-inside="scope.row.Status == 1 || scope.row.Status == 2 ?false:true"
  34. :stroke-width="20"
  35. :percentage="scope.row.precent"
  36. :status="scope.row.Status == 1 || scope.row.Status == 2 ?'warning':'success'"
  37. ></el-progress>
  38. </div>
  39. <div class="progress-right">
  40. <el-button v-show="!scope.row.Status" type="danger" icon="el-icon-delete" @click="closeUpdate(scope.row)" circle></el-button>
  41. <span v-show="scope.row.Status == 1">等待检查...</span>
  42. <span v-show="scope.row.Status == 2">模型检查中</span>
  43. </div>
  44. </div>
  45. </template>
  46. </el-table-column>
  47. </el-table>
  48. </template>
  49. <script>
  50. export default {
  51. props: {
  52. tableData: Array,
  53. persentList: Array
  54. },
  55. data() {
  56. return {};
  57. },
  58. methods: {
  59. // 查看日志
  60. queryModelLog(item) {
  61. this.$emit("openModelLog", item);
  62. },
  63. // 替换日志
  64. repliaceModel(item) {
  65. this.$emit("replaceModel", item);
  66. },
  67. filterTag(Id, precent) {
  68. this.$refs.filterTable.data.map(item => {
  69. if (item.Id == Id) {
  70. if (precent >= 100) {
  71. // 如过precent == 100 不能关闭进度条,
  72. if(precent == 100){
  73. item.precent = 99;
  74. }else if(precent == 101){
  75. // 如过precent == 101 则返回结果为suceess 不能关闭进度条,
  76. item.precent = 100;
  77. item.isDown = false;
  78. }
  79. return;
  80. } else {
  81. item.precent = precent;
  82. }
  83. }
  84. });
  85. },
  86. // 下载模型文件
  87. downloadModel(item) {
  88. if (item.Url) {
  89. window.open(item.Url);
  90. } else {
  91. this.$message({
  92. message: "该文件夹下没有资源",
  93. type: "error"
  94. });
  95. }
  96. },
  97. // 停止上传
  98. closeUpdate(item) {
  99. this.$emit("closeUpdateFile", item);
  100. }
  101. },
  102. watch: {
  103. persentList: {
  104. immediate: true,
  105. deep: true,
  106. handler: function(val, oldVal) {
  107. if (val.length != 0) {
  108. val.map(item => {
  109. if (item.precent != 0) {
  110. this.filterTag(item.Id, item.precent);
  111. }
  112. });
  113. }
  114. }
  115. }
  116. },
  117. mounted() {}
  118. };
  119. </script>
  120. <style scoped lang="less">
  121. .box-card {
  122. min-height: 800px;
  123. .upLoad{
  124. display: flex;
  125. justify-content: flex-start;
  126. align-items: center;
  127. .progress{
  128. width: 160px;
  129. height: 20px;
  130. }
  131. }
  132. .upLoad-loading{
  133. position: relative;
  134. justify-content: center;
  135. .progress{
  136. width: 200px
  137. }
  138. .progress-right{
  139. position: absolute;
  140. left: 40%;
  141. top: 50%;
  142. transform: translate(-50%,-50%);
  143. color: #909399;
  144. }
  145. }
  146. }
  147. </style>