fix: 大屏同录数量饼图数据对接
This commit is contained in:
parent
e3c8ea901d
commit
cb6c45964c
@ -6,3 +6,14 @@ export const getTongJiData = () => {
|
||||
url: '/caserecord/countByPeriod',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取饼图
|
||||
export const getPieData = (period) => {
|
||||
return request({
|
||||
method: 'post',
|
||||
url: '/caserecord/countByClerkByPeriod',
|
||||
params: {
|
||||
period
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user