From 628c6482219f4f4757e8f0f9a811a51949db8f59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=88=B1=7E=E6=B5=B7=7E=E7=88=B1=E6=B5=B7=E7=88=B1?=
=?UTF-8?q?=E6=B5=B7=7E=E5=8F=B3?= <1828712314@qq.com>
Date: Mon, 24 Feb 2025 18:00:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=95=B0?=
=?UTF-8?q?=E6=8D=AE=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/screen/index.ts | 63 +--
src/views/screen/compenonts/leftwrapper.vue | 43 +-
src/views/screen/compenonts/map.vue | 38 +-
src/views/screen/compenonts/numbox.vue | 58 +--
src/views/screen/compenonts/rightwrapper.vue | 402 +++++++++++--------
5 files changed, 336 insertions(+), 268 deletions(-)
diff --git a/src/api/screen/index.ts b/src/api/screen/index.ts
index 52ef914..351b80e 100644
--- a/src/api/screen/index.ts
+++ b/src/api/screen/index.ts
@@ -1,35 +1,36 @@
import request from '@/config/axios'
-
// 数据大屏 API
export const ScreenApi = {
- // 查询大屏左侧第一个接口
- getLeftFirst: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getLeftFirst`, params })
- },
-
- getLeftSecond: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getLeftSecond`, params })
- },
-
- getLeftThird: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getLeftThird`, params })
- },
-
- getRightFirst: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getRightFirst`, params })
- },
-
-
- getRightSecond: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getRightSecond`, params })
- },
-
- getRightThird: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getRightThird`, params })
- },
-
- getRightFourth: async (params: any) => {
- return await request.get({ url: `/system/big-view-data/getRightFourth`, params })
- },
-}
\ No newline at end of file
+ // 查询大屏左侧第一个接口
+ getLeftFirst: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getLeftFirst`, params })
+ },
+
+ getLeftSecond: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getLeftSecond`, params })
+ },
+
+ getLeftThird: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getLeftThird`, params })
+ },
+
+ getRightFirst: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getRightFirst`, params })
+ },
+
+ getRightSecond: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getRightSecond`, params })
+ },
+
+ getRightThird: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getRightThird`, params })
+ },
+
+ getRightFourth: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getRightFourth`, params })
+ },
+ getCenter: async (params: any) => {
+ return await request.get({ url: `/system/big-view-data/getCenter`, params })
+ }
+}
diff --git a/src/views/screen/compenonts/leftwrapper.vue b/src/views/screen/compenonts/leftwrapper.vue
index 504171a..c5276cc 100644
--- a/src/views/screen/compenonts/leftwrapper.vue
+++ b/src/views/screen/compenonts/leftwrapper.vue
@@ -16,7 +16,6 @@
import TitleBox from './titleBox.vue'
import { ScreenApi } from '@/api/screen'
-
const leftWrapperRef = ref()
let observer: Nullable<ResizeObserver> = null
@@ -50,6 +49,9 @@ const row1Options = ref({
},
yAxis: {
type: 'value',
+ max: (v) => {
+ return Math.floor(v.max * 1.1 + 1)
+ },
axisTick: {
show: false,
lineStyle: {
@@ -139,8 +141,7 @@ const row2Options = ref({
series: [
{
type: 'pie',
- itemStyle: {
- },
+ itemStyle: {},
radius: ['55%', '75%'],
center: ['50%', '50%'],
label: {
@@ -313,32 +314,38 @@ const handlerResize = () => {
unref(row3Chart).resizeHandler()
}
-const queryParams:any = ref();
-
-
+const queryParams: any = ref()
//左一数据
-const leftFirst = async() => {
- const data:any = await ScreenApi.getLeftFirst(queryParams.value);
- row1Options.value.xAxis.data = data.map(i=>i.name)
- row1Options.value.series[0].data = data.map(i=>i.value)
+const leftFirst = async () => {
+ const data: any = await ScreenApi.getLeftFirst(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.value)
}
//左二数据
-const leftSecond = async() => {
- const data = await ScreenApi.getLeftSecond(queryParams.value);
+const leftSecond = async () => {
+ const data = await ScreenApi.getLeftSecond(queryParams.value)
row2Options.value.title.text = data.enterpriseCount
row2Options.value.series[0].data = data.enterpriseCountGroup
}
//左三数据
-const leftThird = async() => {
- const data = await ScreenApi.getLeftThird(queryParams.value);
- row3Options.value.yAxis[0].data = data.map(i=>i.name)
- row3Options.value.yAxis[1].data = data.map(i=>i.finishCount)
+const leftThird = async () => {
+ const data = await ScreenApi.getLeftThird(queryParams.value)
+ row3Options.value.yAxis[0].data = data.map((i) => i.name)
+ row3Options.value.yAxis[1].data = data.map((i) => i.execCount)
+ row3Options.value.series[1].data = data.map((i) => i.finishCount)
+ row3Options.value.series[2].data = data.map((i) => {
+ return {
+ name: i.name,
+ value: i.finishCount,
+ symbolSize: !i.finishCount ? 0 : [10, 15]
+ }
+ })
}
-
onMounted(() => {
leftFirst()
leftSecond()
@@ -346,7 +353,7 @@ onMounted(() => {
initChart()
observer = new ResizeObserver(handlerResize)
observer.observe(leftWrapperRef.value)
- handlerResize()
+ handlerResize()
})
onUnmounted(() => {
diff --git a/src/views/screen/compenonts/map.vue b/src/views/screen/compenonts/map.vue
index 8249f22..2bdc006 100644
--- a/src/views/screen/compenonts/map.vue
+++ b/src/views/screen/compenonts/map.vue
@@ -3,8 +3,8 @@
<AirQuality class="air-quality block-box" />
<Weather class="weather block-box" />
<Numbox class="num-box block-box" />
- <Tabber class="tabber-box"/>
- <Norm class="block-box nomr-box"/>
+ <Tabber class="tabber-box" />
+ <Norm class="block-box nomr-box" />
<section class="map">
<charts :options="mapOption" ref="mapChartRef" class="mapChart" />
</section>
@@ -16,9 +16,9 @@ import AirQuality from './airQuality.vue'
import Weather from './weather.vue'
import Numbox from './numbox.vue'
import Tabber from './tabber.vue'
-import Norm from './norm.vue'
-let observer: Nullable<ResizeObserver> = null
+import Norm from './norm.vue'
+let observer: Nullable<ResizeObserver> = null
const mapWrapperRef = ref()
const mapChartRef = ref()
@@ -92,6 +92,8 @@ const handlerResize = () => {
unref(mapChartRef).resizeHandler()
}
+
+
onMounted(() => {
observer = new ResizeObserver(handlerResize)
observer.observe(mapWrapperRef.value)
@@ -139,12 +141,12 @@ onUnmounted(() => {
left: 12px;
top: 0;
}
- .nomr-box{
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- }
+ .nomr-box {
+ position: absolute;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
.weather {
position: absolute;
left: 50%;
@@ -156,18 +158,18 @@ onUnmounted(() => {
right: 12px;
top: 0;
}
- .tabber-box{
- position: absolute;
- left: 50%;
- bottom: 0;
- transform: translateX(-50%);
- z-index: 2;
- }
+ .tabber-box {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translateX(-50%);
+ z-index: 2;
+ }
.block-box {
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(3px);
- z-index: 2;
+ z-index: 2;
}
}
@keyframes rotate {
diff --git a/src/views/screen/compenonts/numbox.vue b/src/views/screen/compenonts/numbox.vue
index 093f965..0295347 100644
--- a/src/views/screen/compenonts/numbox.vue
+++ b/src/views/screen/compenonts/numbox.vue
@@ -1,4 +1,16 @@
<script setup lang="ts">
+import { ScreenApi } from '@/api/screen'
+const centerInfo: any = ref({
+ taskCount: 0,
+ inspectionsCount: 0,
+ enterpriseCount: 0
+})
+
+const getCenter = async () => {
+ centerInfo.value = await ScreenApi.getCenter({})
+}
+
+getCenter()
</script>
<template>
@@ -7,35 +19,35 @@
<section>任务数</section>
<count-to
:start-val="0"
- :end-val="1000"
+ :end-val="centerInfo.taskCount"
:duration="2000"
:options="{ decimal: 2 }"
suffix="+"
class="font-bold color-#FFE700"
/>
</section>
- <section class="flex flex-col gap-8px flex-content-center">
- <section>执法数</section>
- <count-to
- :start-val="0"
- :end-val="1000"
- :duration="2000"
- :options="{ decimal: 2 }"
- suffix="+"
- class="font-bold color-#16B1FF"
- />
- </section>
- <section class="flex flex-col gap-8px flex-content-center">
- <section>企业数</section>
- <count-to
- :start-val="0"
- :end-val="100"
- :duration="2000"
- :options="{ decimal: 2 }"
- suffix="+"
- class="font-bold color-#56CA00"
- />
- </section>
+ <section class="flex flex-col gap-8px flex-content-center">
+ <section>执法数</section>
+ <count-to
+ :start-val="0"
+ :end-val="centerInfo.inspectionsCount"
+ :duration="2000"
+ :options="{ decimal: 2 }"
+ suffix="+"
+ class="font-bold color-#16B1FF"
+ />
+ </section>
+ <section class="flex flex-col gap-8px flex-content-center">
+ <section>企业数</section>
+ <count-to
+ :start-val="0"
+ :end-val="centerInfo.enterpriseCount"
+ :duration="2000"
+ :options="{ decimal: 2 }"
+ suffix="+"
+ class="font-bold color-#56CA00"
+ />
+ </section>
</section>
</template>
diff --git a/src/views/screen/compenonts/rightwrapper.vue b/src/views/screen/compenonts/rightwrapper.vue
index 7a26ad3..ecc0254 100644
--- a/src/views/screen/compenonts/rightwrapper.vue
+++ b/src/views/screen/compenonts/rightwrapper.vue
@@ -7,10 +7,24 @@
<Charts :options="row2Options" ref="row2Chart" />
</TitleBox>
<TitleBox title="资质许可状态">
- <section></section>
+ <section class="height-100% width-100% flex flex-col gap-12px">
+ <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>
</TitleBox>
- <TitleBox >
- <Charts :options="row3Options" ref="row3Chart" />
+ <TitleBox>
+ <Charts :options="row3Options" ref="row3Chart" />
</TitleBox>
</section>
</template>
@@ -58,6 +72,9 @@ const row1Options = ref({
color: '#fff'
}
},
+ max: (v) => {
+ return Math.floor(v.max * 1.1 + 1)
+ },
axisLabel: {
show: false
},
@@ -76,6 +93,9 @@ const row1Options = ref({
color: '#fff'
}
},
+ max: (v) => {
+ return Math.floor(v.max * 1.1 + 1)
+ },
axisLabel: {
show: false
},
@@ -154,7 +174,7 @@ const row1Options = ref({
}
}
})
-
+const list: any = ref([])
const color = ['#56CA00', '#FFE700', '#16B1FF']
const row2Options = ref({
series: [
@@ -226,192 +246,216 @@ const row2Options = ref({
})
}
})
-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'
- }
- },
- axisLabel: {
- show: false
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,0.2)'
- }
- }
- },
- {
- type: 'value',
- axisTick: {
- show: false,
- lineStyle: {
- color: '#fff'
- }
- },
- 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 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 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 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
+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() => {
-// const data = await ScreenApi.getRightThird(queryParams.value);
-// row3Options.value.yAxis[0].data = data.map(i=>i.name)
-// row3Options.value.yAxis[1].data = data.map(i=>i.finishCount)
-// }
-//右四数据
-// const rightFourth = async() => {
-// const data = await ScreenApi.getRightFourth(queryParams.value);
-// row3Options.value.xAxis[0].data = data.map(i=>i.name)
-// row3Options.value.yAxis[1].data = data.map(i=>i.finishCount)
-// }
-
+// 右三数据
+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()
@@ -423,9 +467,11 @@ onMounted(() => {
initChart()
rightFirst()
rightSecond()
+ rightFourth()
+ rightThird()
observer = new ResizeObserver(handlerResize)
observer.observe(rightWrapperRef.value)
- handlerResize()
+ handlerResize()
})
onUnmounted(() => {