Compare commits

..

2 Commits

Author SHA1 Message Date
chenchenzai ffbf434cd7 Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev 2022-11-21 19:12:05 +08:00
chenchenzai 2ee35c6814 西海岸视频地图修改1121 2022-11-21 19:10:39 +08:00
10 changed files with 104 additions and 41 deletions

View File

@ -22,7 +22,7 @@ var _mapConfig = {}
CURRENT_MAP_OPTIONS: { CURRENT_MAP_OPTIONS: {
// crs: CRS_4490, // crs: CRS_4490,
center: [35.96, 120.19], center: [35.96, 120.19],
maxZoom: 13, maxZoom: 15,
minZoom: 0, minZoom: 0,
zoom: 5, zoom: 5,
}, },

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1680,7 +1680,7 @@ export function MapFun(mapObj) {
let layers = null; let layers = null;
let clickDataList = []; let clickDataList = [];
// //
layers = createMarkerClusterLayer() layers = createMarkerClusterLayer('', map)
const icon1 = createDefaultFeatureStyle({ const icon1 = createDefaultFeatureStyle({
img: url, img: url,
iconSize: [33, 33], iconSize: [33, 33],

View File

@ -39,11 +39,9 @@ function updateProgressBar(processed, total, elapsed, layersArray) {
* @param layerClassName 据此判断是否需要自定义聚合图层的样式 * @param layerClassName 据此判断是否需要自定义聚合图层的样式
* @returns {*} * @returns {*}
*/ */
function createMarkerClusterLayer(layerClassName) { function createMarkerClusterLayer(layerClassName, mapObj) {
let array = []; let array = [];
let markerClusterLayer = null let markerClusterLayer = null
//let currentZoom = this.map._zoom
//console.log('zzzzzz', currentZoom);
if (layerClassName) { if (layerClassName) {
// //
markerClusterLayer = L.markerClusterGroup({ markerClusterLayer = L.markerClusterGroup({
@ -81,18 +79,23 @@ function createMarkerClusterLayer(layerClassName) {
// //
showCoverageOnHover: false, showCoverageOnHover: false,
// //
zoomToBoundsOnClick: false, zoomToBoundsOnClick: true,
maxClusterRadius: 80, maxClusterRadius: 80,
}) })
markerClusterLayer.on('clusterclick', function(a) { markerClusterLayer.on('clusterclick', function(a) {
//console.log('cluster ' + a.layer.getAllChildMarkers()); //console.log('cluster ' + a.layer.getAllChildMarkers().length);
if (a.layer.getAllChildMarkers().length < 50) {
let clusterList = []; let clusterList = [];
for (var i = 0; i < a.layer.getAllChildMarkers().length; i++) { for (var i = 0; i < a.layer.getAllChildMarkers().length; i++) {
//console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].resourceData); //console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].resourceData);
clusterList.push(a.layer.getAllChildMarkers()[i].resourceData); clusterList.push(a.layer.getAllChildMarkers()[i].resourceData);
} }
//console.log('clusterList ' + a.layer.getAllChildMarkers(array, true)); //console.log('clusterList ' + a.layer.getAllChildMarkers(array, true));
//console.log('zzzzzzzzz', mapObj.getZoom(), mapObj.getMaxZoom());
if (mapObj.getZoom() == mapObj.getMaxZoom()) {
mybus.emit('openOperationPopup', clusterList); mybus.emit('openOperationPopup', clusterList);
}
}
}); });
} }
return markerClusterLayer return markerClusterLayer

View File

@ -13,6 +13,10 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
videoUrl:{ videoUrl:{
type: String, type: String,
default: '', default: '',
},
index:{
type: Number,
default: 0,
} }
}, },
data() { data() {
@ -64,7 +68,9 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
}) })
}, },
createPlayer () { createPlayer () {
//console.log('this.index',this.index);
this.player = new window.JSPlugin({ this.player = new window.JSPlugin({
//szId: 'player'+this.index,
szId: 'player', szId: 'player',
szBasePath: "/util/", //public/jsjs szBasePath: "/util/", //public/jsjs
iMaxSplit: 4, iMaxSplit: 4,

View File

@ -13,6 +13,7 @@
import { reactive, ref, watch, defineProps } from 'vue' import { reactive, ref, watch, defineProps } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const oldValue1= ref('') const oldValue1= ref('')
const props = defineProps({ const props = defineProps({
@ -32,6 +33,13 @@ const previousPage = () => {
const detailName = ref("应用资源") const detailName = ref("应用资源")
const goToDetailsPageconetent = () =>{
let pathData = {
path: '/DetailsPageconetent',
};
mybus.emit('changeMenuStyle',pathData);
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

View File

@ -2601,8 +2601,9 @@
} }
.camera-popup{ .camera-popup{
.ant-modal-body { .ant-modal-body {
height: 700px !important; height: 720px !important;
overflow-y: auto; overflow-y: hidden;
overflow-x: hidden;
padding:14px; padding:14px;
} }
.ant-modal-footer{ .ant-modal-footer{

View File

@ -5,12 +5,14 @@
<a-carousel arrows> <a-carousel arrows>
<template #prevArrow> <template #prevArrow>
<div class="custom-slick-arrow" style="left: 10px; z-index: 1"> <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
<left-circle-outlined /> <!-- <div style="background-color:red">11111111</div> -->
<div class="arrow-left" @click="handlePrev()"></div>
</div> </div>
</template> </template>
<template #nextArrow> <template #nextArrow>
<div class="custom-slick-arrow" style="right: 10px"> <div class="custom-slick-arrow" style="right: 10px">
<right-circle-outlined /> <!-- <right-circle-outlined /> -->
<div class="arrow-right" @click="handleNext()"></div>
</div> </div>
</template> </template>
<div <div
@ -18,27 +20,21 @@
:width="800" :width="800"
:height="400" :height="400"
:key="url" :key="url"
:src="url"
> >
<div class="video-content">
<h5-player></h5-player>
</div> </div>
<!-- <div style="color:#000000"> </a-carousel>
<div class="video-content" style=" z-index: 1"> <div class="operation-content" style="position:ab">
<div class="video-content">
<h5-player :video-url="videoUrl"></h5-player> <h5-player :video-url="videoUrl"></h5-player>
</div> </div>
</div> --> <div class="text-label">
<span>{{defaultIndex}}</span>/<span>{{cameraDataList.length}}</span>
</div>
<div class="footer-button"> <div class="footer-button">
<a-button type="primary" @click="applyNow(url)">立即申请</a-button> <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
<a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button> <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
</div> </div>
<!-- <div class="footer-button">
<a-button type="primary">立即申请</a-button>
<a-button type="primary" style="margin-left:20px">加入申购车</a-button>
</div> -->
</div> </div>
</a-carousel>
<!-- -->
</div> </div>
</div> </div>
</template> </template>
@ -79,7 +75,8 @@
return { return {
openVideo: false, openVideo: false,
videoStream: '', videoStream: '',
videoUrl:'' //url videoUrl:'', //url
defaultIndex:0//
} }
}, },
methods: { methods: {
@ -99,6 +96,28 @@
addIntoCart(item){ addIntoCart(item){
console.log('addIntoCartaddIntoCart',item); console.log('addIntoCartaddIntoCart',item);
mybus.emit('selectCamera', item) mybus.emit('selectCamera', item)
},
handlePrev(){
let maxLength = this.cameraDataList.length-1;
this.defaultIndex = this.defaultIndex - 1;
console.log('opopopop',this.cameraDataList[maxLength]);
if(this.defaultIndex === 0){
console.log('opopopop',this.cameraDataList[maxLength]);
//channelIdurlH5
//this.videoUrl =
} else{
console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
}
},
handleNext(){
this.defaultIndex = this.defaultIndex + 1;
if(this.defaultIndex === this.cameraDataList.length){
console.log('opopopop',this.cameraDataList[0]);
}else{
console.log('opopopop',this.cameraDataList[this.defaultIndex]);
}
} }
}, },
} }
@ -112,6 +131,7 @@
padding-bottom: 20px; padding-bottom: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.content { .content {
// width: 280px; // width: 280px;
min-height: 100px; min-height: 100px;
@ -162,23 +182,37 @@
margin: 8px auto 0; margin: 8px auto 0;
cursor: pointer; cursor: pointer;
} }
.ant-carousel { .operation-content{
width: 960px; position: absolute;
//height: 700px; z-index: 800;
margin-left: 8px; top: 0.1rem;
//right: 0.1rem;
left:0.8rem;
.text-label{
width:800px;
height:30px;
margin-top:10px;
text-align:center;
font-size: 18px;
}
.video-content{ .video-content{
width: 950px; width: 750px;
height:600px; height:600px;
text-align: left; text-align: left;
padding: 5px; padding: 5px;
} }
.footer-button{ .footer-button{
width: 950px; width: 750px;
//height:50px; //height:50px;
text-align: center; text-align: center;
padding-top:20px; padding-top:5px;
} }
} }
.ant-carousel {
width: 960px;
//height: 700px;
margin-left: 8px;
}
.ant-carousel :deep(.slick-slide) { .ant-carousel :deep(.slick-slide) {
text-align: center; text-align: center;
height: 650px; height: 650px;
@ -195,9 +229,19 @@
height: 50px; height: 50px;
font-size: 50px; font-size: 50px;
color: #fff; color: #fff;
background-color: rgba(31, 45, 61, 0.11); //background-color: rgba(31, 45, 61, 0.11);
opacity: 0.8; opacity: 0.8;
z-index: 1; z-index: 1;
.arrow-left{
width:48px;
height:48px;
background-image: url('~@/assets/home/arrow-left.png');
}
.arrow-right{
width:48px;
height:48px;
background-image: url('~@/assets/home/arrow-right.png');
}
} }
.ant-carousel :deep(.custom-slick-arrow:before) { .ant-carousel :deep(.custom-slick-arrow:before) {
display: none; display: none;

View File

@ -181,6 +181,7 @@ import { ElMessage } from 'element-plus'
this.hiMap.mapObj, this.hiMap.mapObj,
this.hiMapFun this.hiMapFun
) )
//console.log('this.hiMap.mapObj',this.hiMap.mapObj.map.getZoom());
// this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16) // this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
this.addressMatchUrl = window.SITE_CONFIG.POI_URL this.addressMatchUrl = window.SITE_CONFIG.POI_URL
// //
@ -548,7 +549,7 @@ import { ElMessage } from 'element-plus'
pageSize: 30000, pageSize: 30000,
type: 0, type: 0,
borderPolygonList: [] borderPolygonList: []
} }
getCameraByCondition(params).then((res) => { getCameraByCondition(params).then((res) => {
// let t1 = new Date().getTime(); // let t1 = new Date().getTime();
// this.cameraAllData = res.data.data // this.cameraAllData = res.data.data