feat:完善景区数据
This commit is contained in:
@@ -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="" />
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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="完成率"
|
||||
/>
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
|
||||
|
||||
@@ -40,10 +40,12 @@
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(val) => {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
() => {
|
||||
if (props.list.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
@@ -86,10 +86,8 @@
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
}
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
|
||||
Reference in New Issue
Block a user