merge
parent
7e31b6f37b
commit
475c57c440
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,16 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [118.429056,35.387537]
|
||||
},
|
||||
"properties": {
|
||||
"name":"沂南县砖埠镇东岳庄村北可见光",
|
||||
"playUrl":"http://221.2.83.254:7012/live/37130100181328000001.m3u8"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import WKT from "terraformer-wkt-parser"
|
||||
import { wktToGeoJSON,geojsonToWKT } from "@terraformer/wkt"
|
||||
|
||||
|
||||
|
||||
const WktToGeojson = (wktData)=> {
|
||||
// return WKT.parse(wktData)
|
||||
return wktToGeoJSON(wktData);
|
||||
}
|
||||
|
||||
const GeojsonToWkt = (geojsonData)=> {
|
||||
// return WKT.convert(geojsonData)
|
||||
console.log("geojsonData",geojsonData)
|
||||
return geojsonToWKT(geojsonData)
|
||||
}
|
||||
|
||||
|
||||
export {WktToGeojson,GeojsonToWkt}
|
||||
@ -0,0 +1,80 @@
|
||||
export enum MapboxConfig {
|
||||
ACCESS_TOKEN = 'pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg',
|
||||
// ACCESS_TOKEN = "1234",
|
||||
TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
|
||||
// add more config options here
|
||||
}
|
||||
export const MapboxDefaultStyle = {
|
||||
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
|
||||
version: 8,
|
||||
sources: {
|
||||
'dianzi': {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
`https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom:18,
|
||||
maxzoom:24,
|
||||
},
|
||||
'dianzi-biaozhu': {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
'raster-tiles': {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
`https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
|
||||
],
|
||||
tileSize: 256,
|
||||
minzoom:0,
|
||||
maxzoom:18,
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: 'dianzi-biaozhu',
|
||||
type: 'raster',
|
||||
source: 'dianzi-biaozhu',
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
},{
|
||||
id: 'tdt-img-tiles',
|
||||
type: 'raster',
|
||||
source: 'raster-tiles',
|
||||
minzoom: 0,
|
||||
maxzoom: 18,
|
||||
},{
|
||||
id: 'dianzi',
|
||||
type: 'raster',
|
||||
source: 'dianzi',
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
minzoom: 18,
|
||||
maxzoom: 24,
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
export const MapControlConfig = {
|
||||
DrawPoint: {
|
||||
handler: 'handlerDrawPoint',
|
||||
icon: '/point.png',
|
||||
title: '绘制点',
|
||||
},
|
||||
DrawLineString: {
|
||||
handler: 'handlerDrawLineString',
|
||||
icon: '/line.png',
|
||||
title: '绘制线',
|
||||
},
|
||||
DrawPolygon: {
|
||||
handler: 'handlerDrawPolygon',
|
||||
icon: '/polygon.png',
|
||||
title: '绘制面',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
.mapboxgl-ctrl-logo {
|
||||
display: none !important;
|
||||
}
|
||||
.map-container {
|
||||
position: relative;
|
||||
}
|
||||
.map-box,
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.map-control {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
.map-control img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
.mapboxgl-ctrl-logo {
|
||||
display: none !important;
|
||||
}
|
||||
.map-container{
|
||||
position: relative;
|
||||
}
|
||||
.map-box,
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-control {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import { ControlOutlined } from '@ant-design/icons-vue';
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
// js生成UUID
|
||||
const generateUUID = ()=>{
|
||||
|
||||
var d = new Date().getTime(); //Timestamp
|
||||
var d2 = (performance && performance.now && (performance.now()*1000)) || 0;
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = Math.random() * 16;
|
||||
if(d > 0) {
|
||||
r = (d + r)%16 | 0;
|
||||
d = Math.floor(d/16);
|
||||
} else {
|
||||
r = (d2 + r)%16 | 0;
|
||||
d2 = Math.floor(d2/16);
|
||||
}
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
// js 针对后端post接口参数拼接到url的情况 将json参数转换为 ?key1=value1&key2=value2
|
||||
const ObjectToUrl = (obj)=>{
|
||||
let params = "?";
|
||||
for(let item in obj){
|
||||
params+=item+"="+obj[item]+"&"
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
|
||||
// turf获取几何图形的中心
|
||||
const getGeometryCenter = (geometry)=>{
|
||||
let coordinates = [];
|
||||
switch(geometry.geometry.type.toUpperCase()){
|
||||
case "POINT":
|
||||
|
||||
break;
|
||||
case "MULTIPOINT":
|
||||
|
||||
break;
|
||||
case "LINESTRING":
|
||||
|
||||
break;
|
||||
case "MULTILINESTRING":
|
||||
|
||||
break;
|
||||
case "POLYGON":
|
||||
coordinates = geometry.geometry.coordinates
|
||||
break;
|
||||
case "MULTIPOLYGON":
|
||||
coordinates = geometry.geometry.coordinates[0]
|
||||
break;
|
||||
}
|
||||
|
||||
// let polygon = turf.polygon(coordinates);
|
||||
// let center = turf.centerOfMass(polygon);
|
||||
return [coordinates[0][0][0],coordinates[0][0][1]];
|
||||
// return [117.732878836452,35.1320944773393]
|
||||
}
|
||||
|
||||
export { generateUUID,ObjectToUrl,getGeometryCenter }
|
||||
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="layer-list-container" >
|
||||
<div class="title">
|
||||
图层
|
||||
</div>
|
||||
<p class="cate-name">数据图层</p>
|
||||
<div class="case-list">
|
||||
<div class="case-item" v-for="item in dataLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="cate-name">历史影像</p>
|
||||
<div class="case-list">
|
||||
<div class="case-item" v-for="item in historyLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<a-empty v-if="historyLayerList.length <= 0" />
|
||||
</div>
|
||||
|
||||
<p class="cate-name">专题图层</p>
|
||||
|
||||
<div class="case-list">
|
||||
<div class="case-item" v-for="item in speciaLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<a-empty v-if="speciaLayerList.length <= 0" />
|
||||
</div>
|
||||
|
||||
|
||||
<p class="cate-name">地图底图</p>
|
||||
<div class="case-list">
|
||||
|
||||
<a-radio-group v-model:value="baseLayer">
|
||||
<div class="case-item" v-for="item in baseLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-radio :value="item.value">
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-radio>
|
||||
</div>
|
||||
</a-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
defineEmits,
|
||||
ref,
|
||||
defineExpose,
|
||||
} from 'vue'
|
||||
|
||||
import {getIntersectTif } from '@/api/tiankongdi';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
const dataLayerList = ref([
|
||||
{
|
||||
name:"数据图层",
|
||||
checked:true,
|
||||
},
|
||||
{
|
||||
name:"视频监控",
|
||||
checked:false,
|
||||
value:"JianKong"
|
||||
}
|
||||
])
|
||||
|
||||
const historyLayerList = ref([
|
||||
{
|
||||
name:"费县影像图层",
|
||||
checked:false,
|
||||
}
|
||||
])
|
||||
const speciaLayerList = ref([
|
||||
{
|
||||
name:"地类图层",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
name:"三调图层",
|
||||
checked:false,
|
||||
}
|
||||
])
|
||||
|
||||
const baseLayerList = ref([
|
||||
{
|
||||
name:"导航地图",
|
||||
checked:false,
|
||||
value:"daohang",
|
||||
},{
|
||||
name:"卫星地图",
|
||||
checked:false,
|
||||
value:"weixing",
|
||||
},{
|
||||
name:"白板地图",
|
||||
checked:false,
|
||||
value:"baiban",
|
||||
},
|
||||
])
|
||||
|
||||
const baseLayer = ref("weixing")
|
||||
|
||||
const emits = defineEmits(['changeTifLayer'])
|
||||
|
||||
const handlerQueryIntersectTif = (wkt:string)=>{
|
||||
|
||||
let query = {
|
||||
TargetShape:wkt,
|
||||
page:1,
|
||||
limit:10,
|
||||
key:null
|
||||
}
|
||||
|
||||
getIntersectTif(query).then(res=>{
|
||||
if(res.items.length>0){
|
||||
res.items?.forEach((item,index)=>{
|
||||
res.items[index].checked = false;
|
||||
})
|
||||
layerList.value = res.items;
|
||||
}else{
|
||||
createMessage.error("当前范围内暂无查询数据！");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const layerChange = (item)=>{
|
||||
emits("changeTifLayer",item);
|
||||
}
|
||||
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
// handlerQueryIntersectTif
|
||||
});
|
||||
|
||||
</script>
|
||||
<style type="less" scoped>
|
||||
|
||||
.layer-list-container {
|
||||
width: 208px;
|
||||
min-height: 340px;
|
||||
background: #041b36;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
&::before {
|
||||
content: '';
|
||||
height: 70%;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
background: url('/videosupervision/main-left.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
height: 70%;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
background: url('/videosupervision/main-right.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-image: url('/videosupervision/title.png');
|
||||
background-size: 100% 100%;
|
||||
line-height: 40px;
|
||||
text-indent: 18px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.switch-button {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.case-list {
|
||||
padding: 10px 24px;
|
||||
overflow: auto;
|
||||
.case-item {
|
||||
cursor:pointer;
|
||||
border-bottom: 1px dashed #1d60b4;
|
||||
color:#fff;
|
||||
padding: 5px 0;
|
||||
img {
|
||||
width: 15px;
|
||||
margin-right:12px;
|
||||
}
|
||||
span {
|
||||
color: #7ebbff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .ant-empty{
|
||||
margin-top:110px;
|
||||
}
|
||||
::v-deep .ant-empty-description{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.cate-name{
|
||||
color:#fff;
|
||||
padding:12px;
|
||||
font-size:14px;
|
||||
margin-bottom:0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [118.429056,35.387537]
|
||||
},
|
||||
"properties": {
|
||||
"name":"沂南县砖埠镇东岳庄村北可见光",
|
||||
"playUrl":"http://221.2.83.254:7012/live/37130100181328000001.m3u8"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div class="layer-list-container" >
|
||||
<div class="title">
|
||||
图层资源
|
||||
</div>
|
||||
<div class="layers-container">
|
||||
<p class="cate-name">数据图层</p>
|
||||
<div class="case-list">
|
||||
<div class="case-item" v-for="item in dataLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'dataLayer')" >
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="cate-name">
|
||||
历史影像
|
||||
<div style="float:right;position:relative;top:-4px;">
|
||||
<a-button style="flaot:right;" @click="drawPolygon" v-if="!drawState" size="small" type="primary">查询影像</a-button>
|
||||
<a-button style="flaot:right;" @click="cancleDrawPolygon" v-else size="small" type="primary">取消查询</a-button>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<div class="case-list">
|
||||
<div class="case-item" v-for="item in historyLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'historyLayer')" >
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<a-empty size="small" :description="'暂无历史影像数据'" v-if="historyLayerList.length <= 0" />
|
||||
</div>
|
||||
|
||||
<p class="cate-name">专题图层</p>
|
||||
|
||||
<div class="case-list">
|
||||
<div class="case-item" v-for="item in speciaLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'speciaLayer')" >
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<a-empty size="small" :description="'暂无专题图层数据'" v-if="speciaLayerList.length <= 0" />
|
||||
|
||||
</div>
|
||||
|
||||
<p class="cate-name">地图底图</p>
|
||||
<div class="case-list">
|
||||
|
||||
<a-radio-group v-model:value="baseLayer">
|
||||
<div class="case-item" v-for="item in baseLayerList" :key="index" >
|
||||
<img src="/statistical/prove-icon.png" alt="" />
|
||||
<a-radio :value="item.value" @change="layerChange(item,'baseLayer')">
|
||||
<span style="color:#fff;">{{item.name}}</span>
|
||||
</a-radio>
|
||||
</div>
|
||||
</a-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
defineEmits,
|
||||
ref,
|
||||
defineExpose,
|
||||
} from 'vue'
|
||||
|
||||
import {getIntersectTif } from '@/api/tiankongdi';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
const generateUUID = ()=>{
|
||||
|
||||
var d = new Date().getTime(); //Timestamp
|
||||
var d2 = (performance && performance.now && (performance.now()*1000)) || 0;
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = Math.random() * 16;
|
||||
if(d > 0) {
|
||||
r = (d + r)%16 | 0;
|
||||
d = Math.floor(d/16);
|
||||
} else {
|
||||
r = (d2 + r)%16 | 0;
|
||||
d2 = Math.floor(d2/16);
|
||||
}
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
const dataLayerList = ref([
|
||||
{
|
||||
id:"Data",
|
||||
name:"数据图层",
|
||||
checked:true,
|
||||
},
|
||||
{
|
||||
id:"Monitor",
|
||||
name:"视频监控",
|
||||
checked:false,
|
||||
}
|
||||
])
|
||||
|
||||
const historyLayerList = ref([
|
||||
// {
|
||||
// id:generateUUID(),
|
||||
// name:"费县高清影像",
|
||||
// url:"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
// checked:false,
|
||||
// }
|
||||
])
|
||||
const speciaLayerList = ref([
|
||||
// {
|
||||
// id:generateUUID(),
|
||||
// name:"地类图层",
|
||||
// url:"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
// checked:false,
|
||||
// },
|
||||
// {
|
||||
// id:generateUUID(),
|
||||
// name:"三调图层",
|
||||
// url:"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
// checked:false,
|
||||
// }
|
||||
])
|
||||
|
||||
const baseLayer = ref("2")
|
||||
|
||||
const baseLayerList = ref([
|
||||
{
|
||||
id:1,
|
||||
name:"导航地图",
|
||||
checked:false,
|
||||
value:"1"
|
||||
},{
|
||||
id:2,
|
||||
name:"卫星地图",
|
||||
checked:false,
|
||||
value:"2"
|
||||
},{
|
||||
id:3,
|
||||
name:"白板地图",
|
||||
checked:false,
|
||||
value:"3",
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
const emits = defineEmits(['changeTifLayer',"drawPolygon","cancleDrawPolygon"])
|
||||
|
||||
const handlerQueryIntersectTif = (wkt:string)=>{
|
||||
|
||||
let query = {
|
||||
TargetShape:wkt,
|
||||
page:1,
|
||||
limit:10,
|
||||
key:null
|
||||
}
|
||||
|
||||
getIntersectTif(query).then(res=>{
|
||||
if(res.items.length>0){
|
||||
res.items?.forEach((item,index)=>{
|
||||
res.items[index].checked = false;
|
||||
res.items[index].id = generateUUID();
|
||||
res.items[index].url = res.items[index].accessUrl;
|
||||
})
|
||||
historyLayerList.value = res.items;
|
||||
}else{
|
||||
createMessage.error("当前范围内暂无查询数据！");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const layerChange = (item,type)=>{
|
||||
item.type = type;
|
||||
emits("changeTifLayer",item);
|
||||
}
|
||||
|
||||
const drawState = ref(false);
|
||||
|
||||
const cancleDrawPolygon = ()=>{
|
||||
drawState.value = false;
|
||||
emits("cancleDrawPolygon")
|
||||
}
|
||||
const drawPolygon = (state)=>{
|
||||
drawState.value = true;
|
||||
emits("drawPolygon",state)
|
||||
}
|
||||
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
handlerQueryIntersectTif
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style type="less" scoped>
|
||||
|
||||
.layer-list-container {
|
||||
width: 208px;
|
||||
height: 600px;
|
||||
background: #041b36;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
&::before {
|
||||
content: '';
|
||||
height: 70%;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
background: url('/videosupervision/main-left.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
height: 70%;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
background: url('/videosupervision/main-right.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.layers-container{
|
||||
width:100%;
|
||||
height: calc( 100% - 60px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-image: url('/videosupervision/title.png');
|
||||
background-size: 100% 100%;
|
||||
line-height: 40px;
|
||||
text-indent: 18px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.switch-button {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.case-list {
|
||||
padding: 10px 24px;
|
||||
overflow: auto;
|
||||
.case-item {
|
||||
cursor:pointer;
|
||||
border-bottom: 1px dashed #1d60b4;
|
||||
color:#fff;
|
||||
padding: 5px 0;
|
||||
img {
|
||||
width: 15px;
|
||||
margin-right:12px;
|
||||
}
|
||||
span {
|
||||
color: #7ebbff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .ant-empty-image{
|
||||
height:50px;
|
||||
position:relative;
|
||||
left:-26px;
|
||||
}
|
||||
::v-deep .ant-empty-description{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.cate-name{
|
||||
color:#fff;
|
||||
padding:12px;
|
||||
font-size:14px;
|
||||
margin-bottom:0px;
|
||||
background:rgba(0, 0, 0, 0.2)
|
||||
}
|
||||
|
||||
::v-deeep .ant-empty-image img{
|
||||
width:50px;
|
||||
height:50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="uav-container">
|
||||
<div class="title">
|
||||
视频监控
|
||||
</div>
|
||||
<div v-show="isShowPlayer">
|
||||
<video
|
||||
class="TCPlayer-video-contaiiner"
|
||||
id="TCPlaeyrContainer"
|
||||
width="235px"
|
||||
height="178px"
|
||||
autoplay
|
||||
preload="auto"
|
||||
playsinline
|
||||
muted
|
||||
webkit-playsinline
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {ref,onMounted,defineProps,onBeforeUnmount} from 'vue';
|
||||
|
||||
const props = defineProps(["playUrl"])
|
||||
|
||||
let player = null;
|
||||
|
||||
const isShowPlayer = ref(false);
|
||||
|
||||
|
||||
function handlerPlayVideo(item){
|
||||
|
||||
isShowPlayer.value = true;
|
||||
|
||||
if (player) {
|
||||
player.src(props.playUrl);
|
||||
} else {
|
||||
player = TCPlayer("TCPlaeyrContainer", {});
|
||||
player.src(props.playUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化视频控件
|
||||
onMounted(()=>{
|
||||
setTimeout(function(){
|
||||
handlerPlayVideo(123);
|
||||
},1000)
|
||||
})
|
||||
|
||||
// 销毁视频控件
|
||||
onBeforeUnmount(()=>{
|
||||
player.dispose();
|
||||
player = null;
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style type="less" scoped>
|
||||
|
||||
.uav-container{
|
||||
width: 418px;
|
||||
height: 300px;
|
||||
background:#041B36;
|
||||
position: relative;
|
||||
|
||||
.title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background-image:url("/videosupervision/title.png");
|
||||
background-size:100% 100%;
|
||||
line-height:40px;
|
||||
text-indent:18px;
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
}
|
||||
.switch-button{
|
||||
float:right;
|
||||
margin-right:20px;
|
||||
}
|
||||
.uav-list-container{
|
||||
width:100%;
|
||||
height: calc( 100% - 60px);
|
||||
overflow:auto;
|
||||
padding:20px 20px;
|
||||
position:relative;
|
||||
z-index:999;
|
||||
.uav-empty{
|
||||
width:100%;
|
||||
height:100%;
|
||||
text-align:center;
|
||||
color:#999;
|
||||
img{
|
||||
width:120px;
|
||||
margin:40px 0px 18px 0px;
|
||||
}
|
||||
}
|
||||
.uav-item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
padding:0px 15px;
|
||||
line-height:40px;
|
||||
color:#f1f1f1;
|
||||
display:flex;
|
||||
background:rgba(0,0,0,0.2);
|
||||
&:hover{
|
||||
background:rgba(0,0,0,0.4);
|
||||
}
|
||||
div{
|
||||
flex:1;
|
||||
}
|
||||
.position{
|
||||
max-width:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.play{
|
||||
max-width:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.TCPlayer-video-contaiiner{
|
||||
width: calc( 100% - 30px);
|
||||
height: calc( 100% - 70px);
|
||||
position:absolute;
|
||||
margin:15px;
|
||||
top:40px;
|
||||
right:0px;
|
||||
z-index:1000;
|
||||
background:#041B36;
|
||||
.video-contain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.close-video-button{
|
||||
position:absolute;
|
||||
top:40px;
|
||||
right:10px;
|
||||
background:rgba(0,0,0,0.3);
|
||||
z-index:100100;
|
||||
color:#fff;
|
||||
padding:10px;
|
||||
cursor:pointer;
|
||||
&:hover{
|
||||
color:#408eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue