You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
11 KiB
525 lines
11 KiB
<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 listRef = ref() |
|
const initChart = () => { |
|
rightFirst() |
|
// rightSecond() |
|
rightFourth() |
|
rightThird() |
|
} |
|
|
|
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) |
|
row1Options.value.series[0].data = new Array(5).fill(1).map(i=>{ |
|
return Math.floor(Math.random()*100) |
|
}) |
|
row1Options.value.series[1].data = new Array(5).fill(1).map(i=>{ |
|
return Math.floor(Math.random()*100) |
|
}) |
|
|
|
} |
|
|
|
//右二 |
|
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}` |
|
} |
|
} |
|
|
|
let timer: any = null |
|
// 右三 |
|
const rightThird = async () => { |
|
list.value = await ScreenApi.getRightThird(queryParams.value) |
|
timer = setInterval(() => { |
|
unref(listRef).scrollTop += 1; |
|
if (unref(listRef).scrollTop >= unref(listRef).scrollHeight) { |
|
unref(listRef).scrollTop = 0; |
|
} |
|
}, 200); |
|
} |
|
|
|
// 右四 |
|
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) |
|
row3Options.value.series[0].data = new Array(5).fill(1).map(i=>{ |
|
return Math.floor(Math.random()*100) |
|
}) |
|
row3Options.value.series[1].data = new Array(5).fill(1).map(i=>{ |
|
return Math.floor(Math.random()*100) |
|
}) |
|
} |
|
|
|
const handlerResize = () => { |
|
unref(row1Chart).resizeHandler() |
|
unref(row2Chart).resizeHandler() |
|
unref(row3Chart).resizeHandler() |
|
} |
|
|
|
onMounted(() => { |
|
initChart() |
|
observer = new ResizeObserver(handlerResize) |
|
observer.observe(rightWrapperRef.value) |
|
handlerResize() |
|
}) |
|
|
|
onUnmounted(() => { |
|
observer?.disconnect() |
|
timer && clearInterval(timer) |
|
}) |
|
</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>
|
|
|