优化病案首页质控栏页

src/layout/components/Breadcrumb.vue

@@ -75,10 +75,10 @@ export default {
     bottomScrollClick() {
       this.$nextTick(() => {
         // let height = this.$refs.mianscroll.clientWidth;
-        let width = this.$refs.mianscroll.getBoundingClientRect().width; // div的宽度
+        let width =0; // div的宽度
         let w = this.$refs.mianscroll.scrollWidth; // 可滚动的div宽度
-        let l = w-width; // 可滚动区域宽度
-        this.$refs.mianscroll.scrollTo(l,0);
+        // let l = w-width; // 可滚动区域宽度
+        this.$refs.mianscroll.scrollTo(w,0);
       });
     },
     //打开页面

src/views/data/query/components/CaseQualityBox.vue

@@ -1,13 +1,13 @@
 <template>
-  <div ref="box" class="box" :style="{width: width ? width + 'px' : '100%'}" :class="{'nocopy': $route.meta.nocopy}">
+  <div ref="box" class="box" :style="{width: width ? width + 'px' : '100%'}">
     <!-- 评分 -->
     <div class="storeBox">
-      <div class="text">{{ data.score }}</div>
+      <div class="text">{{ data.score.score }}</div>
       <div class="spa">
         <!-- 0优 1良 2中 3差 -->
-        <div class="spaview" v-if="data.score>=97">优</div>
-        <div class="spaview" v-else-if="data.score>=90&&data.score<=96">良</div>
-        <div class="spaview" v-else-if="data.score>=75&&data.score<=89">中</div>
+        <div class="spaview" v-if="data.score.score>=97">优</div>
+        <div class="spaview" v-else-if="data.score.score>=90&&data.score.score<=96">良</div>
+        <div class="spaview" v-else-if="data.score.score>=75&&data.score.score<=89">中</div>
         <div class="spaview" v-else>差</div>
       </div>
     </div>
@@ -15,26 +15,29 @@
     <!-- end -->
     <!-- 强制 -->
     <div class="flexNox">
-      <div class="Yradio">
-        <div class="Yradiobox"></div>
-        强制
+      <div>
+        <div class="Yradio" :class=" is_tab == 'qz'?'hoverClass':'' " @click="clickTab('qz')">
+          <div class="Yradiobox"></div>
+          强制
+        </div>
       </div>
-      <div class="Rradio">
-        <div class="Rradiobox"></div>
-        建议
+      <div>
+        <div class="Yradio" :class=" is_tab == 'jy'?'hoverClass':'' " @click="clickTab('jy')">
+          <div class="Rradiobox"></div>
+          建议
+        </div>
       </div>
+      
     </div>
 
     <!-- end -->
-    <div class="cont-reight-bottom" v-for="(item, index) in data.error" :key="index">
-      <div v-if="item.category == 0 || item.category == 1" class="cont-reight-bottom-title">
-        {{ item.category == 0 ? 'A类' : 'B类' }}
-        <br />
-        -{{ item.down }}
-      </div>
-      <div v-else class="cont-reight-bottom-title-null">
-        {{ item.category == 2 ? 'C类' : 'D类' }}
-        <br />
+    <div class="cont-reight-bottom" v-for="(item, index) in errorlist" :key="index">
+      <div :class=" is_tab == 'qz'?'cont-reight-bottom-title':'cont-reight-bottom-title-null' ">
+        <span v-if="item.category == 0">A类</span>
+        <span v-if="item.category == 1">B类</span>
+        <span v-if="item.category == 2">C类</span>
+        <span v-if="item.category == 3">D类</span>
+        <!-- <span v-if="item.category == 4">E类</span> -->
         -{{ item.down }}
       </div>
       <div class="cont-reight-bottom-conter">
@@ -74,6 +77,15 @@
         }
       }
     },
+    data(){
+      return {
+        is_tab: 'qz', // 'qz'、 强制 'jy、建议
+        errorlist:[]
+      }
+    },
+    created() {
+      this.clickTab(this.is_tab);
+    },
     computed: {
       scrollHeight() {
         return `calc(100vh - 320px)`
@@ -84,6 +96,14 @@
         const el = this.$el.querySelector(`.category${index}`);
         const node = el.parentNode.parentNode.parentNode
         this.$refs["scrollRef"].wrap.scrollTop = node.offsetTop;
+      },
+      clickTab(n){
+        this.is_tab = n;
+        if(this.is_tab == 'qz'){
+          this.errorlist = this.data.qz
+        }else{
+          this.errorlist = this.data.jy
+        }
       }
     }
   }
@@ -113,7 +133,7 @@
   text-align: center;
   align-items: center;
   position: relative;
-  margin: 30px auto;
+  margin: 0 auto 20px;
   border: 1px solid #ccc;
   box-sizing: border-box;
   overflow: hidden;
@@ -175,23 +195,31 @@
     border-radius: 50%;
   }
   .Yradio {
-    width: 80px;
+    width: 120px;
+    padding: 6px;
     display: flex;
     align-items: center;
     text-align: center;
+    justify-content: center;
   }
-  .Rradio {
-    width: 80px;
-    display: flex;
-    align-items: center;
-    text-align: center;
+  .hoverClass{
+    border: 2px solid #185da6;
   }
 }
+.flexNox>div{
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .cont-reight-bottom {
   margin: 24px 7px;
   display: flex;
   cursor: pointer
 }
+.cont-reight-bottom div span{
+  font-size: 24px;
+}
 .cont-reight-bottom-title {
   width: 70px;
   background: #ffdfdf;
@@ -202,6 +230,7 @@
   color: #da1515;
   position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
@@ -215,6 +244,7 @@
   color: #ff5700;
   position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }

src/views/data/query/qualityResults.vue

@@ -1,6 +1,6 @@
 <template>
-  <div ref="box" class="box" :class="{'nocopy': $route.meta.nocopy}">
-    <CaseQualityBox v-if="data.data" :data="data" />
+  <div ref="box" class="box">
+    <CaseQualityBox v-if="data" :data="data" />
   </div>
 </template>
 
@@ -16,9 +16,10 @@ import CaseQualityBox from './components/CaseQualityBox.vue';
       }
     },
     created() {
-      if(this.$route.query.id) {
-        this.getCaseQualityResults()
-      }
+      this.getCaseQualityResults()
+      // if(this.$route.query.id) {
+      //   this.getCaseQualityResults()
+      // }
     },
     methods: {
       // 获取新病案指控结果
@@ -26,7 +27,7 @@ import CaseQualityBox from './components/CaseQualityBox.vue';
         const params = {
           id: Number(this.$route.query.id),
         };
-        this.$axios2.post('/home_quality/getQualityResult', params).then(res => {
+        this.$axios.post('/home_quality/getQualityResult', params).then(res => {
           this.data = res.data;
         });
       }