Browse Source

数据大屏地图

master
parent
commit
1353a97afe
  1. 33
      src/views/screen/compenonts/leftwrapper.vue
  2. 55
      src/views/screen/compenonts/map.vue
  3. 73
      src/views/screen/compenonts/rightwrapper.vue
  4. 1
      src/views/screen/index.vue

33
src/views/screen/compenonts/leftwrapper.vue

@ -30,7 +30,7 @@ const row1Options = ref({
},
xAxis: {
type: 'category',
data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
data: ['日常任务', '周期任务', '污染防治', '环境监测', '排污管控'],
axisTick: {
show: false
},
@ -71,7 +71,7 @@ const row1Options = ref({
series: [
{
type: 'bar',
data: [100, 10],
data: [100, 90, 10, 90, 90, 20, 56, 89],
barWidth: 5,
itemStyle: {
color: {
@ -168,14 +168,14 @@ const row2Options = ref({
name: '四大队'
},
{
value: 1548,
value: 500,
name: '五大队'
}
]
}
]
})
const row3Options = ref({
const row3Options:any = ref({
grid: {
top: 10,
bottom: 10,
@ -306,7 +306,23 @@ const row3Options = ref({
const row1Chart = ref()
const row2Chart = ref()
const row3Chart = ref()
const initChart = () => {}
const initChart = () => {
// leftFirst()
// leftSecond()
// leftThird()
const row1Data=new Array(5).fill(1).map(i=>{
return Math.floor(Math.random()*100)
})
row1Options.value.series[0].data=row1Data
row1Options.value.series[1].data=row1Data
const row3Data=new Array(5).fill(1).map(i=>{
return Math.floor(Math.random()*100)
})
row3Options.value.series[1].data=row3Data
row3Options.value.series[2].data=row3Data
row3Options.value.yAxis[1].data=row3Data
}
const handlerResize = () => {
unref(row1Chart).resizeHandler()
@ -347,13 +363,12 @@ const leftThird = async () => {
}
onMounted(() => {
leftFirst()
leftSecond()
leftThird()
initChart()
observer = new ResizeObserver(handlerResize)
observer.observe(leftWrapperRef.value)
handlerResize()
nextTick(() => {
initChart()
})
})
onUnmounted(() => {

55
src/views/screen/compenonts/map.vue

@ -5,6 +5,16 @@
<Numbox class="num-box block-box" />
<Tabber class="tabber-box" />
<Norm class="block-box nomr-box" />
<section class="legend">
<div class="legend-item">
<span class="legend-text color-#58D764">绿色柱</span>
<span class="legend-label">区域企业数占比</span>
</div>
<div class="legend-item">
<span class="legend-text color-#FBE947">黄色柱</span>
<span class="legend-label">区域任务数占比</span>
</div>
</section>
<section class="map z-2">
<charts :options="mapOption" ref="mapChartRef" class="mapChart" />
</section>
@ -395,7 +405,7 @@ const initMap = () => {
coordinateSystem: 'cartesian2d',
xAxisIndex: idx,
yAxisIndex: idx,
symbolSize: [6,3],
symbolSize: [6, 3],
symbolOffset: [0, -1],
symbolPosition: 'end',
symbol: 'circle',
@ -458,7 +468,7 @@ const initMap = () => {
label: {
show: false,
},
symbolSize: [6,3],
symbolSize: [6, 3],
symbolOffset: [0, -1],
barGap: '-100%',
data: [
@ -489,7 +499,7 @@ const initMap = () => {
show: false,
},
barGap: '-100%',
symbolSize: [6,3],
symbolSize: [6, 3],
symbolOffset: [0, -1],
data: [
{
@ -506,14 +516,16 @@ const initMap = () => {
}
]
})
})
}
onMounted(() => {
observer = new ResizeObserver(handlerResize)
observer.observe(mapWrapperRef.value)
initMap()
nextTick(() => {
initMap()
})
})
onUnmounted(() => {
@ -535,7 +547,6 @@ onUnmounted(() => {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
//animation: rotate 5s linear infinite;
}
&::after {
@ -566,7 +577,7 @@ onUnmounted(() => {
.nomr-box {
position: absolute;
right: 12px;
top: 50%;
top: 68%;
transform: translateY(-50%);
}
@ -597,19 +608,29 @@ onUnmounted(() => {
backdrop-filter: blur(3px);
z-index: 2;
}
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateZ(0);
}
.legend {
position: absolute;
left: 20%;
top: 20%;
display: flex;
flex-flow: column nowrap;
gap: 12px;
z-index: 2;
50% {
transform: rotateX(-30deg) rotateZ(30deg);
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 14px;
to {
transform: rotateX(0deg) rotateZ(0deg);
.legend-text {
opacity: 0.8;
}
}
}
}
</style>

73
src/views/screen/compenonts/rightwrapper.vue

@ -8,24 +8,13 @@
</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"
>
<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 }"
/>
<count-to :start-val="0" :end-val="row.count" :duration="1000"
:options="{ separator: ',', decimal: 0 }" />
</section>
</section>
@ -183,7 +172,7 @@ const row1Options = ref({
})
const list: any = ref([])
const color = ['#56CA00', '#FFE700', '#16B1FF']
const row2Options:any = ref({
const row2Options: any = ref({
series: [
{
type: 'pie',
@ -414,17 +403,29 @@ const row3Options = ref({
const row1Chart = ref()
const row2Chart = ref()
const row3Chart = ref()
const initChart = () => {}
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)
// 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)
})
}
//
@ -453,17 +454,30 @@ const rightSecond = async () => {
}
}
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)
// 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 = () => {
@ -474,10 +488,6 @@ const handlerResize = () => {
onMounted(() => {
initChart()
rightFirst()
rightSecond()
rightFourth()
rightThird()
observer = new ResizeObserver(handlerResize)
observer.observe(rightWrapperRef.value)
handlerResize()
@ -485,6 +495,7 @@ onMounted(() => {
onUnmounted(() => {
observer?.disconnect()
timer && clearInterval(timer)
})
</script>
@ -496,12 +507,14 @@ onUnmounted(() => {
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;

1
src/views/screen/index.vue

@ -29,6 +29,7 @@ import Rightwrapper from './compenonts/rightwrapper.vue'
padding: 12px 12px;
grid-gap: 24px;
color: #fff;
padding-bottom: 20px;
.chart-wrapper {
display: grid;
grid-template-rows: 1fr;

Loading…
Cancel
Save