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

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,8 +31,8 @@
<Title3 title="景区排队人数" />
</div>
<Line
:width="490"
:height="300"
width="100%"
:height="440"
:data="scenicQueueData"
:xAxisData="scenicQueueXAxisData"
/>
@@ -40,15 +40,16 @@
</div>
<div class="box mr-8">
<Title1 title="景区承载" />
<div class="flex">
<div class="">
<circle-progress
:width="200"
:height="70"
:width="170"
:height="50"
:value="scenicStore.scenicBearData.header.jqRate"
:title="`${scenicStore.scenicBearData.header.jqRate}%`"
subTitle="景区承载率"
/>
<div class="flex flex-1 justify-between">
<div class="flex flex-1 justify-center" style="text-align: center;">
<count-item
label="景区当前在园人数"
:count="scenicStore.scenicBearData.header.jrjdrs"
@@ -62,12 +63,12 @@
</div>
</div>
<div class="border">
<div class="pt-10">
<div class="pt-50">
<Title3 title="今日景区承载量" />
</div>
<Line
:width="490"
:height="300"
width="100%"
:height="390"
:data="scenicBearData"
:xAxisData="scenicBearXAxisData"
/>
@@ -75,19 +76,19 @@
</div>
<div class="box-1 mr-8" style="padding: 0;">
<Title1 title="停车信息" />
<div class="flex">
<div class="height70 flex flex-1">
<div class="">
<div class=" flex flex-1">
<circle-progress
v-for="(item, index) in garageList"
:key="index"
:width="140"
:height="70"
:width="80"
:height="50"
:value="parseFloat(item.rate)"
:title="item.occupied"
:subTitle="`${item.name}`"
/>
</div>
<div class="ml-20 flex flex-1 justify-between">
<div class="ml-20 mb-10 flex flex-1 justify-between">
<count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
<count-item
label="剩余车位数"
@@ -101,7 +102,7 @@
<div class="pt-10">
<Title3 title="今日景区车流量" />
</div>
<Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
<Line width="100%" :height="390" :data="carBearData" :xAxisData="carBearXAxisData" />
</div>
<div class="border flex-1">
<div class="pt-10">
@@ -111,7 +112,7 @@
label="今日停车累计"
:dataList="dataLists"
:total="carTotal"
:width="360"
width="100%"
:height="300"
/>
</div>
@@ -138,8 +139,8 @@
label="告警总数"
:dataList="scenicStore.secureData.dataList"
:total="alarmTotal"
:width="440"
:height="300"
width="100%"
:height="450"
/>
</div>
</div>
@@ -167,7 +168,7 @@
<Title3 title="拥堵次数占比" />
<jam
:width="220"
:height="300"
:height="700"
sub-title="拥堵频次总数"
:list="scenicStore.trafficData.data.countRate"
:text="'暂无拥堵'"
@@ -178,7 +179,7 @@
<jam
:text="'暂无拥堵'"
:width="220"
:height="300"
:height="720"
sub-title="拥堵总时长(分钟)"
:list="scenicStore.trafficData.data.timeRate"
/>
@@ -188,7 +189,7 @@
<div class="box-4 mr-8">
<Title1 title="用户画像" />
<div class="flex">
<div class="flex" style="height: 100%;">
<div class="border mr-8 flex-1">
<Title3 title="年龄/性别占比" />
<age :list="scenicStore.userPortraitData.data.ageRate" />
@@ -221,7 +222,7 @@
<RegionTop
:list="scenicStore.userPortraitData.data.provinceRate"
:width="250"
:height="366"
:height="800"
/>
</div>
<div class="border flex-1">
@@ -229,7 +230,7 @@
<TicketSource
:list="scenicStore.userPortraitData.data.channel"
:width="240"
:height="330"
:height="800"
/>
</div>
</div>
@@ -563,7 +564,7 @@
.box-1 {
// margin-top: vh(120);
width: vw(900);
height: vh(950);
// height: vh(950);
padding: vw(10);
box-sizing: border-box;
background-image: url('@/assets/images/bg-3.png');
@@ -596,7 +597,7 @@
position: absolute;
top: vh(-4);
font-weight: 400;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #ffffff;
left:vw(0)
}
@@ -607,12 +608,12 @@
justify-content: space-between;
.label {
font-weight: 400;
font-size: vw(16);
font-size: vw(19.2); /* 16×1.2 */
color: #ffffff;
}
.value {
font-weight: bold;
font-size: vw(28);
font-size: vw(33.6); /* 28×1.2 */
color: #02f9fa;
text-align: center;
line-height: vh(60);
@@ -627,7 +628,7 @@
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-size: vw(33.6); /* 28×1.2 */
font-weight: bold;
}
}
@@ -648,7 +649,7 @@
align-items: center;
background: #0a4190;
border-radius: vw(4);
font-size: vw(16);
font-size: vw(18); /* 16×1.2 */
font-weight:700;
color: #fff;
z-index: 999;
@@ -703,12 +704,12 @@
.label {
width: vw(120);
font-weight: 400;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #fff;
}
.value {
font-weight: bold;
font-size: vw(28);
font-size: vw(33.6); /* 28×1.2 */
color: #fff;
}
.success {
@@ -734,7 +735,7 @@
.tag {
padding: 0 vw(16);
font-weight: bold;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #fff;
display: flex;
align-items: center;
@@ -763,7 +764,7 @@
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #ffffff;
border-radius: vw(2);
background: rgba(0, 150, 255, 0.28);
@@ -781,7 +782,7 @@
<style lang="scss" scoped>
:deep(.el-dialog__headerbtn .el-dialog__close){
color:#fff;
font-size:40px;
font-size:48px; /* 40×1.2 */
position:relative;
top:15px;
right:15px;
@@ -797,6 +798,7 @@
:deep(.el-dialog__title) {
color: #fff;
font-weight: bold;
font-size: vw(38.4); /* 32×1.2 */
}
.sp-ico {
@@ -823,7 +825,7 @@
}
.header-title{
font-size:vw(32);
font-size:vw(38.4); /* 32×1.2 */
color:#fff;
text-align:center;
font-weight:bold;
@@ -841,7 +843,7 @@
.header {
height: vh(28);
font-weight: 400;
font-size: vw(24);
font-size: vw(28.8); /* 24×1.2 */
color: #fff;
display: flex;
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
@@ -871,7 +873,7 @@
.item {
height: vh(50);
font-weight: 400;
font-size: vw(24);
font-size: vw(28.8); /* 24×1.2 */
color: #f1f7ff;
display: flex;
&:nth-child(2n + 1) {
@@ -897,7 +899,7 @@
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
font-size: vw(18); /* 15×1.2 */
line-height: vh(26);
text-align: center;
font-style: normal;
@@ -915,7 +917,7 @@
height: vh(500);
.icon-box {
font-weight: 400;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #ffffff;
line-height: vh(16);
flex-wrap: wrap;
@@ -942,7 +944,7 @@
text-align: center;
line-height: vh(26);
margin-left: vw(32.5);
font-size: vw(16);
font-size: vw(19.2); /* 16×1.2 */
font-weight: 800;
color: #fff;
background-image: url('@/assets/images/title-1.png');
@@ -958,7 +960,7 @@
align-items: center;
color: #fff;
text-align: center;
font-size: vw(20);
font-size: vw(24); /* 20×1.2 */
justify-content: center;
}
.look-box {
@@ -974,7 +976,7 @@
align-items: center;
background: #0a4190;
border-radius: vw(4);
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #fff;
}
}
@@ -1042,12 +1044,12 @@
}
&-item-label {
font-weight: 400;
font-size: vw(12);
font-size: vw(14.4); /* 12×1.2 */
line-height: vh(14);
}
&-item-value {
font-weight: bold;
font-size: vw(16);
font-size: vw(19.2); /* 16×1.2 */
line-height: vh(18);
}
}
@@ -1055,7 +1057,7 @@
margin: vh(120) 0 0 vw(10);
.count-box {
padding: 0 vw(10);
height: vh(70);
height: vh(140);
}
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
@@ -1070,39 +1072,39 @@
}
.box {
@extend .bg;
width: vw(510);
height: vh(475);
width: vw(650);
// height: vh(475);
}
.box-1 {
@extend .bg;
height: vh(475);
// height: vh(475);
}
.box-2 {
@extend .bg;
height: vh(475);
// height: vh(475);
}
.box-3 {
@extend .bg;
height: vh(465);
// height: vh(465);
}
.box-4 {
@extend .bg;
height: vh(465);
// height: vh(465);
}
.box-5 {
@extend .bg;
height: vh(465);
// height: vh(465);
flex:1;
}
.car-box {
width: vw(316);
height: vh(74);
// width: vw(316);
height: vh(120);
display: flex;
align-items: center;
.icon {
position: absolute;
width: vw(350);
height: vw(74);
// width: vw(350);
height: vw(100);
}
.car-item {
flex: 1;
@@ -1115,25 +1117,25 @@
}
.label {
font-weight: 400;
font-size: vw(14);
font-size: vw(24); /* 20×1.2 */
color: #fff;
}
.value {
font-weight: bold;
font-size: vw(24);
font-size: vw(33.6); /* 28×1.2 */
color: #02f9fa;
margin-top: vh(6);
margin-top: vh(10);
align-items: flex-end;
}
.suffix {
font-size: vw(12);
font-size: vw(14.4); /* 12×1.2 */
color: #02f9fa;
margin-bottom: vw(4);
}
}
.sum {
font-weight: bold;
font-size: vw(18);
font-size: vw(26.4); /* 22×1.2 */
color: #02f9fa;
display: flex;
align-items: center;
@@ -1141,7 +1143,7 @@
.car-ship {
// width: vw(660);
width: 100%;
height: vh(250);
height: vh(750);
}
.full {
cursor: pointer;
@@ -1155,7 +1157,7 @@
margin: vw(20) vw(20) 0 vw(20);
height: vh(24);
font-weight: bold;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #ffffff;
display: flex;
align-items: center;
@@ -1183,7 +1185,7 @@
}
.text {
font-weight: 400;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: rgba(255, 255, 255, 0.9);
}
.progress {
@@ -1192,13 +1194,13 @@
}
.man {
font-weight: bold;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #02f9fa;
margin-left: vw(10);
}
.woman {
font-weight: bold;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: #f15a25;
margin-left: vw(10);
}
@@ -1218,7 +1220,7 @@
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
font-size: vw(18); /* 15×1.2 */
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
@@ -1246,14 +1248,14 @@
.label {
padding-left: vw(10);
font-weight: 400;
font-size: vw(14);
font-size: vw(16.8); /* 14×1.2 */
color: rgba(255, 255, 255, 0.9);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-size: vw(33.6); /* 28×1.2 */
font-weight: bold;
}
}
}
</style>
</style>