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-03-12 17:30:45 +08:00
parent 666549a430
commit 4e5b071027
6 changed files with 45 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/monitor/components/box-1.vue
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);