<script lang="ts" setup name="DeviceBench">
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import type { planReturn } from './bench-interface'
import Linechart from '@/components/Echart/LineChart.vue'
import type { lineDataI } from '@/components/Echart/echart-interface'
import { getCustomerExpireData, getHighQualityCustomerList, getSampleAddData, getSampleExpireData } from '@/api/customer/bench'
// 每个展示块高度
const blockHeight = ref(300)
const blockWidth = ref(400)
const { proxy } = getCurrentInstance() as any
// 到期样品表格数据
const dueSampleTableData = ref()
// 到期样品表头
const dueSampleTableHead = [
{ text: '样品名称', value: 'sampleName' },
{ text: '委托方名称', value: 'customerName', width: '120' },
{ text: '上次检定时间', value: 'effectiveDate', width: '180' }, // 指证书出具时间
]
// 优质客户名单表中数据
const highQualityCustomerTableData = ref([])
// 优质客户名单表头
const highQualityCustomerTableHead = [
{ text: '客户名称', value: 'customerName' },
{ text: '总计检定金额', value: 'totalAmount' },
]
// 客户关系表中数据
const customerRelationsTabledata = ref([])
// 客户关系表头
const customerRelationsTableHead = [
{ text: '客户名称', value: 'customerName' },
{ text: '投诉/建议类型', value: 'adviceClass' },
{ text: '投诉/建议时间', value: 'adviceTime', width: '180' },
]
// 样品新增趋势x轴
const sampleAddXData: Ref<string[]> = ref([])
// 样品新增趋势数据
const sampleAddData: Ref<lineDataI[]> = ref([])
// 样品新增趋势趋势y轴最大值
const sampleAddYDataMax = ref()
// 样品到期趋势x轴
const sampleExpireXData: Ref<string[]> = ref([])
// 样品到期趋势数据
const sampleExpireData: Ref<lineDataI[]> = ref([])
// 样品到期趋势y轴最大值
const sampleExpireYDataMax = ref()
// 客户新增趋势x轴
const customerAddXData: Ref<string[]> = ref([])
// 客户新增趋势数据
const customerAddData: Ref<lineDataI[]> = ref([])
// 客户新增趋势趋势y轴最大值
const customerAddYDataMax = ref()
function calcBlockSize() {
// 计算工作台区域高度 - 顶部-面包屑-边距
const bodyHeight = document.body.clientHeight - 60 - 50 - 20
blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
console.log(blockHeight.value, blockWidth.value - 20)
}
window.addEventListener('resize', () => {
calcBlockSize()
})
// 获取样品新增趋势数据
function fetchSampleAddData() {
getSampleAddData().then((res) => {
sampleAddXData.value = res.data.map((item: planReturn) => item.date)
const yValue = res.data.map((item: planReturn) => Number(item.count))
sampleAddYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
sampleAddData.value = [{ name: '客户', data: yValue }]
})
}
// 获取样品到期趋势数据
function fetchSampleExpireData() {
getSampleExpireData().then((res) => {
sampleExpireXData.value = res.data.map((item: planReturn) => item.date)
const yValue = res.data.map((item: planReturn) => Number(item.count))
sampleExpireYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
sampleExpireData.value = [{ name: '客户', data: yValue }]
})
}
// 获取优质客户名单
function fetchHighQualityCustomerList() {
getHighQualityCustomerList().then((res) => {
highQualityCustomerTableData.value = res.data.rows
})
}
// 获取客户新增趋势数据
function fetchCustomerExpireData() {
getCustomerExpireData().then((res) => {
// const res = {
// data: [
// {
// date: '2021-09',
// count: '10',
// },
// {
// date: '09090',
// count: '10',
// },
// ],
// }
customerAddXData.value = res.data.map((item: planReturn) => item.date)
const yValue = res.data.map((item: planReturn) => Number(item.count))
customerAddYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
customerAddData.value = [{ name: '客户', data: yValue }]
})
}
// 获取到期样品表格数据
// 获取客户关系表格数据
onMounted(() => {
calcBlockSize()
fetchSampleAddData()// 样品新增趋势
fetchSampleExpireData()// 样品到期趋势
fetchCustomerExpireData()// 客户新增趋势
fetchHighQualityCustomerList()// 优质客户名单
})
</script>
<template>
<app-container>
<div class="customer-bench">
<el-row :gutter="10">
<el-col :span="8">
<bench-col
icon="icon-book"
title="到期样品"
path-url="/sample/overtime"
:style="{ height: blockHeight }"
:height="blockHeight"
>
<el-table :data="dueSampleTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
<el-table-column
v-for="item in dueSampleTableHead"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
:width="item.width"
/>
</el-table>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-line"
title="样品新增趋势"
:height="blockHeight"
>
<line-chart
:x-axis-data="sampleAddXData"
:width="`${blockWidth - 20}px`"
:data="sampleAddData"
unit="件"
/>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-line"
title="样品到期趋势"
:height="blockHeight"
>
<line-chart
:x-axis-data="sampleExpireXData"
:width="`${blockWidth - 20}px`"
:data="sampleExpireData"
unit="件"
/>
</bench-col>
</el-col>
</el-row>
</div>
<div class="device-bench" style="margin-top: 10px;">
<el-row :gutter="10">
<el-col :span="8">
<bench-col
icon="icon-book"
title="客户关系"
path-url="/customerManage/advice"
:style="{ height: blockHeight }"
:height="blockHeight"
>
<el-table :data="customerRelationsTabledata" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
<el-table-column
v-for="item in customerRelationsTableHead"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
:width="item.width"
/>
</el-table>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-line"
title="客户新增趋势"
:height="blockHeight"
>
<line-chart
:x-axis-data="customerAddXData"
:width="`${blockWidth - 20}px`"
:data="customerAddData"
unit="个"
/>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-book"
title="优质客户名单"
:style="{ height: blockHeight }"
:height="blockHeight"
>
<el-table :data="highQualityCustomerTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
<el-table-column
v-for="item in highQualityCustomerTableHead"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
/>
</el-table>
</bench-col>
</el-col>
</el-row>
</div>
</app-container>
</template>
<style lang="scss" scoped>
.customer-bench {
width: 100%;
height: 100%;
box-sizing: border-box;
.the-month-total-Data {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0 20px;
.title {
display: flex;
justify-content: space-between;
font-weight: 500;
margin-bottom: 3px;
}
.content {
width: 100%;
.item {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 10px;
padding: 3px 0;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom, #e9f5ff, #3d7eff);
border-radius: 8px;
&:last-child {
margin-right: 0;
}
}
}
}
.my-equipment {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
.item {
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, #caddff, #3d7eff);
border-radius: 16px;
}
}
}
</style>
<style lang="scss">
.bench-table {
.el-table__header-wrapper {
border-radius: 8px;
}
}
.bench-table-header {
th {
font-weight: normal;
font-size: 14px;
}
}
.bench-table-row {
border-radius: 8px;
}
</style>
