修改UI

src/views/recordsRoom/qc/caseViews.vue

@@ -109,7 +109,7 @@
       <!-- status 不存在 意味着不脱敏、医院自助查询 -->
       <template v-if="!$route.query.status">
         <!-- 住院病案质控 -->
-        <CaseQualityBox :data="results" :height="820" />
+        <CaseQualityBox :data="results" :width="340" :height="820" />
       </template>
       <!-- 添加质控结果 -->
       <CreateControlResultDialogVue v-if="dialogData.bSwitch" :data="dialogData" @refresh="handelRefreshResults" />
@@ -396,7 +396,6 @@ export default {
       } else {
         this.is_active_blbh = this.mainHomeData.MED_REC_ID
       }
-      console.log(this.is_active_blbh, 'this.is_active_blbh')
       this.titleName = n
       this.parentType = b
       const that = this
@@ -412,11 +411,13 @@ export default {
       if (b != 0 && b != 292 && b != 1) {
         if ([329, 288, 34, 87].includes(b)) {
           // 授权同意类, 医患沟通类, 死亡记录类, 医疗常用表格
-          getBlInfo({blbh: this.is_active_blbh}).then(res => {
-            that.text = [res.p]
-            that.dataObj = [res.p]
-            that.reload()
-          })
+          if (this.is_active_blbh) {
+            getBlInfo({blbh: this.is_active_blbh}).then(res => {
+              that.text = [res.p]
+              that.dataObj = [res.p]
+              that.reload()
+            })
+          }
         } else {
           const params = {
             MED_REC_ID: that.valData,

src/views/recordsRoom/qc/components/CaseQualityBox2.vue

@@ -1,51 +1,44 @@
 <template>
-  <div ref="box" class="box">
+  <div ref="box" class="box" :style="{width: width ? width + 'px' : '100%'}" :class="{'nocopy': $route.meta.nocopy}">
+
+    <div class="score-box" :class="scoreLevel == '甲'? 'scoreLevel_1' : ( scoreLevel == '乙'?'scoreLevel_2': (scoreLevel == '丙'?'scoreLevel_3':'' ) ) ">
+      <div>病案评分<span class="score-f">{{ data.score  }}分</span></div>
+      <!-- <h2 class="score-dj">{{ scoreLevel }}</h2> -->
+    </div>
+
     <div class="card-box">
-      <el-row :gutter="20">
-        <el-col :span="12" :offset="12">
-          <div class="title2">运行病历：<span>{{ data.run_score }}分</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="title">病历等级：<span class="error">{{ scoreLevel }}</span></div>
-        </el-col>
-        <el-col :span="12" :offset="12">
-          <div class="title2">终末病历：<span>{{ data.score }}分</span></div>
-        </el-col>
-      </el-row>
-      <el-divider />
       <el-row :gutter="20" style="margin-bottom: 16px;">
         <el-col :span="12">
           <div class="title">病历问题：<span class="error">{{ data.total }}</span></div>
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col v-for="(item, index) of data.summary" :key="index" :span="12">
-          <div class="title2" @click="onScroll(index)">{{ item.category }}：<span>（{{ item.nums }}）</span></div>
+        <el-col :span="12" v-for="(item, index) of data.summary" :key="index">
+          <div class="title2" @click="onScroll(index)">{{ item.category }}：<span style="float: right;">（{{ item.nums }}）</span></div>
         </el-col>
       </el-row>
-    </div>
+    </div>   
     <el-scrollbar ref="scrollRef" class="scrollBox" :style="{'height': scrollHeight}">
       <el-table
         :data="tableData"
         default-expand-all
         :show-header="false"
-        style="width: 100%"
-      >
+        style="width: 100%">
         <el-table-column type="expand">
           <template slot-scope="props">
             <el-card v-for="(item, index) of props.row.children" :key="index" class="box-card" shadow="hover">
               <el-image
-                v-if="item.is_ai"
                 class="typeImg"
+                v-if="item.is_ai"
                 :src="require('../../../../assets/images/jiqiren.png')"
-                fit="contain"
-              />
+                fit="contain">
+              </el-image>
               <el-image
                 v-else
                 class="typeImg"
                 :src="require('../../../../assets/images/kefu.png')"
-                fit="contain"
-              />
+                fit="contain">
+              </el-image>
               <el-row>
                 <el-col :span="24">
                   <el-descriptions title="" :column="1" direction="vertical">
@@ -57,13 +50,16 @@
                     <el-descriptions-item label="质控依据">
                       <div v-for="(yItem, yIndex) of item.basis" :key="yIndex" style="margin-bottom: 10px;">
                         <div v-if="item.rule_id !== 6">
-                          <span>{{ yIndex+1 }}、</span>
+                          <span class="span-index">{{ yIndex+1 }}</span>
                           <span v-for="(cItem, cIndex) of yItem" :key="cIndex">{{ cItem }}</span>
                         </div>
-                        <div v-else>1、{{ yItem[0] }}</div>
+                        <div v-else>
+                          <span class="span-index">1</span>
+                          <span>{{ yItem[0] }}</span>
+                        </div>
                       </div>
                     </el-descriptions-item>
-                  </el-descriptions>
+                </el-descriptions>
                 </el-col>
               </el-row>
             </el-card>
@@ -71,8 +67,7 @@
         </el-table-column>
         <el-table-column
           label=""
-          prop=""
-        >
+          prop="">
           <template slot-scope="scope">
             <div :class="`category${scope.$index}`">{{ scope.row.category }}</div>
           </template>
@@ -83,69 +78,82 @@
 </template>
 
 <script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default() {
-        return {
-          data: {}
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {
+            data: {}
+          }
         }
-      }
-    },
-    height: {
-      type: Number,
-      default() {
-        return 0
-      }
-    }
-  },
-  computed: {
-    tableData() {
-      const arr = []
-      const keys = Object.keys(this.data.data)
-      for (let i = 0; i < keys.length; i++) {
-        const obj = {
-          category: keys[i],
-          children: this.data.data[keys[i]]
+      },
+      type:{
+        type: String,
+        default() {
+          return ''
+        }
+      },
+      height: {
+        type: Number,
+        default() {
+          return 0
+        }
+      },
+      width: {
+        type: Number,
+        default() {
+          return 0
         }
-        arr.push(obj)
       }
-      return arr
     },
-    scoreLevel() {
-      /**
+    computed: {
+      tableData() {
+        let arr = []
+        const keys = Object.keys(this.data.data)
+        for(let i=0; i<keys.length; i++) {
+          let obj = {
+            category: keys[i],
+            children: this.data.data[keys[i]]
+          }
+          arr.push(obj)
+        }
+        return arr
+      },
+      scoreLevel() {
+        /**
          * 甲＞90分
          * 乙75-90分
          * 丙＜75分
-         * */
-      let str
-      const { score } = this.data
-      if (score > 90) {
-        str = '甲'
-      } else if (score < 75) {
-        str = '丙'
-      } else {
-        str = '乙'
+         * */ 
+        let str
+        const { score } = this.data
+        if (score > 90) {
+          str = '甲'
+        } else if (score < 75) {
+          str = '丙'
+        } else if ( score <= 90 && score >= 75 ) {
+          str = '乙'
+        }
+        return str
+      },
+      scrollHeight() {
+        // if (this.height) {
+        //   return (this.height - 214)+'px'
+        // } else {
+        //   return `calc(100vh - 314px)`
+        // }
+        return `calc(100vh - 320px)`
       }
-      return str
     },
-    scrollHeight() {
-      if (this.height) {
-        return (this.height - 214) + 'px'
-      } else {
-        return `calc(100vh - 314px)`
+    methods: {
+      onScroll(index) {
+        const el = this.$el.querySelector(`.category${index}`);
+        const node = el.parentNode.parentNode.parentNode
+        this.$refs["scrollRef"].wrap.scrollTop = node.offsetTop;
       }
     }
-  },
-  methods: {
-    onScroll(index) {
-      const el = this.$el.querySelector(`.category${index}`)
-      const node = el.parentNode.parentNode.parentNode
-      this.$refs['scrollRef'].wrap.scrollTop = node.offsetTop
-    }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -155,32 +163,74 @@ export default {
 ::v-deep .el-divider--horizontal {
   margin: 10px 0;
 }
+
+
 .box {
-  width: 380px;
-  padding: 21px 20px;
+  padding: 16px;
   background: #FFFFFF;
   border-radius: 5px;
+  .score-box{
+    width: 100%;
+    margin-bottom: 16px;
+    padding: 30px 50px 30px 20px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #fff;
+    div{
+      font-size: 20px;
+    }
+    .score-f{
+      padding-left: 20px;
+      font-size: 20px;
+    }
+    .score-dj,.score-f{
+      font-weight: bold;
+    }
+  }
+  .score-box.scoreLevel_1{
+    background: rgb(11, 133, 63);
+    background-image: url('../../../../assets/images/icon-jia.png');
+    background-repeat: no-repeat;
+    background-size: 60px 52px;
+    background-position:80% 50%;
+  }
+  .score-box.scoreLevel_2{
+    background: rgb(152, 112, 20);
+    background-image: url('../../../../assets/images/icon-yi.png');
+    background-repeat: no-repeat;
+    background-size: 60px 52px;
+    background-position:80% 50%;
+  }
+  .score-box.scoreLevel_3{
+    background: rgb(199, 54, 13);
+    background-image: url('../../../../assets/images/icon-bing.png');
+    background-repeat: no-repeat;
+    background-size: 60px 52px;
+    background-position:80% 50%;
+  }
   .card-box {
     // height: 175px;
     background: #FFFFFF;
     border: 1px solid #E2E2E2;
-    padding: 20px 36px;
+    padding: 16px 20px;
     box-sizing: border-box;
     margin-bottom: 14px;
     .title {
-      font-size: 16px;
+      font-size: 15px;
       font-family: PingFang-SC-Bold, PingFang-SC;
       font-weight: bold;
       color: #333333;
       line-height: 22px;
-      span {
-        margin-left: 7px;
-      }
+      // span {
+      //   margin-left: 7px;
+      // }
     }
     .title2 {
       font-size: 14px;
       font-family: PingFang-SC-Bold, PingFang-SC;
-      font-weight: bold;
+      // font-weight: bold;
       color: #333333;
       line-height: 26px;
       cursor: pointer;
@@ -195,6 +245,7 @@ export default {
   .box-card {
     margin-bottom: 10px;
     position: relative;
+    background: rgb(241, 245, 254);
     .category {
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: bold;
@@ -214,13 +265,23 @@ export default {
       z-index: 999;
     }
   }
+
+  .box-card .el-table ::v-deep tr{
+    background: transparent;
+  }
   ::v-deep .el-table__row {
-    background: #185DA6;
+    background: #185DA6 !important;
     color: #FFFFFF;
     .el-icon-arrow-right {
       color: #FFFFFF;
     }
   }
+  ::v-deep .el-descriptions__body{
+    background: transparent;
+  }
+  ::v-deep .el-table tr{
+    background: transparent;
+  }
   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
     background: #185DA6;
   }
@@ -237,4 +298,20 @@ export default {
     color: #333333;
   }
 }
-</style>
+.span-index{
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  background: #185DA6;
+  color: #fff;
+  margin-right: 10px;
+  margin-bottom: 4px;
+}
+
+::v-deep .el-table .el-table__row td {
+  color: #fff;
+}
+</style>

src/views/rule/case/components/TableBox.vue

@@ -186,7 +186,7 @@ export default {
       }).then(() => {
         const params = {
           id: row.id,
-          status: row.is_shizhong ? 0 : 1
+          status: row.is_shizhong
         }
         setCaseRuleshizhong(params).then(res => {
           this.data.bSwitch = false