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

Merge remote-tracking branch 'origin/master'

master
DX 1 month ago
parent
80aa08f9a1 628c648221
commit
ffad59eff6
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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/api/screen/index.ts
  2. 41
      src/views/screen/compenonts/leftwrapper.vue
  3. 12
      src/views/screen/compenonts/map.vue
  4. 18
      src/views/screen/compenonts/numbox.vue
  5. 100
      src/views/screen/compenonts/rightwrapper.vue

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

@ -1,6 +1,5 @@
import request from '@/config/axios' import request from '@/config/axios'
// 数据大屏 API // 数据大屏 API
export const ScreenApi = { export const ScreenApi = {
// 查询大屏左侧第一个接口 // 查询大屏左侧第一个接口
@ -20,7 +19,6 @@ export const ScreenApi = {
return await request.get({ url: `/system/big-view-data/getRightFirst`, params }) return await request.get({ url: `/system/big-view-data/getRightFirst`, params })
}, },
getRightSecond: async (params: any) => { getRightSecond: async (params: any) => {
return await request.get({ url: `/system/big-view-data/getRightSecond`, params }) return await request.get({ url: `/system/big-view-data/getRightSecond`, params })
}, },
@ -32,4 +30,7 @@ export const ScreenApi = {
getRightFourth: async (params: any) => { getRightFourth: async (params: any) => {
return await request.get({ url: `/system/big-view-data/getRightFourth`, params }) 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 })
}
} }

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

@ -16,7 +16,6 @@
import TitleBox from './titleBox.vue' import TitleBox from './titleBox.vue'
import { ScreenApi } from '@/api/screen' import { ScreenApi } from '@/api/screen'
const leftWrapperRef = ref() const leftWrapperRef = ref()
let observer: Nullable<ResizeObserver> = null let observer: Nullable<ResizeObserver> = null
@ -50,6 +49,9 @@ const row1Options = ref({
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisTick: { axisTick: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -139,8 +141,7 @@ const row2Options = ref({
series: [ series: [
{ {
type: 'pie', type: 'pie',
itemStyle: { itemStyle: {},
},
radius: ['55%', '75%'], radius: ['55%', '75%'],
center: ['50%', '50%'], center: ['50%', '50%'],
label: { label: {
@ -313,32 +314,38 @@ const handlerResize = () => {
unref(row3Chart).resizeHandler() unref(row3Chart).resizeHandler()
} }
const queryParams:any = ref(); const queryParams: any = ref()
//左一数据 //左一数据
const leftFirst = async() => { const leftFirst = async () => {
const data:any = await ScreenApi.getLeftFirst(queryParams.value); const data: any = await ScreenApi.getLeftFirst(queryParams.value)
row1Options.value.xAxis.data = data.map(i=>i.name) row1Options.value.xAxis.data = data.map((i) => i.name)
row1Options.value.series[0].data = data.map(i=>i.value) row1Options.value.series[0].data = data.map((i) => i.value)
row1Options.value.series[1].data = data.map((i) => i.value)
} }
//左二数据 //左二数据
const leftSecond = async() => { const leftSecond = async () => {
const data = await ScreenApi.getLeftSecond(queryParams.value); const data = await ScreenApi.getLeftSecond(queryParams.value)
row2Options.value.title.text = data.enterpriseCount row2Options.value.title.text = data.enterpriseCount
row2Options.value.series[0].data = data.enterpriseCountGroup row2Options.value.series[0].data = data.enterpriseCountGroup
} }
//左三数据 //左三数据
const leftThird = async() => { const leftThird = async () => {
const data = await ScreenApi.getLeftThird(queryParams.value); const data = await ScreenApi.getLeftThird(queryParams.value)
row3Options.value.yAxis[0].data = data.map(i=>i.name) row3Options.value.yAxis[0].data = data.map((i) => i.name)
row3Options.value.yAxis[1].data = data.map(i=>i.finishCount) 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(() => { onMounted(() => {
leftFirst() leftFirst()
leftSecond() leftSecond()

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

@ -3,8 +3,8 @@
<AirQuality class="air-quality block-box" /> <AirQuality class="air-quality block-box" />
<Weather class="weather block-box" /> <Weather class="weather block-box" />
<Numbox class="num-box block-box" /> <Numbox class="num-box block-box" />
<Tabber class="tabber-box"/> <Tabber class="tabber-box" />
<Norm class="block-box nomr-box"/> <Norm class="block-box nomr-box" />
<section class="map"> <section class="map">
<charts :options="mapOption" ref="mapChartRef" class="mapChart" /> <charts :options="mapOption" ref="mapChartRef" class="mapChart" />
</section> </section>
@ -17,8 +17,8 @@ import Weather from './weather.vue'
import Numbox from './numbox.vue' import Numbox from './numbox.vue'
import Tabber from './tabber.vue' import Tabber from './tabber.vue'
import Norm from './norm.vue' import Norm from './norm.vue'
let observer: Nullable<ResizeObserver> = null
let observer: Nullable<ResizeObserver> = null
const mapWrapperRef = ref() const mapWrapperRef = ref()
const mapChartRef = ref() const mapChartRef = ref()
@ -92,6 +92,8 @@ const handlerResize = () => {
unref(mapChartRef).resizeHandler() unref(mapChartRef).resizeHandler()
} }
onMounted(() => { onMounted(() => {
observer = new ResizeObserver(handlerResize) observer = new ResizeObserver(handlerResize)
observer.observe(mapWrapperRef.value) observer.observe(mapWrapperRef.value)
@ -139,7 +141,7 @@ onUnmounted(() => {
left: 12px; left: 12px;
top: 0; top: 0;
} }
.nomr-box{ .nomr-box {
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 50%; top: 50%;
@ -156,7 +158,7 @@ onUnmounted(() => {
right: 12px; right: 12px;
top: 0; top: 0;
} }
.tabber-box{ .tabber-box {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;

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

@ -1,4 +1,16 @@
<script setup lang="ts"> <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> </script>
<template> <template>
@ -7,7 +19,7 @@
<section>任务数</section> <section>任务数</section>
<count-to <count-to
:start-val="0" :start-val="0"
:end-val="1000" :end-val="centerInfo.taskCount"
:duration="2000" :duration="2000"
:options="{ decimal: 2 }" :options="{ decimal: 2 }"
suffix="+" suffix="+"
@ -18,7 +30,7 @@
<section>执法数</section> <section>执法数</section>
<count-to <count-to
:start-val="0" :start-val="0"
:end-val="1000" :end-val="centerInfo.inspectionsCount"
:duration="2000" :duration="2000"
:options="{ decimal: 2 }" :options="{ decimal: 2 }"
suffix="+" suffix="+"
@ -29,7 +41,7 @@
<section>企业数</section> <section>企业数</section>
<count-to <count-to
:start-val="0" :start-val="0"
:end-val="100" :end-val="centerInfo.enterpriseCount"
:duration="2000" :duration="2000"
:options="{ decimal: 2 }" :options="{ decimal: 2 }"
suffix="+" suffix="+"

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

@ -7,9 +7,23 @@
<Charts :options="row2Options" ref="row2Chart" /> <Charts :options="row2Options" ref="row2Chart" />
</TitleBox> </TitleBox>
<TitleBox title="资质许可状态"> <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>
<TitleBox > <TitleBox>
<Charts :options="row3Options" ref="row3Chart" /> <Charts :options="row3Options" ref="row3Chart" />
</TitleBox> </TitleBox>
</section> </section>
@ -58,6 +72,9 @@ const row1Options = ref({
color: '#fff' color: '#fff'
} }
}, },
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: { axisLabel: {
show: false show: false
}, },
@ -76,6 +93,9 @@ const row1Options = ref({
color: '#fff' color: '#fff'
} }
}, },
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: { axisLabel: {
show: false show: false
}, },
@ -154,7 +174,7 @@ const row1Options = ref({
} }
} }
}) })
const list: any = ref([])
const color = ['#56CA00', '#FFE700', '#16B1FF'] const color = ['#56CA00', '#FFE700', '#16B1FF']
const row2Options = ref({ const row2Options = ref({
series: [ series: [
@ -226,7 +246,7 @@ const row2Options = ref({
}) })
} }
}) })
const row3Options=ref({ const row3Options = ref({
grid: { grid: {
top: 40, top: 40,
bottom: 0, bottom: 0,
@ -262,6 +282,9 @@ const row3Options=ref({
color: '#fff' color: '#fff'
} }
}, },
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: { axisLabel: {
show: false show: false
}, },
@ -280,6 +303,9 @@ const row3Options=ref({
color: '#fff' color: '#fff'
} }
}, },
max: (v) => {
return Math.floor(v.max * 1.1 + 1)
},
axisLabel: { axisLabel: {
show: false show: false
}, },
@ -320,7 +346,7 @@ const row3Options=ref({
} }
] ]
} }
}, }
}, },
{ {
name: '任务数量', name: '任务数量',
@ -383,35 +409,53 @@ const row2Chart = ref()
const row3Chart = ref() const row3Chart = ref()
const initChart = () => {} const initChart = () => {}
const queryParams:any = ref() const queryParams: any = ref()
//右一数据 //右一数据
const rightFirst = async() => { const rightFirst = async () => {
const data:any = await ScreenApi.getRightFirst(queryParams.value); const data: any = await ScreenApi.getRightFirst(queryParams.value)
row1Options.value.xAxis.data = data.map(i=>i.name) row1Options.value.xAxis.data = data.map((i) => i.name)
row1Options.value.series[0].data = data.map(i=>i.value) row1Options.value.series[0].data = data.map((i) => i.value)
row1Options.value.series[1].data = data.map(i=>i.taskValue) row1Options.value.series[1].data = data.map((i) => i.taskValue)
} }
//右二数据 //右二数据
const rightSecond = async() => { const rightSecond = async () => {
const data = await ScreenApi.getRightSecond(queryParams.value); const data = await ScreenApi.getRightSecond(queryParams.value)
row2Options.value.series[0].data = data 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 rightThird = async () => {
// const data = await ScreenApi.getRightThird(queryParams.value); list.value = 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)
// const rightFourth = async() => { row3Options.value.xAxis.data = data.map((i) => i.name)
// const data = await ScreenApi.getRightFourth(queryParams.value); row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate)
// row3Options.value.xAxis[0].data = data.map(i=>i.name) row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate)
// row3Options.value.yAxis[1].data = data.map(i=>i.finishCount) }
// }
const handlerResize = () => { const handlerResize = () => {
unref(row1Chart).resizeHandler() unref(row1Chart).resizeHandler()
@ -423,6 +467,8 @@ onMounted(() => {
initChart() initChart()
rightFirst() rightFirst()
rightSecond() rightSecond()
rightFourth()
rightThird()
observer = new ResizeObserver(handlerResize) observer = new ResizeObserver(handlerResize)
observer.observe(rightWrapperRef.value) observer.observe(rightWrapperRef.value)
handlerResize() handlerResize()

Write Preview
Loading…
Cancel
Save