Merge remote-tracking branch 'origin/dlnew' into dlnew
This commit is contained in:
@@ -132,3 +132,11 @@ export function getVideCollectCateSort(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//今年游客总数
|
||||||
|
export function getSpotVisitor(data) {
|
||||||
|
return request({
|
||||||
|
url: '/fjtcc-api/api/largeScreen/spot/spotVisitor',
|
||||||
|
method: 'get',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -377,7 +377,7 @@
|
|||||||
.header {
|
.header {
|
||||||
height: vh(28);
|
height: vh(28);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: vw(20);
|
font-size: font-vw(20);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||||
@@ -407,7 +407,7 @@
|
|||||||
.item {
|
.item {
|
||||||
height: vh(50);
|
height: vh(50);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: vw(14);
|
font-size: font-vw(14);
|
||||||
color: #f1f7ff;
|
color: #f1f7ff;
|
||||||
display: flex;
|
display: flex;
|
||||||
&:nth-child(2n + 1) {
|
&:nth-child(2n + 1) {
|
||||||
@@ -433,7 +433,7 @@
|
|||||||
span {
|
span {
|
||||||
margin-left: vw(30);
|
margin-left: vw(30);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: vw(15);
|
font-size: font-vw(15);
|
||||||
line-height: vh(26);
|
line-height: vh(26);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@@ -452,7 +452,7 @@
|
|||||||
height:50%;
|
height:50%;
|
||||||
.icon-box {
|
.icon-box {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: vw(14);
|
font-size: font-vw(14);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: vh(16);
|
line-height: vh(16);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -479,7 +479,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: vh(26);
|
line-height: vh(26);
|
||||||
margin-left: vw(32.5);
|
margin-left: vw(32.5);
|
||||||
font-size: vw(22);
|
font-size: font-vw(22);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-image: url('@/assets/images/title-1.png');
|
background-image: url('@/assets/images/title-1.png');
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
<div class="header" :class="homeStore.amplify?'':'coll-box-2'">
|
<div class="header" :class="homeStore.amplify?'':'coll-box-2'">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="item">
|
<div class="item"
|
||||||
|
@click="dialogTableVisible = true"
|
||||||
|
style="cursor: pointer;">
|
||||||
<div class="label">今年总游客数</div>
|
<div class="label">今年总游客数</div>
|
||||||
<scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
|
<scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
@@ -256,7 +258,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-dialog title="今年总游客数" center v-model="dialogTableVisible">
|
||||||
|
<div class="bom-box">
|
||||||
|
<div class="table">
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<div>景区</div>
|
||||||
|
<div>今年游客数</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="item" v-for="(item, index) in orderedScenicData" :key="index">
|
||||||
|
<div>{{item.name}}</div>
|
||||||
|
<div>{{item.value}}</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -264,7 +287,7 @@
|
|||||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
|
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
|
||||||
|
|
||||||
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
||||||
import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
|
import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi,getSpotVisitor } from '@/api/home'
|
||||||
import occupancy from './occupancy'
|
import occupancy from './occupancy'
|
||||||
import icon8 from '@/assets/images/icon-8.png'
|
import icon8 from '@/assets/images/icon-8.png'
|
||||||
import icon9 from '@/assets/images/icon-9.png'
|
import icon9 from '@/assets/images/icon-9.png'
|
||||||
@@ -273,7 +296,7 @@
|
|||||||
|
|
||||||
import { useMap } from '@/hooks/map'
|
import { useMap } from '@/hooks/map'
|
||||||
import { useHomeStore } from '@/stores/home'
|
import { useHomeStore } from '@/stores/home'
|
||||||
|
const dialogTableVisible = ref(false)
|
||||||
const homeStore = useHomeStore()
|
const homeStore = useHomeStore()
|
||||||
|
|
||||||
let emit = defineEmits(['switch-spot'])
|
let emit = defineEmits(['switch-spot'])
|
||||||
@@ -291,6 +314,19 @@
|
|||||||
spotList.value = res.data
|
spotList.value = res.data
|
||||||
getBaiduMap()
|
getBaiduMap()
|
||||||
}
|
}
|
||||||
|
const visitorList = ref([])
|
||||||
|
const scenicOrder = ['白帝城·瞿塘峡', '三峡之巅', '龙桥河'];
|
||||||
|
const orderedScenicData = computed(() => {
|
||||||
|
return scenicOrder.map(name => ({
|
||||||
|
name: name, // 景点名(键)
|
||||||
|
value: visitorList.value[name] // 对应数值(值)
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
const getSpotVisitorList = async () => {
|
||||||
|
let res = await getSpotVisitor()
|
||||||
|
visitorList.value = res.data
|
||||||
|
console.log(res,'getSpotVisitor')
|
||||||
|
}
|
||||||
const getBaiduMap = async () => {
|
const getBaiduMap = async () => {
|
||||||
let res = await getBaiduMapApi({
|
let res = await getBaiduMapApi({
|
||||||
nodeid: 7162
|
nodeid: 7162
|
||||||
@@ -506,10 +542,107 @@
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getSpotList()
|
getSpotList()
|
||||||
|
getSpotVisitorList()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-dialog__headerbtn .el-dialog__close){
|
||||||
|
color:#fff;
|
||||||
|
font-size:30px;
|
||||||
|
position:relative;
|
||||||
|
top:15px;
|
||||||
|
right:15px;
|
||||||
|
}
|
||||||
|
:deep(.el-dialog) {
|
||||||
|
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
:deep(.el-dialog__title) {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bom-box {
|
||||||
|
.table2{
|
||||||
|
width:100%;
|
||||||
|
height:vh(740);
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: vh(20);
|
||||||
|
.header {
|
||||||
|
height: vh(80);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: font-vw(20);
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding:0;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: vh(490);
|
||||||
|
/* 滚动条整体样式 */
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: vw(4); /* 滚动条的宽度 */
|
||||||
|
}
|
||||||
|
/* 滚动条轨道 */
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: 'transparent'; /* 轨道的背景色 */
|
||||||
|
}
|
||||||
|
/* 滚动条滑块 */
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||||
|
border-radius: 5px; /* 滑块的圆角 */
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
height: vh(80);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: font-vw(14);
|
||||||
|
color: #f1f7ff;
|
||||||
|
display: flex;
|
||||||
|
&:nth-child(2n + 1) {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(0, 150, 255, 0) 0%,
|
||||||
|
rgba(0, 150, 255, 0.22) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
white-space: nowrap; /* 保证文本在一行内显示 */
|
||||||
|
overflow: hidden; /* 隐藏溢出的内容 */
|
||||||
|
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
span {
|
||||||
|
margin-left: vw(30);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: font-vw(15);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.new-gd{
|
.new-gd{
|
||||||
background-image: url('@/assets/images/bg-3.png');
|
background-image: url('@/assets/images/bg-3.png');
|
||||||
|
|||||||
Reference in New Issue
Block a user