From 9a24a79b22e6eb3a23574944ff49c72fe5623147 Mon Sep 17 00:00:00 2001
From: "Lyj@210615" <18050528999@163.com>
Date: Tue, 29 Nov 2022 17:35:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A8=E6=8E=A7=E6=8A=A5=E5=91=8A=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/_base.scss               |  90 ++++++++++
 src/layouts/components/NavBar/index.vue   |  17 +-
 src/layouts/index.vue                     |  36 ++--
 src/styles/variables.scss                 |   8 +-
 src/views/qualitycontrol-report/index.vue | 200 +++++++++++++++++++++-
 vue.config.js                             |   4 +-
 6 files changed, 311 insertions(+), 44 deletions(-)

diff --git a/src/assets/style/_base.scss b/src/assets/style/_base.scss
index a49fe3c..cfbef46 100644
--- a/src/assets/style/_base.scss
+++ b/src/assets/style/_base.scss
@@ -530,3 +530,93 @@ textarea:-ms-input-placeholder {
     page-break-before: avoid;
   }
 }
+
+//间距
+$size-map: (
+  -2: -2px,
+  4: 4px,
+  5: 5px,
+  8: 8px,
+  10: 10px,
+  12: 12px,
+  15: 15px,
+  16: 16px,
+  20: 20px,
+  24: 24px,
+  25: 25px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  50: 50px,
+  80: 80px,
+  140: 140px
+);
+
+@each $name in map-keys($size-map) {
+  $value: map-get($size-map, $name);
+
+  .mt-#{$name} {
+    margin-top: $value;
+  }
+
+  .mr-#{$name} {
+    margin-right: $value;
+  }
+
+  .mb-#{$name} {
+    margin-bottom: $value;
+  }
+
+  .ml-#{$name} {
+    margin-left: $value;
+  }
+
+  .margin-#{$name} {
+    margin: $value;
+  }
+
+  .pt-#{$name} {
+    padding-top: $value !important;
+  }
+
+  .pr-#{$name} {
+    padding-right: $value;
+  }
+
+  .pb-#{$name} {
+    padding-bottom: $value;
+  }
+
+  .pl-#{$name} {
+    padding-left: $value;
+  }
+
+  .pd-#{$name} {
+    padding: $value;
+  }
+}
+
+//字号
+$font-map: (
+  10: 10px,
+  11: 11px,
+  14: 14px,
+  15: 15px,
+  18: 18px,
+  20: 20px,
+  24: 24px,
+  25: 25px,
+  30: 30px,
+  36: 36px,
+  40: 40px,
+  50: 50px,
+  80: 80px,
+  140: 140px
+);
+@each $size in map-keys($font-map) {
+  $value: map-get($font-map, $size);
+
+  .font-#{$size} {
+    font-size: $value;
+  }
+}
diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue
index 0c89b44..1c2c935 100644
--- a/src/layouts/components/NavBar/index.vue
+++ b/src/layouts/components/NavBar/index.vue
@@ -14,27 +14,21 @@
           :class="['font', index == fontIndex ? 'active' : '']"
           @click="changeFont(index)"
         >
-          <div class="label">
-            {{ item.label }}
-          </div>
+          <div class="label">{{ item.label }}</div>
         </div>
       </div>
-      <div
-        v-show="curSelectedIndex != -1"
-        class="community"
-        @click="openModalFlag"
-      >
-        <img src="~@/assets/img/DataCenter/shift.png" alt="" />
+      <div v-show="curSelectedIndex != -1" class="community" @click="openModalFlag">
+        <img src="~@/assets/img/DataCenter/shift.png" alt />
         {{ screeningList[curSelectedIndex].title }}
       </div>
 
       <div class="user">
-        <img src="~@/assets/img/DataCenter/user.png" alt="" />
+        <img src="~@/assets/img/DataCenter/user.png" alt />
         <avatar></avatar>
       </div>
       <el-badge :value="messageCount" :class-name="'badge'">
         <div class="user">
-          <img src="~@/assets/img/DataCenter/message.png" alt="" />
+          <img src="~@/assets/img/DataCenter/message.png" alt />
           消息
         </div>
       </el-badge>
@@ -143,6 +137,7 @@ export default {
   display: flex;
   justify-content: space-between;
   color: #fff;
+  border-radius: 0px 0px 4px 4px;
   .left-panel {
     display: flex;
     align-items: center;
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index b62d94d..ed11802 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -10,10 +10,7 @@
     >
       <div :class="header === 'fixed' ? 'fixed-header' : ''">
         <top-bar></top-bar>
-        <div
-          v-if="tagsBar === 'true' || tagsBar === true"
-          :class="{ 'tag-view-show': tagsBar }"
-        >
+        <div v-if="tagsBar === 'true' || tagsBar === true" :class="{ 'tag-view-show': tagsBar }">
           <div class="vab-main">
             <tags-bar></tags-bar>
           </div>
@@ -32,10 +29,7 @@
       }"
     >
       <div :class="header === 'fixed' ? 'fixed-header' : ''">
-        <nav-bar
-          :cur-selected-index="curSelectedIndex"
-          @openModalFlag="openModalFlag"
-        ></nav-bar>
+        <nav-bar :cur-selected-index="curSelectedIndex" @openModalFlag="openModalFlag"></nav-bar>
       </div>
       <side-bar></side-bar>
       <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
@@ -55,37 +49,31 @@
       <div class="modalContent">
         <div class="title">请选择您的筛查填报场景</div>
         <ul class="list">
-          <li
-            v-for="(item, index) in screeningList"
-            :key="index"
-            @click="selectedIndex = index"
-          >
+          <li v-for="(item, index) in screeningList" :key="index" @click="selectedIndex = index">
             <div class="screeningItem">
               <div class="circle">
                 <img
                   v-if="selectedIndex !== index"
                   src="~@/assets/img/DataCenter/circle.png"
-                  alt=""
-                  srcset=""
+                  alt
+                  srcset
                 />
                 <img
                   v-if="selectedIndex == index"
                   src="~@/assets/img/DataCenter/selected.png"
-                  alt=""
-                  srcset=""
+                  alt
+                  srcset
                 />
               </div>
               <div class="itemTitle">{{ item.title }}</div>
             </div>
             <div class="ItemIamge">
-              <img :src="item.src" alt="" />
+              <img :src="item.src" alt />
             </div>
           </li>
         </ul>
         <div class="submit">
-          <el-button type="primary" class="btn" @click="setSelectedIndex"
-            >保存</el-button
-          >
+          <el-button type="primary" class="btn" @click="setSelectedIndex">保存</el-button>
         </div>
       </div>
     </el-dialog>
@@ -215,7 +203,7 @@ export default {
     }
 
     &.fixed.no-tags-bar {
-      padding-top: 56px;
+      // padding-top: 56px;
     }
 
     ::v-deep {
@@ -277,7 +265,7 @@ export default {
     }
 
     &.fixed.no-tags-bar {
-      padding-top: 56px;
+      // padding-top: 56px;
     }
 
     .vab-main {
@@ -323,6 +311,8 @@ export default {
   .side-bar-container {
     top: 90px;
     height: calc(100vh - 90px);
+    border-radius: 0px 4px 4px 0px;
+    box-shadow: none;
   }
 }
 ::v-deep .homeDialog .el-dialog__header {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 6d0e58d..7bf0525 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -8,9 +8,9 @@
 $base-color-default: #4e68ff;
 $base-z-index: 999;
 
-$base-menu-background: #08203d;
-$base-menu-children-background: #08203d;
-$base-menu-background-active: #164884;
+$base-menu-background: #252C49;
+$base-menu-children-background: #252C49;
+$base-menu-background-active: #546184;
 $base-menu-color: hsla(0, 0%, 100%, 0.95);
 $base-menu-color-active: hsla(0, 0%, 100%, 0.95);
 $base-title-color: #fff;
@@ -30,7 +30,7 @@ $base-color-orange: #ff6700;
 $base-color-red: #ff4d4f;
 $base-color-gray: rgba(0, 0, 0, 0.65);
 $base-main-width: 1279px;
-$base-border-radius: 2px;
+$base-border-radius: 4px;
 $base-border-color: #dcdfe6;
 $base-form-width: 600px;
 $base-input-height: 32px;
diff --git a/src/views/qualitycontrol-report/index.vue b/src/views/qualitycontrol-report/index.vue
index 5042afa..330551b 100644
--- a/src/views/qualitycontrol-report/index.vue
+++ b/src/views/qualitycontrol-report/index.vue
@@ -1,14 +1,206 @@
 <template>
-  <div>质控报表</div>
+  <div class="main-box">
+    <div class="total-box">
+      <div class="box-title">
+        <div class="blue-area mr-12"></div>
+        <span class="bold-font">总体情况</span>
+      </div>
+      <el-row :gutter="20" class="data-box">
+        <el-col :span="6" v-for="(item,index) in totalList" :key="index">
+          <div class="grid-content mb-12">{{item.label}}</div>
+          <h1>{{totalData[item.prop]}}</h1>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="person-area">
+      <div class="box-title">
+        <div class="blue-area mr-12"></div>
+        <span class="bold-font">个人绩效情况</span>
+      </div>
+      <div class="type-box">
+        <span class="mr-10">选择统计周期：</span>
+        <el-radio-group v-model="periodType">
+          <el-radio-button label="month">月度</el-radio-button>
+          <el-radio-button label="season">季度</el-radio-button>
+          <el-radio-button label="year">年度</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="type-box">
+        <span class="mr-10">选择统计年份：</span>
+        <el-select v-model="yearBtn" placeholder="请选择">
+          <el-option v-for="item in yearList" :value="item" :key="item" :label="item"></el-option>
+        </el-select>
+      </div>
+      <el-table :data="tableData" border show-summary class="mt-20">
+        <el-table-column
+          v-for="(item,index) in tableColumn"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+        ></el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 <script>
 export default {
   data() {
-    return {}
+    return {
+      totalList:[
+        {
+          label:"累计审核病例数",
+          prop:"account"
+        },
+        {
+          label:"累计审核合格病例数",
+          prop:"account"
+        },
+        {
+          label:"累计审核驳回修改病例数",
+          prop:"account"
+        },
+        {
+          label:"累计审核不合格病例数",
+          prop:"account"
+        },
+      ],
+      totalData:{
+        account:1600
+      },
+      periodType:"month",
+      yearList: [2021],
+      yearBtn:2022,
+      tableData:[{
+          id: '12987122',
+          name: '王小虎',
+          season: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: '王小虎',
+          season: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: '王小虎',
+          season: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: '王小虎',
+          season: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: '王小虎',
+          season: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+    }
+  },
+  methods: {
+    getNow() {
+      const nowDate = new Date()
+      this.yearBtn = nowDate.getFullYear();
+      if(!this.yearList.find((item) => item == this.yearBtn)){
+        this.yearList.push(this.yearBtn)
+        this.yearList.sort((a, b) => {
+          return a - b
+        })
+      }
+      
+    },
   },
-  methods: {},
   mounted() {},
+  created() {
+    this.getNow();
+  },
   watch: {},
+  computed:{
+      tableColumn(){
+        const listM=[
+        {
+          label:"月份",
+          prop:"month"
+        },
+        {
+          label:"审核病例数（例）",
+          prop:"count"
+        },
+      ]
+      const listS=[
+        {
+          label:"季度",
+          prop:"season"
+        },
+        {
+          label:"审核病例数（例）",
+          prop:"count"
+        },
+      ]
+        if(this.periodType == 'month'){
+          return listM
+        }
+        if(this.periodType == 'season'){
+          return listS
+        }
+      }
+  }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep {
+  .data-box {
+    margin: 24px 0px;
+    border-bottom: 1px solid #f3f3f3;
+  }
+  .el-col {
+    text-align: center;
+    margin: 12px 0px 28px;
+    border-right: 1px solid #f3f3f3;
+    .grid-content {
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiR;
+      color: #333333;
+    }
+    h1 {
+      color: #4e68ff;
+      font-weight: bold;
+      font-size: 32px;
+    }
+  }
+  .el-col:last-child {
+    border-right: none;
+  }
+}
+.main-box {
+  margin: 24px;
+}
+.box-title {
+  display: flex;
+  flex-direction: row;
+}
+.blue-area {
+  width: 4px;
+  height: 24px;
+  background: #4e68ff;
+}
+.bold-font {
+  font-size: 18px;
+  font-family: AlibabaPuHuiTiM;
+  color: #333333;
+  font-weight: bold;
+}
+.type-box {
+  display: flex;
+  flex-direction: row;
+  margin: 32px 0px 0px;
+  line-height: 32px;
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 9f50784..2cd195f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -88,8 +88,8 @@ module.exports = {
     },
     proxy: {
       "/api": {
-        target: "http://192.168.31.140:11021/",
-        // target: "https://ds.cixincloud.com/geca-api/",
+        // target: "http://192.168.31.140:11021/",
+        target: "https://ds.cixincloud.com/geca-api/",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "",
-- 
2.22.0