feat：对接接口、完善功能
This commit is contained in:
zjc
@@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<div class="age-ratio" id="age-ratio" />
|
||||
<div class="age-ratio" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
let ageChart = null
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
const homeData = inject('homeData')
|
||||
|
||||
watch(
|
||||
() => homeData.value?.userPortrait?.ageRate,
|
||||
() => {
|
||||
init()
|
||||
}
|
||||
)
|
||||
|
||||
const init = () => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
ageChart = echarts.init(document.getElementById('age-ratio'))
|
||||
ageChart.setOption({
|
||||
setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
@@ -19,16 +26,15 @@
|
||||
orient: 'vertical',
|
||||
left: '60%',
|
||||
y: 'center',
|
||||
data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
|
||||
itemHeight: fitChartSize(8),
|
||||
itemWidth: fitChartSize(8),
|
||||
itemGap: fitChartSize(10),
|
||||
formatter: function (name) {
|
||||
return '{title|' + name + '}'
|
||||
return '{name|' + name + '}'
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
title: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
@@ -54,36 +60,11 @@
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 484, name: '19岁以下' },
|
||||
{ value: 300, name: '18-30岁' },
|
||||
{ value: 1048, name: '30-40岁' },
|
||||
{ value: 580, name: '40-60岁' },
|
||||
{ value: 735, name: '60岁以上' }
|
||||
]
|
||||
data: homeData.value?.userPortrait?.ageRate || []
|
||||
}
|
||||
]
|
||||
})
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
const resize = () => {
|
||||
if (ageChart) {
|
||||
ageChart.dispose()
|
||||
ageChart = null
|
||||
init()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -6,17 +6,15 @@
|
||||
</template>
|
||||
</Title1>
|
||||
<div class="flex pt-20">
|
||||
<div class="item core">
|
||||
<span class="label">全县景区数</span>
|
||||
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
|
||||
</div>
|
||||
<div class="item queue">
|
||||
<span class="label">核心景区数</span>
|
||||
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
|
||||
</div>
|
||||
<div class="item congestion">
|
||||
<span class="label">低感景区总数</span>
|
||||
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
|
||||
<div
|
||||
v-for="(item, index) in homeData?.scenicSpot"
|
||||
class="item"
|
||||
:class="{ core: index == 0, queue: index == 1, congestion: index == 2 }"
|
||||
>
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<div class="flex align-end">
|
||||
<countup :end-val="item.value" /><span class="unit">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-20">
|
||||
@@ -68,7 +66,24 @@
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="xAxisData"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,39 +153,25 @@
|
||||
</div>
|
||||
|
||||
<Title1 title="游客画像" />
|
||||
|
||||
<div class="flex">
|
||||
<div class="box-1">
|
||||
<Title3 title="年龄/性别占比" />
|
||||
<age-ratio />
|
||||
<age />
|
||||
<div class="count">总人数：<countup endVal="124563" /></div>
|
||||
<div class="cell pt-20">
|
||||
<div class="cell pt-20" v-for="item in homeData?.userPortrait.genderRate">
|
||||
<img class="icon" src="@/assets/images/man.png" />
|
||||
<div class="bg">
|
||||
<span class="text">男性</span>
|
||||
<span class="text">{{ item.name }}性</span>
|
||||
<div class="progress">
|
||||
<el-progress
|
||||
:percentage="genderRate['男']"
|
||||
:percentage="Number(item.value)"
|
||||
:show-text="false"
|
||||
color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
|
||||
:color="`linear-gradient( to right, ${
|
||||
item.name == '男' ? '#074D90' : '#0A4482'
|
||||
} 0%, ${item.name == '男' ? '#55E0FF' : '#FF7021'} 100%)`"
|
||||
/>
|
||||
</div>
|
||||
<span class="man">{{ genderRate['男'] }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell pt-20">
|
||||
<img class="icon" src="@/assets/images/woman.png" />
|
||||
<div class="bg">
|
||||
<span class="text">女性</span>
|
||||
<div class="progress">
|
||||
<el-progress
|
||||
:percentage="genderRate['女']"
|
||||
:show-text="false"
|
||||
color="linear-gradient( to right,
|
||||
#0A4482 0%, #FF7021 100%)"
|
||||
/>
|
||||
</div>
|
||||
<span class="woman">{{ genderRate['女'] }}%</span>
|
||||
<span class="man">{{ item.value }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -190,40 +191,11 @@
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
import top from './top.vue'
|
||||
import age from './age.vue'
|
||||
import gauge from './gauge.vue'
|
||||
import ticket from './ticket.vue'
|
||||
import ageRatio from './age-ratio.vue'
|
||||
let props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
let genderRate = computed(() => {
|
||||
if (props.data?.userPortrait) return props.data?.userPortrait.genderRate
|
||||
return {
|
||||
男: 0,
|
||||
女: 0
|
||||
}
|
||||
})
|
||||
let xAxisData = ref([
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
])
|
||||
|
||||
const homeData = inject('homeData')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
350
src/views/home/components/box-2.vue
Normal file
350
src/views/home/components/box-2.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="box-3">
|
||||
<div class="header">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<div class="label">今年总游客数</div>
|
||||
<ScrollNumber :count="count" prefix="1" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">全县景区总游客人数</div>
|
||||
<ScrollNumber :count="count" prefix="2" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总在园人数</div>
|
||||
<ScrollNumber :count="count" prefix="3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<div class="label">安全度</div>
|
||||
<div class="value">安全</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">舒适度</div>
|
||||
<div class="value">舒适</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">接待情况</div>
|
||||
<div class="value">排队</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">交通拥挤度</div>
|
||||
<div class="value">舒适</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">停车场负荷度</div>
|
||||
<div class="value">超负荷</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rela">
|
||||
<div class="alarm-box">
|
||||
<ul class="flex">
|
||||
<li class="alarm-item" v-for="(item, index) in list" :key="index">
|
||||
<img class="icon" :src="item.icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Map />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="item">
|
||||
<p class="label">今日工单总条数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">工单完成数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-1">
|
||||
<el-progress :percentage="50" :show-text="false" />
|
||||
</div>
|
||||
<span class="value">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="item">
|
||||
<p class="label">紧急工单数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">紧急工单完成数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-2">
|
||||
<el-progress :percentage="50" :show-text="false" />
|
||||
</div>
|
||||
<span class="value">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<span class="tag tag--success">普通</span>
|
||||
<p class="content">
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="tag tag--error">普通</span>
|
||||
<p class="content">
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="tag tag--primary">普通</span>
|
||||
<p class="content">
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
||||
import icon8 from '@/assets/images/icon-8.png'
|
||||
import icon9 from '@/assets/images/icon-9.png'
|
||||
import icon10 from '@/assets/images/icon-10.png'
|
||||
import icon11 from '@/assets/images/icon-11.png'
|
||||
|
||||
let count = ref('6945959')
|
||||
let list = ref([
|
||||
{
|
||||
label: '安全异常',
|
||||
icon: icon8
|
||||
},
|
||||
{
|
||||
label: '排队异常',
|
||||
icon: icon9
|
||||
},
|
||||
{
|
||||
label: '停车异常',
|
||||
icon: icon10
|
||||
},
|
||||
{
|
||||
label: '舆论异常',
|
||||
icon: icon11
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-3 {
|
||||
width: vw(1614);
|
||||
height: vh(950);
|
||||
margin-top: vh(120);
|
||||
|
||||
.header {
|
||||
width: vw(1614);
|
||||
height: vh(128);
|
||||
padding: 0 vw(90);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/group.png');
|
||||
background-size: 100% 100%;
|
||||
.left {
|
||||
display: flex;
|
||||
width: vw(950);
|
||||
margin-top: vh(20);
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-top: vh(20);
|
||||
}
|
||||
.item {
|
||||
flex: 1;
|
||||
.label {
|
||||
margin-bottom: vh(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #02f9fa;
|
||||
line-height: vh(33);
|
||||
}
|
||||
}
|
||||
.countup-wrap {
|
||||
display: inline-block;
|
||||
width: vw(40);
|
||||
height: vh(40);
|
||||
margin-right: vw(4);
|
||||
border-radius: vw(4);
|
||||
color: #ffffff;
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
|
||||
}
|
||||
}
|
||||
.alarm-box {
|
||||
position: absolute;
|
||||
top: vw(20);
|
||||
left: vw(20);
|
||||
z-index: 99999;
|
||||
.alarm-item {
|
||||
width: vw(110);
|
||||
height: vh(40);
|
||||
margin-right: vw(4);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(to bottom, rgba(238, 44, 44, 0) 0%, #ee2c2c 100%);
|
||||
.icon {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
margin-right: vw(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: vh(120);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-top: vh(4);
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(110);
|
||||
margin-right: vw(6);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.item {
|
||||
padding: vh(10) vw(24);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
margin-bottom: vh(10);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
.progress-box {
|
||||
margin-top: vh(10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.text {
|
||||
margin-right: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
}
|
||||
.progress {
|
||||
width: vw(100);
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background-color: #0858ae !important;
|
||||
}
|
||||
}
|
||||
.progress-1 {
|
||||
@extend .progress;
|
||||
:deep(.el-progress-bar__inner) {
|
||||
background: linear-gradient(to right, #0566bb 0%, #00c4f9 100%);
|
||||
}
|
||||
}
|
||||
.progress-2 {
|
||||
@extend .progress;
|
||||
:deep(.el-progress-bar__inner) {
|
||||
background: linear-gradient(to right, #0566bb 0%, #d6383a 100%);
|
||||
}
|
||||
}
|
||||
.value {
|
||||
margin-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
padding: vh(10) vw(24);
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: vh(12);
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tag {
|
||||
padding: 0 vw(16);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: vw(2);
|
||||
&--success {
|
||||
color: #02f9fa;
|
||||
border: 1px solid #02f9fa;
|
||||
box-shadow: inset 0 0 vw(8) 0 #0be1ab;
|
||||
}
|
||||
&--error {
|
||||
color: #ee2c2c;
|
||||
border: 1px solid #ee2c2c;
|
||||
box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
|
||||
}
|
||||
&--primary {
|
||||
color: #00aaff;
|
||||
border: 1px solid #00aaff;
|
||||
box-shadow: inset 0 0 vw(8) 0 #00aaff;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-left: vw(4);
|
||||
padding: 0 vw(10);
|
||||
width: vw(900);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,118 +1,268 @@
|
||||
<template>
|
||||
<div class="box-3">
|
||||
<div class="header">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<div class="label">今年总游客数</div>
|
||||
<ScrollNumber :count="count" prefix="1" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">全县景区总游客人数</div>
|
||||
<ScrollNumber :count="count" prefix="2" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总在园人数</div>
|
||||
<ScrollNumber :count="count" prefix="3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<div class="label">安全度</div>
|
||||
<div class="value">安全</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">舒适度</div>
|
||||
<div class="value">舒适</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">接待情况</div>
|
||||
<div class="value">排队</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">交通拥挤度</div>
|
||||
<div class="value">舒适</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">停车场负荷度</div>
|
||||
<div class="value">超负荷</div>
|
||||
</div>
|
||||
<div class="box-4">
|
||||
<Title1 title="交通信息" />
|
||||
<div class="flex justify-evenly pt-10 pb-20">
|
||||
<div v-for="item in list" class="cell">
|
||||
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
|
||||
<div>
|
||||
<countup :end-val="item.value" />
|
||||
<div class="label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rela">
|
||||
<div class="alarm-box">
|
||||
<ul class="flex">
|
||||
<li class="alarm-item" v-for="(item, index) in list" :key="index">
|
||||
<img class="icon" :src="item.icon" />
|
||||
<span>{{ item.label }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex">
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<div class="">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
name: '企业数',
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
name: '企业数',
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<jam :width="250" :height="200" />
|
||||
</div>
|
||||
</div>
|
||||
<Map />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<Title1 title="停车信息" />
|
||||
<div class="stop-box">
|
||||
<div>
|
||||
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="item">
|
||||
<p class="label">今日工单总条数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">工单完成数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-1">
|
||||
<el-progress :percentage="50" :show-text="false" />
|
||||
</div>
|
||||
<span class="value">50%</span>
|
||||
</div>
|
||||
<div class="label">车库总数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="item">
|
||||
<p class="label">紧急工单数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">紧急工单完成数</p>
|
||||
<countup :endVal="1234" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-2">
|
||||
<el-progress :percentage="50" :show-text="false" />
|
||||
</div>
|
||||
<span class="value">50%</span>
|
||||
<div class="label">车库总数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">已使用车位数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="label">三峡之巅</div>
|
||||
<div class="value error">已满</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">白帝城</div>
|
||||
<div class="value error">已满</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">天坑地缝</div>
|
||||
<div class="value success">空余</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">永安宫</div>
|
||||
<div class="value success">空余</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-10">
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<div class="pt-20">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="120"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
name: '企业数',
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<span class="tag tag--success">普通</span>
|
||||
<p class="content">
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
</p>
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<traffic-flow />
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="tag tag--error">普通</span>
|
||||
<p class="content">
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
</p>
|
||||
</div>
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="景区停车场空位" />
|
||||
<vacancy />
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="tag tag--primary">普通</span>
|
||||
<p class="content">
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="car-ship">
|
||||
<div class="mb-6">
|
||||
<div class="car">
|
||||
<div class="label">车总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="homeData?.carShipData.car.count" />
|
||||
<span class="unit">辆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>调度</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="cell" v-for="item in homeData?.carShipData.car.info" :key="index">
|
||||
<div>{{ item.scenic_area }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ship">
|
||||
<div class="label">车总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="homeData?.carShipData.ship.count" />
|
||||
<span class="unit">辆</span>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>调度</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeData?.carShipData.ship.info"
|
||||
:key="index"
|
||||
>
|
||||
<div>白帝城</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel">
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="label">酒店总数</div>
|
||||
<countup class="value" :end-val="homeData?.hotelData.info.hotel_count || 0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">房间总数</div>
|
||||
<countup class="value" :end-val="homeData?.hotelData.info.total_room_count || 0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总入住</div>
|
||||
<countup
|
||||
class="value"
|
||||
color="#02F9FA"
|
||||
:end-val="homeData?.hotelData.info.total_guest_count || 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总入住率</div>
|
||||
<countup
|
||||
class="value"
|
||||
color="#02F9FA"
|
||||
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="lodging">
|
||||
<Title3 title="酒店入住人数及入住率" />
|
||||
</div>
|
||||
<occupancy />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,231 +270,263 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import jam from './jam.vue'
|
||||
import vacancy from './vacancy.vue'
|
||||
import occupancy from './occupancy.vue'
|
||||
import TrafficFlow from './traffic-flow.vue'
|
||||
import countup from 'vue-countup-v3'
|
||||
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
||||
import icon8 from '@/assets/images/icon-8.png'
|
||||
import icon9 from '@/assets/images/icon-9.png'
|
||||
import icon10 from '@/assets/images/icon-10.png'
|
||||
import icon11 from '@/assets/images/icon-11.png'
|
||||
import icon1 from '@/assets/images/icon-1.png'
|
||||
import icon2 from '@/assets/images/icon-2.png'
|
||||
import icon3 from '@/assets/images/icon-3.png'
|
||||
import icon4 from '@/assets/images/icon-4.png'
|
||||
|
||||
const homeData = inject('homeData')
|
||||
|
||||
let count = ref('6945959')
|
||||
let list = ref([
|
||||
{
|
||||
label: '安全异常',
|
||||
icon: icon8
|
||||
label: '路段总数',
|
||||
value: '1234',
|
||||
icon: icon1
|
||||
},
|
||||
{
|
||||
label: '排队异常',
|
||||
icon: icon9
|
||||
label: '当前拥堵路段',
|
||||
value: '1234',
|
||||
icon: icon2
|
||||
},
|
||||
{
|
||||
label: '停车异常',
|
||||
icon: icon10
|
||||
label: '总拥堵次数',
|
||||
value: '1234',
|
||||
icon: icon3
|
||||
},
|
||||
{
|
||||
label: '舆论异常',
|
||||
icon: icon11
|
||||
label: '最大拥堵时长',
|
||||
value: '1234',
|
||||
icon: icon4
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-3 {
|
||||
width: vw(1614);
|
||||
height: vh(950);
|
||||
.box-4 {
|
||||
margin-top: vh(120);
|
||||
|
||||
.header {
|
||||
width: vw(1614);
|
||||
height: vh(128);
|
||||
padding: 0 vw(90);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/group.png');
|
||||
width: vw(750);
|
||||
height: vh(950);
|
||||
padding: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-5.png');
|
||||
background-size: 100% 100%;
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(64);
|
||||
height: auto;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
margin-top: vh(10);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.left {
|
||||
display: flex;
|
||||
width: vw(950);
|
||||
margin-top: vh(20);
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.stop-box {
|
||||
display: flex;
|
||||
gap: vw(20);
|
||||
.icon {
|
||||
width: vw(45);
|
||||
height: auto;
|
||||
}
|
||||
.right {
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(70);
|
||||
display: flex;
|
||||
margin-top: vh(20);
|
||||
}
|
||||
.item {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.label {
|
||||
margin-bottom: vh(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
.error {
|
||||
color: #e21b1b;
|
||||
}
|
||||
.success {
|
||||
color: #02f9fa;
|
||||
line-height: vh(33);
|
||||
}
|
||||
}
|
||||
.countup-wrap {
|
||||
display: inline-block;
|
||||
width: vw(40);
|
||||
height: vh(40);
|
||||
margin-right: vw(4);
|
||||
border-radius: vw(4);
|
||||
color: #ffffff;
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
|
||||
}
|
||||
}
|
||||
.alarm-box {
|
||||
position: absolute;
|
||||
top: vw(20);
|
||||
left: vw(20);
|
||||
z-index: 99999;
|
||||
.alarm-item {
|
||||
width: vw(110);
|
||||
height: vh(40);
|
||||
margin-right: vw(4);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(to bottom, rgba(238, 44, 44, 0) 0%, #ee2c2c 100%);
|
||||
.icon {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
margin-right: vw(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: vh(120);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.left {
|
||||
.car-ship {
|
||||
flex: 1;
|
||||
& > div {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: vh(110);
|
||||
display: flex;
|
||||
margin-top: vh(4);
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(110);
|
||||
margin-right: vw(6);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.icon {
|
||||
padding-left: vw(90);
|
||||
width: vw(352);
|
||||
height: vh(70);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.car {
|
||||
@extend .icon;
|
||||
background-image: url('@/assets/images/icon-6.png');
|
||||
background-size: 100% 100%;
|
||||
.item {
|
||||
padding: vh(10) vw(24);
|
||||
}
|
||||
.ship {
|
||||
@extend .icon;
|
||||
background-image: url('@/assets/images/icon-7.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: vh(6);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
color: #02f9fa;
|
||||
margin-top: vh(6);
|
||||
}
|
||||
.table {
|
||||
position: absolute;
|
||||
left: vw(160);
|
||||
width: vw(200);
|
||||
height: vh(100);
|
||||
z-index: 2;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: vh(18);
|
||||
line-height: vh(18);
|
||||
text-align: center;
|
||||
background: rgba(0, 150, 255, 0.4);
|
||||
& > div {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #52b8ff;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
height: vh(27);
|
||||
line-height: vh(27);
|
||||
text-align: center;
|
||||
background: #074686;
|
||||
&:nth-child(2n + 1) {
|
||||
background: rgba(0, 150, 255, 0.1);
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit-1 {
|
||||
font-size: vw(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hotel {
|
||||
flex: 1;
|
||||
margin-left: vw(6);
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
width: vw(360);
|
||||
height: vh(70);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
margin-bottom: vh(10);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
.progress-box {
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.text {
|
||||
margin-right: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
}
|
||||
.progress {
|
||||
width: vw(100);
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background-color: #0858ae !important;
|
||||
}
|
||||
}
|
||||
.progress-1 {
|
||||
@extend .progress;
|
||||
:deep(.el-progress-bar__inner) {
|
||||
background: linear-gradient(to right, #0566bb 0%, #00c4f9 100%);
|
||||
}
|
||||
}
|
||||
.progress-2 {
|
||||
@extend .progress;
|
||||
:deep(.el-progress-bar__inner) {
|
||||
background: linear-gradient(to right, #0566bb 0%, #d6383a 100%);
|
||||
}
|
||||
}
|
||||
.value {
|
||||
margin-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
}
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
padding: vh(10) vw(24);
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: vh(12);
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tag {
|
||||
padding: 0 vw(16);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: vw(2);
|
||||
&--success {
|
||||
color: #02f9fa;
|
||||
border: 1px solid #02f9fa;
|
||||
box-shadow: inset 0 0 vw(8) 0 #0be1ab;
|
||||
}
|
||||
&--error {
|
||||
color: #ee2c2c;
|
||||
border: 1px solid #ee2c2c;
|
||||
box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
|
||||
}
|
||||
&--primary {
|
||||
color: #00aaff;
|
||||
border: 1px solid #00aaff;
|
||||
box-shadow: inset 0 0 vw(8) 0 #00aaff;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-left: vw(4);
|
||||
padding: 0 vw(10);
|
||||
width: vw(900);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
padding-top: vh(10);
|
||||
margin-top: vh(8);
|
||||
width: vw(360);
|
||||
height: vh(140);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lodging {
|
||||
:deep(.title-3) {
|
||||
margin-top: vh(10);
|
||||
}
|
||||
}
|
||||
.title1 {
|
||||
:deep(.title) {
|
||||
width: vw(300) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,536 +0,0 @@
|
||||
<template>
|
||||
<div class="box-4">
|
||||
<Title1 title="交通信息" />
|
||||
<div class="flex justify-evenly pt-10 pb-20">
|
||||
<div v-for="item in list" class="cell">
|
||||
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
|
||||
<div>
|
||||
<countup :end-val="item.value" />
|
||||
<div class="label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<div class="">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
name: '企业数',
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
name: '企业数',
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<jam :width="250" :height="200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Title1 title="停车信息" />
|
||||
<div class="stop-box">
|
||||
<div>
|
||||
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
|
||||
<div>
|
||||
<div class="label">车库总数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">车库总数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">已使用车位数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="label">三峡之巅</div>
|
||||
<div class="value error">已满</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">白帝城</div>
|
||||
<div class="value error">已满</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">天坑地缝</div>
|
||||
<div class="value success">空余</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">永安宫</div>
|
||||
<div class="value success">空余</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-10">
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<div class="pt-20">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="120"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
name: '企业数',
|
||||
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
|
||||
}
|
||||
]"
|
||||
:xAxisData="[
|
||||
'12-16 10:00',
|
||||
'12-16 14:00',
|
||||
'12-16 16:00',
|
||||
'12-16 22:00',
|
||||
'12-17 02:00',
|
||||
'12-17 06:00',
|
||||
'12-17 10:00',
|
||||
'12-17 14:00',
|
||||
'12-17 16:00',
|
||||
'12-16 22:00',
|
||||
'12-18 02:00',
|
||||
'12-18 06:00',
|
||||
'12-8 10:00',
|
||||
'12-18 14:00',
|
||||
'12-18 16:00',
|
||||
'12-18 20:00'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<traffic-flow />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="景区停车场空位" />
|
||||
<vacancy />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="car-ship">
|
||||
<div class="mb-6">
|
||||
<div class="car">
|
||||
<div class="label">车总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>调度</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div>白帝城</div>
|
||||
<div>5<span class="unit-1">辆</span></div>
|
||||
<div>1<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div>白帝城</div>
|
||||
<div>5<span class="unit-1">辆</span></div>
|
||||
<div>1<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div>白帝城</div>
|
||||
<div>5<span class="unit-1">辆</span></div>
|
||||
<div>1<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ship">
|
||||
<div class="label">车总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>调度</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div>白帝城</div>
|
||||
<div>5<span class="unit-1">辆</span></div>
|
||||
<div>1<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div>白帝城</div>
|
||||
<div>5<span class="unit-1">辆</span></div>
|
||||
<div>1<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div>白帝城</div>
|
||||
<div>5<span class="unit-1">辆</span></div>
|
||||
<div>1<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel">
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="label">车库总数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">房间总数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总入住</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">总入住率</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="lodging">
|
||||
<Title3 title="酒店入住人数及入住率" />
|
||||
</div>
|
||||
<lodging-ratio />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import jam from './jam.vue'
|
||||
import vacancy from './vacancy.vue'
|
||||
import LodgingRatio from './lodging-ratio.vue'
|
||||
import TrafficFlow from './traffic-flow.vue'
|
||||
import countup from 'vue-countup-v3'
|
||||
import icon1 from '@/assets/images/icon-1.png'
|
||||
import icon2 from '@/assets/images/icon-2.png'
|
||||
import icon3 from '@/assets/images/icon-3.png'
|
||||
import icon4 from '@/assets/images/icon-4.png'
|
||||
|
||||
let list = ref([
|
||||
{
|
||||
label: '路段总数',
|
||||
value: '1234',
|
||||
icon: icon1
|
||||
},
|
||||
{
|
||||
label: '当前拥堵路段',
|
||||
value: '1234',
|
||||
icon: icon2
|
||||
},
|
||||
{
|
||||
label: '总拥堵次数',
|
||||
value: '1234',
|
||||
icon: icon3
|
||||
},
|
||||
{
|
||||
label: '最大拥堵时长',
|
||||
value: '1234',
|
||||
icon: icon4
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-4 {
|
||||
margin-top: vh(120);
|
||||
width: vw(750);
|
||||
height: vh(950);
|
||||
padding: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-5.png');
|
||||
background-size: 100% 100%;
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(64);
|
||||
height: auto;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
margin-top: vh(10);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.stop-box {
|
||||
display: flex;
|
||||
gap: vw(20);
|
||||
.icon {
|
||||
width: vw(45);
|
||||
height: auto;
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(70);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
.error {
|
||||
color: #e21b1b;
|
||||
}
|
||||
.success {
|
||||
color: #02f9fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.car-ship {
|
||||
flex: 1;
|
||||
& > div {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: vh(110);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.icon {
|
||||
padding-left: vw(90);
|
||||
width: vw(352);
|
||||
height: vh(70);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.car {
|
||||
@extend .icon;
|
||||
background-image: url('@/assets/images/icon-6.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ship {
|
||||
@extend .icon;
|
||||
background-image: url('@/assets/images/icon-7.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: vh(6);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
color: #02f9fa;
|
||||
margin-top: vh(6);
|
||||
}
|
||||
.table {
|
||||
position: absolute;
|
||||
left: vw(160);
|
||||
width: vw(200);
|
||||
height: vh(100);
|
||||
z-index: 2;
|
||||
.header {
|
||||
display: flex;
|
||||
height: vh(18);
|
||||
line-height: vh(18);
|
||||
text-align: center;
|
||||
background: rgba(0, 150, 255, 0.4);
|
||||
& > div {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #52b8ff;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
height: vh(27);
|
||||
line-height: vh(27);
|
||||
text-align: center;
|
||||
background: #074686;
|
||||
&:nth-child(2n + 1) {
|
||||
background: rgba(0, 150, 255, 0.1);
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit-1 {
|
||||
font-size: vw(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hotel {
|
||||
flex: 1;
|
||||
margin-left: vw(6);
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
width: vw(360);
|
||||
height: vh(70);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
padding-top: vh(10);
|
||||
margin-top: vh(8);
|
||||
width: vw(360);
|
||||
height: vh(140);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lodging {
|
||||
:deep(.title-3) {
|
||||
margin-top: vh(10);
|
||||
}
|
||||
}
|
||||
.title1 {
|
||||
:deep(.title) {
|
||||
width: vw(300) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -27,15 +27,7 @@
|
||||
bottom: '-10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
show: false
|
||||
}
|
||||
],
|
||||
xAxis: [{ max: 100, show: false }],
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
@@ -55,7 +47,6 @@
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
@@ -65,7 +56,7 @@
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 6, 0],
|
||||
padding: [0, 0, fitChartSize(6), 0],
|
||||
inside: true,
|
||||
formatter: function (value) {
|
||||
return `{value|${value}}`
|
||||
@@ -101,7 +92,7 @@
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
offset: [10, -13],
|
||||
offset: [fitChartSize(10), -fitChartSize(20)],
|
||||
color: '#D3E5FF',
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
@@ -1,246 +1,143 @@
|
||||
<template>
|
||||
<div class="top" id="top" />
|
||||
<div class="top" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import * as echarts from 'echarts'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
let topChart = null
|
||||
let colorList = [
|
||||
'rgba(255, 38, 38, 1)',
|
||||
'rgba(255, 96, 0, 1)',
|
||||
'rgba(255, 165, 7, 1)',
|
||||
'rgba(0, 234, 255, 1)',
|
||||
'rgba(0, 132, 255, 1)',
|
||||
'#2379FF'
|
||||
]
|
||||
let colorListA = [
|
||||
'rgba(255, 38, 38, 0.1)',
|
||||
'rgba(255, 96, 0, 0.1)',
|
||||
'rgba(255, 165, 7, 0.1)',
|
||||
'rgba(0, 234, 255, 0.1)',
|
||||
'rgba(0, 132, 255, 0.1)',
|
||||
'#49B1FF'
|
||||
]
|
||||
let colorListB = [
|
||||
'rgba(249, 136, 136, 1)',
|
||||
'rgba(255, 162, 106, 1)',
|
||||
'rgba(255, 210, 130, 1)',
|
||||
'rgba(142, 255, 206, 1)',
|
||||
'rgba(165, 232, 255, 1)'
|
||||
]
|
||||
let colorListC = [
|
||||
'rgba(249, 136, 136, 0.1)',
|
||||
'rgba(255, 162, 106, 0.1)',
|
||||
'rgba(255, 210, 130, 0.1)',
|
||||
'rgba(142, 255, 206, 0.1)',
|
||||
'rgba(165, 232, 255, 0.1)'
|
||||
]
|
||||
let result = [
|
||||
{ name: '河北', value: 86 },
|
||||
{ name: '山西', value: 83 },
|
||||
{ name: '河南', value: 73 },
|
||||
{ name: '内蒙', value: 61 },
|
||||
{ name: '辽宁', value: 61 }
|
||||
]
|
||||
let option = {
|
||||
color: colorList,
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '6%',
|
||||
bottom: '-4%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
show: false
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: result.map((item) => item.name),
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 10, 0],
|
||||
inside: true,
|
||||
formatter: function (value) {
|
||||
return `{value|${value}}`
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
align: 'center',
|
||||
color: '#D3E5FF',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
},
|
||||
value: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: result.map((item) => item.value)
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barWidth: fitChartSize(12),
|
||||
MaxSize: 0,
|
||||
showBackground: true,
|
||||
barBorderRadius: [30, 0, 0, 30],
|
||||
backgroundStyle: {
|
||||
color: 'rgba(0, 150, 255, 0.15)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
offset: [10, -17],
|
||||
color: '#D3E5FF',
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN',
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
},
|
||||
data: result.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
barBorderRadius: [3, 0, 0, 3],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorListA[index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorList[index]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// {
|
||||
// name: '外圆',
|
||||
// type: 'scatter',
|
||||
// emphasis: {
|
||||
// scale: false
|
||||
// },
|
||||
// showSymbol: true,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 8, // 进度条白点
|
||||
// z: 2,
|
||||
// data: result.map((item, index) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// value: item.value,
|
||||
// itemStyle: {
|
||||
// color: colorListB[index],
|
||||
// borderColor: colorListC[index],
|
||||
// borderWidth: 12,
|
||||
// shadowColor: colorListC[index],
|
||||
// shadowBlur: 10,
|
||||
// opacity: 1
|
||||
// }
|
||||
// }
|
||||
// }),
|
||||
// animationDelay: 500
|
||||
// },
|
||||
// {
|
||||
// name: '外圆',
|
||||
// type: 'scatter',
|
||||
// emphasis: {
|
||||
// scale: false
|
||||
// },
|
||||
// showSymbol: true,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 3, // 进度条白点
|
||||
// z: 3,
|
||||
// data: result.map((item, index) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// value: item.value,
|
||||
// itemStyle: {
|
||||
// color: colorListB[index],
|
||||
// borderColor: colorListC[index],
|
||||
// borderWidth: 30,
|
||||
// shadowColor: colorListC[index],
|
||||
// shadowBlur: 10,
|
||||
// opacity: 1
|
||||
// }
|
||||
// }
|
||||
// }),
|
||||
// animationDelay: 500
|
||||
// }
|
||||
]
|
||||
}
|
||||
const init = () => {
|
||||
topChart = echarts.init(document.getElementById('top'))
|
||||
topChart.setOption(option)
|
||||
}
|
||||
const resize = () => {
|
||||
if (topChart) {
|
||||
topChart.dispose()
|
||||
topChart = null
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
const homeData = inject('homeData')
|
||||
|
||||
watch(
|
||||
() => homeData.value?.userPortrait?.provinceRate,
|
||||
() => {
|
||||
init()
|
||||
}
|
||||
)
|
||||
|
||||
const init = () => {
|
||||
setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '10%',
|
||||
bottom: '-4%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{ max: 100, show: false }],
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, fitChartSize(10), 0],
|
||||
inside: true,
|
||||
formatter: function (value) {
|
||||
return `{value|${value}}%`
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
align: 'center',
|
||||
color: '#D3E5FF',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
},
|
||||
value: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: homeData.value?.userPortrait?.provinceRate.map((item) => Number(item.value))
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barWidth: fitChartSize(12),
|
||||
MaxSize: 0,
|
||||
showBackground: true,
|
||||
barBorderRadius: [fitChartSize(30), 0, 0, fitChartSize(30)],
|
||||
backgroundStyle: {
|
||||
color: 'rgba(0, 150, 255, 0.15)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
offset: [fitChartSize(10), -fitChartSize(17)],
|
||||
color: '#D3E5FF',
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontFamily: 'Source Han Sans CN',
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
},
|
||||
data: homeData.value?.userPortrait?.provinceRate.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: Number(item.value),
|
||||
itemStyle: {
|
||||
barBorderRadius: [3, 0, 0, 3],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'transparent'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user