feat:完善景区数据

This commit is contained in:
zjc
2025-03-12 17:30:45 +08:00
parent 666549a430
commit 4e5b071027
6 changed files with 45 additions and 51 deletions

View File

@@ -57,7 +57,7 @@
</div>
</div>
</div>
<Title1 title="停车信息(调试中)" />
<Title1 title="停车信息" />
<div class="stop-box">
<div>
<img class="icon" src="@/assets/images/icon-5.png" alt="" />

View File

@@ -41,7 +41,7 @@
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
</div>
</div>
<div class="flex pt-20">
<div class="flex pt-20 gap8">
<div class="box">
<Title3 title="异常告警" />
<Line
@@ -66,20 +66,13 @@
:key="index"
>
<span class="scenic-item__label">{{ item.name }}</span>
<!-- <countup class="scenic-item__value" :end-val="item.value" />-->
<span class="scenic-item__value"> {{ item.value }}</span>
<countup class="scenic-item__value" :end-val="item.value" />
</div>
</div>
<div class="flex pt-20">
<div class="box">
<Title3 title="拥堵告警" />
<Line :width="370" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
</div>
<div class="box">
<Title3 title="拥堵告警占比" />
<div class="flex">
<alarmRate :dataList="trafficAbnormalityData.dataLists" />
</div>
<Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
</div>
</div>
</template>
@@ -303,6 +296,9 @@
</script>
<style scoped lang="scss">
.gap8 {
gap: vw(8);
}
.none {
width: vw(380);
height: vh(200);
@@ -565,31 +561,29 @@
}
.box {
width: vw(394);
flex: 1;
height: vh(220);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
.title-2 {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
// .title-2 {
// width: vw(253);
// height: vh(28);
// display: flex;
// align-items: center;
// background-image: url('@/assets/images/title-5.png');
// background-size: 100% 100%;
// & > span {
// padding-left: vw(22);
// font-weight: bold;
// font-size: vw(15);
// background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
// -webkit-background-clip: text;
// background-clip: text;
// -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
// color: transparent; /* 兼容其他浏览器 */
// }
// }
.statistic {
display: flex;
margin-top: vh(12);

View File

@@ -43,7 +43,7 @@
<circle-progress
:width="170"
:height="90"
:value="scenicStore.wordkOrderData.toDayData.rate"
:value="parseFloat(scenicStore.wordkOrderData.toDayData.rate)"
:title="`${scenicStore.wordkOrderData.toDayData.rate}%`"
subTitle="完成率"
/>
@@ -66,7 +66,7 @@
<circle-progress
:width="170"
:height="90"
:value="scenicStore.wordkOrderData.warnData.rate"
:value="parseFloat(scenicStore.wordkOrderData.warnData.rate)"
:title="`${scenicStore.wordkOrderData.warnData.rate}%`"
subTitle="完成率"
/>

View File

@@ -73,7 +73,7 @@
</div>
</div>
<div class="box-1 mr-8">
<Title1 title="停车信息(调试中)" />
<Title1 title="停车信息" />
<div class="flex">
<div class="height70 flex flex-1">
<circle-progress
@@ -81,7 +81,7 @@
:key="index"
:width="140"
:height="70"
:value="item.rate"
:value="parseFloat(item.rate)"
:title="item.occupied"
:subTitle="`${item.name}剩余`"
/>
@@ -90,7 +90,7 @@
<count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
<count-item
label="剩余车位数"
:count="scenicStore.stopCarData.info.remain"
:count="scenicStore.stopCarData.info.occupiedSpaces"
suffix="个"
/>
</div>
@@ -98,13 +98,13 @@
<div class="flex">
<div class="border mr-8 flex-1">
<div class="pt-10">
<Title3 title="今日景区车流量(调试中)" />
<Title3 title="今日景区车流量" />
</div>
<Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
</div>
<div class="border flex-1">
<div class="pt-10">
<Title3 title="车辆归属地占比(调试中)" />
<Title3 title="车辆归属地占比" />
</div>
<PieRow
label="停车总数"
@@ -144,13 +144,13 @@
</div>
<div class="flex mt-8">
<div class="box-3 mr-8">
<Title1 title="交通信息(调试中)" />
<Title1 title="交通信息" />
<div class="count-box flex">
<count-item
v-for="(item, index) in scenicStore.trafficData.infoList"
:key="index"
:label="item.name"
:count="item.value"
:count="item?.value || 0"
/>
</div>
<div class="flex">
@@ -347,7 +347,7 @@
const carTotal = computed(() => {
return scenicStore.stopCarData.dataLists.reduce((pre, cur) => {
return pre + cur.count
return pre + parseInt(cur.count)
}, 0)
})

View File

@@ -40,10 +40,12 @@
watch(
() => props.list,
(val) => {
() => {
if (props.list.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{ immediate: true }
)

View File

@@ -86,10 +86,8 @@
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: fitChartSize(10)
}
},
itemStyle: {
color: {