74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<TableHeader area datePicker></TableHeader>
|
|
<div style="display: flex" v-loading="tableStore.table.loading" :style="{ height: height }">
|
|
<MyEchart :options="options1" />
|
|
<MyEchart :options="options2" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
import TableStore from '@/utils/tableStore'
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import { ref, provide, onMounted } from 'vue'
|
|
const options1 = ref()
|
|
const options2 = ref()
|
|
const tableStore = new TableStore({
|
|
url: '/process-boot/process/pmsTerminalDetection/getStatistics',
|
|
method: 'POST',
|
|
column: [],
|
|
beforeSearchFun: () => {
|
|
tableStore.table.params.id = tableStore.table.params.deptIndex
|
|
},
|
|
loadCallback: () => {
|
|
options1.value = {
|
|
legend: {
|
|
data: ['日检测终端数量']
|
|
},
|
|
xAxis: {
|
|
data: tableStore.table.data.dateStatistics.map((item:any) => item.statisticsDate)
|
|
},
|
|
yAxis: {
|
|
name: '台'
|
|
},
|
|
series: [
|
|
{
|
|
name: '日检测终端数量',
|
|
type: 'bar',
|
|
|
|
data: tableStore.table.data.dateStatistics.map((item:any) => item.count)
|
|
}
|
|
]
|
|
}
|
|
options2.value = {
|
|
legend: {
|
|
data: ['检测终端数量']
|
|
},
|
|
xAxis: {
|
|
data: tableStore.table.data.orgStatistics.map((item:any) => item.orgName)
|
|
},
|
|
yAxis: {
|
|
name: '台'
|
|
},
|
|
series: [
|
|
{
|
|
name: '检测终端数量',
|
|
type: 'bar',
|
|
|
|
data: tableStore.table.data.orgStatistics.map((item:any) => item.count)
|
|
}
|
|
]
|
|
}
|
|
}
|
|
})
|
|
provide('tableStore', tableStore)
|
|
|
|
const height = mainHeight(160).height
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped></style>
|