add 1
This commit is contained in:
duanliang
@@ -3,24 +3,27 @@
|
||||
<div class="flex">
|
||||
<div class="box mr-8">
|
||||
<Title1 title="排队信息" />
|
||||
<div @click="handleLineUp()"
|
||||
<div
|
||||
style="cursor: pointer;"
|
||||
class="count-box flex justify-between">
|
||||
<count-item
|
||||
label="今日入园人数"
|
||||
:count="scenicStore.scenicQueueData.header.jrjdrs"
|
||||
suffix="人"
|
||||
@click="handlePop2()"
|
||||
/>
|
||||
<count-item
|
||||
label="今日出园人数"
|
||||
:count="scenicStore.scenicQueueData.header.jrjdcy"
|
||||
suffix="人"
|
||||
@click="handleLineUp()"
|
||||
/>
|
||||
<count-item
|
||||
label="排队人数"
|
||||
:count="scenicStore.scenicQueueData.header.pdrs"
|
||||
:color="scenicStore.scenicQueueData.header.pdrs_type == 0 ? '' : '#E21B1B'"
|
||||
suffix="人"
|
||||
@click="handleLineUp()"
|
||||
/>
|
||||
</div>
|
||||
<div class="border">
|
||||
@@ -303,6 +306,39 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :title="'徒步客流统计'" center v-model="dialogTableVisible2">
|
||||
<div class="bom-box">
|
||||
<div class="table">
|
||||
<div class="header-title">{{gridTitle}}</div>
|
||||
<div class="header">
|
||||
<div @click="handleTabPassFlow(0)" :class="hIndex==0?'h-active':''" >路段</div>
|
||||
<div @click="handleTabPassFlow(1)" :class="hIndex==1?'h-active':''">点位</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div>名称</div>
|
||||
<div>进入</div>
|
||||
<div>离开</div>
|
||||
<div>保有量</div>
|
||||
</div>
|
||||
<div class="item" v-if="hIndex==0" v-for="(item, index) in tjArr.groups" :key="index">
|
||||
<div>{{ item.title }}</div>
|
||||
<div>{{ item.enter }}</div>
|
||||
<div>{{ item.exit }}</div>
|
||||
<div>{{ item.holdValue }}</div>
|
||||
|
||||
</div>
|
||||
<div class="item" v-if="hIndex==1" v-for="(item, index) in tjArr.single" :key="index">
|
||||
<div>{{ item.title }}</div>
|
||||
<div>{{ item.enter }}</div>
|
||||
<div>{{ item.exit }}</div>
|
||||
<div>{{ item.holdValue }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<big-map
|
||||
v-model="show"
|
||||
@@ -320,7 +356,7 @@
|
||||
import carIcon from '@/assets/images/car.png'
|
||||
import carStopIcon from '@/assets/images/car-stop.png'
|
||||
import carOfflineIcon from '@/assets/images/car-offline.png'
|
||||
|
||||
import {getSpotPassengerFlow} from "@/api/home.js";
|
||||
import shipIcon from '@/assets/images/ship.png'
|
||||
import shipStopIcon from '@/assets/images/ship-stop.png'
|
||||
import shipOfflineIcon from '@/assets/images/ship-offline.png'
|
||||
@@ -349,7 +385,18 @@
|
||||
const handleLineUp = (item)=>{
|
||||
allShow.value = true
|
||||
events.value = item
|
||||
console.log(item,7777777)
|
||||
}
|
||||
let dialogTableVisible2 = ref(false)
|
||||
let tjArr = ref([])
|
||||
let hIndex = ref(0)
|
||||
const handleTabPassFlow = (index)=>{
|
||||
hIndex.value = index;
|
||||
}
|
||||
const handlePop2 = async()=>{
|
||||
dialogTableVisible2.value = true
|
||||
let res = await getSpotPassengerFlow({scenicSpotId:props.scenicSpotId})
|
||||
tjArr.value = res.data
|
||||
console.log(res,'res')
|
||||
}
|
||||
let show = ref(false)
|
||||
let scenicChange = null
|
||||
@@ -505,7 +552,404 @@
|
||||
PubSub.unsubscribe(scenicChange)
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.h-active{
|
||||
background-color: #fff;
|
||||
color:#0063ff;
|
||||
}
|
||||
.coll-box{
|
||||
flex:1 !important;
|
||||
}
|
||||
.box-1 {
|
||||
margin-top: vh(120);
|
||||
width: vw(900);
|
||||
height: vh(950);
|
||||
padding: vw(10);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.header {
|
||||
display: flex;
|
||||
margin-top: vh(10);
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right:vw(10);
|
||||
cursor:pointer;
|
||||
> img {
|
||||
width: vw(74);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&__left-item {
|
||||
position: relative;
|
||||
width: vw(120);
|
||||
height: vh(58);
|
||||
padding-left: vw(10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/ticket-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
// margin-left:vw(30);
|
||||
.label {
|
||||
position: absolute;
|
||||
top: vh(-4);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
left:vw(0)
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #02f9fa;
|
||||
text-align: center;
|
||||
line-height: vh(60);
|
||||
}
|
||||
.warning {
|
||||
color:#DCBB48;;
|
||||
}
|
||||
.error {
|
||||
color: #ff4400;
|
||||
}
|
||||
}
|
||||
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
height: vh(600);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position:relative;
|
||||
.look-btn{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
top: 6%;
|
||||
transform: translateY(-50%);
|
||||
padding: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0a4190;
|
||||
border-radius: vw(4);
|
||||
font-size: vw(16);
|
||||
font-weight:700;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
width:vw(100);
|
||||
// height:;
|
||||
}
|
||||
}
|
||||
.scenic-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
height: vh(10); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
> img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
.item {
|
||||
flex: 1;
|
||||
height: vh(140);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.bg {
|
||||
padding-left: vw(20);
|
||||
width: vw(243);
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
|
||||
&:nth-child(1) {
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.label {
|
||||
width: vw(120);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #fff;
|
||||
}
|
||||
.success {
|
||||
color: #02f9fa;
|
||||
}
|
||||
.error {
|
||||
color: #e21b1b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-top: vh(4);
|
||||
height: vh(116);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
margin-left: vw(4);
|
||||
margin-top: vh(12);
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tag {
|
||||
padding: 0 vw(16);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: vw(2);
|
||||
}
|
||||
.tag--important {
|
||||
@extend .tag;
|
||||
background: #feae00;
|
||||
}
|
||||
.tag--warn {
|
||||
@extend .tag;
|
||||
background: #d9011b;
|
||||
}
|
||||
.tag--normal {
|
||||
@extend .tag;
|
||||
background: #2380fb;
|
||||
}
|
||||
.content {
|
||||
margin-left: vw(4);
|
||||
padding: 0 vw(10);
|
||||
width: vw(760);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
}
|
||||
}
|
||||
.more {
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
height: vh(100);
|
||||
margin-top: vh(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__headerbtn .el-dialog__close){
|
||||
color:#fff;
|
||||
font-size:40px;
|
||||
position:relative;
|
||||
top:15px;
|
||||
right:15px;
|
||||
}
|
||||
:deep(.el-dialog__header.show-close){
|
||||
padding-right:0;
|
||||
}
|
||||
:deep(.el-dialog) {
|
||||
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
|
||||
background-size: 100% 100%;
|
||||
width:vw(1500);
|
||||
}
|
||||
:deep(.el-dialog__title) {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sp-ico {
|
||||
width: vw(40);
|
||||
}
|
||||
.item-name {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
.sp-img {
|
||||
width: vw(100);
|
||||
}
|
||||
.correspondence {
|
||||
margin: vw(8);
|
||||
width: vw(300);
|
||||
height: vh(1070);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bom-box2{
|
||||
// margin-top:vh(10);
|
||||
min-width:vw(900);
|
||||
height:vh(800);
|
||||
|
||||
}
|
||||
.header-title{
|
||||
font-size:vw(32);
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
margin-bottom:vh(20);
|
||||
|
||||
}
|
||||
.bom-box {
|
||||
.table2{
|
||||
width:100%;
|
||||
height:vh(740);
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: vh(5);
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
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(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
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: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
margin-top: vh(40);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
& > img {
|
||||
width: vw(54);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: vw(260);
|
||||
height: vh(26);
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.null-box {
|
||||
width: vw(360);
|
||||
|
||||
Reference in New Issue
Block a user