tangxuan
/
yy_rms_39zhiyao_duizhao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(src/views/reagent/report): 完成报表统计

Browse Source
duizhaopin_ui
duan 2 years ago
parent 5bab80cef4
commit e2ad511802
4 changed files with 145 additions and 35 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

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

9
src/api/report.js
Unescape View File

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

2
src/icons/svg/cup.svg
Unescape View File

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

After

Width:  |  Height:  |  Size: 1.5 KiB

164
src/views/reagent/report/index.vue
Unescape View File

@ -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>
@ -23,26 +27,26 @@
<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,34 +110,109 @@
</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
},
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()
})
},
percentage: 10,
colors: [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 }
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()
})
}
}
}
</script>
@ -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>

Write Preview
Loading…
Cancel
Save