<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-06-16 15:03:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-15 11:07:10
* @FilePath: /danger-manage-web/src/views/bigwindow/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="big-window">
<!-- <button @click="$router.push('/')">idnex</button> -->
<!-- <div class="danger">
<el-button @click="dangerChange" type="primary">{{
danger ? "隐藏危险区域" : "展示危险区域"
}}</el-button>
</div> -->
<!-- <div class="go-index">
<el-button @click="$router.push('/index')" type="primary"
>首页</el-button
>
</div> -->
<div id="mapbox"></div>
</div>
</template>
<script>
import CreateCesium, { DEVICE_PIC_TYPE } from "@/utils/cesium/cesiumClass.js";
import Video from "@/components/bigWindow/video";
import Null from "@/components/bigWindow/Null";
import Danger from "@/components/bigWindow/Danger";
import danger from "@/assets/images/danger.png";
import Editor from '@/components/Editor';
export default {
name: "bigWindow",
components:{
Editor
},
data() {
return {
Cesium: null,
danger: true,
data1: [
{
deviceType: 1,
longitude: 114.14663479560947,
latitude: 38.39968509861548,
shortNum: 10,
title: "视频1231231231231",
},
{
deviceType: 1,
longitude: 114.14649648472712,
latitude: 38.39869677916153,
shortNum: 16,
title: "视频2",
},
],
data2: [
{
deviceType: 2,
longitude: 114.14601921066019,
latitude: 38.39727991482072,
// shortNum: 2,
title: "测试1",
},
{
deviceType: 2,
longitude: 114.14570426473814,
latitude: 38.39845804835061,
// shortNum: 2,
title: "测试2",
},
{
deviceType: 2,
longitude: 114.14574349121,
latitude: 38.399961397105635,
// shortNum: 2,
title: "测试3",
},
],
danger: [
{
lnglatArr: [
[114.14717670710164, 38.40005636539567],
[114.1468107102057, 38.40007904127634],
[114.14667960459407, 38.39920633274406],
[114.14701877614534, 38.39915715155819],
],
colorNum: 1,
fxlb: "高风险区域",
bsjh: "",
wxy: "锅炉操作",
fxd: "锅炉点火",
wxys: "操作人员违章作业来点火成功继续频繁点火",
whhg: "丧失劳动能力",
sglx: "锅炉爆炸，出点活在",
sgfspl: "平均2-3年发生一起",
gkcj: "班组级",
gkbm: "安全管理部",
gkzrgw: "锅炉工",
gkzrr: "张三",
gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
src: danger,
},
{
lnglatArr: [
[114.14677730159013, 38.39705223282708],
[114.14649230680254, 38.397063948491684],
[114.14667103104993, 38.39892681891495],
[114.14701528471832, 38.398899416956155],
],
colorNum: 2,
fxlb: "中风险区域",
bsjh: "",
wxy: "锅炉操作",
fxd: "锅炉点火",
wxys: "操作人员违章作业来点火成功继续频繁点火",
whhg: "丧失劳动能力",
sglx: "锅炉爆炸，出点活在",
sgfspl: "平均2-3年发生一起",
gkcj: "班组级",
gkbm: "安全管理部",
gkzrgw: "锅炉工",
gkzrr: "张三",
gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
src: danger,
},
{
lnglatArr: [
[114.14625043839335, 38.398287521835094],
[114.14571696614324, 38.3983232240641],
[114.14564758455208, 38.397642064332715],
[114.14616102903275, 38.39756712393071],
],
colorNum: 3,
fxlb: "低风险区域",
bsjh: "",
wxy: "锅炉操作",
fxd: "锅炉点火",
wxys: "操作人员违章作业来点火成功继续频繁点火",
whhg: "丧失劳动能力",
sglx: "锅炉爆炸，出点活在",
sgfspl: "平均2-3年发生一起",
gkcj: "班组级",
gkbm: "安全管理部",
gkzrgw: "锅炉工",
gkzrr: "张三",
gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
src: danger,
},
{
lnglatArr: [
[114.14657693947383, 38.39841324770322],
[114.14575681650135, 38.398475652278066],
[114.14593342445129, 38.39992212369578],
[114.14674496633742, 38.39987290751477],
],
colorNum: 4,
fxlb: "中低风险区域",
bsjh: "",
wxy: "锅炉操作",
fxd: "锅炉点火",
wxys: "操作人员违章作业来点火成功继续频繁点火",
whhg: "丧失劳动能力",
sglx: "锅炉爆炸，出点活在",
sgfspl: "平均2-3年发生一起",
gkcj: "班组级",
gkbm: "安全管理部",
gkzrgw: "锅炉工",
gkzrr: "张三",
gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
src: danger,
},
],
};
},
mounted() {
this.Cesium = new CreateCesium(
"mapbox",
["../3dtiles/jsondata/tileset.json"],
this
);
this.danger.forEach((item) => {
this.Cesium.addDanger(item, Danger);
});
this.data1.forEach((item) => {
this.Cesium.addDevice(item, "pic", Video);
});
this.data2.forEach((item) => {
this.Cesium.addDevice(item, "pic", Null);
});
},
methods: {
dangerChange() {
this.danger = !this.danger;
// 当infowindow里存在danger-wrappeclass名称时，就清楚infowindow
this.Cesium.dangerTotal(this.danger, "danger-wrappe");
},
},
beforeDestroy() {
// 挂掉该关的 infowindow 跟计算infowindow位置的计时器
this.Cesium.clearInfoWindow();
this.Cesium.destroy()
},
};
</script>
<style lang="scss" scoped>
.big-window {
width: 100%;
height: 100%;
#mapbox {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.danger {
position: fixed;
top: 20px;
right: 20px;
z-index: 10;
}
.go-index{
position: fixed;
top: 20px;
left: 20px;
z-index: 10;
}
}
</style>