feat：对接消息相关接口
This commit is contained in:
zjc
@@ -43,7 +43,7 @@
|
||||
<div class="footer">
|
||||
<div class="flex">
|
||||
<div class="item">
|
||||
<progress1 :width="140" :height="70" />
|
||||
<CircleProgress :width="170" :height="90" />
|
||||
<div>
|
||||
<div class="bg">
|
||||
<span class="label">今日工单总条数：</span>
|
||||
@@ -56,7 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<progress1 :width="140" :height="70" />
|
||||
<CircleProgress :width="170" :height="90" />
|
||||
<div>
|
||||
<div class="bg">
|
||||
<span class="label">今日工单总条数：</span>
|
||||
@@ -101,9 +101,6 @@
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
import progress1 from './progress-1.vue'
|
||||
|
||||
let count = ref('58459')
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -178,7 +175,7 @@
|
||||
.footer {
|
||||
.item {
|
||||
flex: 1;
|
||||
height: vh(120);
|
||||
height: vh(140);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
@@ -197,6 +194,7 @@
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.label {
|
||||
width: vw(120);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="box mr-8">
|
||||
<Title1 title="景区承载" />
|
||||
<div class="flex">
|
||||
<progress1 :width="200" :height="70" />
|
||||
<circle-progress :width="200" :height="70" />
|
||||
<div class="flex flex-1 justify-between">
|
||||
<count-item label="景区当前人数" :count="35600" suffix="张" />
|
||||
<count-item label="景区最大承载" :count="35600" suffix="人" />
|
||||
@@ -36,9 +36,9 @@
|
||||
<Title1 title="停车信息" />
|
||||
<div class="flex">
|
||||
<div class="flex">
|
||||
<progress1 :width="140" :height="70" />
|
||||
<progress1 :width="140" :height="70" />
|
||||
<progress1 :width="140" :height="70" />
|
||||
<circle-progress :width="140" :height="70" />
|
||||
<circle-progress :width="140" :height="70" />
|
||||
<circle-progress :width="140" :height="70" />
|
||||
</div>
|
||||
<div class="ml-20 flex flex-1 justify-between">
|
||||
<count-item label="总停车场数" :count="561" suffix="个" />
|
||||
@@ -90,7 +90,7 @@
|
||||
<traffic-flow />
|
||||
</div>
|
||||
<div class="border mr-8">
|
||||
<Title3 title="今日交通负载" />
|
||||
<Title3 title="拥堵次数占比" />
|
||||
<jam :width="220" :height="160" />
|
||||
<div class="legend">
|
||||
<ul class="legend__wrapper">
|
||||
@@ -102,7 +102,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="border">
|
||||
<Title3 title="今日交通负载" />
|
||||
<Title3 title="拥堵次数占比" />
|
||||
<jam :width="220" :height="160" />
|
||||
<div class="legend">
|
||||
<ul class="legend__wrapper">
|
||||
@@ -229,7 +229,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import progress1 from './progress-1.vue'
|
||||
import { useMap } from '@/hooks/map'
|
||||
import carIcon from '@/assets/images/car.png'
|
||||
import shipIcon from '@/assets/images/ship.png'
|
||||
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="progress"
|
||||
:id="id"
|
||||
:style="{
|
||||
width: styleUtil.px2vw(width),
|
||||
height: styleUtil.px2vh(height)
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { guid } from '@/utils/util'
|
||||
import styleUtil from '@/utils/styleUtil'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
})
|
||||
let progressChart = null
|
||||
let id = ref(guid())
|
||||
let defaultCofig = {
|
||||
title: [
|
||||
{
|
||||
text: '45.5%',
|
||||
x: 'center',
|
||||
top: '34%',
|
||||
textStyle: {
|
||||
color: '#00D0FF',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '完成率',
|
||||
x: 'center',
|
||||
top: '56%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
// 内侧环
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
center: ['50%', '60%'],
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
itemStyle: {
|
||||
color: '#00D0FF'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0, '#075199'],
|
||||
[1, '#075199']
|
||||
],
|
||||
width: fitChartSize(6)
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: fitChartSize(6)
|
||||
},
|
||||
pointer: {
|
||||
// 指针
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
// 刻度
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// 刻度标签
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
// 仪表盘详情
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '90%',
|
||||
center: ['50%', '60%'],
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
itemStyle: {
|
||||
color: '#057EB9'
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: false,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0, '#075199'],
|
||||
[1, '#075199']
|
||||
],
|
||||
width: fitChartSize(6)
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: fitChartSize(6)
|
||||
},
|
||||
pointer: {
|
||||
// 指针
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
// 刻度
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// 刻度标签
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
// 仪表盘详情
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
progressChart = echarts.init(document.getElementById(id.value))
|
||||
progressChart.setOption({ ...defaultCofig })
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
const resize = () => {
|
||||
if (progressChart) {
|
||||
progressChart.dispose()
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="traffic-flow" id="traffic-flow" />
|
||||
<div class="traffic-flow" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import * as echarts from 'echarts'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
let trafficChart = null
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
@@ -19,7 +19,7 @@
|
||||
xAxis: {
|
||||
boundaryGap: true,
|
||||
type: 'category',
|
||||
data: ['河北', '山西', '河南', '内蒙', '辽宁'],
|
||||
data: ['10:00', '10:05', '10:10', '10:15', '10:20'],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
@@ -49,12 +49,11 @@
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290],
|
||||
data: [45, 53, 23, 45, 12],
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
barWidth: fitChartSize(8),
|
||||
barWidth: fitChartSize(16),
|
||||
itemStyle: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
@@ -62,11 +61,11 @@
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 208, 255, 0)'
|
||||
color: 'rgba(0, 99, 255, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 208, 255, 1)'
|
||||
color: 'rgba(2, 249, 250, 1)'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -78,17 +77,9 @@
|
||||
]
|
||||
}
|
||||
const init = () => {
|
||||
trafficChart = echarts.init(document.getElementById('traffic-flow'))
|
||||
trafficChart.setOption(option)
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
const resize = () => {
|
||||
if (trafficChart) {
|
||||
trafficChart.dispose()
|
||||
trafficChart = null
|
||||
init()
|
||||
}
|
||||
setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user