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-01-14 19:01:09 +08:00
parent 880db48579
commit ebac43f818
28 changed files with 2250 additions and 2133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,37 +5,26 @@
<div class="left">
<div class="item">
<div class="label">今年总游客数</div>
<scroll-number :count="visitorInfo.total_count_this_year" prefix="1" />
<scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
</div>
<div class="item">
<div class="label">全县景区总游客人数</div>
<scroll-number :count="visitorInfo.total_count_today" prefix="2" />
<scroll-number :count="homeStore.visitorInfoData.total_count_today" prefix="2" />
</div>
<div class="item">
<div class="label">总在园人数</div>
<scroll-number :count="visitorInfo.total_count_today_within_three_hours" prefix="3" />
<scroll-number
:count="homeStore.visitorInfoData.total_count_today_within_three_hours"
prefix="3"
/>
</div>
</div>
<div class="right">
<div class="item">
<div class="label">安全度</div>
<div class="value">安全</div>
</div>
<div class="item">
<div class="label">舒适度</div>
<div class="value">舒适</div>
</div>
<div class="item">
<div class="label">接待情况</div>
<div class="value">排队</div>
</div>
<div class="item">
<div class="label">交通拥挤度</div>
<div class="value">舒适</div>
</div>
<div class="item">
<div class="label">停车场负荷度</div>
<div class="value">超负荷</div>
<div class="item" v-for="(item, index) in homeStore.visitorInfoList" :key="index">
<div class="label">{{ item.name }}</div>
<div :class="[item.type == 1 ? 'value--error' : 'value--primary']">{{
item.value
}}</div>
</div>
</div>
</div>
@@ -104,28 +93,23 @@
</div>
</div>
</div>
<div class="right">
<div class="item">
<span class="item-tag--warning">重要</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="item">
<span class="item-tag--error">紧急</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="item">
<span class="item-tag--primary">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div>
<vue3-seamless-scroll
class="right"
:list="homeStore.wordkOrderList"
:limitScrollNum="3"
:hover="true"
:step="0.2"
:wheel="true"
:isWatch="true"
>
<div class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">
<span :class="`item-tag--${item.level}`">{{ item.level_text }}</span>
<p class="content">
{{ item.title }}
</p>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
@@ -133,6 +117,7 @@
<script setup>
import countup from 'vue-countup-v3'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import ScrollNumber from '@/components/ScrollNumber/index.vue'
import { getSpotListApi, getBaiduMapCrowdedApi } from '@/api/home'
@@ -142,22 +127,14 @@
import icon11 from '@/assets/images/icon-11.png'
import { useMap } from '@/hooks/map'
import { useHomeStore } from '@/stores/home'
const homeStore = useHomeStore()
let emit = defineEmits(['switch-spot'])
const { map, initMap, addMarker } = useMap()
const homeData = inject('homeData')
const visitorInfo = computed(() => {
if (homeData.value) return homeData.value?.visitorInfo.data
return {
total_count_this_year: 0,
total_count_today: 0,
total_count_today_within_three_hours: 0
}
})
let spotList = ref([])
let list = ref([
@@ -185,13 +162,13 @@
const getSpotList = async () => {
let res = await getSpotListApi()
spotList.value = res.data
let res1 = await getBaiduMapCrowdedApi({
nodeId: res.data[0].nodeid
})
// let res1 = await getBaiduMapCrowdedApi({
// nodeId: res.data[0].nodeid
// })
}
watch(
() => homeData.value?.baiduMap,
() => homeStore?.baiduMapData,
(val) => {
if (val) init(val)
},
@@ -245,7 +222,7 @@
background-size: 100% 100%;
.left {
display: flex;
width: vw(890);
width: vw(740);
margin-top: vh(20);
}
.right {
@@ -264,8 +241,15 @@
.value {
font-weight: bold;
font-size: vw(28);
color: #02f9fa;
line-height: vh(33);
&--error {
@extend .value;
color: #ff4400;
}
&--primary {
@extend .value;
color: #02f9fa;
}
}
}
.countup-wrap {
@@ -331,7 +315,7 @@
width: 100%;
height: vh(120);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
background-size: 100% 400%;
.left {
flex: 1;
display: flex;
@@ -400,13 +384,14 @@
}
}
.right {
padding: vh(10) vw(24);
margin-top: vh(8);
padding: vh(10) vw(10);
height: vh(106);
width: vw(1040);
overflow: hidden;
.item {
display: flex;
margin-bottom: vh(12);
&:nth-last-child(1) {
margin-bottom: 0;
}
margin-bottom: vh(10);
&-tag {
padding: 0 vw(16);
font-weight: bold;
@@ -417,22 +402,22 @@
justify-content: center;
border-radius: vw(2);
}
&-tag--warning {
&-tag--important {
@extend .item-tag;
background: #feae00;
}
&-tag--error {
&-tag--warn {
@extend .item-tag;
background: #d9011b;
}
&-tag--primary {
&-tag--normal {
@extend .item-tag;
background: #2380fb;
}
.content {
margin-left: vw(4);
padding: 0 vw(10);
width: vw(900);
width: vw(950);
height: vh(24);
line-height: vh(24);
white-space: nowrap;