lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：对接景区接口

Browse Source
This commit is contained in:
zjc
2025-01-17 19:15:14 +08:00
parent fd8ede8a32
commit 8eb966fa14
29 changed files with 510 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/views/scenic/components/box-2.vue
View File

@@ -40,7 +40,13 @@
<div class="box mr-8">
<Title1 title="景区承载" />
<div class="flex">
<circle-progress :width="200" :height="70" />
<circle-progress
:width="200"
:height="70"
:value="scenicStore.scenicBearData.header.jqRate"
:title="`${scenicStore.scenicBearData.header.jqRate}%`"
subTitle="景区承载率"
/>
<div class="flex flex-1 justify-between">
<count-item
label="景区当前人数"
@@ -69,14 +75,24 @@
<div class="box-1 mr-8">
<Title1 title="停车信息" />
<div class="flex">
<div class="flex">
<circle-progress :width="140" :height="70" />
<circle-progress :width="140" :height="70" />
<circle-progress :width="140" :height="70" />
<div class="height70 flex flex-1">
<circle-progress
v-for="(item, index) in garageList"
:key="index"
:width="140"
:height="70"
:value="item.ratio"
:title="item.over"
:subTitle="`${item.name}剩余`"
/>
</div>
<div class="ml-20 flex flex-1 justify-between">
<count-item label="总车位数" :count="561" suffix="个" />
<count-item label="剩余车位数" :count="15" suffix="个" />
<count-item label="总车位数" :count="scenicStore.stopCarData.info.count" suffix="个" />
<count-item
label="剩余车位数"
:count="scenicStore.stopCarData.info.remain"
suffix="个"
/>
</div>
</div>
<div class="flex">
@@ -103,9 +119,14 @@
<div class="box-2">
<Title1 title="安全信息 " />
<div class="count-box flex">
<count-item label="当前告警总数" :count="561" suffix="次" />
<count-item label="安全告警总数" :count="561" suffix="次" />
<count-item label="已解除告警数" :count="561" />
<count-item
v-for="item in scenicStore.secureData.headList"
:label="item.name"
:count="item.count"
:type="item.type"
:color="item.type == 0 ? '#0096FF' : '#E21B1B'"
suffix="次"
/>
</div>
<div class="border flex-1">
<div class="pt-10">
@@ -115,7 +136,7 @@
label="安全告警占比"
:dataList="scenicStore.secureData.dataList"
:total="alarmTotal"
:width="460"
:width="440"
:height="300"
/>
</div>
@@ -140,11 +161,21 @@
</div>
<div class="border mr-8">
<Title3 title="拥堵次数占比" />
<jam :width="220" :height="160" />
<jam
:width="220"
:height="300"
sub-title="拥堵频次总数"
:list="scenicStore.trafficData.data.countRate"
/>
</div>
<div class="border">
<Title3 title="拥堵时长占比" />
<jam :width="220" :height="160" />
<jam
:width="220"
:height="300"
sub-title="拥堵总时长"
:list="scenicStore.trafficData.data.countRate"
/>
</div>
</div>
</div>
@@ -167,7 +198,7 @@
<span class="text">{{ item.name }}</span>
<div class="progress">
<el-progress
:percentage="item.value"
:percentage="parseFloat(item.value)"
:show-text="false"
:color="
item.name == '女'
@@ -186,7 +217,7 @@
</div>
<div class="border flex-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup endVal="124563" /></div>
<div class="count">总人数：<countup :end-val="channelTotal" /></div>
<ticket />
</div>
</div>
@@ -196,54 +227,66 @@
<Title1 title="车船信息" />
<div class="flex mb-6">
<div class="border mr-8 pt-10 pb-10">
<Title2 title="景区车辆" />
<div class="flex justify-between">
<Title2 title="景区车辆" />
<div class="sum">
<span>总数：</span>
<countup
:end-val="
scenicStore.carShipData.car.count?.drivingCount +
scenicStore.carShipData.car.count?.nonDrivingCount
"
/>
</div>
</div>
<div class="car-box mt-10">
<img class="icon" src="@/assets/images/icon-6.png" />
<div class="car-item pr-20">
<div class="label">车总数</div>
<div class="value">130辆</div>
<div class="label">运营车辆</div>
<div class="value flex">
<countup :end-val="scenicStore.carShipData.car.count?.drivingCount" />
<span class="suffix"> 辆 </span>
</div>
</div>
<div class="car-item">
<div class="label">今日累计运营(班次)</div>
<div class="value">130次</div>
<div class="label">空闲车辆</div>
<div class="value flex">
<countup :end-val="scenicStore.carShipData.car.count?.nonDrivingCount" />
<span class="suffix"> 辆 </span>
</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="flex justify-between">
<Title2 title="景区船只" />
<div class="sum">
<span>总数：</span>
<countup
:end-val="
scenicStore.carShipData.ship.count?.drivingCount +
scenicStore.carShipData.ship.count?.nonDrivingCount
"
/>
</div>
</div>
<div class="car-box mt-10">
<img class="icon" src="@/assets/images/icon-6.png" />
<div class="car-item pr-20">
<div class="label">船总数</div>
<div class="value">130辆</div>
<div class="label">运营船只</div>
<div class="value flex">
<countup :end-val="scenicStore.carShipData.ship.count?.drivingCount" />
<span class="suffix">辆</span>
</div>
</div>
<div class="car-item">
<div class="label">今日累计运营(班次)</div>
<div class="value">130次</div>
<div class="label">空闲船只</div>
<div class="value flex">
<countup :end-val="scenicStore.carShipData.ship.count?.nonDrivingCount" />
<span class="suffix">只</span>
</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 pt-10 pb-10">
@@ -273,6 +316,21 @@
const scenicStore = useScenicStore()
const { initMap, addMarker } = useMap()
const garageList = computed(() => {
return scenicStore.stopCarData.headList.map((item) => {
return {
...item,
ratio: ((item.count - item.over) / item.count) * 100
}
})
})
const channelTotal = computed(() => {
return scenicStore.userPortraitData.data.channel.reduce((pre, cur) => {
return pre + parseInt(cur.count)
}, 0)
})
const ageTotal = computed(() => {
return scenicStore.userPortraitData.data.genderRate.reduce((pre, cur) => {
return pre + parseInt(cur.count)
@@ -313,12 +371,26 @@
})
let show = ref(false)
watch(
() => scenicStore.carShipData,
(val) => {
if (val.car.list.length > 0) {
setTimeout(() => {
val.car.list.map((item) => {
addMarker(carIcon, [109.551419, 31.050001], [36, 50])
})
val.ship.list.map((item) => {
addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
})
}, 1000)
}
},
{ immediate: true }
)
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])
initMap('car-ship', 109.552461, 31.049607, 15)
})
</script>
@@ -329,6 +401,9 @@
:deep(.anchorBL) {
display: none;
}
.height70 {
height: vh(70);
}
.legend {
display: flex;
align-items: center;
@@ -399,29 +474,7 @@
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(70);
}
.value {
margin-left: vw(10);
font-weight: 400;
font-size: vw(14);
color: #f15a25;
}
}
.container {
margin: vh(120) 0 0 vw(10);
.count-box {
@@ -491,11 +544,23 @@
font-size: vw(24);
color: #02f9fa;
margin-top: vh(6);
align-items: flex-end;
}
.suffix {
font-size: vw(12);
color: #02f9fa;
}
}
.sum {
font-weight: bold;
font-size: vw(18);
color: #02f9fa;
display: flex;
align-items: center;
}
.car-ship {
width: vw(660);
height: vh(240);
height: vh(250);
}
.full {
cursor: pointer;