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]
|
||||
}
|
||||
Object.assign(reqData, this.tableParams);
|
||||
|
||||
debugger;
|
||||
try {
|
||||
var res = await this.apiObj.req(reqData);
|
||||
if (this.hidePagination) {
|
||||
|
|
@ -308,7 +308,7 @@ export default {
|
|||
if (this.hidePagination) {
|
||||
dataList = response.data || [];
|
||||
} 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'){
|
||||
this.tableData = this.redata(dataList);
|
||||
|
|
|
|||
|
|
@ -400,6 +400,15 @@ const routes = [
|
|||
"icon": "el-icon-menu",
|
||||
},
|
||||
"component": "am/monitor"
|
||||
},
|
||||
{
|
||||
"name": "audio",
|
||||
"path": "/am/audio",
|
||||
"meta": {
|
||||
"title": "喇叭通道",
|
||||
"icon": "el-icon-menu",
|
||||
},
|
||||
"component": "am/audio"
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -81,9 +81,6 @@
|
|||
mapServerURL: 'data/map',
|
||||
enableShadows: false, //是否开启阴影 默认false
|
||||
enableLighting: false, //是否开发光照 默认false
|
||||
luminanceAtZenith: 0.54, //纹理亮度
|
||||
scatteringIntensity: 1.0, //镜面强度
|
||||
specularIntensity: 0, //散射强度
|
||||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||||
floorControlOptions: {
|
||||
floorHeight: 20,//楼层间距
|
||||
|
|
@ -93,10 +90,19 @@
|
|||
y: 10,
|
||||
}//控件偏移位置
|
||||
},
|
||||
imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
|
||||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||
backgroundColor: '#3798ff', //背景颜色
|
||||
defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
|
||||
defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div class="left-panel">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
<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 text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
|
|
@ -39,7 +40,20 @@
|
|||
</scTable>
|
||||
</el-main>
|
||||
</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>
|
||||
<script>
|
||||
import videoChannelView from './vchannel_view'
|
||||
|
|
@ -52,21 +66,58 @@
|
|||
return {
|
||||
apiObj: this.$API.am.video.list,
|
||||
dialogSave: false,
|
||||
limitedVisible: false,
|
||||
query: {},
|
||||
selection: [],
|
||||
search: {
|
||||
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: {
|
||||
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.dialogSave = true;
|
||||
},
|
||||
|
||||
//删除区域
|
||||
async handleDel(row){
|
||||
await this.$API.am.area.delete.req(row.id).then(res=>{
|
||||
|
|
|
|||
|
|
@ -1,31 +1,71 @@
|
|||
<template>
|
||||
<el-drawer
|
||||
:title="channelName+'位置标记'"
|
||||
v-model="visible"
|
||||
destroy-on-close
|
||||
@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-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-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-container>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>-->
|
||||
|
||||
<script>
|
||||
import scVideo from '@/components/scVideo'
|
||||
export default {
|
||||
components: {scVideo},
|
||||
emits: ["success", "closed"],
|
||||
props: {
|
||||
channelId: {
|
||||
channelCode: {
|
||||
type: String,
|
||||
},
|
||||
channelType: {
|
||||
type: Number,
|
||||
},
|
||||
channelName: {
|
||||
type: String,
|
||||
}
|
||||
|
|
@ -35,56 +75,149 @@
|
|||
loading: false,
|
||||
visible: true,
|
||||
isSaveing: false,
|
||||
params:{
|
||||
json:{
|
||||
data: {
|
||||
channelId: "",
|
||||
streamType: "2",
|
||||
type: "flv"
|
||||
}
|
||||
},
|
||||
code:'video_realtime'
|
||||
},
|
||||
points:[],
|
||||
areasList:[],
|
||||
form:{
|
||||
type:60,//设备类型
|
||||
location:null,//位置信息
|
||||
area:'',//所在区域
|
||||
areas:[],//覆盖区域
|
||||
code:'',//设备唯一标识
|
||||
}
|
||||
};
|
||||
},
|
||||
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() {
|
||||
this.$nextTick(()=>{
|
||||
this.params.json.data.channelId = this.channelId;
|
||||
// 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.loadMap();
|
||||
})
|
||||
this.getArea();
|
||||
},
|
||||
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() {
|
||||
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>
|
||||
|
||||
<style>
|
||||
/*.el-drawer.rtl{
|
||||
.el-drawer.rtl{
|
||||
width: 90%!important;
|
||||
}*/
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -195,27 +195,20 @@
|
|||
</div>
|
||||
<!--地图-->
|
||||
<div id='mapContainer'></div>
|
||||
<div style="display: block;">
|
||||
<div id="2f51-1656480511896-48924"
|
||||
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);">
|
||||
<div class="camera-pop left-arrow">
|
||||
<div class="camera-pop-title">
|
||||
<span>实时视频</span>
|
||||
<span class="pop-close" onclick="cameraClose()"></span>
|
||||
</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 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 class="v_title">1111111</div>
|
||||
<div class="v_masker"></div>
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
domMarkerLayer:null,
|
||||
boxMarkerLayer: null,//风险区域
|
||||
pointMarkerLayer: null,//点位图层
|
||||
polygonMaskerLayer: null,//危险作业
|
||||
|
|
@ -229,21 +222,23 @@
|
|||
autoRun: false,
|
||||
showUserSelect: false,
|
||||
filterCtrlFocus: true,
|
||||
params:{
|
||||
json:{
|
||||
Vchannels: [],
|
||||
url: '',
|
||||
params: {
|
||||
json: {
|
||||
data: {
|
||||
channelId: "",
|
||||
streamType: "2",
|
||||
type: "flv"
|
||||
}
|
||||
},
|
||||
code:'video_realtime'
|
||||
code: 'video_realtime'
|
||||
},
|
||||
}
|
||||
},
|
||||
created(){
|
||||
created() {
|
||||
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";
|
||||
document.head.appendChild(scriptInfo)
|
||||
},
|
||||
|
|
@ -266,8 +261,6 @@
|
|||
},
|
||||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||
backgroundColor: '#3798ff', //背景颜色
|
||||
/*defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
|
||||
defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台*/
|
||||
viewOptions: {
|
||||
//屏幕中心坐标
|
||||
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
|
||||
|
|
@ -282,10 +275,6 @@
|
|||
});
|
||||
window.map.openMapById('0000');
|
||||
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({
|
||||
position: jsmap.JSControlPosition.RIGHT_TOP, //画图工具在容器中的相对位置，当前为右上
|
||||
offset: {
|
||||
|
|
@ -296,7 +285,7 @@
|
|||
|
||||
//画图结束的回调，返回所画的面信息
|
||||
callback: (feature) => {
|
||||
console.log('add', feature);
|
||||
// console.log('add', feature);
|
||||
console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
|
||||
console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
|
||||
debugger;
|
||||
|
|
@ -315,22 +304,95 @@
|
|||
}
|
||||
});
|
||||
window.map.addControl(drawTool2);
|
||||
this.domMarkerLayers();
|
||||
this.boxMaskerLayers();
|
||||
this.pointMaskerLayers();
|
||||
this.cameraMaskerLayers();
|
||||
this.polygonMarkerLayers();
|
||||
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 => {
|
||||
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;
|
||||
console.log(event);
|
||||
this.params.json.data.channelId = this.channelId;
|
||||
this.$API.am.video.item.req(this.params).then(res=>{
|
||||
this.$API.am.video.item.req(this.params).then(res => {
|
||||
debugger;
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
this.url = res.url;
|
||||
if (flvjs.isSupported()) {
|
||||
let videoElement = document.getElementById('videoElement');
|
||||
|
|
@ -343,15 +405,16 @@
|
|||
flvPlayer.play();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
});
|
||||
// 地图缩放级别变化事件，返回当前level和上一个level值，level范围为1-24
|
||||
/*window.map.on('mapScaleLevelChanged', (last, current) => {
|
||||
console.log(last + ',' + current);
|
||||
});*/
|
||||
|
||||
},
|
||||
methods: {
|
||||
domMarkerLayers() {//风险区域
|
||||
this.domMarkerLayer = new jsmap.JSDomMarkerLayer({
|
||||
minimumLevel:3,
|
||||
maxmumLevel:22,
|
||||
show:true
|
||||
});
|
||||
window.map.addLayer(this.domMarkerLayer);
|
||||
},
|
||||
boxMaskerLayers() {//风险区域
|
||||
this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
|
||||
minimumLevel: 3,
|
||||
|
|
@ -417,7 +480,7 @@
|
|||
allowPicking: false, //是否允许点击
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||||
callback: (marker) => {
|
||||
console.log(marker);
|
||||
// console.log(marker);
|
||||
}
|
||||
});
|
||||
this.boxMarkerLayer.addMarker(boxMarker);
|
||||
|
|
@ -439,7 +502,7 @@
|
|||
allowPicking: false, //是否允许点击
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||||
callback: (marker) => {
|
||||
console.log(marker);
|
||||
// console.log(marker);
|
||||
}
|
||||
});
|
||||
this.boxMarkerLayer.addMarker(boxMarker1);
|
||||
|
|
@ -459,38 +522,44 @@
|
|||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
||||
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //比例缩放
|
||||
callback: (node) => {
|
||||
console.log(node);
|
||||
// console.log(node);
|
||||
}//回调事件
|
||||
});
|
||||
this.pointMarkerLayer.addMarker(pointMarker);
|
||||
},
|
||||
//摄像头
|
||||
showCameraMarkers() {
|
||||
let iconTextMarker = new jsmap.JSIconTextMarker({
|
||||
id: 'iconTextMarker',
|
||||
position: {x: 114.63184951655, y: 38.81301151091491}, //坐标
|
||||
floorId: 1, //楼层id,默认为1（地面）
|
||||
image: "/img/camera.svg",
|
||||
text: '摄像头',
|
||||
font: '10px sans-serif',
|
||||
fontColor: '#fff645',
|
||||
imageHeight: 16,
|
||||
imageWidth: 16,
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
backgroundRadius: 1,
|
||||
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
||||
backgroundStrokeWidth: 1,
|
||||
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
||||
allowPicking: true,
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
|
||||
show: true,
|
||||
callback: (marker) => {
|
||||
debugger;
|
||||
console.log(marker);
|
||||
}
|
||||
});
|
||||
this.cameraMaskerLayer.addMarker(iconTextMarker);
|
||||
let that = this;
|
||||
let iconTextMarker = null;
|
||||
that.Vchannels.forEach(item => {
|
||||
let pixel = item.my_info.location;
|
||||
iconTextMarker = new jsmap.JSIconTextMarker({
|
||||
id: item.channelCode,
|
||||
position: {x: pixel[0], y: pixel[1], z: pixel[2]}, //坐标
|
||||
floorId: 1, //楼层id,默认为1（地面）
|
||||
image: "/img/camera.svg",
|
||||
text: '摄像头',
|
||||
font: '10px sans-serif',
|
||||
fontColor: '#fff645',
|
||||
imageHeight: 16,
|
||||
imageWidth: 16,
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
backgroundRadius: 1,
|
||||
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
||||
backgroundStrokeWidth: 1,
|
||||
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
||||
allowPicking: true,
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
|
||||
show: true,
|
||||
callback: (marker) => {
|
||||
debugger;
|
||||
console.log(marker);
|
||||
}
|
||||
});
|
||||
that.cameraMaskerLayer.addMarker(iconTextMarker);
|
||||
})
|
||||
|
||||
},
|
||||
//危险作业
|
||||
showPolygonMarkers() {
|
||||
|
|
@ -513,7 +582,7 @@
|
|||
test: 'polygonTest'
|
||||
},//属性设置
|
||||
callback: (marker) => {
|
||||
console.log(marker);
|
||||
// console.log(marker);
|
||||
}//回调
|
||||
});
|
||||
this.polygonMaskerLayer.addMarker(polygonMarker);
|
||||
|
|
@ -634,11 +703,24 @@
|
|||
that.showUserSelect = false;
|
||||
}, 300)
|
||||
},
|
||||
//点击摄像头
|
||||
cameraClose(){
|
||||
getVchannels() {
|
||||
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>
|
||||
|
||||
<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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue