add 1
This commit is contained in:
duanliang
929
src/views/collect/components/video-box.vue
Normal file
929
src/views/collect/components/video-box.vue
Normal file
@@ -0,0 +1,929 @@
|
||||
<template>
|
||||
<div class="video-box">
|
||||
<div v-if="videoLog == 1" class="video-wrapper">
|
||||
<div class="video-list">
|
||||
<!-- <div class="empty-box" v-if="videoList.length==0&&cond">
|
||||
未接入
|
||||
</div> -->
|
||||
<div class="type-item" v-for="(item,index) in videoList">
|
||||
<div class="type-title">{{item.label}}</div>
|
||||
<draggable :data-item-index="index" class="item-element" :item-key="item.key" :list="item.videos" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
|
||||
@start="onStart" @end="onEnd">
|
||||
<template #item="{ element }">
|
||||
<div class="video-item" :style="{
|
||||
width:(100/grad)+'%'
|
||||
}">
|
||||
|
||||
<div class="video-item__inner">
|
||||
<div
|
||||
v-if="element.isDiy == 1"
|
||||
class="video-item__follow"
|
||||
@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
|
||||
>取消收藏
|
||||
</div>
|
||||
<div
|
||||
v-if="element.isDiy == 0"
|
||||
class="video-item__unfollow"
|
||||
@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
|
||||
>收藏
|
||||
</div>
|
||||
<video
|
||||
class="video-item__video"
|
||||
:id="'monitorVideo' + element.cameraIndexCode"
|
||||
preload="auto"
|
||||
muted
|
||||
autoplay
|
||||
:controls="false"
|
||||
/>
|
||||
<p class="video-item__title--primary">
|
||||
{{ element.cameraName || element.scenicAreaId }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="params.pageNum"
|
||||
:page-size="params.pageSize"
|
||||
:total="total"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <ul class="videos">
|
||||
<li class="video-item" v-for="item in 8" :key="item">
|
||||
<img src="@/assets/images/sxzd.png" alt="" />
|
||||
<p>
|
||||
<span>核心路段：这是一条信息说明</span>
|
||||
</p>
|
||||
</li>
|
||||
</ul> -->
|
||||
<!-- <div class="pagination-box">
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" />
|
||||
</div> -->
|
||||
</div>
|
||||
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi } from '@/api/home'
|
||||
import {
|
||||
getVideoTypeApi,
|
||||
getVideoRegionsApi,
|
||||
postVideoRemainApi,
|
||||
postVideoControlApi,
|
||||
postVideoCollectApi
|
||||
} from '@/api/monitor'
|
||||
import draggable from 'vuedraggable';
|
||||
import pubSub from 'pubsub-js'
|
||||
import Hls from 'hls.js'
|
||||
import emptyIco from '@/assets/images/n-icon.png'
|
||||
import { debounce } from 'lodash'
|
||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||
const UP = 'UP' // 上转
|
||||
const DOWN = 'DOWN' // 下转
|
||||
const LEFT = 'LEFT' // 左转
|
||||
const RIGHT = 'RIGHT' // 右转
|
||||
const STOP = 'STOP' // 停止操作
|
||||
let cond = ref(false)
|
||||
let ACTION = '0'
|
||||
let hlsRefs = []
|
||||
let hlsRef = null
|
||||
let timer = null
|
||||
let videoLog = ref(1)
|
||||
let videoList = ref([])
|
||||
let cameraIndexCode = ref('')
|
||||
let videoRef = ref()
|
||||
let monitorChange = null
|
||||
let total = ref(0)
|
||||
let loading = ref(false)
|
||||
let command = ref('')
|
||||
let cameraName = ref('')
|
||||
let regionList = ref()
|
||||
let params = reactive({
|
||||
businessScenicArea: "",
|
||||
cameraName: "",
|
||||
pageNum: 1,
|
||||
pageSize: 6,
|
||||
})
|
||||
let grad = ref(3)
|
||||
let show = ref(false)
|
||||
const onMonitorChange = () => {
|
||||
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
|
||||
params.businessScenicArea = data.name
|
||||
params.pageNum = 1
|
||||
videoList.value = []
|
||||
total.value = 0
|
||||
cond.value = false
|
||||
getRegionsList()
|
||||
})
|
||||
}
|
||||
const onStart = (res)=>{
|
||||
|
||||
}
|
||||
const onEnd = (evt)=>{
|
||||
const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
|
||||
console.log(evt,itemIndex,'eeeeeeee')
|
||||
getVideCollectCateSort({
|
||||
key:videoList.value[itemIndex].key,
|
||||
cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
|
||||
}).then((ress)=>{
|
||||
|
||||
videoList.value[itemIndex] = newList
|
||||
})
|
||||
|
||||
}
|
||||
// 获取关注列表
|
||||
const getVideCollectCateList = async () => {
|
||||
clearHlsRefs()
|
||||
params.businessVideoDisplayPosition = ''
|
||||
let res = await getVideCollectCate(params)
|
||||
videoList.value = res.data
|
||||
console.log(res,videoList.value.length,'ressssssssssssss')
|
||||
if(videoList.value.length<=3){
|
||||
grad.value = 3
|
||||
}else if(videoList.value.length<=6){
|
||||
grad.value = 2
|
||||
}else{
|
||||
grad.value = 1
|
||||
}
|
||||
postVideoRemain()
|
||||
// total.value = res.total
|
||||
|
||||
initVideo()
|
||||
}
|
||||
// 收藏
|
||||
const handleCollect = async (id, status, index,element) => {
|
||||
await getColletDiyApi({
|
||||
cameraIndexCode:id,
|
||||
isDiy: status == 0 ? 1 : 0
|
||||
})
|
||||
if (status == 0) {
|
||||
|
||||
element.isDiy = 1
|
||||
|
||||
} else {
|
||||
|
||||
element.isDiy = 0
|
||||
}
|
||||
// pubSub.publish('videoCollect', id)
|
||||
}
|
||||
// 采集
|
||||
const handleAction = async (e) => {
|
||||
if (e == STOP) {
|
||||
ACTION = '1'
|
||||
} else {
|
||||
ACTION = '0'
|
||||
command.value = e
|
||||
}
|
||||
await postVideoControlApi({
|
||||
action: ACTION,
|
||||
command: command.value,
|
||||
cameraIndexCode: cameraIndexCode.value
|
||||
})
|
||||
if (e == STOP) {
|
||||
command.value = ''
|
||||
}
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
// 返回列表
|
||||
const handleBack = () => {
|
||||
videoLog.value = 1
|
||||
hlsRef.destroy()
|
||||
initVideo()
|
||||
}
|
||||
let isCollect = ref(0)
|
||||
let isDiy = ref(0)
|
||||
let videoSrc = ref('')
|
||||
const handleCamera = async (itemCode,resource) => {
|
||||
show.value = true
|
||||
let res = await getPreviewUrlApi({
|
||||
type: 'hls',
|
||||
cameraIndexCode:itemCode
|
||||
})
|
||||
cameraIndexCode.value = itemCode;
|
||||
isCollect.value = resource.isCollect
|
||||
isDiy.value = resource.isDiy
|
||||
videoSrc.value = res.data.url
|
||||
}
|
||||
//清除 hls
|
||||
const clearHlsRefs = () => {
|
||||
if (hlsRefs.length > 0) {
|
||||
hlsRefs.map((item) => {
|
||||
item.destroy()
|
||||
})
|
||||
hlsRefs = []
|
||||
}
|
||||
}
|
||||
// 分页
|
||||
const currentChange = (e) => {
|
||||
clearHlsRefs()
|
||||
videoList.value = []
|
||||
getRegionsList()
|
||||
}
|
||||
|
||||
let thisVideo = ref(null)
|
||||
const handleItemVideo = (url, type, code,item) => {
|
||||
thisVideo.value = item
|
||||
videoLog.value = 2
|
||||
cameraIndexCode.value = code
|
||||
setTimeout(() => {
|
||||
hlsRef = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
||||
})
|
||||
hlsRef.loadSource(url)
|
||||
hlsRef.attachMedia(videoRef.value)
|
||||
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
videoRef.value.play()
|
||||
})
|
||||
if (type == 100) initVideo()
|
||||
}, 1000)
|
||||
}
|
||||
const initVideo = () => {
|
||||
clearHlsRefs()
|
||||
nextTick(() => {
|
||||
videoList.value.forEach(async (it, i) => {
|
||||
|
||||
it.videos.forEach((item,index)=>{
|
||||
setTimeout(() => {
|
||||
const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
|
||||
if(item.hlsUrl){
|
||||
const hls = new Hls({
|
||||
maxBufferLength: 10, // 最大缓冲长度（秒）
|
||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
|
||||
})
|
||||
hls.loadSource(item.hlsUrl)
|
||||
hls.attachMedia(video)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
video.play()
|
||||
})
|
||||
hlsRefs.push(hls)
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => videoList.value,
|
||||
(val) => {
|
||||
if (val.length) {
|
||||
postVideoRemain()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
// 更新视频
|
||||
const postVideoRemain = async () => {
|
||||
timer = setInterval(() => {
|
||||
|
||||
videoList.value.forEach((items,index)=>{
|
||||
setTimeout(()=>{
|
||||
postVideoRemainApi({
|
||||
cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
|
||||
})
|
||||
},1500)
|
||||
|
||||
})
|
||||
|
||||
}, 1500)
|
||||
}
|
||||
const getVideoRegions = async () => {
|
||||
let res = await getVideoRegionsApi({
|
||||
cameraName: cameraName.value,
|
||||
businessScenicArea: params.businessScenicArea
|
||||
})
|
||||
console.log(res,11111111111111)
|
||||
regionList.value = res.data
|
||||
regionList.value.forEach((item,index)=>{
|
||||
// item.show = true
|
||||
item.videoResources=item.resourcesList[0].videoResources
|
||||
})
|
||||
regionList.value[0].show = true
|
||||
|
||||
}
|
||||
const handleRegions = (e) => {
|
||||
regionList.value[e].show = !regionList.value[e].show
|
||||
}
|
||||
const onInput = debounce((e) => {
|
||||
getVideoRegions()
|
||||
}, 500)
|
||||
let hotelChange = null;
|
||||
onMounted(()=>{
|
||||
getVideCollectCateList()
|
||||
console.log(draggable,'draggable')
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearHlsRefs()
|
||||
|
||||
})
|
||||
</script>
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
.type-item{
|
||||
// width:32.5%;
|
||||
flex: 1;
|
||||
border:vw(2) solid #0096FF;
|
||||
padding:vh(40) vw(20);
|
||||
position:relative;
|
||||
height:vh(900);
|
||||
padding-bottom:vh(20);
|
||||
.item-element{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height:100%;
|
||||
flex-wrap: wrap;
|
||||
// gap: vw(10);
|
||||
// width:vw(800);
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.type-title{
|
||||
position:absolute;
|
||||
left:vw(-5);
|
||||
top:0;
|
||||
color:#fff;
|
||||
background: url(@/assets/images/nav-l-t-bg.png) no-repeat;
|
||||
background-size: 100%;
|
||||
width:100%;
|
||||
height:vh(30);
|
||||
padding:0 vw(30);
|
||||
font-size:vw(24);
|
||||
line-height:vh(30);
|
||||
// line-height: vh(40);
|
||||
}
|
||||
}
|
||||
.type-item:first-child {
|
||||
margin-right: vw(20);
|
||||
}
|
||||
.type-item:last-child {
|
||||
margin-left: vw(20);
|
||||
}
|
||||
.item-sc{
|
||||
padding:vw(10);
|
||||
}
|
||||
.empty-box{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
font-size:vw(40);
|
||||
height:vh(750);
|
||||
justify-content: center;
|
||||
text-align:center;
|
||||
width:100%;
|
||||
color:#fff;
|
||||
}
|
||||
.action {
|
||||
&-box {
|
||||
margin-top: vh(16);
|
||||
gap: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&-item {
|
||||
padding: vw(16);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #0a4190;
|
||||
border-radius: vw(8);
|
||||
> img {
|
||||
cursor: pointer;
|
||||
width: vw(34);
|
||||
height: auto;
|
||||
}
|
||||
> span {
|
||||
margin: 0 vw(16);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.pause {
|
||||
margin: 0 vw(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
.video-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(10);
|
||||
padding: vh(34) vw(26);
|
||||
box-sizing: border-box;
|
||||
// background-image: url('@/assets/images/one-video-bg.png');
|
||||
background-size: 100% 100%;
|
||||
.videos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: vw(6);
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: vw(210);
|
||||
height: vh(380);
|
||||
padding: vh(12) vw(12);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/item-primary.png');
|
||||
background-size: 100% 100%;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> p {
|
||||
position: absolute;
|
||||
width: calc(100% - vw(24));
|
||||
height: vh(40);
|
||||
bottom: vh(12);
|
||||
background: rgba(4, 30, 69, 0.72);
|
||||
> span {
|
||||
padding-left: vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-box {
|
||||
margin-top: vh(30);
|
||||
margin-right: vw(50);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// margin-top: vh(40);
|
||||
margin-left: vw(10);
|
||||
// padding: vh(30) vw(20);
|
||||
// box-sizing: border-box;
|
||||
// background-image: url('/src/assets/images/log-v-bg.png');
|
||||
// background-size: 100% 100%;
|
||||
.pagination {
|
||||
padding: vh(10) vw(30);
|
||||
position: absolute;
|
||||
right: vw(30);
|
||||
bottom: vh(20);
|
||||
}
|
||||
}
|
||||
&-list {
|
||||
// gap: vw(3);
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
// height:vh(890);
|
||||
// width:vw(800);
|
||||
// &::-webkit-scrollbar {
|
||||
// width: vw(4); /* 滚动条的宽度 */
|
||||
// }
|
||||
// /* 滚动条轨道 */
|
||||
// &::-webkit-scrollbar-track {
|
||||
// background: 'transparent'; /* 轨道的背景色 */
|
||||
// }
|
||||
// /* 滚动条滑块 */
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
// border-radius: 5px; /* 滑块的圆角 */
|
||||
// }
|
||||
// overflow: auto;
|
||||
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
// width: vw(720);
|
||||
// width:48%;
|
||||
// margin-right: 1%;
|
||||
height: vh(380);
|
||||
padding: vh(10) vw(10);
|
||||
box-sizing: border-box;
|
||||
// margin-bottom:1%;
|
||||
background-image: url('/src/assets/images/item-primary.png');
|
||||
background-size: 100% 100%;
|
||||
&:hover {
|
||||
.video-item__follow {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-item__follow {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: vw(8);
|
||||
top: vw(8);
|
||||
z-index: 9999;
|
||||
padding: 0 vw(20);
|
||||
height: vh(24);
|
||||
text-align: center;
|
||||
line-height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
background-image: url('@/assets/images/unfollow.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item__unfollow {
|
||||
@extend .video-item__follow;
|
||||
background-image: url('@/assets/images/unfollow.png');
|
||||
}
|
||||
|
||||
&-item__inner {
|
||||
position: relative;
|
||||
}
|
||||
&-item__title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vh(10) vw(10);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 999;
|
||||
}
|
||||
&-item__title--error {
|
||||
@extend .video-item__title;
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-item__title--primary {
|
||||
@extend .video-item__title;
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-item__video {
|
||||
width: 100%;
|
||||
height: vh(366);
|
||||
object-fit: fill;
|
||||
}
|
||||
&-detail {
|
||||
margin-left: vw(10);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-detail__wrapper {
|
||||
position: relative;
|
||||
padding: vh(40) vw(50);
|
||||
width: vw(2060);
|
||||
height: vh(960);
|
||||
// background-image: url('/src/assets/images/one-video-bg.png');
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
&-detail__title {
|
||||
position: absolute;
|
||||
left: vw(50);
|
||||
right: vw(50);
|
||||
top: 40 (vh);
|
||||
z-index: 9;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(4, 30, 69, 0.5);
|
||||
}
|
||||
&-detail__video {
|
||||
width: 100%;
|
||||
height: vh(780);
|
||||
object-fit: contain;
|
||||
background-color: #000;
|
||||
}
|
||||
&-right {
|
||||
margin-left: vw(8);
|
||||
width: vw(440);
|
||||
height: vh(890);
|
||||
background: #082f5a;
|
||||
.back-box {
|
||||
cursor: pointer;
|
||||
padding-right: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(30);
|
||||
height: auto;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
& > span {
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(870);
|
||||
padding: vw(8);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(0); /* 滚动条的宽度 */
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* 轨道的背景色 */
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
|
||||
/* 当鼠标悬停在滚动条上时滑块的样式 */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 滑块的背景色 */
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: vh(10);
|
||||
padding: vw(10);
|
||||
background-image: url('@/assets/images/item-primary.png');
|
||||
background-size: 100% 100%;
|
||||
& > div {
|
||||
position: relative;
|
||||
}
|
||||
&-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vw(10);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 999;
|
||||
}
|
||||
&-title--error {
|
||||
@extend .item-title;
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-title--primary {
|
||||
@extend .item-title;
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: vh(164);
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.video-live {
|
||||
.video-rt {
|
||||
width: vw(400);
|
||||
height: vh(950);
|
||||
background: radial-gradient(
|
||||
to bottom 70% at 99% 50%,
|
||||
#0a4190 0%,
|
||||
rgba(0, 77, 136, 0.6) 100%
|
||||
);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid;
|
||||
opacity: 0.4;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||
margin-left: vw(10);
|
||||
padding: vw(20);
|
||||
.rt-v-box {
|
||||
overflow-y: auto;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
.title {
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: vh(10);
|
||||
position: relative;
|
||||
left: vw(-20);
|
||||
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;
|
||||
}
|
||||
}
|
||||
.rt-video {
|
||||
width: 100%;
|
||||
height: vh(300);
|
||||
background-image: url('/src/assets/images/v-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding: vw(20);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: vh(2);
|
||||
position: relative;
|
||||
.desc {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
background: rgba(4, 30, 69, 0.5);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.v-error-bg {
|
||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
.desc {
|
||||
background: rgba(226, 27, 27, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-nav {
|
||||
margin: 0 vw(8);
|
||||
width: vw(250);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
.bom-box {
|
||||
margin-top: vh(20);
|
||||
.search-box {
|
||||
border-radius: vw(2);
|
||||
height: vh(36);
|
||||
border: 1px solid #0096ff;
|
||||
margin: vh(10) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.search-icon {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
margin-right: vw(10);
|
||||
}
|
||||
}
|
||||
|
||||
.tree-box {
|
||||
position: relative;
|
||||
height: vh(750);
|
||||
padding: 0 vw(20);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
.tree-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-top: vh(20);
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
&:nth-child(1) {
|
||||
padding-top: 0;
|
||||
}
|
||||
&__node {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&__icon {
|
||||
margin-left: vw(-8);
|
||||
width: vw(16);
|
||||
height: auto;
|
||||
}
|
||||
&__icon-up {
|
||||
@extend .tree-item__icon;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&__name {
|
||||
padding: 0 vw(20);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
&__child {
|
||||
position: relative;
|
||||
margin-top: vh(20);
|
||||
margin-left: vw(20);
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
}
|
||||
&-top__icon {
|
||||
position: absolute;
|
||||
left: vw(-8);
|
||||
top: vh(0);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
}
|
||||
&-bottom__icon {
|
||||
position: absolute;
|
||||
left: vw(-8);
|
||||
bottom: vh(0);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
}
|
||||
&__child-item {
|
||||
padding: vh(0) vw(20) vh(20) vw(20);
|
||||
cursor: pointer;
|
||||
color: rgb(192,216,254);
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
&:nth-last-of-type(1) {
|
||||
padding: vh(0) vw(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//背景色设置为透明
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
//输入框颜色
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(36);
|
||||
font-size: vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
7
src/views/collect/index.vue
Normal file
7
src/views/collect/index.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<video-box />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import videoBox from './components/video-box'
|
||||
</script>
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="box-1" :class="homeStore.amplify?'':'coll-box'">
|
||||
<div class="header">
|
||||
<div class="header__left" @click="handlePiaoPop">
|
||||
<div class="header__left" >
|
||||
<img src="@/assets/images/ticket.png" />
|
||||
<div
|
||||
class="header__left-item"
|
||||
v-for="(item, index) in scenicStore.scenicSpotData.data"
|
||||
:key="index"
|
||||
@click="index==0?handlePop2:handlePiaoPop"
|
||||
>
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<countup :end-val="item.value" />
|
||||
@@ -118,6 +119,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog :title="'徒步客流统计'" center v-model="dialogTableVisible2">
|
||||
<div class="bom-box">
|
||||
<div class="table">
|
||||
<div class="header-title">{{gridTitle}}</div>
|
||||
<div class="header">
|
||||
<div>订票时间</div>
|
||||
<div>订票数量</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in gridData" :key="index">
|
||||
<div>{{ item.time }}</div>
|
||||
<div>{{ item.value }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
|
||||
|
||||
@@ -132,7 +151,7 @@
|
||||
import { useScenicStore } from '@/stores/scenic'
|
||||
|
||||
import { useMap } from '@/hooks/map'
|
||||
import {getPreviewUrlApi,getSpotTicketDate} from "@/api/home.js";
|
||||
import {getPreviewUrlApi,getSpotTicketDate,getSpotPassengerFlow} from "@/api/home.js";
|
||||
import pubSub from 'pubsub-js'
|
||||
const router = useRouter()
|
||||
const scenicStore = useScenicStore()
|
||||
@@ -173,9 +192,21 @@ import pubSub from 'pubsub-js'
|
||||
}
|
||||
});
|
||||
let dialogTableVisible = ref(false)
|
||||
let dialogTableVisible2 = ref(false)
|
||||
let gridData = ref([])
|
||||
let gridTitle = ref('')
|
||||
let girdAll = ref([])
|
||||
const handlePop2 = async()=>{
|
||||
console.log(5555555555)
|
||||
return false
|
||||
dialogTableVisible2.value = true
|
||||
let res = await getSpotPassengerFlow({scenicSpotId:props.scenicSpotId})
|
||||
girdAll.value = res.data
|
||||
console.log(res,'res')
|
||||
}
|
||||
const handlePiaoPop = async()=>{
|
||||
console.log(66666666666)
|
||||
return false
|
||||
dialogTableVisible.value = true
|
||||
let res = await getSpotTicketDate({scenicSpotId:props.scenicSpotId})
|
||||
gridData.value = res.data
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="box-1 mr-8">
|
||||
<Title1 title="最新舆情" />
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in hotNewList" :key="index">
|
||||
<div class="item" @click="handleHot(item)" v-for="(item, index) in hotNewList" :key="index">
|
||||
<p
|
||||
:class="{
|
||||
'status-error': item.type == '负面',
|
||||
@@ -71,6 +71,55 @@
|
||||
<word-cloud />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :title="'舆情详情'" center v-model="dialogTableVisible">
|
||||
<div class="bom-box">
|
||||
<div class="table">
|
||||
<div class="modal-body">
|
||||
<div class="m-modal">
|
||||
<!-- <div class="detail-item">
|
||||
<span class="label">标识：</span>
|
||||
<span class="value">{{ detailsHot.id }}</span>
|
||||
</div> -->
|
||||
<div class="detail-item">
|
||||
<span class="label">文章作者：</span>
|
||||
<span class="value">{{ detailsHot.newsAuthor }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">情感属性：</span>
|
||||
<span class="value">{{ detailsHot.newsEmotion }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="m-modal">
|
||||
<div class="detail-item">
|
||||
<span class="label">发布平台：</span>
|
||||
<span class="value">{{ detailsHot.platformName }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">发布时间：</span>
|
||||
<span class="value">{{ detailsHot.newsPosttime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-modal">
|
||||
|
||||
<div class="detail-item">
|
||||
<span class="label">原文链接：</span>
|
||||
<a :href="detailsHot.newsUrl" target="_blank" class="link">{{ detailsHot.newsUrl }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">文章标题：</span>
|
||||
<div class="content" v-html="detailsHot.newsTitle"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">新闻内容：</span>
|
||||
<div class="content" v-html="detailsHot.newsContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -83,7 +132,8 @@
|
||||
getLineChartApi,
|
||||
getStateApi,
|
||||
getTotalApi,
|
||||
getSpotApi
|
||||
getSpotApi,
|
||||
getGsdataDetailApi
|
||||
} from '@/api/sentiment.js'
|
||||
import { useHomeStore } from '@/stores/home'
|
||||
const homeStore = useHomeStore()
|
||||
@@ -96,7 +146,15 @@
|
||||
let stateList = ref([])
|
||||
let options = ref([])
|
||||
let params = reactive({ id: '' })
|
||||
|
||||
let dialogTableVisible = ref(false)
|
||||
let detailsHot = ref({})
|
||||
// 详情
|
||||
const handleHot = async(item)=>{
|
||||
let res = await getGsdataDetailApi(item.id)
|
||||
console.log(res)
|
||||
detailsHot.value = res.data
|
||||
dialogTableVisible.value = true
|
||||
}
|
||||
const getStop = async () => {
|
||||
let res = await getSpotApi()
|
||||
options.value = res.data
|
||||
@@ -136,6 +194,251 @@
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 16px;
|
||||
color:#fff;
|
||||
height:vh(850);
|
||||
overflow:auto;
|
||||
}
|
||||
.m-modal{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.detail-item {
|
||||
flex:1;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* .label {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
} */
|
||||
|
||||
.link {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
// font-size:vw(14);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
white-space: pre-wrap;
|
||||
line-height: 2;
|
||||
color: #fff;
|
||||
margin-top:vh(10);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
padding: 8px 16px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</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 center;
|
||||
background-size: 100% 100%;
|
||||
// width:vw(1500);
|
||||
height:vh(880);
|
||||
// overflow:auto;
|
||||
}
|
||||
: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">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user