<template>
<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 v-for="(item, index) in totalList" :key="index" :span="6">
<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" @input="handleClick">
<el-radio-button label="month">月度</el-radio-button>
<el-radio-button label="quarter">季度</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="请选择" @change="change">
<el-option
v-for="item in yearList"
:key="item"
:value="item"
:label="item"
></el-option>
</el-select>
</div>
<el-table
:data="tableData"
border
:show-summary="showSummary"
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>
import { checkerQuality, adminQuality } from "@/api/qualitycontrol-report"
export default {
data() {
return {
curRole: "",
totalList: [
{
label: "累计审核病例数",
prop: "checked",
},
{
label: "累计审核合格病例数",
prop: "pass",
},
{
label: "累计审核驳回修改病例数",
prop: "back",
},
{
label: "累计审核不合格病例数",
prop: "unPass",
},
],
totalData: {},
periodType: "month",
yearList: [],
yearBtn: 0,
tableData: [],
tableColumn: [],
allData: [],
month: [
{ label: "1月", prop: "value1" },
{ label: "2月", prop: "value2" },
{ label: "3月", prop: "value3" },
{ label: "4月", prop: "value4" },
{ label: "5月", prop: "value5" },
{ label: "6月", prop: "value6" },
{ label: "7月", prop: "value7" },
{ label: "8月", prop: "value8" },
{ label: "9月", prop: "value9" },
{ label: "10月", prop: "value10" },
{ label: "11月", prop: "value11" },
{ label: "12月", prop: "value12" },
],
quarter: [
{ label: "第1季度", prop: "value1" },
{ label: "第2季度", prop: "value2" },
{ label: "第3季度", prop: "value3" },
{ label: "第4季度", prop: "value4" },
],
year: [],
showSummary: false,
}
},
computed: {
roles() {
return this.$store.state.user.roles
},
},
watch: {},
mounted() {},
created() {
this.getNow()
if (this.roles.length > 0) {
let roleCodeArr = this.roles.map((e) => e.roleCode)
console.log(roleCodeArr)
if (roleCodeArr.includes("admin")) {
this.curRole = "admin"
} else if (roleCodeArr.includes("auditer")) {
this.curRole = "auditer"
}
}
this.getQuality()
},
methods: {
change(val) {
console.log(val)
this.getQuality()
},
getNow() {
const nowDate = new Date()
this.yearBtn = nowDate.getFullYear()
for (let i = 2023; i <= this.yearBtn; i++) {
this.yearList.push(i)
}
},
async getQuality() {
let res
// console.log(this.curRole)
switch (this.curRole) {
case "admin":
res = await adminQuality({ year: this.yearBtn })
let { overall } = res.data
this.allData = res.data
this.totalData = overall
this.showSummary = true
this.handleClick()
break
case "auditer":
res = await checkerQuality({ year: this.yearBtn })
this.allData = res.data
this.totalData = res.data.overall
this.showSummary = false
this.handleClick()
break
default:
break
}
},
handleClick(val) {
let tableData
let headerData
if (this.curRole == "admin") {
switch (this.periodType) {
case "month":
tableData = this.allData.month
headerData = this.month
this.tableColumn = [
{
label: "审核员/月份",
prop: "name",
},
...this.month,
{
label: "合计",
prop: "sum",
},
]
break
case "quarter":
tableData = this.allData.quarter
headerData = this.quarter
this.tableColumn = [
{
label: "审核员/季度",
prop: "name",
},
...this.quarter,
{
label: "合计",
prop: "sum",
},
]
break
case "year":
tableData = this.allData.year
this.year = this.yearList.map((e, index) => {
let obj = {
label: e + "年",
prop: "value" + (index + 1),
}
return obj
})
headerData = this.year
this.tableColumn = [
{
label: "审核员/年份",
prop: "name",
},
...this.year,
]
break
default:
break
}
// //处理动态表头 //
this.tableData = []
tableData.forEach((e, index) => {
let data = {
name: e.name,
}
// 计算
for (let i = 0; i < headerData.length; i++) {
let value = headerData[i].label
let filterArr = e.list.filter((item) => item.value === value)
if (filterArr.length > 0) {
data[headerData[i].prop] = filterArr[0].checked
} else {
data[headerData[i].prop] = 0
}
}
// !计算右侧合计条数
let arr = e.list.map((listItem) => listItem.checked)
data.sum = eval(arr.join("+"))
// !计算底部合计
this.tableData.push(data)
})
} else if (this.curRole == "auditer") {
headerData = [
{
label:
this.periodType == "month"
? "月份"
: this.periodType == "quarter"
? "季度"
: this.periodType == "year"
? "年度"
: "",
prop: "value",
},
{ label: "审核病例数(例)", prop: "checked" },
]
this.tableColumn = headerData
this.tableData =
this.periodType == "month"
? this.allData.month
: this.periodType == "quarter"
? this.allData.quarter
: this.periodType == "year"
? this.allData.year
: []
}
},
},
}
</script>
<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>