缺陷详情

src/styles/custom.scss

@@ -75,4 +75,11 @@
   .text-center {
     text-align: center;
   }
+  .link {
+    text-decoration: underline;
+    color: #FF786F;
+  }
+  .c_FF786F {
+    color: #FF786F;
+  }
 }

src/views/encoder/index.vue

@@ -31,13 +31,25 @@
             <el-col :span="15">
               <el-row :gutter="20">
                 <el-col :span="8">
-                  <div class="tongji-item"></div>
+                  <div class="tongji-item">
+                    <div class="title">首页总例数</div>
+                    <div class="middle">日均例数：<span>191</span></div>
+                    <div class="count">5000</div>
+                  </div>
                 </el-col>
                 <el-col :span="8">
-                  <div class="tongji-item nth2"></div>
+                  <div class="tongji-item nth2">
+                    <div class="title">缺陷总例数</div>
+                    <div class="middle">缺陷例数占比：<span>77.12%</span></div>
+                    <div class="count">5000</div>
+                  </div>
                 </el-col>
                 <el-col :span="8">
-                  <div class="tongji-item"></div>
+                  <div class="tongji-item">
+                    <div class="title">平均得分</div>
+                    <!-- <div class="middle">缺陷例数占比：<span>77.12%</span></div> -->
+                    <div class="count">95.62</div>
+                  </div>
                 </el-col>
               </el-row>
               <el-row :gutter="8">
@@ -117,7 +129,95 @@
       </CardTitle>
       <el-collapse-transition>
         <div v-show="quxian_show">
-          123
+          <el-row :gutter="32">
+            <el-col :span="15">
+              <div class="mb20">
+                <el-radio-group v-model="qxxqData.radio" text-color="#185DA6" fill="#ffffff">
+                  <el-radio-button :label="1">缺陷问题（前十）</el-radio-button>
+                  <el-radio-button :label="2">缺陷问题</el-radio-button>
+                </el-radio-group>
+              </div>
+              <!-- 搜索栏 -->
+              <el-form :inline="true" :model="qxxqData" class="demo-form-inline mb20">
+                <el-form-item label="缺陷分类" style="margin-bottom: 0">
+                  <el-select v-model="qxxqData.type" clearable filterable placeholder="全部">
+                    <el-option label="基本信息" :value="1"></el-option>
+                    <el-option label="诊疗信息" :value="2"></el-option>
+                    <el-option label="费用信息" :value="3"></el-option>
+                    <el-option label="其他信息" :value="4"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="出院科室" style="margin-bottom: 0">
+                  <el-select v-model="qxxqData.deparment" clearable filterable placeholder="全部">
+                    <el-option label="强制" :value="1"></el-option>
+                    <el-option label="建议" :value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item style="margin-bottom: 0">
+                  <el-button type="primary" class="bg185DA6">查询</el-button>
+                </el-form-item>
+              </el-form>
+              <!-- 表格 -->
+              <el-table
+                :data="tableData"
+                class="mb20"
+                style="width: 100%">
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="80"
+                  align="center">
+                </el-table-column>
+                <el-table-column
+                  prop="desc"
+                  label="缺陷描述"
+                  align="center"
+                  show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <span class="c_FF786F">{{ scope.row.desc }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="type"
+                  label="缺陷字段"
+                  width="140"
+                  align="center"
+                  show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column
+                  prop="level"
+                  label="缺陷分级"
+                  width="140"
+                  align="center">
+                </el-table-column>
+                <el-table-column
+                  prop="count"
+                  label="缺陷数量"
+                  width="140"
+                  align="center">
+                  <template slot-scope="scope">
+                    <span class="link">{{ scope.row.count }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!-- 分页 -->
+              <div class="text-right">
+                <el-pagination
+                  background
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page="paginationData.page"
+                  :page-sizes="[5, 10, 15, 20]"
+                  :page-size="paginationData.size"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="paginationData.total">
+                </el-pagination>
+              </div>
+            </el-col>
+            <el-col :span="9">
+              <div id="qxxq_pie"></div>
+            </el-col>
+          </el-row>
         </div>
       </el-collapse-transition>
     </div>
@@ -134,12 +234,56 @@
           end_time: '',
         },
         tongji_show: true,
+        tongjiDom: null,
+        // 缺陷详情
         quxian_show: true,
-        tongjiDom: null
+        qxxqData: {
+          radio: 1,
+          deparment: '',
+          type: ''
+        },
+        tableData: [
+          {
+            desc: '新生儿病例，出院时天龄大于28天，出院诊断不能有P编码的诊断',
+            count: 500,
+            level: '强制',
+            type: '基本信息'
+          },
+          {
+            desc: '新生儿病例，出院时天龄大于28天，出院诊断不能有P编码的诊断',
+            count: 500,
+            level: '强制',
+            type: '基本信息'
+          },
+          {
+            desc: '新生儿病例，出院时天龄大于28天，出院诊断不能有P编码的诊断',
+            count: 500,
+            level: '强制',
+            type: '基本信息'
+          },
+          {
+            desc: '新生儿病例，出院时天龄大于28天，出院诊断不能有P编码的诊断',
+            count: 500,
+            level: '强制',
+            type: '基本信息'
+          },
+          {
+            desc: '新生儿病例，出院时天龄大于28天，出院诊断不能有P编码的诊断',
+            count: 500,
+            level: '强制',
+            type: '基本信息'
+          }
+        ],
+        paginationData: {
+          page: 1,
+          size: 5,
+          total: 100
+        }
       }
     },
     mounted() {
       this.tongjiPie()
+      this.qxxqPie()
     },
     methods: {
       onToggleTongjiShow() {
@@ -166,7 +310,7 @@
           series: [
             {
               type: 'pie',
-              radius: ['65%', '80%'],
+              radius: ['60%', '80%'],
               avoidLabelOverlap: false,
               label: {
                 show: true,
@@ -187,20 +331,107 @@
         window.addEventListener('resize', () => {
           this.tongjiDom.resize()
         })
+      },
+      qxxqPie() {
+        this.tongjiDom = this.$echarts.init(
+          document.getElementById('qxxq_pie')
+        )
+        const option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            top: '10%',
+            left: 'center',
+            align: 'left'
+          },
+          color: ['#FF8279', '#FF9F98', '#FFBEB9', '#FFD9D6'],
+          series: [
+            {
+              type: 'pie',
+              top: '20%',
+              radius: ['55%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: true,
+                formatter: '{b}: {c}'
+              },
+              labelLine: {
+                show: true
+              },
+              data: [
+                { value: 1048, name: '患者基本信息' },
+                { value: 735, name: '诊疗信息' },
+                { value: 335, name: '费用信息' },
+                { value: 635, name: '其他信息' },
+              ]
+            }
+          ]
+        }
+        this.tongjiDom.setOption(option)
+        // 窗口大小改变 重新渲染
+        window.addEventListener('resize', () => {
+          this.tongjiDom.resize()
+        })
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-radio-button__inner  {
+  border-color: #DCDFE6 !important;
+  font-weight: 500;
+  &:hover {
+    color: #606266;
+  }
+}
+::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  box-shadow: #DCDFE6 -1px 0px 0px 0px !important;
+}
 .tongji-item {
   height: 114px;
   background: #5087EC;
   border-radius: 8px;
   margin-bottom: 20px;
+  padding: 25px 18px 0;
+  box-sizing: border-box;
+  position: relative;
   &.nth2 {
     background: #FF786F;
   }
+  .title {
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 22px;
+    margin-bottom: 20px;
+  }
+  .middle {
+    text-align: right;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 22px;
+    position: absolute;
+    top: 45px;
+    right: 18px;
+  }
+  .count {
+    font-size: 24px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 28px;
+  }
 }
 .level-item {
   height: 75px;
@@ -244,4 +475,7 @@
 #tongji_pie {
   height: 200px;
 }
+#qxxq_pie {
+  height: 460px;
+}
 </style>