fix conflict

This commit is contained in:
曹前明 2022-08-18 18:12:10 +08:00
commit 55f821cc03
4 changed files with 406 additions and 256 deletions

View File

@ -1,23 +1,9 @@
<template>
<el-drawer
:title="areaName+'围栏设置'"
v-model="visible"
destroy-on-close
:size="'80%'"
@closed="closeDrawer"
>
<el-form
:model="coordinates"
label-width="80px"
style="position:absolute;top:15px;left:200px;"
>
<el-drawer :title="areaName + '围栏设置'" v-model="visible" destroy-on-close :size="'80%'" @closed="closeDrawer">
<el-form :model="coordinates" label-width="80px" style="position:absolute;top:15px;left:200px;">
<el-form-item label="围栏名称" prop="name">
<el-input
v-model="coordinates.railName"
placeholder="请输入围栏名称"
clearable
style="width: 150px;"
></el-input>
<el-input v-model="coordinates.railName" placeholder="请输入围栏名称" clearable style="width: 150px;">
</el-input>
</el-form-item>
</el-form>
<el-container v-loading="loading">
@ -26,11 +12,7 @@
<div id='mapContainer1'></div>
</el-main>
<el-footer>
<el-button
type="primary"
:loading="isSaveing"
@click="submit"
>
<el-button type="primary" :loading="isSaveing" @click="submit">
保存
</el-button>
<el-button @click="visible = false">取消</el-button>
@ -69,6 +51,7 @@
}
},
points: [],
areaMarkerLayer: null,
};
},
mounted() {
@ -79,6 +62,7 @@
methods: {
loadMap() {
let that = this;
window.map = new jsmap.JSMap({
mapType: jsmap.JSMapType.MAP_3D,
container: 'mapContainer1',
@ -140,21 +124,47 @@
}
});
window.map.addControl(drawTool2);
//
if (that.areaPoints.length > 2) {
debugger
that.areaMarkerLayers();
}
});
},
closeDrawer() {
this.$emit('closed');
},
areaMarkerLayers() {
let that = this;
that.areaMarkerLayer = new jsmap.JSDomMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: true
});
window.map.addLayer(that.areaMarkerLayer);
// this.markerShow();
},
markerShow() {
let that = this;
let tool = new jsmap.JSMapCoordTool(window.map);
//
let areaPoints = [];
let point = null;
that.areaPoints.forEach(item=>{
let point0 = that.areaPoints[0]
debugger;
let obj = {lng:345,lat:268}
console.log(point0)
debugger;
let obj = { x: point0.x, y: point0.y};
console.log(obj)
let tool = new jsmap.JSMapCoordTool(window.map);
debugger;
let pixel = tool.screenToMapCoordinate(obj);
debugger;
console.log(pixel)
debugger;
point = new jsmap.JSPoint(item.x,item.y,0);
that.areaPoints.forEach(item => {
let obj = { x: item.x, y: item.y }
let pixel = tool.screenToMapCoordinate(obj);
point = new jsmap.JSPoint(pixel.x, pixel.y, 0);
areaPoints.push(point)
})
let polygonMarker = new jsmap.JSPolygonMarker({
@ -174,18 +184,28 @@
// console.log(marker);
}//
});
window.map.addMarker(polygonMarker);
}
});
},
closeDrawer() {
this.$emit('closed');
that.areaMarkerLayer.addMarker(polygonMarker);
},
//
submit() {
let that = this;
// debugger;
let pointXY = [];
console.log(that.points)
let tool = new jsmap.JSMapCoordTool(window.map);
let coordinate = { x: 114.63059258861512, y: 38.81407163905287 };
let pixel = tool.mapToScreenCoordinate(coordinate);
debugger;
console.log(pixel)
debugger;
let points = that.points;
if (points.length > 0) {
that.isSaveing = true;
@ -193,9 +213,15 @@
points.forEach(item => {
let coordinate = { x: parseFloat(item[0]), y: parseFloat(item[1]) };
let pixel = tool.mapToScreenCoordinate(coordinate);
// let zuobiao = tool.screenToMapCoordinate(pixel);
// console.log(zuobiao)
pointXY.push(pixel);
});
that.coordinates.polygon.points = pointXY;
// that.coordinates.polygon.points = points;
that.$API.am.area.bindRail.req(that.areaId, that.coordinates)
.then(res => {
that.isSaveing = false;
@ -211,8 +237,10 @@
},
},
};
</script>
<style>
</style>

View File

@ -110,12 +110,9 @@
</el-main>
</el-container>
<el-dialog :title="channelName" v-model="limitedVisible" :width="745">
<div style="height: 560px">
<video id="videoElement" muted="muted"></video>
</div>
<video-view v-if="limitedVisible" :channelCode="channelCode"></video-view>
<template #footer>
<el-button @click="limitedVisible = false">关闭</el-button>
<el-button @click="viewClose">关闭</el-button>
</template>
</el-dialog>
<channel-view
@ -129,11 +126,14 @@
</template>
<script>
import channelView from "./vchannel_view";
import videoView from "./videoView";
export default {
name: "monitor",
inject:['reload'],
components: {
channelView,
videoView
},
data() {
return {
@ -166,6 +166,8 @@ export default {
},
code: "video_realtime",
},
channelCode:'',
flvPlayer:null,
deviceTypes: {
1: "枪机",
2: "球机",
@ -181,24 +183,26 @@ export default {
},
methods: {
handleView(row) {
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();
}
});
let that = this;
that.channelCode = row.channelCode;
that.channelName = row.channelName;
that.limitedVisible = true;
// that.$API.am.video.item.req(this.params).then((res) => {
// this.url = res.url;
// if (flvjs.isSupported()) {
// let videoElement = document.getElementById("videoElement");
// that.flvPlayer = flvjs.createPlayer({
// type: "flv",
// url: res.url,
// });
// that.flvPlayer.attachMediaElement(videoElement);
// that.flvPlayer.load();
// that.flvPlayer.play();
// }
// });
},
viewClose(){
this.limitedVisible = false;
},
handlePosition(row) {
this.channelCode = row.channelCode;

View File

@ -0,0 +1,61 @@
<template>
<div style="height: 560px">
<video id="videoElement" muted="muted"></video>
</div>
</template>
<script>
export default {
props: {
channelCode: {
type: String,
}
},
data() {
return {
flvPlayer: null,
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);
},
mounted() {
let that = this;
that.params.json.data.channelId = that.channelCode;
that.$API.am.video.item.req(that.params).then((res) => {
that.url = res.url;
if (flvjs.isSupported()) {
let videoElement = document.getElementById("videoElement");
that.flvPlayer = flvjs.createPlayer({
type: "flv",
url: res.url,
});
that.flvPlayer.attachMediaElement(videoElement);
that.flvPlayer.load();
that.flvPlayer.play();
}
});
},
unmounted () {
debugger;
let that = this;
that.flvPlayer.pause();
that.flvPlayer.unload();
that.flvPlayer.detachMediaElement();
that.flvPlayer.destroy();
that.flvPlayer = null;
},
};
</script>

View File

@ -247,13 +247,32 @@
</div>
<div class="detail-content">
<div class="content-head">
<div class="{'areaActive':areaShowType==1} areaNavItem" style="color:#ffffff">围栏</div>
<div class="{'areaActive':areaShowType==2} areaNavItem" style="color:#ffffff">作业</div>
<div class="{'areaActive':areaShowType==3} areaNavItem" style="color:#ffffff">监控</div>
<div class="{'areaActive':areaShowType==4} areaNavItem" style="color:#ffffff">喇叭</div>
<div @click="areaItemHandle(1)" :class="{'areaActive':areaShowType==1,'areaNavItem':1}" style="color:#ffffff">作业</div>
<div @click="areaItemHandle(2)" :class="{'areaActive':areaShowType==2,'areaNavItem':1}" style="color:#ffffff">监控</div>
<div @click="areaItemHandle(3)" :class="{'areaActive':areaShowType==3,'areaNavItem':1}" style="color:#ffffff">喇叭</div>
</div>
<div class="content-body">
<el-table>
<el-table class="bigScreenTable" v-if="areaShowType==1" :data="areaOperation" :height="300">
<el-table-column label="作业简介" prop="name"></el-table-column>
<el-table-column label="开始时间" prop="start_time"></el-table-column>
<el-table-column label="结束时间" prop="end_time"></el-table-column>
<el-table-column label="业务部门">
<template #default="scope">
<span v-if="scope.row.dept_ter_">{{scope.row.dept_ter_.name}}</span>
</template>
</el-table-column>
</el-table>
<el-table class="bigScreenTable" v-if="areaShowType==2">
<el-table-column label="设备编号"></el-table-column>
<el-table-column label="通道名称"></el-table-column>
<el-table-column label="类型"></el-table-column>
<el-table-column label="是否在线"></el-table-column>
</el-table>
<el-table class="bigScreenTable" v-if="areaShowType==3">
<el-table-column label="喇叭名称"></el-table-column>
<el-table-column label="喇叭音量"></el-table-column>
<el-table-column label="ip"></el-table-column>
<el-table-column label="在线状态"></el-table-column>
</el-table>
</div>
</div>
@ -412,14 +431,14 @@
</el-table-column>
<el-table-column label="部门">
<template #default="scope">
<span
v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.belong_dept_name }}</span>
<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.belong_dept_name
}}</span>
</template>
</el-table-column>
<el-table-column label="岗位">
<template #default="scope">
<span
v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.post_name }}</span>
<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.post_name
}}</span>
</template>
</el-table-column>
</el-table>
@ -452,13 +471,15 @@
</div>
<div class="info-item">
<span class="info-item-name">部门</span>
<span class="info-item-info"
v-if="screenUserItemDetail.belong_dept_">{{ screenUserItemDetail.belong_dept_.name }}</span>
<span class="info-item-info" v-if="screenUserItemDetail.belong_dept_">{{
screenUserItemDetail.belong_dept_.name
}}</span>
</div>
<div class="info-item">
<span class="info-item-name">岗位</span>
<span class="info-item-info"
v-if="screenUserItemDetail.post_">{{ screenUserItemDetail.post_.name }}</span>
<span class="info-item-info" v-if="screenUserItemDetail.post_">{{
screenUserItemDetail.post_.name
}}</span>
</div>
<div class="info-item">
<span class="info-item-name">证件类型</span>
@ -662,23 +683,25 @@
<div class="risk-basic">
<div class="risk-item">
<span class="risk-item-name">报警区域</span>
<span class="risk-item-info"
v-if="screenWarningItem.area_">{{ screenWarningItem.area_.name }}</span>
<span class="risk-item-info" v-if="screenWarningItem.area_">{{ screenWarningItem.area_.name
}}</span>
</div>
<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
<span class="risk-item-name">触发人</span>
<span class="risk-item-info"
v-if="screenWarningItem.employee_">{{ screenWarningItem.employee_.name }}</span>
<span class="risk-item-info" v-if="screenWarningItem.employee_">{{
screenWarningItem.employee_.name
}}</span>
</div>
<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
<span class="risk-item-name">触发人部门</span>
<span class="risk-item-info"
v-if="screenWarningItem.employee_.belong_dept_">{{ screenWarningItem.employee_.belong_dept_.name }}</span>
<span class="risk-item-info" v-if="screenWarningItem.employee_.belong_dept_">{{
screenWarningItem.employee_.belong_dept_.name
}}</span>
</div>
<div class="risk-item">
<span class="risk-item-name">触发事件</span>
<span class="risk-item-info" v-for="ite in screenWarningItem.cates_"
:key="ite">{{ ite.name }}</span>
<span class="risk-item-info" v-for="ite in screenWarningItem.cates_" :key="ite">{{ ite.name
}}</span>
</div>
<div class="risk-item">
<span class="risk-item-name">触发时间</span>
@ -777,6 +800,7 @@ export default {
postList: [],//
dangerList: [],//
areaList: [],///
areaOperation:[],
//
userCount: {
total: 0,
@ -1029,6 +1053,10 @@ export default {
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
areaItemHandle(index){
this.areaShowType = index;
},
//
getWarningTotal() {
let that = this;
that.$API.ecm.event.cateAgg.req(that.cateAggForm).then(res => {
@ -1037,6 +1065,7 @@ export default {
}
})
},
//
getWarningType() {
let that = this;
that.$API.ecm.event_cate.list.req().then(res => {
@ -1045,11 +1074,17 @@ export default {
}
})
},
//
areaRowClick(data) {
let that = this;
that.areaDetail = true;
this.$API.opm.operation.list.req({area:data.id}).then(res=>{
console.log(res)
that.areaOperation = res.results;
})
// let points = data.third_info.xx_rail.detail.polygon.points[0];
window.map.flyToPosition(new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0), { duration: 1000 });
},
//
getAllPost() {
@ -1134,6 +1169,7 @@ export default {
if (res.err_msg) {
} else {
that.areaList = res.results;
that.showRiskMarkers();
}
})
},
@ -1226,7 +1262,8 @@ export default {
show: false
});
window.map.addLayer(that.riskMarkerLayer);
that.showRiskMarkers();
that.getAreas();///$$
},
//layer
cameraMaskerLayers() {//
@ -1306,28 +1343,42 @@ export default {
},
//
showRiskMarkers() {
var boxMarker = new jsmap.JSBoxMarker({
id: 'box',
position: [
{ x: 114.63059258861512, y: 38.81407163905287, z: 0 },
{ x: 114.63044857916901, y: 38.81396178326786, z: 0 },
{ x: 114.63060812029352, y: 38.81386267832651, z: 0 },
{ x: 114.63073035356713, y: 38.81395745716681, z: 0 },
],
floorId: 1,//id
let that = this;
console.log(that.areaList);
// debugger;
that.areaList.forEach(item => {
// debugger
let pointsList = [], floorId = null;
if (item.third_info.xx_rail!==null&&item.third_info.xx_rail!==undefined) {
floorId = item.third_info.xx_rail.detail.floorId;
let points = item.third_info.xx_rail.detail.polygon.points;
pointsList = points.map(item => {
let obj = item;
obj.z = 0;
return obj
});
// debugger;
console.log(pointsList);
let boxMarker = new jsmap.JSBoxMarker({
id: item.id,
position: pointsList,
floorId: floorId,//id
color: 'rgba(255,0,0,0.44)',//
height: 0,//
stretchHeight: 6,//
strokeColor: '#ff0000',//线
show: true, //
depthTest: Boolean,
// depthTest: Boolean,
allowPicking: true, //
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//
callback: (marker) => {
// console.log(marker);
}
});
this.riskMarkerLayer.addMarker(boxMarker);
that.riskMarkerLayer.addMarker(boxMarker);
}
})
var boxMarker1 = new jsmap.JSBoxMarker({
id: 'box',
position: [
@ -1412,16 +1463,16 @@ export default {
//
let userImage = '';
if (userList.length > 0) {
debugger;
// debugger;
console.log(userList);
debugger;
// debugger;
let lng = [114.62923138539462, 114.6315404372349];//
let i = 0;
iconTextMarker = userList[0].mac;
let employee_ = userList[0].my_info.employee_;
employee_.mac = userList[0].mac;
console.log(userList[0].my_info.employee_.type)
debugger;
// debugger;
if (userList[0].my_info.employee_.type === 'employee') {
userImage = "/img/employee.png"
} else if (serList[0].my_info.employee_.type === 'remployee') {
@ -3277,12 +3328,18 @@ export default {
/*background: url(/public/img/left_arrow.png) no-repeat;*/
background-size: 100% 100%;
}
.areaNavItem {
color: #ffffff;
padding: 8px 16px;
border-radius: 15px;
}
.areaActive {
color: #0bf1ff;
border: 1px solid #32fde3;
background: #007767;
box-shadow: inset 0 0 8px #5aecf0;
}
[class*=" el-icon-"],
[class^=el-icon-] {
font-family: element-icons !important;