From e2ad51180257d1181c3076381de06d3c3ff1d796 Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Mon, 1 Aug 2022 16:48:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/reagent/report):=20=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E6=8A=A5=E8=A1=A8=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |   1 -
 src/api/report.js                  |   9 ++
 src/icons/svg/cup.svg              |   2 +
 src/views/reagent/report/index.vue | 168 +++++++++++++++++++++++------
 4 files changed, 145 insertions(+), 35 deletions(-)
 create mode 100644 src/icons/svg/cup.svg

diff --git a/package.json b/package.json
index 1aa48a3..62a8626 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
     "vue": "2.6.10",
-    "vue-barcode-scanner": "^0.8.1",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "vuex-persistedstate": "^4.1.0"
diff --git a/src/api/report.js b/src/api/report.js
index b7bbea1..5b2e2a9 100644
--- a/src/api/report.js
+++ b/src/api/report.js
@@ -62,3 +62,12 @@ export function drug_log_type_info(data) {
     data
   })
 }
+
+// /api/report/report_home
+export function report_home(data) {
+  return request({
+    url: '/api/report/report_home',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/icons/svg/cup.svg b/src/icons/svg/cup.svg
new file mode 100644
index 0000000..9a35918
--- /dev/null
+++ b/src/icons/svg/cup.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659336839769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5058" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M844.27 762.92L668.51 441.35V190.08h69.58c16.57 0 30-13.43 30-30s-13.43-30-30-30h-92.76a30.11 30.11 0 0 0-6.83-0.79H384.1c-2.35 0-4.63 0.28-6.83 0.79H286.1c-16.57 0-30 13.43-30 30s13.43 30 30 30h68.02v251.4L181.43 763.56c-15.19 28.34-14.41 61.73 2.11 89.32 16.51 27.59 45.57 44.06 77.73 44.06H764.8c32.31 0 61.43-16.59 77.91-44.38s17.06-61.29 1.56-89.64z m-53.18 59.04c-2.67 4.5-10.58 14.98-26.3 14.98H261.26c-15.65 0-23.56-10.4-26.24-14.88s-8.11-16.37-0.71-30.16l176.25-328.72c2.34-4.36 3.56-9.23 3.56-14.18V190.08h194.4v258.93c0 5.03 1.26 9.98 3.68 14.39l179.44 328.29c7.53 13.8 2.13 25.77-0.55 30.27z" p-id="5059"></path><path d="M590.26 720.12m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" p-id="5060"></path><path d="M416.08 639.96m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" p-id="5061"></path></svg>
\ No newline at end of file
diff --git a/src/views/reagent/report/index.vue b/src/views/reagent/report/index.vue
index 8c3d489..f2f42d4 100644
--- a/src/views/reagent/report/index.vue
+++ b/src/views/reagent/report/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="content">
+  <div
+    v-loading="loading"
+    class="content"
+    element-loading-text="拼命加载中"
+  >
     <div class="left">
       <div class="info">
         <div class="info-text title text">库存信息统计</div>
@@ -20,29 +24,29 @@
             <div>已领用183次，归还180次</div>
             <div>乙醇</div>
           </div>
-          <div class="user-info-text"  @click="$router.push('/reagent/report/recordinfo/store')">
+          <div class="user-info-text" @click="$router.push('/reagent/report/recordinfo/store')">
             <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/入库记录.png"></div>
             <div class="title text" style="color:#409EFF ">入库记录</div>
-            <div class="use-count">5,037</div>
+            <div class="use-count">{{ recordStock.count_number }}</div>
             <div class="use-info-total">入库历史记录(条)</div>
-            <div>已领用183次，归还180次</div>
-            <div>乙醇</div>
+            <div><i class="el-icon-time" /> {{ recordStock.date_time }}</div>
+            <div><svg-icon icon-class="cup" /> {{ recordStock.name }}</div>
           </div>
           <div class="user-info-text" @click="$router.push('/reagent/report/recordinfo/collect')">
             <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/领用记录.png"></div>
             <div class="title text" style="color: #1ADCE9">领用记录</div>
-            <div class="use-count">5,037</div>
+            <div class="use-count">{{ recordCollect.count_number }}</div>
             <div class="use-info-total">领用历史记录(条)</div>
-            <div>已领用183次，归还180次</div>
-            <div>乙醇</div>
+            <div><i class="el-icon-time" /> {{ recordCollect.date_time }}</div>
+            <div><svg-icon icon-class="cup" />{{ recordCollect.name }}</div>
           </div>
           <div class="user-info-text" @click="$router.push('/reagent/report/recordinfo/sendback')">
             <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/归还记录.png"></div>
             <div class="title text" style="color: #5DDC1D">归还记录</div>
-            <div class="use-count">5,037</div>
+            <div class="use-count">{{ recordConsume.count_number }}</div>
             <div class="use-info-total">归还历史记录(条)</div>
-            <div>已领用183次，归还180次</div>
-            <div>乙醇</div>
+            <div><i class="el-icon-time" /> {{ recordConsume.date_time }}</div>
+            <div><svg-icon icon-class="cup" />{{ recordConsume.name }}</div>
           </div>
         </div>
       </div>
@@ -55,12 +59,12 @@
             <span class="text">试剂库存消耗</span>
             <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
           </div>
-          <div class="count text">5140</div>
+          <div class="count text">{{ pdc }}</div>
           <div class="desc">截至目前试剂入库总量</div>
           <div style="display: flex;line-height: 30px;text-align: center">
-            <div :style="instock"><span>20%</span></div>
-            <div :style="lending"><span>20%</span></div>
-            <div :style="consume"><span>60%</span></div>
+            <div :style="instock"><span>{{ instock.width }}</span></div>
+            <div :style="lending"><span>{{ lending.width }}</span></div>
+            <div :style="consume"><span>{{ consume.width }}</span></div>
           </div>
           <div class="data-count">
             <div :style="{borderBottom:'4px solid '+ instock.background}">
@@ -84,9 +88,7 @@
             <span class="text">试剂用量消耗</span>
             <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
           </div>
-          <div style="text-align: center;width: 100%">
-            <el-progress size="small" type="dashboard" :percentage="percentage" :color="colors" />
-          </div>
+          <div id="mychart" />
         </el-card>
       </div>
       <div class="consume">
@@ -95,8 +97,11 @@
             <span class="text">人员用量消耗</span>
             <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
           </div>
-          <div v-for="o in 4" :key="o" class="item">
-            {{ '列表内容 ' + o }}
+          <div v-for="(user,index) in userData" :key="user.create_user_id" class="user-item">
+            <el-avatar :size="50" :src="user.avatar_url || 'https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF'" />
+            <div class="order">top{{ index+1 }}</div>
+            <div class="name">{{ user.create_user_name||"程小红" }}</div>
+            <div class="count">{{ user.count_number }}</div>
           </div>
         </el-card>
       </div>
@@ -105,33 +110,108 @@
 </template>
 
 <script>
+import { report_home } from '@/api/report'
+
 export default {
   name: 'Report',
   data() {
     return {
+      pdc: null,
+      myChart: null,
+      loading: false,
+      pageData: null,
       instock: {
         'background': '#409EFF',
-        'width': '20%',
-        'count': 12485
+        'width': '',
+        'count': 0
       },
       lending: {
         'background': '#5DDC1D',
-        'width': '20%',
-        'count': 12485
+        'width': '',
+        'count': 0
       },
       consume: {
         'background': '#FF9B02',
-        'width': '60%',
-        'count': 12485
+        'width': '',
+        'count': 0
       },
-      percentage: 10,
-      colors: [
-        { color: '#f56c6c', percentage: 20 },
-        { color: '#e6a23c', percentage: 40 },
-        { color: '#5cb87a', percentage: 60 },
-        { color: '#1989fa', percentage: 80 },
-        { color: '#6f7ad3', percentage: 100 }
-      ]
+      recordStock: {
+        count_number: 0
+      },
+      recordCollect: {
+        count_number: 0
+      },
+      recordConsume: {
+        count_number: 0
+      },
+      userData: []
+    }
+  },
+  created() {
+    this.loading = true
+    report_home().then(res => {
+      this.pageData = res.data
+      this.initDataFunc()
+      this.initChart()
+    }).finally(() => (this.loading = false))
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', () => {
+      this.myChart.resize()
+    })
+  },
+  methods: {
+    initDataFunc() {
+      const { drug_stock_expend, drug_use_type_data, user_use_expend } = this.pageData
+      this.pdc = drug_stock_expend.count_number
+      this.userData = user_use_expend
+      const instock = drug_stock_expend.data.find(item => item.status === 1)
+      const lending = drug_stock_expend.data.find(item => item.status === 2)
+      const consume = drug_stock_expend.data.find(item => item.status === 3)
+      this.instock.count = instock.count_number
+      this.instock.width = instock.ratio
+      this.lending.count = lending.count_number
+      this.lending.width = lending.ratio
+      this.consume.count = consume.count_number
+      this.consume.width = consume.ratio
+      this.recordStock = drug_use_type_data.find(item => item.record_type === 1)
+      this.recordCollect = drug_use_type_data.find(item => item.record_type === 2)
+      this.recordConsume = drug_use_type_data.find(item => item.record_type === 3)
+    },
+    initChart() {
+      this.myChart = this.$echarts.init(
+        document.getElementById('mychart')
+      )
+      const data = this.pageData.drug_use_expend.map(item => {
+        console.log(item)
+        item.value = item.count_num
+        return item
+      })
+      const option = {
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        radius: '50%',
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            label: {
+              normal: {
+                show: true,
+                formatter: '{b}:{d}%'
+              }
+            },
+            data
+          }
+        ]
+      }
+      this.myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
+        this.myChart.resize()
+      })
     }
   }
 }
@@ -228,4 +308,24 @@ export default {
   font-weight: bold;
   color: #303133;
 }
+#mychart{
+  width:33rem;
+  height: 12.5rem;
+}
+.user-item{
+  display: flex;
+  flex-direction:column;
+  align-items: center;
+  .name{
+    font-size: 1rem;
+    font-weight: bold;
+    color: #303133;
+    margin: 0.3rem 0 0.3rem 0;
+  }
+  .count{
+    font-size: 1rem;
+    font-weight: 400;
+    color: #909399;
+  }
+}
 </style>