fix: 大屏同录数量饼图数据对接

This commit is contained in:
lonewolfyx 2026-03-23 10:48:04 +08:00
parent e3c8ea901d
commit cb6c45964c
3 changed files with 76 additions and 30 deletions

View File

@ -6,3 +6,14 @@ export const getTongJiData = () => {
url: '/caserecord/countByPeriod',
})
}
// 获取饼图
export const getPieData = (period) => {
return request({
method: 'post',
url: '/caserecord/countByClerkByPeriod',
params: {
period
}
})
}

View File

@ -42,22 +42,22 @@ service.interceptors.request.use(config => {
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理,请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
cache.session.setJSON('sessionObj', requestObj)
}
}
// const sessionObj = cache.session.getJSON('sessionObj')
// if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
// cache.session.setJSON('sessionObj', requestObj)
// } else {
// const s_url = sessionObj.url; // 请求地址
// const s_data = sessionObj.data; // 请求数据
// const s_time = sessionObj.time; // 请求时间
// const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
// if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
// const message = '数据正在处理,请勿重复提交';
// console.warn(`[${s_url}]: ` + message)
// return Promise.reject(new Error(message))
// } else {
// cache.session.setJSON('sessionObj', requestObj)
// }
// }
}
return config
}, error => {

View File

@ -17,7 +17,7 @@
</Card>
<Card title="本月同录数量">
<div class="shu">
<span>{{tongji.monthCount}}</span>
<span>{{ tongji.monthCount }}</span>
</div>
</Card>
<Card title="本周同录数量">
@ -28,24 +28,16 @@
</div>
<div style="flex:1;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
<Card title="总同录数量">
<div class="shu">
<span>6090.99</span>
</div>
<div id="total" style="width: 100%;height: 500px"/>
</Card>
<Card title="本年同录数量">
<div class="shu">
<span>6090.99</span>
</div>
<div id="year" style="width: 100%;height: 500px"/>
</Card>
<Card title="本月同录数量">
<div class="shu">
<span>6090.99</span>
</div>
<div id="month" style="width: 100%;height: 500px"/>
</Card>
<Card title="本周同录数量">
<div class="shu">
<span>6090.99</span>
</div>
<div id="week" style="width: 100%;height: 500px"/>
</Card>
</div>
</div>
@ -55,7 +47,8 @@
<script>
import Card from "@/views/inspector/components/Card.vue";
import {getTongJiData} from "@/api/inspector";
import {getPieData, getTongJiData} from "@/api/inspector";
import * as echarts from "echarts";
export default {
name: 'inspector',
@ -67,11 +60,53 @@ export default {
},
async mounted() {
await this.getTongJi()
await this.getPinTongJiData(document.getElementById('total'), 0)
await this.getPinTongJiData(document.getElementById('year'), 1)
await this.getPinTongJiData(document.getElementById('month'), 3)
await this.getPinTongJiData(document.getElementById('week'), 2)
},
methods: {
async getTongJi() {
const data = await getTongJiData()
this.tongji = data.data
},
async getPinTongJiData(documentSelect, period) {
const charts = echarts.init(documentSelect)
const {data} = await getPieData(period)
charts.setOption(this.getEchartsOptions(data))
},
getEchartsOptions(data) {
return {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center',
textStyle: {
color: "rgba(14, 253, 255, 1)"
}
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['20%', '50%'],
avoidLabelOverlap: false,
// itemStyle: {
// borderRadius: 10,
// borderColor: 'transparent',
// borderWidth: 10
// },
data: data.map(r => ({
value: r.num,
name: r.clerk
}))
}
]
}
}
}
}