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. 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' import request from '@/config/axios'
// 数据大屏 API // 数据大屏 API
export const ScreenApi = { export const ScreenApi = {
// 查询大屏左侧第一个接口 // 查询大屏左侧第一个接口
getLeftFirst: async (params: any) => { getLeftFirst: async (params: any) => {
return await request.get({ url: `/system/big-view-data/getLeftFirst`, params }) return await request.get({ url: `/system/big-view-data/getLeftFirst`, params })
}, },
getLeftSecond: async (params: any) => { getLeftSecond: async (params: any) => {
return await request.get({ url: `/system/big-view-data/getLeftSecond`, params }) return await request.get({ url: `/system/big-view-data/getLeftSecond`, params })
}, },
getLeftThird: async (params: any) => { getLeftThird: async (params: any) => {
return await request.get({ url: `/system/big-view-data/getLeftThird`, params }) return await request.get({ url: `/system/big-view-data/getLeftThird`, params })
}, },
getRightFirst: async (params: any) => { getRightFirst: async (params: any) => {
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 }) },
},
getRightThird: async (params: any) => {
getRightThird: async (params: any) => { return await request.get({ url: `/system/big-view-data/getRightThird`, params })
return await request.get({ url: `/system/big-view-data/getRightThird`, params }) },
},
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 })
}
}

43
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()
@ -346,7 +353,7 @@ onMounted(() => {
initChart() initChart()
observer = new ResizeObserver(handlerResize) observer = new ResizeObserver(handlerResize)
observer.observe(leftWrapperRef.value) observer.observe(leftWrapperRef.value)
handlerResize() handlerResize()
}) })
onUnmounted(() => { onUnmounted(() => {

38
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>
@ -16,9 +16,9 @@ import AirQuality from './airQuality.vue'
import Weather from './weather.vue' 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,12 +141,12 @@ 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%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.weather { .weather {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -156,18 +158,18 @@ 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;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2; z-index: 2;
} }
.block-box { .block-box {
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
z-index: 2; z-index: 2;
} }
} }
@keyframes rotate { @keyframes rotate {

58
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,35 +19,35 @@
<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="+"
class="font-bold color-#FFE700" class="font-bold color-#FFE700"
/> />
</section> </section>
<section class="flex flex-col gap-8px flex-content-center"> <section class="flex flex-col gap-8px flex-content-center">
<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="+"
class="font-bold color-#16B1FF" class="font-bold color-#16B1FF"
/> />
</section> </section>
<section class="flex flex-col gap-8px flex-content-center"> <section class="flex flex-col gap-8px flex-content-center">
<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="+"
class="font-bold color-#56CA00" class="font-bold color-#56CA00"
/> />
</section> </section>
</section> </section>
</template> </template>

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

@ -7,10 +7,24 @@
<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>
</template> </template>
@ -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,192 +246,216 @@ const row2Options = ref({
}) })
} }
}) })
const row3Options=ref({ const row3Options = ref({
grid: { grid: {
top: 40, top: 40,
bottom: 0, bottom: 0,
left: 10, left: 10,
right: 10, right: 10,
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['一大队', '二大队', '三大队', '四大队', '五大队'], data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
axisTick: { axisTick: {
show: false show: false
}, },
splitLine: { splitLine: {
show: false show: false
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(255, 255, 255, 0.20)' color: 'rgba(255, 255, 255, 0.20)'
} }
}, },
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12
} }
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
axisTick: { axisTick: {
show: false, show: false,
lineStyle: { lineStyle: {
color: '#fff' color: '#fff'
} }
}, },
axisLabel: { max: (v) => {
show: false return Math.floor(v.max * 1.1 + 1)
}, },
splitLine: { axisLabel: {
show: true, show: false
lineStyle: { },
color: 'rgba(255,255,255,0.2)' splitLine: {
} show: true,
} lineStyle: {
}, color: 'rgba(255,255,255,0.2)'
{ }
type: 'value', }
axisTick: { },
show: false, {
lineStyle: { type: 'value',
color: '#fff' axisTick: {
} show: false,
}, lineStyle: {
axisLabel: { color: '#fff'
show: false }
}, },
splitLine: { max: (v) => {
show: true, return Math.floor(v.max * 1.1 + 1)
lineStyle: { },
color: 'rgba(255,255,255,0.2)' axisLabel: {
} show: false
} },
} splitLine: {
], show: true,
series: [ lineStyle: {
{ color: 'rgba(255,255,255,0.2)'
type: 'line', }
yAxisIndex: 0, }
name: '执法记录', }
data: [120, 70, 10, 90, 90, 20, 56, 89], ],
smooth: true, series: [
symbol: 'circle', {
itemStyle: { type: 'line',
color: '#56CA00' yAxisIndex: 0,
}, name: '执法记录',
areaStyle: { data: [120, 70, 10, 90, 90, 20, 56, 89],
color: { smooth: true,
type: 'linear', symbol: 'circle',
x: 0, itemStyle: {
y: 0, color: '#56CA00'
x2: 0, },
y2: 1, areaStyle: {
colorStops: [ color: {
{ type: 'linear',
offset: 0, x: 0,
color: 'rgba(86, 220, 0, 0.4)' y: 0,
}, x2: 0,
{ y2: 1,
offset: 1, colorStops: [
color: 'rgba(86, 220, 0, 0)' {
} 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)' name: '任务数量',
}, type: 'line',
areaStyle: { yAxisIndex: 1,
color: { smooth: true,
type: 'linear', symbol: 'circle',
x: 0, itemStyle: {
y: 0, color: 'rgba(22, 177, 255, 1)'
x2: 0, },
y2: 1, areaStyle: {
colorStops: [ color: {
{ type: 'linear',
offset: 0, x: 0,
color: 'rgba(22, 177, 255, 0.4)' y: 0,
}, x2: 0,
{ y2: 1,
offset: 1, colorStops: [
color: 'rgba(22, 177, 255, 0)' {
} offset: 0,
] color: 'rgba(22, 177, 255, 0.4)'
} },
}, {
data: [1000, 900, 100, 900, 900, 200, 560, 819] offset: 1,
} color: 'rgba(22, 177, 255, 0)'
], }
tooltip: { ]
trigger: 'axis', }
backgroundColor: 'rgba(25, 119, 43,1)', },
borderColor: 'transparent', data: [1000, 900, 100, 900, 900, 200, 560, 819]
textStyle: { }
color: '#fff' ],
}, tooltip: {
axisPointer: { trigger: 'axis',
type: 'shadow', backgroundColor: 'rgba(25, 119, 43,1)',
label: { borderColor: 'transparent',
backgroundColor: '#6a7985' textStyle: {
} color: '#fff'
} },
}, axisPointer: {
legend: { type: 'shadow',
top: 0, label: {
left: 'center', backgroundColor: '#6a7985'
show: true, }
itemWidth: 10, }
itemHeight: 10, },
textStyle: { legend: {
color: '#fff' top: 0,
} left: 'center',
} show: true,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff'
}
}
}) })
const row1Chart = ref() const row1Chart = ref()
const row2Chart = ref() 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,9 +467,11 @@ 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()
}) })
onUnmounted(() => { onUnmounted(() => {

Write Preview
Loading…
Cancel
Save