<template>
<section class="right-wrapper" ref="rightWrapperRef">
<TitleBox title="执法任务">
<Charts :options="row1Options" ref="row1Chart" />
</TitleBox>
<TitleBox>
<Charts :options="row2Options" ref="row2Chart" />
</TitleBox>
<TitleBox title="资质许可状态">
<section class="list-container">
<section
class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list"
ref="listRef"
>
<section
class="flex justify-between font-size-14px"
v-for="(row, index) in list"
:key="index"
>
<span>{{ row.name }}</span>
<section class="color-#56CA00">
逾期
<count-to
:start-val="0"
:end-val="row.count"
:duration="1000"
:options="{ separator: ',', decimal: 0 }"
/>
天
</section>
</section>
</section>
</section>
</TitleBox>
<TitleBox>
<Charts :options="row3Options" ref="row3Chart" />
</TitleBox>
</section>
</template>
<script setup lang="ts">
import TitleBox from './titleBox.vue'
import { ScreenApi } from '@/api/screen'
const rightWrapperRef = ref()
let observer: Nullable<ResizeObserver> = null
const row1Options = ref({
grid: {
top: 40,
bottom: 0,
left: 10,
right: 10,
containLabel: true
},
xAxis: {
type: 'category',
data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.20)'
}
},
axisLabel: {
color: '#fff',
fontSize: 12
}
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: '#fff'
}
},
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
},
{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: '#fff'
}
},
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}
],
series: [
{
type: 'bar',
yAxisIndex: 0,
name: '执法记录',
data: [100, 90, 10, 90, 90, 20, 56, 89],
barWidth: 5,
itemStyle: {
color: '#56CA00'
}
},
{
name: '任务数量',
type: 'line',
yAxisIndex: 1,
smooth: true,
symbol: 'circle',
itemStyle: {
color: 'rgba(22, 177, 255, 1)'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(22, 177, 255, 0.4)'
},
{
offset: 1,
color: 'rgba(22, 177, 255, 0)'
}
]
}
},
data: [1000, 900, 100, 900, 900, 200, 560, 819]
}
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(25, 119, 43,1)',
borderColor: 'transparent',
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
top: 0,
left: 'center',
show: true,
itemWidth: 15,
itemHeight: 15,
textStyle: {
color: '#fff'
}
}
})
const list: any = ref([])
const color = ['#56CA00', '#FFE700', '#16B1FF']
const row2Options:any = ref({
series: [
{
type: 'pie',
itemStyle: {},
center: ['30%', '50%'],
radius: ['50%', '80%'],
roseType: true,
label: {
show: true,
position: 'outside',
color: 'inherit',
fontSize: 10,
alignTo: 'labelLine'
},
labelLine: {
show: true,
length: 2
},
data: [
{
value: 335,
name: '审批通过'
},
{
value: 310,
name: '执法签到'
},
{
value: 234,
name: '整改处理'
}
].map((i, index) => {
return {
...i,
itemStyle: {
color: color[index]
}
}
})
}
],
legend: {
show: true,
itemWidth: 15,
itemHeight: 15,
itemGap: 10,
right: 0,
top: 'center',
orient: 'vertical',
data: [
{
name: '审批通过'
},
{
name: '执法签到'
},
{
name: '整改处理'
}
].map((i, index) => {
return {
...i,
textStyle: {
color: color[index]
}
}
})
}
})
const row3Options = ref({
grid: {
top: 40,
bottom: 0,
left: 10,
right: 10,
containLabel: true
},
xAxis: {
type: 'category',
data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.20)'
}
},
axisLabel: {
color: '#fff',
fontSize: 12
}
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: '#fff'
}
},
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
},
{
type: 'value',
axisTick: {
show: false,
lineStyle: {
color: '#fff'
}
},
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
}
}
],
series: [
{
type: 'line',
yAxisIndex: 0,
name: '执法记录',
data: [120, 70, 10, 90, 90, 20, 56, 89],
smooth: true,
symbol: 'circle',
itemStyle: {
color: '#56CA00'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(86, 220, 0, 0.4)'
},
{
offset: 1,
color: 'rgba(86, 220, 0, 0)'
}
]
}
}
},
{
name: '任务数量',
type: 'line',
yAxisIndex: 1,
smooth: true,
symbol: 'circle',
itemStyle: {
color: 'rgba(22, 177, 255, 1)'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(22, 177, 255, 0.4)'
},
{
offset: 1,
color: 'rgba(22, 177, 255, 0)'
}
]
}
},
data: [1000, 900, 100, 900, 900, 200, 560, 819]
}
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(25, 119, 43,1)',
borderColor: 'transparent',
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
top: 0,
left: 'center',
show: true,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff'
}
}
})
const row1Chart = ref()
const row2Chart = ref()
const row3Chart = ref()
const initChart = () => {}
const queryParams: any = ref()
//右一
const rightFirst = async () => {
const data: any = await ScreenApi.getRightFirst(queryParams.value)
row1Options.value.xAxis.data = data.map((i) => i.name)
row1Options.value.series[0].data = data.map((i) => i.value)
row1Options.value.series[1].data = data.map((i) => i.taskValue)
}
//右二
const rightSecond = async () => {
const data = await ScreenApi.getRightSecond(queryParams.value)
row2Options.value.series[0].data = data.map((i, index) => {
return {
value: i.value,
name: i.name,
itemStyle: {
color: color[index]
}
}
})
row2Options.value.legend.data = data.map((i, index) => {
return {
name: `${i.name}`,
textStyle: {
color: color[index]
}
}
})
row2Options.value.legend.formatter = (v) => {
const count = data.find((d) => v == d.name).value
return `${v} ${count}`
}
}
// 右三
const rightThird = async () => {
list.value = await ScreenApi.getRightThird(queryParams.value)
}
// 右四
const rightFourth = async () => {
const data = await ScreenApi.getRightFourth(queryParams.value)
row3Options.value.xAxis.data = data.map((i) => i.name)
row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate)
row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate)
}
const handlerResize = () => {
unref(row1Chart).resizeHandler()
unref(row2Chart).resizeHandler()
unref(row3Chart).resizeHandler()
}
onMounted(() => {
initChart()
rightFirst()
rightSecond()
rightFourth()
rightThird()
observer = new ResizeObserver(handlerResize)
observer.observe(rightWrapperRef.value)
handlerResize()
})
onUnmounted(() => {
observer?.disconnect()
})
</script>
<style scoped lang="scss">
.right-wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1.5fr 1fr 1.3fr 1.5fr;
grid-template-columns: 1fr;
grid-gap: 20px;
.list-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
scroll-behavior: smooth;
.list {
&::-webkit-scrollbar {
display: none;
}
}
}
}
</style>