feat(inspector): add interactive statistics cards with dynamic chart updates
This commit is contained in:
parent
3342b762ad
commit
411815a248
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card" v-bind="$attrs">
|
||||
<div class="title">
|
||||
{{ title }}
|
||||
</div>
|
||||
@ -12,10 +12,19 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'Card',
|
||||
props:{
|
||||
inheritAttrs:false,
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
click:{
|
||||
type: Function,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChangeStatistics() {
|
||||
console.log(123)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -29,14 +38,17 @@ export default {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
color: #fff1cc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.body{
|
||||
|
||||
.body {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@ -5,40 +5,40 @@
|
||||
</div>
|
||||
<div class="inspector-container">
|
||||
<div style="display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
|
||||
<Card title="总同录数量">
|
||||
<Card title="总同录数量" @click.native="handleChangeStatistics(0)">
|
||||
<div class="shu">
|
||||
<span>{{ tongji.totalCount }}</span>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="本年同录数量">
|
||||
<Card title="本年同录数量" @click.native="handleChangeStatistics(1)">
|
||||
<div class="shu">
|
||||
<span>{{ tongji.yearCount }}</span>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="本季度同录数量">
|
||||
<Card title="本季度同录数量" @click.native="handleChangeStatistics(2)">
|
||||
<div class="shu">
|
||||
<span>{{ tongji.monthCount }}</span>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="本月同录数量">
|
||||
<Card title="本月同录数量" @click.native="handleChangeStatistics(3)">
|
||||
<div class="shu">
|
||||
<span>{{ tongji.weekCount }}</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div style="flex:1;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
|
||||
<Card title="总同录数量">
|
||||
<div style="flex:1;display: flex;justify-content: center;align-items: center;">
|
||||
<Card :title="title">
|
||||
<div id="total" style="width: 100%;height: 500px"/>
|
||||
</Card>
|
||||
<Card title="本年同录数量">
|
||||
<div id="year" style="width: 100%;height: 500px"/>
|
||||
</Card>
|
||||
<Card title="本月同录数量">
|
||||
<div id="month" style="width: 100%;height: 500px"/>
|
||||
</Card>
|
||||
<Card title="本周同录数量">
|
||||
<div id="week" style="width: 100%;height: 500px"/>
|
||||
</Card>
|
||||
<!-- <Card title="本年同录数量">-->
|
||||
<!-- <div id="year" style="width: 100%;height: 500px"/>-->
|
||||
<!-- </Card>-->
|
||||
<!-- <Card title="本月同录数量">-->
|
||||
<!-- <div id="month" style="width: 100%;height: 500px"/>-->
|
||||
<!-- </Card>-->
|
||||
<!-- <Card title="本周同录数量">-->
|
||||
<!-- <div id="week" style="width: 100%;height: 500px"/>-->
|
||||
<!-- </Card>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,27 +55,41 @@ export default {
|
||||
components: {Card},
|
||||
data() {
|
||||
return {
|
||||
tongji: {}
|
||||
title: '总同录数量',
|
||||
tongji: {},
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.initialEcharts()
|
||||
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)
|
||||
await this.getPinTongJiData(0)
|
||||
// await this.getPinTongJiData(document.getElementById('year'), 1)
|
||||
// await this.getPinTongJiData(document.getElementById('month'), 3)
|
||||
// await this.getPinTongJiData(document.getElementById('week'), 2)
|
||||
},
|
||||
methods: {
|
||||
initialEcharts() {
|
||||
if (this.chart) return
|
||||
const dom = document.getElementById('total')
|
||||
this.chart = echarts.init(dom)
|
||||
|
||||
this.chatOptions = this.getEchartsOptions([])
|
||||
|
||||
this.chart.setOption(this.chatOptions)
|
||||
},
|
||||
async handleChangeStatistics(type) {
|
||||
this.title = ['总同录数量', '本年同录数量', '本季度同录数量', '本月同录数量'][type]
|
||||
await this.getPinTongJiData(type)
|
||||
},
|
||||
async getTongJi() {
|
||||
const data = await getTongJiData()
|
||||
this.tongji = data.data
|
||||
},
|
||||
async getPinTongJiData(documentSelect, period) {
|
||||
const charts = echarts.init(documentSelect)
|
||||
|
||||
async getPinTongJiData(period) {
|
||||
const {data} = await getPieData(period)
|
||||
|
||||
charts.setOption(this.getEchartsOptions(data))
|
||||
this.chart.setOption(this.getEchartsOptions(data))
|
||||
},
|
||||
getEchartsOptions(data) {
|
||||
return {
|
||||
@ -100,10 +114,10 @@ export default {
|
||||
// borderColor: 'transparent',
|
||||
// borderWidth: 10
|
||||
// },
|
||||
data: data.map(r => ({
|
||||
data: data?.map(r => ({
|
||||
value: r.num,
|
||||
name: r.clerk
|
||||
}))
|
||||
})) ?? []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ module.exports = {
|
||||
// target: `http://120.79.202.7:443`,
|
||||
// target: `http://100.100.10.216:8099`,
|
||||
// target: 'http://106.15.139.36:18090',
|
||||
target: 'http://192.168.3.12:18098/', //小乌龟本地
|
||||
target: 'http://127.0.0.1:18098/', //小乌龟本地
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user