up
This commit is contained in:
@ -7,7 +7,28 @@
|
||||
<span>摄像头选择</span>
|
||||
</div>
|
||||
<div class="search">
|
||||
<el-input class="seach_input" v-model="input" placeholder="请输入要筛选摄像头名" clearable />
|
||||
<el-input
|
||||
class="seach_input"
|
||||
v-model="input"
|
||||
placeholder="请输入要筛选摄像头名"
|
||||
clearable
|
||||
/>
|
||||
<el-select
|
||||
popper-class="selectCity"
|
||||
class="seach_input"
|
||||
v-model="street"
|
||||
placeholder="请选择要筛选街道"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="cameraDiv">
|
||||
<p v-for="(item, index) in cameraArr" :key="index">{{ item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
@ -47,6 +68,26 @@
|
||||
<div class="title">
|
||||
<span>视频监控</span>
|
||||
</div>
|
||||
<div class="videoDiv">
|
||||
<div>
|
||||
<vue3VideoPlay
|
||||
v-bind="videopage"
|
||||
poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<vue3VideoPlay
|
||||
v-bind="videopage"
|
||||
poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<vue3VideoPlay
|
||||
v-bind="videopage"
|
||||
poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-tooltip
|
||||
@ -129,6 +170,57 @@ const formLandRef = ref([]);
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
const street = ref('');
|
||||
let cameraArr = ref(['摄像头名称1', '摄像头名称1', '摄像头名称1']);
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
];
|
||||
|
||||
const videopage = reactive({
|
||||
width: '100%', //播放器宽度
|
||||
height: '100%', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: 'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: false, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// 'audioTrack',
|
||||
'quality',
|
||||
// 'speedRate',
|
||||
'volume',
|
||||
// 'setting',
|
||||
// 'pip',
|
||||
// 'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => Township.arr,
|
||||
@ -674,7 +766,7 @@ function villageClick(layers, xy, level, cartographic, movement) {
|
||||
// customName地图服务自定义属性名
|
||||
function addvillage(CQL_FILTER, customName) {
|
||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||||
url: `${serverAPI.geoserverUrl}/shuzisannong/wms`,
|
||||
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
@ -1168,11 +1260,39 @@ $height: calc(100vh - 100px);
|
||||
background: rgba(22, 94, 102, 1);
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);
|
||||
// margin-right: 10px;
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.cameraDiv {
|
||||
p {
|
||||
opacity: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(38, 255, 255, 0.15) 0%,
|
||||
rgba(38, 255, 255, 0.01) 100%
|
||||
);
|
||||
height: 48px;
|
||||
border-width: 0px 0px 0px 0px;
|
||||
border-style: solid;
|
||||
border-color: rgba(217, 231, 255, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px 15px 10px 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leftbottom {
|
||||
@ -1274,7 +1394,9 @@ $height: calc(100vh - 100px);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.videoDiv > div {
|
||||
padding: 10px;
|
||||
}
|
||||
.ProgressBar {
|
||||
width: 100%;
|
||||
height: 9px;
|
||||
@ -1309,6 +1431,9 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
@ -1482,12 +1607,18 @@ $height: calc(100vh - 100px);
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
// .el-popper {
|
||||
// border: none !important;
|
||||
// background: transparent !important;
|
||||
// }
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
// .el-popper__arrow::before {
|
||||
// background: rgba(41, 255, 255, 0.7) !important;
|
||||
// }
|
||||
// .el-popper__arrow::before {
|
||||
// background: rgba(41, 255, 255, 0.7) !important;
|
||||
// }
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user