audio
This commit is contained in:
parent
623551ceae
commit
ca895ffa52
|
|
@ -79,6 +79,48 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
tdevice:{
|
||||||
|
bindArea:{
|
||||||
|
name: "绑定所在区域",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/third/tdevice/bind_area/`,data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dchannel:{
|
||||||
|
name: "闸机通道列表",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/third/tdevice/dchannel/`,data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLocation:{
|
||||||
|
name: "标注坐标位置",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/third/tdevice/label_location/`,data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
vchannel:{
|
||||||
|
name: "/third/tdevice/vchannel/",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/third/tdevice/vchannel/`,data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
speaker:{
|
||||||
|
name: "喇叭列表",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/third/tdevice/speaker/`,data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -277,7 +277,7 @@ export default {
|
||||||
// delete reqData[config.request.pageSize]
|
// delete reqData[config.request.pageSize]
|
||||||
}
|
}
|
||||||
Object.assign(reqData, this.tableParams);
|
Object.assign(reqData, this.tableParams);
|
||||||
|
debugger;
|
||||||
try {
|
try {
|
||||||
var res = await this.apiObj.req(reqData);
|
var res = await this.apiObj.req(reqData);
|
||||||
if (this.hidePagination) {
|
if (this.hidePagination) {
|
||||||
|
|
@ -308,7 +308,7 @@ export default {
|
||||||
if (this.hidePagination) {
|
if (this.hidePagination) {
|
||||||
dataList = response.data || [];
|
dataList = response.data || [];
|
||||||
} else {
|
} else {
|
||||||
dataList = response.rows?response.rows:response.data.pageData?response.data.pageData:[];
|
dataList = response.rows?response.rows:response.data.rows?response.data.rows:response.data.pageData?response.data.pageData:[];
|
||||||
}
|
}
|
||||||
if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
|
if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
|
||||||
this.tableData = this.redata(dataList);
|
this.tableData = this.redata(dataList);
|
||||||
|
|
|
||||||
|
|
@ -400,6 +400,15 @@ const routes = [
|
||||||
"icon": "el-icon-menu",
|
"icon": "el-icon-menu",
|
||||||
},
|
},
|
||||||
"component": "am/monitor"
|
"component": "am/monitor"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "audio",
|
||||||
|
"path": "/am/audio",
|
||||||
|
"meta": {
|
||||||
|
"title": "喇叭通道",
|
||||||
|
"icon": "el-icon-menu",
|
||||||
|
},
|
||||||
|
"component": "am/audio"
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -81,9 +81,6 @@
|
||||||
mapServerURL: 'data/map',
|
mapServerURL: 'data/map',
|
||||||
enableShadows: false, //是否开启阴影 默认false
|
enableShadows: false, //是否开启阴影 默认false
|
||||||
enableLighting: false, //是否开发光照 默认false
|
enableLighting: false, //是否开发光照 默认false
|
||||||
luminanceAtZenith: 0.54, //纹理亮度
|
|
||||||
scatteringIntensity: 1.0, //镜面强度
|
|
||||||
specularIntensity: 0, //散射强度
|
|
||||||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||||||
floorControlOptions: {
|
floorControlOptions: {
|
||||||
floorHeight: 20,//楼层间距
|
floorHeight: 20,//楼层间距
|
||||||
|
|
@ -93,10 +90,19 @@
|
||||||
y: 10,
|
y: 10,
|
||||||
}//控件偏移位置
|
}//控件偏移位置
|
||||||
},
|
},
|
||||||
imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
|
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||||
backgroundColor: '#3798ff', //背景颜色
|
backgroundColor: '#3798ff', //背景颜色
|
||||||
defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
|
viewOptions: {
|
||||||
defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
|
//屏幕中心坐标
|
||||||
|
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
|
||||||
|
// center: {x:120,y:30,z:10},
|
||||||
|
//相机距屏幕中心点距离（单位m）
|
||||||
|
distance: 400,
|
||||||
|
// 旋转角（单位°）
|
||||||
|
rotate: 0,
|
||||||
|
//倾斜角（单位°）
|
||||||
|
tilt: 45,
|
||||||
|
}
|
||||||
});
|
});
|
||||||
window.map.openMapById('0000');
|
window.map.openMapById('0000');
|
||||||
window.map.on('loadComplete', e => {
|
window.map.on('loadComplete', e => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<div class="left-panel">
|
||||||
|
<div class="right-panel-search">
|
||||||
|
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="nopadding">
|
||||||
|
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" >
|
||||||
|
<el-table-column type="selection" width="50"></el-table-column>
|
||||||
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||||
|
<el-table-column label="喇叭名称" prop="name" min-width="150"></el-table-column>
|
||||||
|
<el-table-column label="音量" prop="extra" min-width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="scope.row.extra&&scope.row.extra.player">{{scope.row.extra.player.EnvVolume}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="设备sn" prop="sn" min-width="90"></el-table-column>
|
||||||
|
<el-table-column label="ip" prop="extra" min-width="90">
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="scope.row.extra">{{scope.row.extra.ip}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" prop="extra" min-width="90">
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="scope.row.extra">{{scope.row.extra.online}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>-->
|
||||||
|
<el-table-column label="所在区域" prop="create_time" min-width="180"></el-table-column>
|
||||||
|
<el-table-column label="覆盖区域" prop="create_time" width="160"></el-table-column>
|
||||||
|
<el-table-column label="操作" fixed="right" align="center" width="160">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</scTable>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
<channel-view v-if="dialogSave" ref="saveDialog" :channelType="50" :channelCode="channelCode" :channelName="channelName" @closed="dialogSave=false"></channel-view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import channelView from './vchannel_view'
|
||||||
|
export default {
|
||||||
|
name: 'audioVue',
|
||||||
|
components: {
|
||||||
|
channelView
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
apiObj: this.$API.am.tdevice.speaker,
|
||||||
|
dialogSave: false,
|
||||||
|
limitedVisible: false,
|
||||||
|
query: {},
|
||||||
|
selection: [],
|
||||||
|
search: {
|
||||||
|
keyword: null
|
||||||
|
},
|
||||||
|
channelCode:'',
|
||||||
|
channelName:'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePosition(row){
|
||||||
|
this.channelCode = row.sn;
|
||||||
|
this.channelName = row.name;
|
||||||
|
this.dialogSave = true;
|
||||||
|
},
|
||||||
|
//表格选择后回调事件
|
||||||
|
selectionChange(selection){
|
||||||
|
this.selection = selection;
|
||||||
|
},
|
||||||
|
|
||||||
|
//搜索
|
||||||
|
upsearch(){
|
||||||
|
},
|
||||||
|
|
||||||
|
resetQuery(){
|
||||||
|
this.query = {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<div class="left-panel">
|
||||||
|
<div class="right-panel-search">
|
||||||
|
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="nopadding">
|
||||||
|
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" >
|
||||||
|
<el-table-column type="selection" width="50"></el-table-column>
|
||||||
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||||
|
<el-table-column label="设备编号" prop="deviceCode" min-width="100"></el-table-column>
|
||||||
|
<el-table-column label="通道编号" prop="channelCode" min-width="100"></el-table-column>
|
||||||
|
<el-table-column label="通道名称" prop="channelName" min-width="150"></el-table-column>
|
||||||
|
<el-table-column label="通道状态" prop="stat" min-width="150"></el-table-column>
|
||||||
|
<el-table-column label="通道类型" min-width="100">
|
||||||
|
<template #default="scope">{{scope.row.channelType}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="设备类型" min-width="100">
|
||||||
|
<template #default="scope">{{scope.row.cameraType}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否在线" prop="isOnline" min-width="180"></el-table-column>
|
||||||
|
<el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
|
||||||
|
</scTable>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import videoChannelView from './vchannel_view'
|
||||||
|
export default {
|
||||||
|
name: 'monitor',
|
||||||
|
components: {
|
||||||
|
videoChannelView
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
apiObj: this.$API.am.tdevice.dchannel,
|
||||||
|
dialogSave: false,
|
||||||
|
limitedVisible: false,
|
||||||
|
query: {},
|
||||||
|
selection: [],
|
||||||
|
search: {
|
||||||
|
keyword: null
|
||||||
|
},
|
||||||
|
channelId:'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePosition(row){
|
||||||
|
this.channelCode = row.channelCode;
|
||||||
|
this.channelName = row.channelName;
|
||||||
|
this.dialogSave = true;
|
||||||
|
},
|
||||||
|
//删除区域
|
||||||
|
async handleDel(row){
|
||||||
|
await this.$API.am.area.delete.req(row.id).then(res=>{
|
||||||
|
if(res.err_msg){
|
||||||
|
this.$message.error(res.err_msg);
|
||||||
|
}else{
|
||||||
|
this.$refs.table.refresh();
|
||||||
|
this.$message.success("删除成功")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//批量删除区域
|
||||||
|
async batch_del(){
|
||||||
|
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
const loading = this.$loading();
|
||||||
|
let params = {pk:{pks:this.selection}};
|
||||||
|
this.$API.am.area.deletes.req(params).then(res=>{
|
||||||
|
loading.close();
|
||||||
|
if(res.err_msg){
|
||||||
|
this.$message.error(res.err_msg);
|
||||||
|
}else{
|
||||||
|
this.$refs.table.refresh();
|
||||||
|
this.$message.success("删除成功")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//表格选择后回调事件
|
||||||
|
selectionChange(selection){
|
||||||
|
this.selection = selection;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
//搜索
|
||||||
|
upsearch(){
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
resetQuery(){
|
||||||
|
this.query = {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<el-header>
|
<el-header>
|
||||||
<div class="left-panel">
|
<div class="left-panel">
|
||||||
<div class="right-panel-search">
|
<div class="right-panel-search">
|
||||||
<el-input v-model="search.keyword" placeholder="姓名/手机号" clearable @click="upsearch"></el-input>
|
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -27,6 +27,7 @@
|
||||||
<el-table-column label="操作" fixed="right" align="center" width="160">
|
<el-table-column label="操作" fixed="right" align="center" width="160">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
|
<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
|
||||||
<el-button text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button>
|
<el-button text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button>
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
|
<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
|
|
@ -39,7 +40,20 @@
|
||||||
</scTable>
|
</scTable>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
<video-channel-view v-if="dialogSave" ref="saveDialog" :channelId="channelId" :channelName="channelName" @closed="dialogSave=false"></video-channel-view>
|
<el-dialog
|
||||||
|
:title="channelName"
|
||||||
|
v-model="limitedVisible"
|
||||||
|
:width="745"
|
||||||
|
>
|
||||||
|
<div style="height: 560px;">
|
||||||
|
<video id="videoElement" muted="muted"></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="limitedVisible = false">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
<video-channel-view v-if="dialogSave" ref="saveDialog" :channelType="60" :channelCode="channelCode" :channelName="channelName" @closed="dialogSave=false"></video-channel-view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import videoChannelView from './vchannel_view'
|
import videoChannelView from './vchannel_view'
|
||||||
|
|
@ -52,21 +66,58 @@
|
||||||
return {
|
return {
|
||||||
apiObj: this.$API.am.video.list,
|
apiObj: this.$API.am.video.list,
|
||||||
dialogSave: false,
|
dialogSave: false,
|
||||||
|
limitedVisible: false,
|
||||||
query: {},
|
query: {},
|
||||||
selection: [],
|
selection: [],
|
||||||
search: {
|
search: {
|
||||||
keyword: null
|
keyword: null
|
||||||
},
|
},
|
||||||
channelId:''
|
channelId:'',
|
||||||
|
params:{
|
||||||
|
json:{
|
||||||
|
data: {
|
||||||
|
channelId: "",
|
||||||
|
streamType: "2",
|
||||||
|
type: "flv"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
code:'video_realtime'
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created(){
|
||||||
|
const scriptInfo = document.createElement("script");
|
||||||
|
scriptInfo.setAttribute("data-callType","callScript");
|
||||||
|
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
||||||
|
document.head.appendChild(scriptInfo)
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleView(row) {
|
handleView(row) {
|
||||||
this.channelId = row.channelCode;
|
this.params.json.data.channelId = row.channelCode;
|
||||||
|
this.channelName = row.channelName;
|
||||||
|
this.limitedVisible = true;
|
||||||
|
this.$API.am.video.item.req(this.params).then(res=>{
|
||||||
|
debugger;
|
||||||
|
console.log(res);
|
||||||
|
this.url = res.url;
|
||||||
|
if (flvjs.isSupported()) {
|
||||||
|
let videoElement = document.getElementById('videoElement');
|
||||||
|
let flvPlayer = flvjs.createPlayer({
|
||||||
|
type: 'flv',
|
||||||
|
url: res.url
|
||||||
|
});
|
||||||
|
flvPlayer.attachMediaElement(videoElement);
|
||||||
|
flvPlayer.load();
|
||||||
|
flvPlayer.play();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePosition(row){
|
||||||
|
this.channelCode = row.channelCode;
|
||||||
this.channelName = row.channelName;
|
this.channelName = row.channelName;
|
||||||
this.dialogSave = true;
|
this.dialogSave = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
//删除区域
|
//删除区域
|
||||||
async handleDel(row){
|
async handleDel(row){
|
||||||
await this.$API.am.area.delete.req(row.id).then(res=>{
|
await this.$API.am.area.delete.req(row.id).then(res=>{
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<el-drawer
|
<el-drawer
|
||||||
|
:title="channelName+'位置标记'"
|
||||||
v-model="visible"
|
v-model="visible"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
@closed="closeDrawer"
|
@closed="closeDrawer"
|
||||||
:size="800"
|
|
||||||
>
|
>
|
||||||
|
<el-form
|
||||||
|
:model="form"
|
||||||
|
label-width="80px"
|
||||||
|
style="position:absolute;top:15px;left:200px;"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="所在区域" prop="name">
|
||||||
|
<el-select v-model="form.area" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in areasList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="覆盖区域" prop="name">
|
||||||
|
<el-select v-model="form.areas" multiple style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in areasList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
<el-container v-loading="loading">
|
<el-container v-loading="loading">
|
||||||
<el-main style="padding: 0 20px 20px 20px;">
|
<el-main style="padding: 0 20px 20px 20px;">
|
||||||
<sc-title :title="channelName"></sc-title>
|
<!--地图-->
|
||||||
<video id="videoElement" muted="muted"></video>
|
<div id='mapContainer1'></div>
|
||||||
</el-main>
|
</el-main>
|
||||||
<el-footer>
|
<el-footer>
|
||||||
<el-button @click="visible = false">关闭</el-button>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:loading="isSaveing"
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="visible = false">取消</el-button>
|
||||||
</el-footer>
|
</el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>-->
|
|
||||||
<script>
|
<script>
|
||||||
import scVideo from '@/components/scVideo'
|
|
||||||
export default {
|
export default {
|
||||||
components: {scVideo},
|
|
||||||
emits: ["success", "closed"],
|
emits: ["success", "closed"],
|
||||||
props: {
|
props: {
|
||||||
channelId: {
|
channelCode: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
channelType: {
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
channelName: {
|
channelName: {
|
||||||
type: String,
|
type: String,
|
||||||
}
|
}
|
||||||
|
|
@ -35,56 +75,149 @@
|
||||||
loading: false,
|
loading: false,
|
||||||
visible: true,
|
visible: true,
|
||||||
isSaveing: false,
|
isSaveing: false,
|
||||||
params:{
|
points:[],
|
||||||
json:{
|
areasList:[],
|
||||||
data: {
|
form:{
|
||||||
channelId: "",
|
type:60,//设备类型
|
||||||
streamType: "2",
|
location:null,//位置信息
|
||||||
type: "flv"
|
area:'',//所在区域
|
||||||
}
|
areas:[],//覆盖区域
|
||||||
},
|
code:'',//设备唯一标识
|
||||||
code:'video_realtime'
|
}
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created(){
|
|
||||||
const scriptInfo = document.createElement("script");
|
|
||||||
scriptInfo.setAttribute("data-callType","callScript");
|
|
||||||
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
|
||||||
document.head.appendChild(scriptInfo)
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
this.params.json.data.channelId = this.channelId;
|
this.loadMap();
|
||||||
// this.params.json = JSON.stringify(this.jso);
|
|
||||||
this.$API.am.video.item.req(this.params).then(res=>{
|
|
||||||
debugger;
|
|
||||||
console.log(res);
|
|
||||||
this.url = res.url;
|
|
||||||
if (flvjs.isSupported()) {
|
|
||||||
let videoElement = document.getElementById('videoElement');
|
|
||||||
let flvPlayer = flvjs.createPlayer({
|
|
||||||
type: 'flv',
|
|
||||||
url: res.url
|
|
||||||
});
|
|
||||||
flvPlayer.attachMediaElement(videoElement);
|
|
||||||
flvPlayer.load();
|
|
||||||
flvPlayer.play();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
this.getArea();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
loadMap(){
|
||||||
|
let that = this;
|
||||||
|
window.map = new jsmap.JSMap({
|
||||||
|
mapType: jsmap.JSMapType.MAP_3D,
|
||||||
|
container: 'mapContainer1',
|
||||||
|
mapServerURL: 'data/map',
|
||||||
|
enableShadows: false, //是否开启阴影 默认false
|
||||||
|
enableLighting: false, //是否开发光照 默认false
|
||||||
|
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||||||
|
floorControlOptions: {
|
||||||
|
floorHeight: 20,//楼层间距
|
||||||
|
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||||||
|
offset: {
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
}//控件偏移位置
|
||||||
|
},
|
||||||
|
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||||
|
backgroundColor: '#3798ff', //背景颜色
|
||||||
|
viewOptions: {
|
||||||
|
//屏幕中心坐标
|
||||||
|
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
|
||||||
|
// center: {x:120,y:30,z:10},
|
||||||
|
//相机距屏幕中心点距离（单位m）
|
||||||
|
distance: 400,
|
||||||
|
// 旋转角（单位°）
|
||||||
|
rotate: 0,
|
||||||
|
//倾斜角（单位°）
|
||||||
|
tilt: 45,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.map.openMapById('0000');
|
||||||
|
window.map.on('loadComplete', e => {
|
||||||
|
console.log('Map loadComplete!');
|
||||||
|
var pointMarker = new jsmap.JSPointMarker({
|
||||||
|
color: '#00FF00', //填充颜色
|
||||||
|
size: 10, //尺寸
|
||||||
|
position: new jsmap.JSPoint(114.628074820438, 38.8157131095379, 0), //坐标
|
||||||
|
floorId: 2, //楼层id,默认为1（地面）
|
||||||
|
outlineColor: '#CD5C5C', //边线颜色
|
||||||
|
outlineWidth: 2, //边线宽
|
||||||
|
depthTest: true, //是否开启深度检测
|
||||||
|
show: true, //是否显示
|
||||||
|
allowPicking: true, //是否允许点击
|
||||||
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
||||||
|
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //比例缩放
|
||||||
|
callback: (node) => {
|
||||||
|
console.log(node);
|
||||||
|
}//回调事件
|
||||||
|
});
|
||||||
|
window.map.addMarker(pointMarker);
|
||||||
|
var drawTool = new jsmap.JSDrawToolControl({
|
||||||
|
position: jsmap.JSControlPosition.RIGHT_TOP, //画图工具在容器中的相对位置，当前为右上
|
||||||
|
offset: {
|
||||||
|
x: 20,
|
||||||
|
y: 180
|
||||||
|
}, //偏移量
|
||||||
|
drawMode: jsmap.JSDrawMode.POINT, //画图类型POINT:画点 POLYLINE:画线 POLYGON:画面
|
||||||
|
|
||||||
|
//画图结束的回调，返回所画的点的信息
|
||||||
|
callback: (feature) => {
|
||||||
|
debugger;
|
||||||
|
console.log('add', feature);
|
||||||
|
console.log(feature.properties);//type:POINT;id:"";name:"";floorNo:"";floorId:""
|
||||||
|
console.log(feature.geometry);//type:POINT;coordinates:[114.63028499839209,38.81195080123784,0]
|
||||||
|
this.form.location = feature.geometry.coordinates;
|
||||||
|
debugger;
|
||||||
|
},
|
||||||
|
//移除相应点的回调，返回相应点信息
|
||||||
|
removeCallback: (feature) => {
|
||||||
|
console.log('remove', feature);
|
||||||
|
},
|
||||||
|
//编辑相应点的回调，返回相应点信息
|
||||||
|
editCallback: (feature) => {
|
||||||
|
console.log('editCallback', feature);
|
||||||
|
},
|
||||||
|
//定位到相应点的回调，返回相应点信息
|
||||||
|
locateCallback: (feature) => {
|
||||||
|
console.log('locate..', feature);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.map.addControl(drawTool);
|
||||||
|
});
|
||||||
|
},
|
||||||
closeDrawer() {
|
closeDrawer() {
|
||||||
this.$emit('closed');
|
this.$emit('closed');
|
||||||
},
|
},
|
||||||
|
getArea(){
|
||||||
|
this.$API.am.area.list.req().then(res=>{
|
||||||
|
debugger;
|
||||||
|
if(res.err_msg){
|
||||||
|
this.message.error(res.err_msg)
|
||||||
|
}else{
|
||||||
|
this.areasList = res.results;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//表单提交方法
|
||||||
|
submit() {
|
||||||
|
let that = this;
|
||||||
|
/*let item = this.form.location;
|
||||||
|
let tool = new jsmap.JSMapCoordTool(window.map);
|
||||||
|
let coordinate = {x:item[0],y:item[1],z:item.z};
|
||||||
|
let pixel = tool.mapToScreenCoordinate(coordinate);
|
||||||
|
that.form.location = pixel;*/
|
||||||
|
this.form.code = this.channelCode;
|
||||||
|
this.form.type = this.channelType;
|
||||||
|
that.$API.am.tdevice.labelLocation.req(that.form)
|
||||||
|
.then(res => {
|
||||||
|
that.isSaveing = false;
|
||||||
|
that.visible = false;
|
||||||
|
that.$emit("success");
|
||||||
|
that.$message.success("操作成功");
|
||||||
|
return res
|
||||||
|
}).catch(err => {
|
||||||
|
that.isSaveing = false;
|
||||||
|
return err
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/*.el-drawer.rtl{
|
.el-drawer.rtl{
|
||||||
width: 90%!important;
|
width: 90%!important;
|
||||||
}*/
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -195,27 +195,20 @@
|
||||||
</div>
|
</div>
|
||||||
<!--地图-->
|
<!--地图-->
|
||||||
<div id='mapContainer'></div>
|
<div id='mapContainer'></div>
|
||||||
<div style="display: block;">
|
<!--视频弹窗-->
|
||||||
<div id="2f51-1656480511896-48924"
|
<!-- <div style="display: block;position:absolute;z-index: 10;top: 0;
|
||||||
style="position: absolute; display:block; top:0; left:0; transform-origin:left top; transform:translate(0%, 0%) translate(1010.03px, 548.439px) scale(1, 1);">
|
background: rgba(24,36,51,.7);
|
||||||
<div class="camera-pop left-arrow">
|
padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap">
|
||||||
<div class="camera-pop-title">
|
<div class="v_title">1111111</div>
|
||||||
<span>实时视频</span>
|
<div class="v_masker"></div>
|
||||||
<span class="pop-close" onclick="cameraClose()"></span>
|
</div>-->
|
||||||
</div>
|
|
||||||
<div class="camera-pop-flv" id="popvideo-310" onclick="cameraOpen()">
|
|
||||||
<div class="camera-pop-pause"></div>
|
|
||||||
<div id="videoElement"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
domMarkerLayer:null,
|
||||||
boxMarkerLayer: null,//风险区域
|
boxMarkerLayer: null,//风险区域
|
||||||
pointMarkerLayer: null,//点位图层
|
pointMarkerLayer: null,//点位图层
|
||||||
polygonMaskerLayer: null,//危险作业
|
polygonMaskerLayer: null,//危险作业
|
||||||
|
|
@ -229,21 +222,23 @@
|
||||||
autoRun: false,
|
autoRun: false,
|
||||||
showUserSelect: false,
|
showUserSelect: false,
|
||||||
filterCtrlFocus: true,
|
filterCtrlFocus: true,
|
||||||
params:{
|
Vchannels: [],
|
||||||
json:{
|
url: '',
|
||||||
|
params: {
|
||||||
|
json: {
|
||||||
data: {
|
data: {
|
||||||
channelId: "",
|
channelId: "",
|
||||||
streamType: "2",
|
streamType: "2",
|
||||||
type: "flv"
|
type: "flv"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
code:'video_realtime'
|
code: 'video_realtime'
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created() {
|
||||||
const scriptInfo = document.createElement("script");
|
const scriptInfo = document.createElement("script");
|
||||||
scriptInfo.setAttribute("data-callType","callScript");
|
scriptInfo.setAttribute("data-callType", "callScript");
|
||||||
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
||||||
document.head.appendChild(scriptInfo)
|
document.head.appendChild(scriptInfo)
|
||||||
},
|
},
|
||||||
|
|
@ -266,8 +261,6 @@
|
||||||
},
|
},
|
||||||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||||
backgroundColor: '#3798ff', //背景颜色
|
backgroundColor: '#3798ff', //背景颜色
|
||||||
/*defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
|
|
||||||
defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台*/
|
|
||||||
viewOptions: {
|
viewOptions: {
|
||||||
//屏幕中心坐标
|
//屏幕中心坐标
|
||||||
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
|
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
|
||||||
|
|
@ -282,10 +275,6 @@
|
||||||
});
|
});
|
||||||
window.map.openMapById('0000');
|
window.map.openMapById('0000');
|
||||||
window.map.on('loadComplete', e => {
|
window.map.on('loadComplete', e => {
|
||||||
console.log('Map loadComplete!');
|
|
||||||
/*//window.map.setSkyBox(jsmap.JSSkyBox.STARRY_SKY);//加载时的图
|
|
||||||
//window.map.weather = jsmap.JSWeather.SNOW;//天气DEFAULT、RAIN、SNOW、FOG、RAIN_SNOW
|
|
||||||
//window.map.mapStyle = jsmap.JSMapStyle.DEFAULT;//地图风格*/
|
|
||||||
var drawTool2 = new jsmap.JSDrawToolControl({
|
var drawTool2 = new jsmap.JSDrawToolControl({
|
||||||
position: jsmap.JSControlPosition.RIGHT_TOP, //画图工具在容器中的相对位置，当前为右上
|
position: jsmap.JSControlPosition.RIGHT_TOP, //画图工具在容器中的相对位置，当前为右上
|
||||||
offset: {
|
offset: {
|
||||||
|
|
@ -296,7 +285,7 @@
|
||||||
|
|
||||||
//画图结束的回调，返回所画的面信息
|
//画图结束的回调，返回所画的面信息
|
||||||
callback: (feature) => {
|
callback: (feature) => {
|
||||||
console.log('add', feature);
|
// console.log('add', feature);
|
||||||
console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
|
console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
|
||||||
console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
|
console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
|
||||||
debugger;
|
debugger;
|
||||||
|
|
@ -315,22 +304,95 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
window.map.addControl(drawTool2);
|
window.map.addControl(drawTool2);
|
||||||
|
this.domMarkerLayers();
|
||||||
this.boxMaskerLayers();
|
this.boxMaskerLayers();
|
||||||
this.pointMaskerLayers();
|
this.pointMaskerLayers();
|
||||||
this.cameraMaskerLayers();
|
this.cameraMaskerLayers();
|
||||||
this.polygonMarkerLayers();
|
this.polygonMarkerLayers();
|
||||||
this.materialsMaskerLayers();
|
this.materialsMaskerLayers();
|
||||||
/*let tool = new jsmap.JSMapCoordTool(window.map);
|
|
||||||
let coordinate = {x:114.6318495165543,y: 38.81301151091491};
|
|
||||||
let pixel = tool.mapToScreenCoordinate(coordinate);*/
|
|
||||||
});
|
});
|
||||||
window.map.on('mapClickNode', event => {
|
window.map.on('mapClickNode', event => {
|
||||||
|
if(document.getElementById(event.markers[0].id)===null){
|
||||||
|
this.params.json.data.channelId = event.markers[0].id;
|
||||||
|
let domMarker = new jsmap.JSDomMarker({
|
||||||
|
id: event.markers[0].id+'mark',
|
||||||
|
position: new jsmap.JSPoint(event.markers[0].position.x, event.markers[0].position.y, 0),
|
||||||
|
floorId: 1,
|
||||||
|
depthTest: true,
|
||||||
|
content: `<div id="`+event.markers[0].id+`" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
|
||||||
|
offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
||||||
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||||
|
marginOffset: {
|
||||||
|
x:30,
|
||||||
|
y: -50
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
type: 0,
|
||||||
|
},
|
||||||
|
callback: (node) => {
|
||||||
|
console.log(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.map.addMarker(domMarker);
|
||||||
|
var otest = document.getElementById(event.markers[0].id);
|
||||||
|
// 创建一个新dom,并设置icon，绑定点击事件
|
||||||
|
let newEle = document.createElement("div");
|
||||||
|
newEle.className = "v_title";
|
||||||
|
newEle.setAttribute("style","display:flex;justify-content: space-between;padding:10px 0");
|
||||||
|
let title = document.createElement("div");
|
||||||
|
title.innerText = "实时监控";
|
||||||
|
newEle.style.color = "#ffffff";
|
||||||
|
let close = document.createElement("div");
|
||||||
|
close.className = "v_close";
|
||||||
|
close.setAttribute("style","width: 16px;height: 16px;background: url(.//public/img/close.png) no-repeat;background-size: 100% 100%;");
|
||||||
|
newEle.appendChild(title);
|
||||||
|
newEle.appendChild(close);
|
||||||
|
let newEle2 = document.createElement("video");
|
||||||
|
newEle2.id = event.markers[0].id+'videoPlayer';
|
||||||
|
newEle2.setAttribute("style","width: 327px;height:183px;background:url('.//public/img/v_mask.png') no-repeat;background-size: 100% 100%;");
|
||||||
|
// 在对应dom 下追加创建的dom
|
||||||
|
otest.appendChild(newEle);
|
||||||
|
otest.appendChild(newEle2);
|
||||||
|
newEle2.onclick = () => {
|
||||||
|
this.$API.am.video.item.req(this.params).then(res => {
|
||||||
|
debugger;
|
||||||
|
console.log(res);
|
||||||
|
this.url = res.url;
|
||||||
|
if (flvjs.isSupported()) {
|
||||||
|
let videoElement = document.getElementById(event.markers[0].id+'videoPlayer');
|
||||||
|
let flvPlayer = flvjs.createPlayer({
|
||||||
|
type: 'flv',
|
||||||
|
url: res.url
|
||||||
|
});
|
||||||
|
flvPlayer.attachMediaElement(videoElement);
|
||||||
|
flvPlayer.load();
|
||||||
|
flvPlayer.play();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
close.onclick=()=>{
|
||||||
|
let nodeMark = document.getElementById(event.markers[0].id);
|
||||||
|
nodeMark.remove();
|
||||||
|
}
|
||||||
|
}else{}
|
||||||
|
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
* <div class="v_title" style="width: 327px;height: 45px;padding: 10px 0;font-size: 16px;font-weight: 700;color: #fff;position: relative;padding-left: 8px;display: flex;justify-content: space-between">
|
||||||
|
<div>`+event.markers[0].text+`</div><div style="width: 16px;height: 16px;background: url(.//public/img/close.png) no-repeat;background-size: 100% 100%;" @click="closeVideo"></div>
|
||||||
|
</div>
|
||||||
|
<div class="v_masker" style="width: 327px;height: 183px;background: url(.//public/img/v_mask.png) no-repeat;background-size: 100% 100%;" @click="playVideo()"></div>
|
||||||
|
<div id="`+event.markers[0].id+`"></div>
|
||||||
|
* */
|
||||||
|
this.getVchannels();
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
playVideo(){
|
||||||
debugger;
|
debugger;
|
||||||
console.log(event);
|
this.$API.am.video.item.req(this.params).then(res => {
|
||||||
this.params.json.data.channelId = this.channelId;
|
|
||||||
this.$API.am.video.item.req(this.params).then(res=>{
|
|
||||||
debugger;
|
debugger;
|
||||||
console.log(res);
|
// console.log(res);
|
||||||
this.url = res.url;
|
this.url = res.url;
|
||||||
if (flvjs.isSupported()) {
|
if (flvjs.isSupported()) {
|
||||||
let videoElement = document.getElementById('videoElement');
|
let videoElement = document.getElementById('videoElement');
|
||||||
|
|
@ -343,15 +405,16 @@
|
||||||
flvPlayer.play();
|
flvPlayer.play();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
|
||||||
});
|
domMarkerLayers() {//风险区域
|
||||||
// 地图缩放级别变化事件，返回当前level和上一个level值，level范围为1-24
|
this.domMarkerLayer = new jsmap.JSDomMarkerLayer({
|
||||||
/*window.map.on('mapScaleLevelChanged', (last, current) => {
|
minimumLevel:3,
|
||||||
console.log(last + ',' + current);
|
maxmumLevel:22,
|
||||||
});*/
|
show:true
|
||||||
|
});
|
||||||
},
|
window.map.addLayer(this.domMarkerLayer);
|
||||||
methods: {
|
},
|
||||||
boxMaskerLayers() {//风险区域
|
boxMaskerLayers() {//风险区域
|
||||||
this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
|
this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
|
||||||
minimumLevel: 3,
|
minimumLevel: 3,
|
||||||
|
|
@ -417,7 +480,7 @@
|
||||||
allowPicking: false, //是否允许点击
|
allowPicking: false, //是否允许点击
|
||||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||||||
callback: (marker) => {
|
callback: (marker) => {
|
||||||
console.log(marker);
|
// console.log(marker);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.boxMarkerLayer.addMarker(boxMarker);
|
this.boxMarkerLayer.addMarker(boxMarker);
|
||||||
|
|
@ -439,7 +502,7 @@
|
||||||
allowPicking: false, //是否允许点击
|
allowPicking: false, //是否允许点击
|
||||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||||||
callback: (marker) => {
|
callback: (marker) => {
|
||||||
console.log(marker);
|
// console.log(marker);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.boxMarkerLayer.addMarker(boxMarker1);
|
this.boxMarkerLayer.addMarker(boxMarker1);
|
||||||
|
|
@ -459,38 +522,44 @@
|
||||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
||||||
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //比例缩放
|
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //比例缩放
|
||||||
callback: (node) => {
|
callback: (node) => {
|
||||||
console.log(node);
|
// console.log(node);
|
||||||
}//回调事件
|
}//回调事件
|
||||||
});
|
});
|
||||||
this.pointMarkerLayer.addMarker(pointMarker);
|
this.pointMarkerLayer.addMarker(pointMarker);
|
||||||
},
|
},
|
||||||
//摄像头
|
//摄像头
|
||||||
showCameraMarkers() {
|
showCameraMarkers() {
|
||||||
let iconTextMarker = new jsmap.JSIconTextMarker({
|
let that = this;
|
||||||
id: 'iconTextMarker',
|
let iconTextMarker = null;
|
||||||
position: {x: 114.63184951655, y: 38.81301151091491}, //坐标
|
that.Vchannels.forEach(item => {
|
||||||
floorId: 1, //楼层id,默认为1（地面）
|
let pixel = item.my_info.location;
|
||||||
image: "/img/camera.svg",
|
iconTextMarker = new jsmap.JSIconTextMarker({
|
||||||
text: '摄像头',
|
id: item.channelCode,
|
||||||
font: '10px sans-serif',
|
position: {x: pixel[0], y: pixel[1], z: pixel[2]}, //坐标
|
||||||
fontColor: '#fff645',
|
floorId: 1, //楼层id,默认为1（地面）
|
||||||
imageHeight: 16,
|
image: "/img/camera.svg",
|
||||||
imageWidth: 16,
|
text: '摄像头',
|
||||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
font: '10px sans-serif',
|
||||||
backgroundRadius: 1,
|
fontColor: '#fff645',
|
||||||
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
imageHeight: 16,
|
||||||
backgroundStrokeWidth: 1,
|
imageWidth: 16,
|
||||||
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||||
allowPicking: true,
|
backgroundRadius: 1,
|
||||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
||||||
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
|
backgroundStrokeWidth: 1,
|
||||||
show: true,
|
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
||||||
callback: (marker) => {
|
allowPicking: true,
|
||||||
debugger;
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||||
console.log(marker);
|
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
|
||||||
}
|
show: true,
|
||||||
});
|
callback: (marker) => {
|
||||||
this.cameraMaskerLayer.addMarker(iconTextMarker);
|
debugger;
|
||||||
|
console.log(marker);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
that.cameraMaskerLayer.addMarker(iconTextMarker);
|
||||||
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
//危险作业
|
//危险作业
|
||||||
showPolygonMarkers() {
|
showPolygonMarkers() {
|
||||||
|
|
@ -513,7 +582,7 @@
|
||||||
test: 'polygonTest'
|
test: 'polygonTest'
|
||||||
},//属性设置
|
},//属性设置
|
||||||
callback: (marker) => {
|
callback: (marker) => {
|
||||||
console.log(marker);
|
// console.log(marker);
|
||||||
}//回调
|
}//回调
|
||||||
});
|
});
|
||||||
this.polygonMaskerLayer.addMarker(polygonMarker);
|
this.polygonMaskerLayer.addMarker(polygonMarker);
|
||||||
|
|
@ -634,11 +703,24 @@
|
||||||
that.showUserSelect = false;
|
that.showUserSelect = false;
|
||||||
}, 300)
|
}, 300)
|
||||||
},
|
},
|
||||||
//点击摄像头
|
getVchannels() {
|
||||||
cameraClose(){
|
this.$API.am.video.list.req(this.params).then(res => {
|
||||||
|
if (res.err_msg) {
|
||||||
|
this.$message.error(res.err_msg);
|
||||||
|
} else {
|
||||||
|
this.Vchannels = res.pageData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//播放视频
|
||||||
|
playVchannel() {
|
||||||
|
|
||||||
},
|
},
|
||||||
cameraOpen(){
|
//点击摄像头
|
||||||
|
cameraClose() {
|
||||||
|
|
||||||
|
},
|
||||||
|
cameraOpen() {
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -650,6 +732,27 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.v_title {
|
||||||
|
width: 327px;
|
||||||
|
height: 45px;
|
||||||
|
line-height: 22px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v_masker {
|
||||||
|
width: 327px!important;
|
||||||
|
height: 183px!important;
|
||||||
|
background: url(/public/img/v_mask.png) no-repeat!important;
|
||||||
|
background-size: 100% 100%!important;
|
||||||
|
}
|
||||||
|
|
||||||
.hoverPointer:hover {
|
.hoverPointer:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue