|
|
@@ -1,15 +1,247 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 首页质控-编码员
|
|
|
+ <div class="bg-box">
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <div class="bg-card" style="margin-bottom: 18px;">
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-form-item label="" style="margin-bottom: 0">
|
|
|
+ <el-date-picker v-model="formInline.start_time" type="date" placeholder="出院开始日期" value-format="yyyyMMdd" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" style="margin-bottom: 0">
|
|
|
+ <el-date-picker v-model="formInline.end_time" type="date" placeholder="出院结束日期" value-format="yyyyMMdd" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 0">
|
|
|
+ <el-button type="primary" class="bg185DA6">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 汇总统计 -->
|
|
|
+ <div class="bg-card" style="margin-bottom: 24px; padding">
|
|
|
+ <CardTitle title="汇总统计">
|
|
|
+ <el-image
|
|
|
+ class="title_arrow"
|
|
|
+ :class="{'arrow_top': !tongji_show}"
|
|
|
+ :src="require('../../assets/images/arrow-down.png')"
|
|
|
+ fit="contain"
|
|
|
+ @click="onToggleTongjiShow">
|
|
|
+ </el-image>
|
|
|
+ </CardTitle>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="tongji_show">
|
|
|
+ <el-row :gutter="32">
|
|
|
+ <el-col :span="15">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="tongji-item"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="tongji-item nth2"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="tongji-item"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="8">
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="level-item">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span class="level">优</span>
|
|
|
+ <span class="count">500</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="text-right">
|
|
|
+ <span>占比25.64%</span>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="level-item">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span class="level">良</span>
|
|
|
+ <span class="count">500</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="text-right">
|
|
|
+ <span>占比25.64%</span>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="level-item">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span class="level">中</span>
|
|
|
+ <span class="count">500</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="text-right">
|
|
|
+ <span>占比25.64%</span>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="level-item">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span class="level">差</span>
|
|
|
+ <span class="count">500</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="text-right">
|
|
|
+ <span>占比25.64%</span>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="level-item" style="background: #fff;">
|
|
|
+ <el-popover placement="top-start" title="" width="245" trigger="hover">
|
|
|
+ <div slot v-html="levelText"></div>
|
|
|
+ <div slot="reference" class="text-center" style="color: #D38D14; font-size: 16px;">
|
|
|
+ <i class="el-icon-warning-outline"></i>
|
|
|
+ 等级计算说明
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div id="tongji_pie"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ <!-- 缺陷详情 -->
|
|
|
+ <div class="bg-card" style="margin-bottom: 24px; padding">
|
|
|
+ <CardTitle title="缺陷详情">
|
|
|
+ <el-image
|
|
|
+ class="title_arrow"
|
|
|
+ :src="require('../../assets/images/arrow-down.png')"
|
|
|
+ fit="contain"
|
|
|
+ @click="onToggleQuexianShow">
|
|
|
+ </el-image>
|
|
|
+ </CardTitle>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="quxian_show">
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ levelText: '优：≥97分；</br>' + '良：90~96分且不出现A类错误；</br>' + '中：75~89分且不出现A类错误；</br>' + '差：＜75分。',
|
|
|
+ formInline: {
|
|
|
+ start_time: '',
|
|
|
+ end_time: '',
|
|
|
+ },
|
|
|
+ tongji_show: true,
|
|
|
+ quxian_show: true,
|
|
|
+ tongjiDom: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.tongjiPie()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onToggleTongjiShow() {
|
|
|
+ this.tongji_show = !this.tongji_show
|
|
|
+ },
|
|
|
+ onToggleQuexianShow() {
|
|
|
+ this.quxian_show = !this.quxian_show
|
|
|
+ },
|
|
|
+ tongjiPie() {
|
|
|
+ this.tongjiDom = this.$echarts.init(
|
|
|
+ document.getElementById('tongji_pie')
|
|
|
+ )
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ left: 'right',
|
|
|
+ orient: 'vertical',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ color: ['#5087EC', '#FF786F'],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['65%', '80%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{b}: {c}'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '首页总病例' },
|
|
|
+ { value: 735, name: '缺陷总例数' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.tongjiDom.setOption(option)
|
|
|
+ // 窗口大小改变 重新渲染
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ this.tongjiDom.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
+.tongji-item {
|
|
|
+ height: 114px;
|
|
|
+ background: #5087EC;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ &.nth2 {
|
|
|
+ background: #FF786F;
|
|
|
+ }
|
|
|
+}
|
|
|
+.level-item {
|
|
|
+ height: 75px;
|
|
|
+ background: #EAF4FF;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 11px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 75px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .level {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 75px;
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: DINAlternate-Bold, DINAlternate;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #38A1F2;
|
|
|
+ line-height: 75px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.title_arrow {
|
|
|
+ width: 10px;
|
|
|
+ height: 11px;
|
|
|
+ margin-left: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.arrow_top {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+#tongji_pie {
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
</style>
|
zdl
