编码员

src/components/CardTitle/index.vue

@@ -22,17 +22,18 @@
   font-size: 18px;
   line-break: 24px;
   font-weight: 600;
-  padding-left: 10px;
+  padding-left: 14px;
   margin-bottom: 20px;
+  color: #13171E;
   &::before {
     position: absolute;
     content: '';
-    width: 3px;
-    height: 12px;
+    width: 6px;
+    height: 16px;
     border-radius: 3px;
     top: 50%;
-    margin-top: -6px;
-    background: #409EFF;
+    margin-top: -8px;
+    background: linear-gradient(180deg, #185DA6 0%, #3195FF 100%);
     left: 0;
   }
 }

src/main.js

@@ -21,6 +21,10 @@ import axios2 from '@/axios/index2';
 import axios3 from '@/axios/index3';
 import '@/mixins';
 
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+
 // 全局组件
 import CardTitle from '@/components/CardTitle'
 Vue.component('CardTitle', CardTitle)

src/styles/custom.scss

@@ -55,7 +55,7 @@
 // 卡片背景
 
 .bg-box {
-  padding: 20px;
+  padding: 13px;
   .bg-card {
     padding: 20px;
     background: #fff;
@@ -66,4 +66,13 @@
   .mb20 {
     margin-bottom: 20px;
   }
+  .bg185DA6 {
+    background: #185DA6;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .text-center {
+    text-align: center;
+  }
 }

src/views/encoder/index.vue

@@ -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>