4.2
This commit is contained in:
BIN
src/assets/images/n-icon.png
Normal file
BIN
src/assets/images/n-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@@ -3,6 +3,7 @@
|
|||||||
<div v-if="videoLog == 1" class="video-wrapper">
|
<div v-if="videoLog == 1" class="video-wrapper">
|
||||||
<div class="video-list">
|
<div class="video-list">
|
||||||
<div
|
<div
|
||||||
|
v-if="videoList?.length"
|
||||||
class="video-item"
|
class="video-item"
|
||||||
v-for="(item, index) in videoList"
|
v-for="(item, index) in videoList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@@ -36,6 +37,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="empty-box" v-else>
|
||||||
|
未接入
|
||||||
|
<!-- <el-empty :image="emptyIco" description="暂无数据" /> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@@ -133,6 +138,7 @@
|
|||||||
} from '@/api/monitor'
|
} from '@/api/monitor'
|
||||||
import pubSub from 'pubsub-js'
|
import pubSub from 'pubsub-js'
|
||||||
import Hls from 'hls.js'
|
import Hls from 'hls.js'
|
||||||
|
import emptyIco from '@/assets/images/n-icon.png'
|
||||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||||
const UP = 'UP' // 上转
|
const UP = 'UP' // 上转
|
||||||
@@ -312,6 +318,16 @@
|
|||||||
</script>
|
</script>
|
||||||
<style></style>
|
<style></style>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.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 {
|
.action {
|
||||||
&-box {
|
&-box {
|
||||||
margin-top: vh(16);
|
margin-top: vh(16);
|
||||||
|
|||||||
@@ -323,10 +323,10 @@
|
|||||||
import BigMap from './big-map'
|
import BigMap from './big-map'
|
||||||
import traMap from './tra-map'
|
import traMap from './tra-map'
|
||||||
import TrafficFlow from './traffic-flow'
|
import TrafficFlow from './traffic-flow'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import { useMap } from '@/hooks/map'
|
import { useMap } from '@/hooks/map'
|
||||||
import { useScenicStore } from '@/stores/scenic'
|
import { useScenicStore } from '@/stores/scenic'
|
||||||
|
const router = useRouter()
|
||||||
const scenicStore = useScenicStore()
|
const scenicStore = useScenicStore()
|
||||||
const { initMap, addMarker, marker } = useMap()
|
const { initMap, addMarker, marker } = useMap()
|
||||||
|
|
||||||
@@ -339,7 +339,8 @@
|
|||||||
let latitude = ref('')
|
let latitude = ref('')
|
||||||
let longitude = ref('')
|
let longitude = ref('')
|
||||||
const hanldeLookMap = ()=>{
|
const hanldeLookMap = ()=>{
|
||||||
traMapShow.value = true
|
router.replace('/traffic')
|
||||||
|
// traMapShow.value = true
|
||||||
}
|
}
|
||||||
const garageList = computed(() => {
|
const garageList = computed(() => {
|
||||||
return scenicStore.stopCarData.headList
|
return scenicStore.stopCarData.headList
|
||||||
|
|||||||
@@ -130,12 +130,43 @@
|
|||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
val[0].forEach((item,index)=>{
|
val[0].forEach((item,index)=>{
|
||||||
addMarker(mapIcon,[item.longitude,item.latitude],[40, 60])
|
addMarker(mapIcon,[item.longitude,item.latitude],[40, 60])
|
||||||
|
|
||||||
marker.value.addEventListener('click', (e) => {
|
marker.value.addEventListener('click', (e) => {
|
||||||
console.log(item,'111111111111')
|
console.log(item,'111111111111')
|
||||||
cameraIndexCode.value = item.cameraIndexCode
|
cameraIndexCode.value = item.cameraIndexCode
|
||||||
isCollect.value = item.isCollect
|
isCollect.value = item.isCollect
|
||||||
getPreviewUrl(item.cameraIndexCode)
|
getPreviewUrl(item.cameraIndexCode)
|
||||||
})
|
})
|
||||||
|
var opts = {
|
||||||
|
position: new BMapGL.Point(item.longitude, item.latitude), // 指定文本标注所在的地理位置
|
||||||
|
offset: new BMapGL.Size(-100, 30) // 设置文本偏移量
|
||||||
|
};
|
||||||
|
// 创建文本标注对象
|
||||||
|
var label = new BMapGL.Label(item.cameraName, opts);
|
||||||
|
// 自定义文本标注样式
|
||||||
|
label.setStyle({
|
||||||
|
display:'block',
|
||||||
|
color: '#0b61b4',
|
||||||
|
borderRadius: '0',
|
||||||
|
borderColor: 'none',
|
||||||
|
padding: '10px',
|
||||||
|
border:0,
|
||||||
|
fontWeight:'bold',
|
||||||
|
fontFamily: '微软雅黑'
|
||||||
|
});
|
||||||
|
marker.value.addEventListener('mouseover', (e) => {
|
||||||
|
label.setStyle({
|
||||||
|
display:'block'
|
||||||
|
});
|
||||||
|
map.value.addOverlay(label);
|
||||||
|
})
|
||||||
|
marker.value.addEventListener('mouseout', (e) => {
|
||||||
|
console.log('11111')
|
||||||
|
label.setStyle({
|
||||||
|
display:'none'
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user