feat：完善景区页面
This commit is contained in:
zjc
63
src/views/scenic/components/big-car-ship-map.vue
Normal file
63
src/views/scenic/components/big-car-ship-map.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
|
||||
<div id="big-car-ship" class="big-car-ship" />
|
||||
<img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import carIcon from '@/assets/images/car.png'
|
||||
import shipIcon from '@/assets/images/ship.png'
|
||||
import { useMap } from '@/hooks/map'
|
||||
|
||||
let modelValue = defineModel()
|
||||
const { map, initMap, addMarker } = useMap()
|
||||
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(val) => {
|
||||
if (val && !map.value) {
|
||||
setTimeout(() => {
|
||||
initMap('big-car-ship', 109.491961, 31.024285, 16)
|
||||
addMarker(carIcon, [109.491045, 31.028725], [36, 50])
|
||||
addMarker(carIcon, [109.483266, 31.024718], [36, 50])
|
||||
addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
|
||||
addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.BMap_cpyCtrl) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.anchorBL) {
|
||||
display: none;
|
||||
}
|
||||
.dialog {
|
||||
:deep(.el-dialog) {
|
||||
width: vw(2540);
|
||||
height: vh(900);
|
||||
padding: 0;
|
||||
}
|
||||
:deep(.el-dialog__header) {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.big-car-ship {
|
||||
width: vw(2540);
|
||||
height: vh(900);
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
top: vh(20);
|
||||
width: vw(60);
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="box mr-10">
|
||||
<Title1 title="景区承载" />
|
||||
<div class="flex">
|
||||
<FProgress :width="200" :height="70" />
|
||||
<progress1 :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">
|
||||
<FProgress :width="140" :height="70" />
|
||||
<FProgress :width="140" :height="70" />
|
||||
<FProgress :width="140" :height="70" />
|
||||
<progress1 :width="140" :height="70" />
|
||||
<progress1 :width="140" :height="70" />
|
||||
<progress1 :width="140" :height="70" />
|
||||
</div>
|
||||
<div class="ml-20 flex flex-1 justify-between">
|
||||
<count-item label="总停车场数" :count="561" suffix="个" />
|
||||
@@ -47,28 +47,178 @@
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border flex-1">
|
||||
<Title3 title="今日景区承载量" />
|
||||
<Line :width="350" :height="310" />
|
||||
<div class="pt-10">
|
||||
<Title3 title="今日景区承载量" />
|
||||
</div>
|
||||
<Line :width="350" :height="300" />
|
||||
</div>
|
||||
<div class="border flex-1">
|
||||
<Title3 title="车辆归属地占比" />
|
||||
<Pie :width="350" :height="310" />
|
||||
<div class="pt-10">
|
||||
<Title3 title="车辆归属地占比" />
|
||||
</div>
|
||||
<PieRow :width="340" :height="300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-2">
|
||||
<Title1 title="安全信息 " />
|
||||
<div class="top flex">
|
||||
<count-item label="当前告警总数" :count="561" suffix="次" />
|
||||
<count-item label="安全告警总数" :count="561" suffix="次" />
|
||||
<count-item label="已解除告警数" :count="561" />
|
||||
</div>
|
||||
<div class="border flex-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="今日景区承载量" />
|
||||
</div>
|
||||
<PieRow :width="350" :height="300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-10">
|
||||
<div class="box-3 mr-10">
|
||||
<Title1 title="交通信息" />
|
||||
<div class="top flex">
|
||||
<count-item label="总通景路段" :count="35600" suffix="张" />
|
||||
<count-item label="通景路段拥堵数" :count="35600" suffix="人" />
|
||||
<count-item label="拥堵开始时间" :count="35600" suffix="人" />
|
||||
<count-item label="拥堵持续时间" :count="35600" suffix="S" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border">
|
||||
<Line :width="260" :height="330" />
|
||||
</div>
|
||||
<div class="border">
|
||||
<PieCol :width="230" :height="330" />
|
||||
</div>
|
||||
<div class="border">
|
||||
<PieCol :width="230" :height="330" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-4 mr-10">
|
||||
<Title1 title="用户画像" />
|
||||
<div class="flex">
|
||||
<div class="border">1</div>
|
||||
<div class="border">2</div>
|
||||
<div class="border">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-5">
|
||||
<Title1 title="车船信息" />
|
||||
<div class="flex mb-6">
|
||||
<div class="border pt-10 pb-10">
|
||||
<Title2 title="车车车车车车" />
|
||||
<div class="car-box mt-10">
|
||||
<div class="pr-20">
|
||||
<div class="label">车总数</div>
|
||||
<div class="value">130辆</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">今日累计运营(班次)</div>
|
||||
<div class="value">130次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">运营130辆</span>
|
||||
<div class="progress">
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
:show-text="false"
|
||||
color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
|
||||
/>
|
||||
</div>
|
||||
<span class="value">空余100辆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border pt-10 pb-10">
|
||||
<Title2 title="船船船船船船" />
|
||||
<div class="car-box mt-10">
|
||||
<div class="pr-20">
|
||||
<div class="label">车总数</div>
|
||||
<div class="value">130辆</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">今日累计运营(班次)</div>
|
||||
<div class="value">130次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">运营130辆</span>
|
||||
<div class="progress">
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
:show-text="false"
|
||||
color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
|
||||
/>
|
||||
</div>
|
||||
<span class="value">空余100辆</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border">
|
||||
<div id="car-ship" class="car-ship" />
|
||||
<img class="full" src="@/assets/images/full.png" @click="show = true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BigCarShipMap v-model="show" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CountItem from './count-item.vue'
|
||||
import FProgress from './progress-1.vue'
|
||||
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'
|
||||
import BigCarShipMap from './big-car-ship-map.vue'
|
||||
const { initMap, addMarker } = useMap()
|
||||
let show = ref(false)
|
||||
onMounted(() => {
|
||||
initMap('car-ship', 109.491961, 31.024285, 13)
|
||||
addMarker(carIcon, [109.491045, 31.028725], [36, 50])
|
||||
addMarker(carIcon, [109.483266, 31.024718], [36, 50])
|
||||
addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
|
||||
addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.BMap_cpyCtrl) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.anchorBL) {
|
||||
display: none;
|
||||
}
|
||||
.dialog {
|
||||
:deep(.el-dialog) {
|
||||
width: vw(2540);
|
||||
height: vh(904);
|
||||
}
|
||||
}
|
||||
.progress-box {
|
||||
margin-top: vh(10);
|
||||
height: vh(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(to right, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.17) 100%);
|
||||
.text {
|
||||
margin-right: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
}
|
||||
.progress {
|
||||
width: vw(100);
|
||||
}
|
||||
.value {
|
||||
margin-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #f15a25;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
margin: vh(120) vw(10) 0 vw(10);
|
||||
@@ -80,6 +230,8 @@
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
}
|
||||
.border {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 vw(10);
|
||||
margin: 0 vw(10);
|
||||
box-sizing: border-box;
|
||||
@@ -101,5 +253,52 @@
|
||||
width: vw(440);
|
||||
height: vh(475);
|
||||
}
|
||||
.box-3 {
|
||||
@extend .bg;
|
||||
width: vw(850);
|
||||
height: vh(465);
|
||||
}
|
||||
.box-4 {
|
||||
@extend .bg;
|
||||
width: vw(850);
|
||||
height: vh(465);
|
||||
}
|
||||
.box-5 {
|
||||
@extend .bg;
|
||||
width: vw(670);
|
||||
height: vh(465);
|
||||
}
|
||||
.car-box {
|
||||
width: vw(350);
|
||||
height: vh(74);
|
||||
padding-left: vw(75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/icon-6.png');
|
||||
background-size: 100% 100%;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
margin-top: vh(10);
|
||||
}
|
||||
}
|
||||
.car-ship {
|
||||
width: vw(630);
|
||||
height: vh(230);
|
||||
}
|
||||
.full {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
bottom: vh(20);
|
||||
width: vw(50);
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="count-item">
|
||||
<div class="flex align-center">
|
||||
<img src="@/assets/images/dian.svg" />
|
||||
<span class="label">{{ label }}</span>
|
||||
</div>
|
||||
<div class="count">
|
||||
<img class="bg" src="@/assets/images/count-bg.svg" />
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="count" />
|
||||
<span class="suffix">{{ suffix }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
let props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.count-item {
|
||||
flex: 1;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
margin-left: vw(4);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.count {
|
||||
position: relative;
|
||||
margin-top: vh(10);
|
||||
z-index: 1;
|
||||
.value {
|
||||
padding-left: vw(20);
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.suffix {
|
||||
margin-top: vh(4);
|
||||
font-weight: bold;
|
||||
font-size: vw(12);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: vw(134);
|
||||
height: vh(30);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user