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
2024-12-20 12:56:03 +08:00
parent c9b4f315e5
commit cfba180177
13 changed files with 924 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/home/components/box-2.vue
View File

@@ -46,7 +46,18 @@
</div>
<Title3 title="景区排队人数" />
<div class="pt-20">
<Line :width="370" :height="140" />
<Line
:width="370"
:height="140"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="xAxisData"
/>
</div>
</div>
<div class="box">
@@ -71,7 +82,35 @@
</div>
<Title3 title="今日景区承载量" />
<div class="pt-20">
<Line :width="370" :height="140" />
<Line
:width="370"
:height="140"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
</div>
@@ -142,6 +181,24 @@
import top from './top.vue'
import gauge from './gauge.vue'
import ticket from './ticket.vue'
let xAxisData = ref([
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
])
</script>
<style lang="scss" scoped>

119
src/views/home/components/box-4.vue
View File

@@ -14,15 +14,71 @@
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="pt-20">
<Line :width="250" :height="170" />
<div class="">
<Line
:width="250"
:height="150"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<Line :width="250" :height="120" />
<Line
:width="250"
:height="150"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
<div class="box">
@@ -73,7 +129,35 @@
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="pt-20">
<Line :width="250" :height="120" />
<Line
:width="250"
:height="120"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
</div>
@@ -181,7 +265,7 @@
</div>
</div>
<div>
<div class="pt-6">
<div class="lodging">
<Title3 title="酒店入住人数及入住率" />
</div>
<lodging-ratio />
@@ -194,9 +278,8 @@
<script setup>
import jam from './jam.vue'
import vacancy from './vacancy.vue'
import TrafficFlow from './traffic-flow.vue'
import LodgingRatio from './lodging-ratio.vue'
import TrafficFlow from './traffic-flow.vue'
import countup from 'vue-countup-v3'
import icon1 from '@/assets/images/icon-1.png'
import icon2 from '@/assets/images/icon-2.png'
@@ -228,14 +311,9 @@
</script>
<style lang="scss" scoped>
.title1 {
:deep(.title) {
width: vw(300) !important;
}
}
.box-4 {
margin-top: vh(120);
width: vw(710);
width: vw(750);
height: vh(950);
padding: vw(8);
box-sizing: border-box;
@@ -356,7 +434,7 @@
.table {
position: absolute;
left: vw(160);
width: vw(220);
width: vw(200);
height: vh(100);
z-index: 2;
.header {
@@ -435,7 +513,8 @@
}
}
& > div:nth-child(2) {
margin-top: vh(10);
padding-top: vh(10);
margin-top: vh(8);
width: vw(360);
height: vh(140);
background-image: url('@/assets/images/bg-4.png');
@@ -443,4 +522,14 @@
}
}
}
.lodging {
:deep(.title-3) {
margin-top: vh(10);
}
}
.title1 {
:deep(.title) {
width: vw(300) !important;
}
}
</style>

4
src/views/home/components/lodging-ratio.vue
View File

@@ -23,7 +23,7 @@
grid: {
left: '4%',
right: '4%',
top: '16%',
top: '20%',
bottom: '-10%',
containLabel: true
},
@@ -183,6 +183,6 @@
<style scoped lang="scss">
.lodging-ratio {
width: 100%;
height: vh(110);
height: vh(120);
}
</style>

2
src/views/home/index.vue
View File

@@ -18,7 +18,7 @@
]
const navRight = [
{ name: '停车' },
{ name: '工单' },
{ name: '工单', path: '/workOrder' },
{ name: '舆情', path: '/sentiment' },
{ name: '酒店' }
]