Files
admin-sjzx/src/views/pqs/supervise/terminal/components/networkEch.vue

74 lines
2.1 KiB
Vue
Raw Normal View History

2024-03-19 15:53:01 +08:00
<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 => item.statisticsDate)
},
yAxis: {
name: '台'
},
series: [
{
name: '日检测终端数量',
type: 'bar',
data: tableStore.table.data.dateStatistics.map(item => item.count)
}
]
}
options2.value = {
legend: {
data: ['检测终端数量']
},
xAxis: {
data: tableStore.table.data.orgStatistics.map(item => item.orgName)
},
yAxis: {
name: '台'
},
series: [
{
name: '检测终端数量',
type: 'bar',
data: tableStore.table.data.orgStatistics.map(item => item.count)
}
]
}
}
})
provide('tableStore', tableStore)
const height = mainHeight(160).height
onMounted(() => {
tableStore.index()
})
</script>
<style lang="scss" scoped></style>