Browse Source

adm:feat> 关系计算中遮罩

onlyh 3 years ago
parent
commit
85bb8405e1
1 changed files with 22 additions and 4 deletions
  1. 22 4
      src/views/maintain/relationship/index.vue

+ 22 - 4
src/views/maintain/relationship/index.vue

@@ -10,6 +10,7 @@
                     <el-col :span="8" v-for="(relation,relIndex) in child.relationTypeProjectList" :key="relIndex"
                             class="card">
                         <el-card shadow="hover">
+                            <div v-show="relation.computationalState === 3 " class="mask"></div>
                             <article class="ship-card-title">
                                 <el-tooltip
                                     :content="relation.relationTypeName"
@@ -47,7 +48,9 @@
                             <article class="ship-card-time">
                                 <span v-if="relation.computationalState === 3">关系计算中...</span>
                                 <span v-else-if="relation.computationalState === 5">计算失败</span>
-                                <span v-else-if="relation.computationalState !== 3  && relation.computingTime">最后一次计算时间 {{ relation.computingTime }}</span>
+                                <span v-else-if="relation.computationalState !== 3  && relation.computingTime">最后一次计算时间 {{
+                                        relation.computingTime
+                                    }}</span>
                                 <span v-else-if="relation.times">最后一次计算时间 {{ relation.times }}</span>
                                 <span style="float: right">
 
@@ -94,9 +97,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { relationCalc, relationshipCount, relationshipOverview, updateCalcTime } from "@/api/datacenter"
+import {Component, Vue} from "vue-property-decorator";
+import {relationCalc, relationshipCount, relationshipOverview, updateCalcTime} from "@/api/datacenter"
 import moment from "moment";
+
 @Component({
     name: "relationShip"
 })
@@ -182,16 +186,29 @@ export default class extends Vue {
 
     manual(relation) {
         console.log(relation.relationTypeName)
-        this.$router.push({ path: 'relation', query: relation })
+        this.$router.push({path: 'relation', query: relation})
     }
 }
 </script>
 
 <style scoped lang="scss">
+
 .relationship {
     height: 100%;
     overflow: auto;
 
+    .mask {
+        background: rgba(255, 255, 255, .6);
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        user-select: none;
+        z-index: 2;
+        margin: 0 10px;
+    }
+
     .title {
         text-indent: 10px;
         color: #646C73;
@@ -205,6 +222,7 @@ export default class extends Vue {
 
         .card {
             margin: 10px 0;
+            position: relative;
         }
 
         .ship-title {