Skip to content

G
gassafety-progress
Commit 17e2926a authored by wuqinghua's avatar wuqinghua
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 031cc36d 722bdfc9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 153 deletions
gassafetyprogress-web/src/assets/styles/all.scss
View file @ 17e2926a
......@@ -613,8 +613,23 @@
// overflow-y: none !important;
}
.amap-info {
position: fixed !important;
z-index: 999 !important;
}
// map里的label
.amap-info {
position: fixed !important;
z-index: 999 !important;
}
.amap-marker-label{
background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important;
border:none !important;
padding:10px;
}
.left {
.el-table__body-wrapper {
overflow-x: hidden !important;
overflow-y: hidden !important;
}
}
gassafetyprogress-web/src/components/bigWindow/Line.vue
View file @ 17e2926a
<!--
* @Author: your name
* @Date: 2022-01-27 14:25:45
* @LastEditTime: 2022-02-28 09:52:51
* @LastEditTime: 2022-02-28 11:35:31
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hello-world/src/views/components/User.vue
......@@ -142,7 +142,7 @@ export default {
.right {
box-sizing: border-box;
text-align: left;
padding: 0 5px;
padding: 0 1em;
}
.last {
border: none;
......
gassafetyprogress-web/src/components/bigWindow/VideoView.vue
View file @ 17e2926a
......@@ -13,7 +13,7 @@
<img src="@/assets/mapImages/closeBtn.png" alt="" />
</div>
<div class="box videoBox">
<div id="video"></div>
<div id="player" ></div>
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="dialogVisible = false"
......@@ -25,35 +25,103 @@
</template>
<script>
import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
import { getPreviewURLs } from "@/api/video/artemis"
//const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const IS_MOVE_DEVICE = true;
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default {
data() {
return {
// dialogVisible: true,
// AfterClose: true,
queryParam: {
cameraIndexCode: ""
},
player: null,
videoOpenNum: -1,
queryParam: {
cameraIndexCode: ""
},
};
},
watch: {},
mounted() {
setTimeout(() => {
this.player = new WasmPlayer(null, "video", this.callBack, {
Height: true,
});
this.player.play(this.deviceData.usr, 1);
}, 1);
this.$nextTick(() => {
if(!window.JSPlugin){
this.loadScript("/h5player/h5player.min.js").then(() =>{
this.createPlayer();
this.init()
})
}else{
this.createPlayer();
this.init()
}
});
// setTimeout(() => {
// this.player = new WasmPlayer(null, "video", this.callBack, {
// Height: true,
// });
// this.player.play(this.deviceData.usr, 1);
// }, 1);
},
methods: {
show() {
this.dialogVisible = true;
},
handleClose() {
console.log("关闭");
this.player.destroy(this.deviceData.usr);
// document.body.removeChild(this.$refs.videoBox.$el);
// handleClose() {
// console.log("关闭");
// this.player.destroy(this.deviceData.usr);
// // document.body.removeChild(this.$refs.videoBox.$el);
// },
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "/h5player",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
this.open();
},
open(){
this.queryParam.cameraIndexCode = this.deviceData.resourceId;
getPreviewURLs(this.queryParam).then(response =>{
if(response.data.code == '0'){
this.videoOpenNum++;
let url = response.data.data.url;
//let index = this.player.currentWindowIndex;
this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => {
console.log('realplay success')
},
e => { console.error(e) }
)
}
});
},
loadScript(src){
return new Promise(reslove =>{
let scpritE1 = document.createElement("script");
scpritE1.type = "text/javascript";
scpritE1.src = src;
scpritE1.onload = () => {
reslove();
}
document.body.appendChild(scpritE1);
})
},
callBack() {},
close() {
this.handleClose();
//this.handleClose();
this.mapClass.infowindowClose();
},
},
......@@ -61,6 +129,9 @@ export default {
</script>
<style lang="scss">
.sub-wnd{
text-align: center !important;
}
.box-wrapper {
background-color: rgba(9, 18, 32, 0.6);
position: relative;
......@@ -81,8 +152,8 @@ export default {
padding: 5px 12px 10px 10px;
width: 350px;
height: 200px;
#video {
height: 100%;
#player {
height: 190px;
}
}
}
......
gassafetyprogress-web/src/components/bigWindow/leftBar.vue
View file @ 17e2926a
......@@ -34,9 +34,9 @@
</div>
</div>
<div id="main1" style="width: 100%;height: 280px;"></div>
<div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;">
<!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->
<div>
<div class="item1">
<div class="item1" style="margin-top: 30px;">
<span class="dot">
<span class="dot-inner"></span>
</span>
......@@ -69,7 +69,7 @@
<div class="el-left">其他</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
</div>
</div>
<!-- </div> -->
</div>
</template>
......
gassafetyprogress-web/src/components/bigWindow/rightBar.vue
View file @ 17e2926a
......@@ -12,7 +12,6 @@
<div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
</div>
</div>
<div class="divfen" style="width: 90%;height: 30%;margin-left: 40px;">
<div class="left">
<div
class="bottom right-bottom-data-left"
......@@ -49,7 +48,7 @@
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="140">
</el-table-column>
<el-table-column prop="handledStatus" label="状态" width="70">
<el-table-column prop="handledStatus" label="状态">
<template slot-scope="scope">
<div class="ddd" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
......@@ -59,13 +58,6 @@
</el-table>
</div>
</div>
<!-- <div class ="divall" style="width: 50%">
<div id="main21" style="height: 50%;width: 100%"></div>
</div>
<div class="divall" style="width: 50%" >
<div id="main22" style="height: 50%;width: 100%"></div>
</div> -->
</div>
<!-- <div style="width: 100%;height: 200px;background-color: #44d7dc;">
<el-table
......@@ -92,21 +84,20 @@
</el-table-column>
</el-table>
</div> -->
<div class="echarts-one" style="margin-top: 10px;">
<div>
<div class="item1">
<div>
<div class="item1" style="margin-top: 10px;">
<span class="dot">
<span class="dot-inner"></span>
<span class="dot-inner"></span>
</span>
<span>资源统计</span>
<div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div>
<div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
<div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
</div>
</div>
<div id="myChartone" :style="{width: '420px', height: '250px'}"></div>
</div>
</div>
<div class="echarts-one" style="margin-top: 10px;width: 430px;margin-left: 10px;">
<div id="myChartone" :style="{width: '420px', height: '240px'}"></div>
</div>
<!-- <div>
<div class="item1">
<span class="dot">
......@@ -499,10 +490,10 @@
trigger: "item"
},
grid: {
top: "15%",
top: "8%",
left: "8%",
right: "12%",
bottom: "15%",
right: "8%",
bottom: "13%",
containLabel: true
},
xAxis: {
......@@ -726,7 +717,7 @@
}
</script>
<style>
<style scoped>
.titleTex{
height: 30px;
width: 100%;
......@@ -872,8 +863,9 @@
height: 100%;
overflow: hidden;
}
.el-table__body-wrapper {
overflow-x: hidden !important;
overflow-y: hidden !important;
.left{
margin-top: 10px;
width: 440px;
margin-left: 20px;
}
</style>
gassafetyprogress-web/src/utils/mapClass/map.js
View file @ 17e2926a
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2022-02-26 23:40:59
* @LastEditTime: 2022-02-28 10:25:45
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -255,6 +255,10 @@ export class EditorMap {
icon,
position: [lng, lat],
extData: deviceData,
// label:{
// content:123,
// direction:"top",
// }
});
// device.hide();
// 如果没有有这个公司的数组，就创建，有就直接push
......@@ -278,6 +282,18 @@ export class EditorMap {
// 3是删除操作
}
});
device.on("mouseover",(e)=>{
const target = e.target;
const data = target.getExtData();
console.log(data)
const name = data.nickName||data.deviceName||data.videoName||data.stationName
target.setLabel({content:name,direction:"top"})
})
device.on("mouseout",(e)=>{
const target = e.target;
const data = target.getExtData();
target.setLabel({content:""})
})
}
/** 点击marker出现infowindow
* @description:
......@@ -442,7 +458,7 @@ export class EditorMap {
if (!this.infowindow) return;
this.infowindow.close();
}
// 设备以及公司过滤
allfilter(companyArr, typeArr) {
for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => {
......@@ -472,57 +488,7 @@ export class EditorMap {
});
}
}
// 根据公司过滤是否显示 公司由一个数组传过来
companyFilter(companyArr) {
for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => {
const data = pipe.getExtData();
if (companyArr.indexOf(data.companyType + "") >= 0) {
pipe.show();
} else {
pipe.hide();
}
});
}
for (let deviceItem in this.allDevice) {
this.allDevice[deviceItem].forEach((device) => {
const data = device.getExtData();
// 燃气没有公司，所以没有device.companyType不收到公司的控制
const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
// 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
if (companyHas || !data.companyType) {
device.show();
} else {
device.hide();
}
});
}
}
// 根据设备类型隐藏展示
iconTypeFilter(typeArr) {
for (let deviceItem in this.allDevice) {
this.allDevice[deviceItem].forEach((device) => {
if (typeArr.indexOf(deviceItem + "") >= 0) {
device.show();
} else {
device.hide();
}
});
}
}
// 公司改变，先调用设备方法，在调用公司方法
companyChange(companyArr, typeArr) {
this.iconTypeFilter(typeArr);
this.companyFilter(companyArr);
}
// 设备选择，先调用公司方法，在调用设备方法覆盖
deviceChange(companyArr, typeArr) {
this.companyFilter(companyArr);
this.iconTypeFilter(typeArr);
}
// 卫星图切换
satellite = null;
changeMap(bool) {
......
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 17e2926a
......@@ -524,7 +524,7 @@ export default {
background: #112238;
}
.rightbar {
width: 450px;
width: 470px;
height: 90%;
position: fixed;
top: 10%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment