HB
/
yudao-web
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

数据大屏数据对接

master
爱~海~爱海爱海~右 1 month ago
parent
576360ee94
commit
628c648221
5 changed files with 336 additions and 268 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 63
      src/api/screen/index.ts
  2. 43
      src/views/screen/compenonts/leftwrapper.vue
  3. 38
      src/views/screen/compenonts/map.vue
  4. 58
      src/views/screen/compenonts/numbox.vue
  5. 402
      src/views/screen/compenonts/rightwrapper.vue

63
src/api/screen/index.ts
Unescape View File

@ -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 })
},
}
// 查询大屏左侧第一个接口
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 })
}
}

43
src/views/screen/compenonts/leftwrapper.vue
Unescape View File

@ -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(() => {

38
src/views/screen/compenonts/map.vue
Unescape View File

@ -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 {

58
src/views/screen/compenonts/numbox.vue
Unescape View File

@ -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>

402
src/views/screen/compenonts/rightwrapper.vue
Unescape View File

@ -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(() => {

Write Preview
Loading…
Cancel
Save