<template>
|
<div ref="popou" class="drag_black" v-draw>
|
<div class="pop-header">
|
<i class="el-icon-menu"></i>{{ title }}
|
<div style="float: right; cursor: pointer" @click="close">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<div class="scrollbar" style="overflow-y: auto">
|
<div v-if="tag === '1'">
|
<el-form style="font-color: 0; padding: 5px; text-align: left" label-position="left">
|
<el-form-item label="报警时间:" class="input-item">{{ rowData.hqrq }}
|
</el-form-item>
|
<el-form-item label="火情地址:" class="input-item">
|
{{ rowData.hqdz }}
|
</el-form-item>
|
<el-form-item label="经纬坐标:" class="input-item">
|
{{ rowData.x }},{{ rowData.y }},{{ rowData.alt }}
|
</el-form-item>
|
<el-form-item label="详细位置:" class="input-item">
|
{{ rowData.xxwz }}
|
</el-form-item>
|
</el-form>
|
<div style="margin: 5px; text-align: center">
|
<!-- <el-button size="small" type="primary" @click="locationOfFire">火点定位</el-button> -->
|
<el-button size="small" type="primary" @click="showBuildComponents">建筑结构</el-button>
|
<el-button size="small" type="primary" @click="searchVideos">周边物联监控</el-button>
|
<el-popover style="margin-left:5px" placement="bottom" width="200" v-model="dialogVisible">
|
<div style="padding: 10px">是否立即发送火情警讯？</div>
|
<div style="text-align: right; margin: 0">
|
<el-button size="mini" type="text" @click="dialogVisible = false">取消</el-button>
|
<el-button type="danger" size="mini" @click="alertFireMergence">立即发送</el-button>
|
</div>
|
<el-button size="small" type="danger" slot="reference">一键报警</el-button>
|
</el-popover>
|
<el-button size="small" type="primary" @click="lineOfEscape">逃生路径</el-button>
|
|
<el-button size="small" type="primary" @click="xfpenshui">消防喷水</el-button>
|
</div>
|
</div>
|
<div v-if="tag === '2'">
|
<div style="margin: 5px">
|
</div>
|
<!-- <el-table :data="videodata" border size="mini" v-show="tablevisible"
|
style="width: 100%; background-color: transparent; margin-top: 10px" rowKey="gid">
|
<el-table-column prop="bh" header-align="center" align="center" label="监控摄像头编号">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="详情"><template slot-scope="scope">
|
<el-button icon="el-icon-video-camera" @click="playVideo(scope.row, scope.$index)" circle
|
size="small"></el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
</div>
|
<div v-if="tag === '3'">
|
<el-form style="font-color: 0; padding: 5px; text-align: left" label-position="left">
|
<el-form-item label="危险源:" class="input-item">
|
<el-checkbox v-model="checked1" @change="jyzChange1">加油站</el-checkbox>
|
<!-- <el-checkbox v-model="checked2" @change="jyzChange2">室内管道</el-checkbox> -->
|
</el-form-item>
|
<el-form-item label="周边重点单位:" class="input-item">
|
<el-checkbox v-model="checked3" @change="jyzChange3">学校</el-checkbox>
|
<el-checkbox v-model="checked4" @change="jyzChange4">医院</el-checkbox>
|
</el-form-item>
|
<el-form-item label="救援路线:" class="input-item">
|
<el-switch v-model="value1" active-text="显示" inactive-text="关闭" @change="jylxChange">
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="疏散路线:" class="input-item">
|
<el-switch v-model="value2" active-text="显示" inactive-text="关闭" @change="sslxChange">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div v-if="tag === '4'">
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="消防设施" name="first">
|
<el-table :data="devicedatas" border size="mini" style="
|
width: 100%;
|
background-color: transparent;
|
margin-top: 10px;
|
">
|
<el-table-column prop="code" header-align="center" align="center" label="消防设施编号">
|
</el-table-column>
|
<el-table-column prop="name" header-align="center" align="center" label="名称">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="操作"><template
|
slot-scope="scope">
|
<el-button icon="el-icon-position" @click="flyToDevice(scope.row, scope.$index)"
|
circle size="small"></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="警报处理" name="second">
|
<el-button size="small" type="primary" @click="clearWarning">解除警报</el-button>
|
</el-tab-pane>
|
<el-tab-pane label="消防日志" name="third">
|
<el-form :label-position="labelPosition" label-width="80px" :model="formLog">
|
<el-form-item label="报警楼栋">
|
<el-input :readonly="true" v-model="formLog.building"></el-input>
|
</el-form-item>
|
<el-form-item label="报警楼层">
|
<el-input :readonly="true" v-model="formLog.level"></el-input>
|
</el-form-item>
|
<el-form-item label="报警时间">
|
<el-input :readonly="true" v-model="formLog.time"></el-input>
|
</el-form-item>
|
<el-form-item label="火灾原因">
|
<el-input v-model="formLog.reason"></el-input>
|
</el-form-item>
|
<el-form-item label="火灾损失">
|
<el-input v-model="formLog.loss"></el-input>
|
</el-form-item>
|
<el-form-item label="人员伤亡">
|
<el-input v-model="formLog.casualties"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="submitLog">提交</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<el-dialog :visible.sync="videoVisible" width="500px" height="600px" :title="videoTitle"
|
:modal-append-to-body="false">
|
<div style="text-align: center">
|
<video width="100%" height="100%" :src="videosrc" controls="controls" autoplay="autoplay"
|
ref="video"></video>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import axios from "axios";
|
import { mapState, mapMutations } from "vuex";
|
import * as SmartEarth from "../../../../public/CimSDK/index.js"
|
let Cesium = SmartEarth.Cesium;
|
export default {
|
props: {
|
title: String,
|
tag: String,
|
data: Object,
|
},
|
data() {
|
return {
|
theme: "",
|
visiable: true,
|
rowData: { hqbh: "", hqrq: "", hqdz: "", xxwz: "", x: 0, y: 0, alt: 0 },
|
tablevisible: false,
|
icTran: [],
|
bimFCFH: false,
|
dialogVisible: false,
|
videoVisible: false,
|
|
// videodata: [
|
// {
|
// bh: "ZH-380-KS-01",
|
// lon: 120.9057088,
|
// lat: 30.83018,
|
// height: 1.13, cameraVideo: "./config/33mp4.mp4",
|
// },
|
// {
|
// bh: "ZH-380-KS-02",
|
// lon: 120.90568,
|
// lat: 30.8296245,
|
// height: 1.75,
|
// cameraVideo: "./config/44mp4.mp4",
|
// },
|
// {
|
// bh: "ZH-380-KS-03",
|
// lon: 120.90779,
|
// lat: 30.83038274,
|
// height: 1.61,
|
// cameraVideo: "./config/22mp4.mp4",
|
// },
|
// ],
|
videodata: [
|
{
|
bh: "ZH-380-KS-01",
|
lon: 120.906251,
|
lat: 30.838912,
|
height: 1.13,
|
cameraVideo: "./config/33mp4.mp4",
|
type: 0
|
},
|
{
|
bh: "ZH-380-KS-02",
|
lon: 120.9056007,
|
lat: 30.838955,
|
height: 1.75,
|
cameraVideo: "./config/44mp4.mp4",
|
type: 0
|
},
|
{
|
bh: "ZH-380-KS-03",
|
lon: 120.90549834,
|
lat: 30.838604,
|
height: 57,
|
cameraVideo: "./config/shinei.mp4",
|
type: 1
|
},
|
],
|
videosrc: "",
|
videoTitle: "",
|
checked1: false,
|
checked2: false,
|
checked3: false,
|
checked4: false,
|
value1: false,
|
value2: false,
|
txObjs: [],
|
videoLabels: [],
|
ksyCircle: null,
|
ksyCircle2: null,
|
jyzLabels: [],
|
xxLabels: [],
|
yyLabels: [],
|
jyObjs: {
|
jylabel: null,
|
jylxlayer: null,
|
sslxlayer: null,
|
saftyCircle: null,
|
},
|
formLog: {
|
building: "嘉善疾病防治中心宿舍楼2#",
|
level: "7层",
|
time: "2022/9/28 11:23:01",
|
reason: "",
|
loss: "",
|
casualties: "",
|
},
|
activeName: "first",
|
labelPosition: "right",
|
selectId: [],
|
devicedatas: [
|
{
|
code: "892a92ff309621ad3e418c34e804539d_2SBxglvSvDAu6eDUVns6fH",
|
lon: 120.9057088,
|
lat: 30.83018,
|
height: 1.13,
|
name: "单栓室内消火栓箱:SG24A65-P:5252340",
|
},
|
{
|
code: "892a92ff309621ad3e418c34e804539d_2SBxglvSvDAu6eDUVns6GP",
|
lon: 120.90568,
|
lat: 30.8296245,
|
height: 1.75,
|
name: "单栓室内消火栓箱:SG24A65-P:5253820",
|
},
|
{
|
code: "892a92ff309621ad3e418c34e804539d_2SBxglvSvDAu6eDUVns6eA",
|
lon: 120.9063318,
|
lat: 30.8298264,
|
height: 1.61,
|
name: "单栓室内消火栓箱:SG24A65-P:5252271",
|
},
|
],
|
};
|
},
|
methods: {
|
flyToDevice(row, index) {
|
let guid = row.code;
|
let _this = this;
|
if (guid !== "") {
|
let ifcid = guid.split("_").slice(1).join("_");
|
let modelId = "43";
|
let icHighlight = [];
|
let sqldb = window.BIM.GetModelSqlDb(modelId);
|
sqldb.each(
|
`select m.id as id from component c left join meshInstances m on m.componentId=c.id where c.ifcid='${ifcid}'`,
|
[],
|
(result) => {
|
icHighlight.push(modelId, result.id);
|
}
|
);
|
//点击高亮
|
if (window.BIM) {
|
if (_this.selectId) {
|
window.BIM.SetInstancesStatus(1, new Int32Array(_this.selectId));
|
}
|
let item = _this.$store.state.currentSelectNode;
|
if (item) {
|
let modelTransform = item.modelTransform;
|
let boundingSphere = _this.getBIMBoundingSphere(
|
window.BIM,
|
modelTransform,
|
icHighlight
|
);
|
window.sgworld._Viewer.camera.flyToBoundingSphere(boundingSphere);
|
}
|
_this.selectId = [...icHighlight];
|
window.BIM.SetInstancesStatus(2, new Int32Array(_this.selectId));
|
}
|
}
|
},
|
getBIMBoundingSphere(bim, modelTransform, modelIdAndInstancesId) {
|
let instancesTransformBox = bim.GetInstancesTransformBox(
|
modelIdAndInstancesId[0],
|
modelIdAndInstancesId[1]
|
);
|
let instancesMatrix = Cesium.Matrix4.fromArray(instancesTransformBox[0]);
|
let boxMin = Cesium.Matrix4.multiplyByPoint(
|
instancesMatrix,
|
Cesium.Cartesian3.fromArray(instancesTransformBox[1], 0),
|
{}
|
);
|
let boxMax = Cesium.Matrix4.multiplyByPoint(
|
instancesMatrix,
|
Cesium.Cartesian3.fromArray(instancesTransformBox[1], 3),
|
{}
|
);
|
boxMin = Cesium.Matrix4.multiplyByPoint(modelTransform, boxMin, {});
|
boxMax = Cesium.Matrix4.multiplyByPoint(modelTransform, boxMax, {});
|
let boundingSphere = Cesium.BoundingSphere.fromPoints(
|
[boxMin, boxMax],
|
new Cesium.BoundingSphere()
|
);
|
return boundingSphere;
|
},
|
clearWarning() {
|
this.$message({
|
message: "警报已解除，楼宇设备已复位！",
|
type: "success",
|
});
|
},
|
submitLog() {
|
this.$message({
|
message: "日志上报成功！",
|
type: "success",
|
});
|
this.$emit("closePopou", false);
|
},
|
test() {
|
alert(1);
|
},
|
close() {
|
this.$emit("closePopou", false);
|
this.txObjs.forEach((e) => {
|
try { e && e.deleteObject(); } catch (ex) { }
|
try { e && e.destory(); } catch (ex) { }
|
});
|
this.txObjs = [];
|
if (this.ksyCircle) this.ksyCircle.item.show = false;
|
if (this.ksyCircle2) this.ksyCircle2.item.show = false;
|
this.jyzLabels.forEach((e) => {
|
e && (e.item.show = false);
|
});
|
this.xxLabels.forEach((e) => {
|
e && (e.item.show = false);
|
});
|
this.yyLabels.forEach((e) => {
|
e && (e.item.show = false);
|
});
|
this.videoLabels.forEach((e) => {
|
e && (e.item.show = false);
|
});
|
|
this.jyObjs.jylabel && (this.jyObjs.jylabel.item.show = false);
|
this.jyObjs.jylxlayer &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.jylxlayer.treeobj.id,
|
false
|
);
|
|
this.jyObjs.sslxlayer &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.sslxlayer.treeobj.id,
|
false
|
);
|
this.jyObjs.saftyCircle &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.saftyCircle.treeobj.id,
|
false
|
);
|
},
|
|
lineOfEscape() {
|
// let h = 16.4, w = 15;
|
|
// let bimz1 = [
|
// 120.906273981337,
|
// 30.8301909207,
|
// h,
|
// 120.9062174,
|
// 30.830191,
|
// h,
|
// 120.9061506,
|
// 30.83019008,
|
// h,
|
// 120.90607326,
|
// 30.83019049,
|
// h,
|
// 120.906074,
|
// 30.83016183,
|
// h,
|
// ];
|
// let bimz2 = [120.90621731, 30.8301871, h, 120.9062174, 30.830191, h];
|
// let bimz3 = [120.9062186, 30.8301956, h, 120.9062174, 30.830191, h];
|
// let bimz4 = [120.90614708, 30.830157, h, 120.9061506, 30.83019008, h];
|
// let bimz5 = [120.90614592, 30.8302234, h, 120.9061506, 30.83019008, h];
|
|
// let bimz11 = [
|
// 120.905957827,
|
// 30.83019113,
|
// h,
|
// 120.9060145501,
|
// 30.83019096,
|
// h,
|
// 120.90607326,
|
// 30.83019049,
|
// h,
|
// ];
|
// Cesium.Material._materialCache.getMaterial(Cesium.Material.PolylineArrowType).translucent = false
|
// let bimz12 = [120.90601, 30.830186, h, 120.9060145501, 30.83019096, h];
|
// let bimz13 = [120.906013, 30.83019664, h, 120.9060145501, 30.83019096, h];
|
// this.addArraSignline(bimz11, w, "GREEN");
|
// this.addArraSignline(bimz12, w, "GREEN");
|
// this.addArraSignline(bimz13, w, "GREEN");
|
// this.addArraSignline(bimz1, w, "GREEN");
|
// this.addArraSignline(bimz2, w, "GREEN");
|
// this.addArraSignline(bimz3, w, "GREEN");
|
// this.addArraSignline(bimz4, w, "GREEN");
|
// this.addArraSignline(bimz5, w, "GREEN");
|
// this.addArraSignline(bimz, w, "GREEN")
|
|
let h = 57.9, w = 10;
|
Cesium.Material._materialCache.getMaterial(Cesium.Material.PolylineDashType).translucent = false;
|
Cesium.Material._materialCache.getMaterial(Cesium.Material.PolylineArrowType).translucent = false;
|
let bim0 = [120.90549834, 30.838602, h, 120.90503021, 30.838633858, h];
|
this.addSignline(bim0, w, "CHARTREUSE");
|
|
let bim1 = [120.90549834, 30.838602, h, 120.90547985, 30.838603358, h];
|
this.addArraSignline(bim1, w, "CHARTREUSE")
|
let bim2 = [120.90526934, 30.8386179, h, 120.90525485, 30.83861868, h];
|
this.addArraSignline(bim2, w, "CHARTREUSE")
|
let bim3 = [120.90503021, 30.838633858, h, 120.90503021, 30.838621858, h];
|
this.addArraSignline(bim3, w, "CHARTREUSE")
|
|
},
|
locationOfFire() {
|
let f = [this.rowData.x, this.rowData.y, this.rowData.alt];
|
let o1 = sgworld.Analysis.createParticleEffect(
|
"flame",
|
{ x: f[0], y: f[1], z: f[2] },
|
{ disableDepthTestDistance: Infinity },
|
function (data) {
|
data[0].startColor.alpha = 1;
|
data[0].endColor.alpha = 1;
|
}
|
);
|
let o2 = sgworld.Analysis.createParticleEffect(
|
"smog",
|
{ x: f[0], y: f[1], z: f[2] },
|
null,
|
function (data) {
|
data[0].startColor.alpha = 1;
|
data[0].endColor.alpha = 1;
|
}
|
);
|
let f2 = [120.906273981337, 30.8303121, 20];
|
let o3 = sgworld.Analysis.createParticleEffect(
|
"flame",
|
{ x: f2[0], y: f2[1], z: f2[2] },
|
null,
|
function (data) {
|
data[0].startColor.alpha = 1;
|
data[0].endColor.alpha = 1;
|
}
|
);
|
let o4 = sgworld.Analysis.createParticleEffect(
|
"smog",
|
{ x: f2[0], y: f2[1], z: f2[2] },
|
null,
|
function (data) {
|
data[0].startColor.alpha = 1;
|
data[0].endColor.alpha = 1;
|
}
|
);
|
o3.Flame[0].show = false;
|
o4.Smog[0].show = false;
|
this.txObjs.push(o1);
|
this.txObjs.push(o2);
|
this.txObjs.push(o3);
|
this.txObjs.push(o4);
|
let treeNode = {};
|
treeNode.flyTo = [
|
120.90559211780712, 30.83062170774296, 68.00116120145915,
|
2.401596281424846, -0.4710041844459605, 6.2831834722744695,
|
];
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
treeNode.flyTo[2]
|
),
|
orientation: {
|
heading: treeNode.flyTo[3],
|
pitch: treeNode.flyTo[4],
|
roll: treeNode.flyTo[5],
|
},
|
});
|
},
|
xfpenshui() {
|
let f2 = [120.90549834, 30.838654, 67];
|
let o3 = sgworld.Analysis.createParticleEffect(
|
"fountain",
|
{ x: f2[0], y: f2[1], z: f2[2] }, null,
|
function (data) {
|
data[0].image = 'http://localhost:8084/SmartEarthSDK/Workers/image/fire.png';
|
data[0].startColor.alpha = 1;
|
data[0].endColor.alpha = 1;
|
|
}
|
);
|
this.txObjs.push(o3)
|
|
},
|
showBuildComponents() {
|
// let item = this.$store.state.currentSelectNode;
|
// if (item.sourceType === "bim") {
|
// this.isbim = true;
|
// this.currentBim = item;
|
// }
|
// if (this.currentBim) {
|
// // let modelId = this.currentBim.dataId;
|
// }
|
|
this.bimFCFH = !this.bimFCFH;
|
this.fcfh("9");
|
this.fcfh("4");
|
|
},
|
fcfh(modelId) {
|
let that = this;
|
let bim = window.BIM;
|
let level = 16;
|
if (bim) {
|
if (that.bimFCFH) {
|
let icTran = [];
|
let sqldb = bim.GetModelSqlDb(modelId);
|
sqldb.each(
|
`SELECT meshInstances.id as instancesId,component.id AS componentId FROM component
|
left join meshInstances on meshInstances.componentId = component.id where storey like '${level}%'`,
|
[],
|
(result) => {
|
icTran.push(modelId, result.instancesId);
|
}
|
);
|
let aloop = (x, y, z) => {
|
bim.SetInstancesTransform(
|
new Float64Array([
|
...icTran,
|
...Cesium.Matrix4.toArray(
|
Cesium.Matrix4.fromTranslation(
|
new Cesium.Cartesian3(x, y, z)
|
)
|
),
|
888888,
|
])
|
);
|
// if (y < 22) {
|
// setTimeout(() => {
|
// aloop(x, y + 1, z);
|
// }, 10);
|
// }
|
if (y > -100) {
|
setTimeout(() => {
|
aloop(x, y - 1, z);
|
}, 10);
|
}
|
};
|
aloop(0, 0, 0);
|
this.$emit("openFloor", true);
|
} else {
|
let icTran = [];
|
let sqldb = bim.GetModelSqlDb(modelId);
|
sqldb.each(
|
`SELECT meshInstances.id as instancesId,component.id AS componentId FROM component
|
left join meshInstances on meshInstances.componentId = component.id where storey like '${level}%'`,
|
[],
|
(result) => {
|
icTran.push(modelId, result.instancesId);
|
}
|
);
|
icTran.push(
|
...Cesium.Matrix4.toArray(
|
Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0, 0, 0))
|
)
|
);
|
// 最后一个值写888888代表所有id只使用一个矩阵
|
icTran.push(888888);
|
bim.SetInstancesTransform(new Float64Array(icTran));
|
|
this.$emit("openFloor", false);
|
}
|
}
|
},
|
|
searchVideos() {
|
let treeNode = {};
|
// treeNode.flyTo = [
|
// 120.90712211133491, 30.830115570466475, 167.29201889507928,
|
// 4.716512774200396, -0.9146769747373193, 0.000007580227358694458,
|
// ];
|
treeNode.flyTo = [120.90754393501116, 30.83931990246339, 139.03116781125686, 4.239258844157679, -0.5925881360087533, 0.000004451045811038057];
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
treeNode.flyTo[2]
|
),
|
orientation: {
|
heading: treeNode.flyTo[3],
|
pitch: treeNode.flyTo[4],
|
roll: treeNode.flyTo[5],
|
},
|
});
|
this.tablevisible = true;
|
let cameraImg = SmartEarthRootUrl + "Workers/image/camera.svg";
|
|
let positions = this.videodata;
|
|
let that = this;
|
positions.forEach((item) => {
|
let cameraVideo = item.cameraVideo;
|
if (item.type === 0) {
|
let des = ` <div class="divPoint-camera-content">
|
<img class="divPoint-camera-img" src="${cameraImg}" >
|
</div>
|
<div class="divPoint-camera-line" ></div>
|
<div class="divPoint-camera-point"></div>
|
`;
|
let vl = sgworld.Creator.createDivPoint("视频点位", item, {
|
type: "custom",
|
offset: ["c", 0],
|
far: 2000,
|
description: des,
|
onclick(data) {
|
that.videoVisible = true;
|
that.videoTitle = item.bh;
|
that.videosrc = cameraVideo;
|
},
|
});
|
that.videoLabels.push(vl);
|
}
|
else {
|
let des = ` <div class="divPoint-camera-content">
|
<img class="divPoint-camera-img" src="${cameraImg}" >
|
</div>
|
`;
|
let vl = sgworld.Creator.createDivPoint("视频点位", item, {
|
type: "custom",
|
offset: ["c", 0],
|
far: 2000,
|
description: des,
|
onclick(data) {
|
that.videoVisible = true;
|
that.videoTitle = item.bh;
|
that.videosrc = cameraVideo;
|
},
|
});
|
that.videoLabels.push(vl);
|
}
|
});
|
},
|
jyzChange1(val) {
|
let that = this;
|
let p = [{ x: 120.9031238, y: 30.8318364933, pname: "燕魏加油站" }]; //加油站点
|
let jyzimg = SmartEarthRootUrl + "Workers/image/mark.png";
|
if (val === true) {
|
if (that.jyzLabels.length > 0) {
|
that.jyzLabels.forEach((l) => {
|
l && (l.item.show = true);
|
});
|
} else {
|
p.forEach((item) => {
|
var position = sgworld.Creator.CreatePosition(item.x, item.y, 10);
|
var label = sgworld.Creator.CreateLabel(
|
position,
|
item.pname,
|
jyzimg,
|
{
|
pixelOffset: { x: 0, y: -50 },
|
disableDepthTestDistance: Infinity,
|
},
|
0,
|
"文本"
|
);
|
that.jyzLabels.push(label);
|
});
|
}
|
//以火点画1公里圆
|
if (this.ksyCircle === null) {
|
this.ksyCircle = sgworld.Analysis.createCircleScan(
|
{ lon: this.rowData.x, lat: this.rowData.y },
|
1000,
|
"#ff0000",
|
3000,
|
true
|
);
|
sgworld.Navigate.flyToPosition(this.rowData.x, this.rowData.y, 3000);
|
} else {
|
this.ksyCircle.item.show = true;
|
}
|
} else {
|
if (this.ksyCircle != null) {
|
this.ksyCircle.item.show = false;
|
}
|
|
that.jyzLabels.forEach((l) => {
|
l && (l.item.show = false);
|
});
|
}
|
},
|
jyzChange2(val) {
|
let that = this;
|
if (val === true) {
|
} else {
|
}
|
},
|
jyzChange3(val) {
|
let that = this;
|
let p = [
|
{ x: 120.897405498, y: 30.827807, pname: "泗州小学" },
|
{ x: 120.8955825, y: 30.82805445, pname: "泗州中学" },
|
{ x: 120.8935728, y: 30.829056, pname: "嘉善中学" },
|
{ x: 120.909667, y: 30.8342175839, pname: "吴镇小学" },
|
{ x: 120.90999419, y: 30.8362319, pname: "嘉善实验中学" },
|
]; //加油站点
|
let jyzimg = SmartEarthRootUrl + "Workers/image/yellow.png";
|
if (val === true) {
|
if (that.xxLabels.length > 0) {
|
that.xxLabels.forEach((l) => {
|
l && (l.item.show = true);
|
});
|
} else {
|
p.forEach((item) => {
|
var position = sgworld.Creator.CreatePosition(item.x, item.y, 10);
|
var label = sgworld.Creator.CreateLabel(
|
position,
|
item.pname,
|
jyzimg,
|
{
|
pixelOffset: { x: 0, y: -50 },
|
disableDepthTestDistance: Infinity,
|
},
|
0,
|
"文本"
|
);
|
that.xxLabels.push(label);
|
});
|
}
|
//以火点画1公里圆
|
if (this.ksyCircle === null) {
|
this.ksyCircle = sgworld.Analysis.createCircleScan(
|
{ lon: this.rowData.x, lat: this.rowData.y },
|
1000,
|
"#ff0000",
|
3000,
|
true
|
);
|
sgworld.Navigate.flyToPosition(this.rowData.x, this.rowData.y, 3000);
|
} else {
|
this.ksyCircle.item.show = true;
|
}
|
} else {
|
if (this.ksyCircle != null) {
|
this.ksyCircle.item.show = false;
|
}
|
|
that.xxLabels.forEach((l) => {
|
l && (l.item.show = false);
|
});
|
}
|
},
|
jyzChange4(val) {
|
let that = this;
|
let p = [
|
{ x: 120.9061257, y: 30.8253238, pname: "嘉善第一人民医院" },
|
{ x: 120.890809, y: 30.8263259, pname: "嘉善富扬中西医结合医院" },
|
{ x: 120.9161148, y: 30.843386, pname: "中医医院" },
|
{ x: 120.919412, y: 30.84142, pname: "妇幼保健院" },
|
];
|
let jyzimg = SmartEarthRootUrl + "Workers/image/e6.png";
|
if (val === true) {
|
if (that.yyLabels.length > 0) {
|
that.yyLabels.forEach((l) => {
|
l && (l.item.show = true);
|
});
|
} else {
|
p.forEach((item) => {
|
var position = sgworld.Creator.CreatePosition(item.x, item.y, 10);
|
var label = sgworld.Creator.CreateLabel(
|
position,
|
item.pname,
|
jyzimg,
|
{
|
pixelOffset: { x: 0, y: -50 },
|
pixelSize: 160,
|
disableDepthTestDistance: Infinity,
|
},
|
0,
|
"文本"
|
);
|
that.yyLabels.push(label);
|
});
|
}
|
//以火点画2公里圆
|
if (this.ksyCircle2 === null) {
|
this.ksyCircle2 = sgworld.Analysis.createCircleScan(
|
{ lon: this.rowData.x, lat: this.rowData.y },
|
2000,
|
"#ff0000",
|
4000,
|
true
|
);
|
sgworld.Navigate.flyToPosition(this.rowData.x, this.rowData.y, 5000);
|
} else {
|
this.ksyCircle2.item.show = true;
|
}
|
} else {
|
if (this.ksyCircle2 != null) {
|
this.ksyCircle2.item.show = false;
|
}
|
|
that.yyLabels.forEach((l) => {
|
l && (l.item.show = false);
|
});
|
}
|
},
|
jylxChange(val) {
|
let handler;
|
if (val === true) {
|
if (this.jyObjs.jylxlayer === null) {
|
let jyzimg = SmartEarthRootUrl + "Workers/image/c5.png";
|
var position = sgworld.Creator.CreatePosition(
|
120.89698281,
|
30.8261403,
|
10
|
);
|
this.jyObjs.jylabel = sgworld.Creator.CreateLabel(
|
position,
|
"嘉善消防大队",
|
jyzimg,
|
{
|
pixelOffset: { x: 0, y: -50 },
|
disableDepthTestDistance: Infinity,
|
},
|
0,
|
"文本3"
|
);
|
// 流光线图层
|
this.jyObjs.jylxlayer = sgworld.Creator.createPathLayer({
|
id: "jylx",
|
url: "./config/jylx.json",
|
color: "#FF0000FF", //线的颜色
|
width: 10.0, //线的宽度
|
pointColor: "#DCDCDC", //移动点的颜色
|
speed: 4,
|
far: 50000,
|
});
|
} else {
|
this.jyObjs.jylabel && (this.jyObjs.jylabel.item.show = true);
|
this.jyObjs.jylxlayer &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.jylxlayer.treeobj.id,
|
true
|
);
|
}
|
sgworld.Navigate.flyToPosition(this.rowData.x, this.rowData.y, 3000);
|
|
handler = sgworld._Viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
|
var pickedFeature = sgworld._Viewer.scene.pick(movement.position);
|
if (typeof (pickedFeature) != "undefined" && pickedFeature.primitive instanceof Cesium.GroundPolylinePrimitive) //鼠标是否点到面上
|
{
|
var id = pickedFeature.id;
|
alert("显示救援路径上周边摄像头位置")
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|
} else {
|
this.jyObjs.jylabel && (this.jyObjs.jylabel.item.show = false);
|
this.jyObjs.jylxlayer &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.jylxlayer.treeobj.id,
|
false
|
);
|
|
handler && handler.destory();
|
}
|
},
|
sslxChange(val) {
|
if (val === true) {
|
if (this.jyObjs.sslxlayer === null) {
|
this.jyObjs.sslxlayer = sgworld.Creator.createPathLayer({
|
url: "./config/sslx.json",
|
color: "GREEN", //线的颜色
|
width: 10.0, //线的宽度
|
pointColor: "#FFFFFF", //移动点的颜色
|
speed: 4,
|
far: 50000,
|
});
|
this.jyObjs.saftyCircle = sgworld.Creator.addEffectCylinder({
|
position: {
|
lon: 120.9072364,
|
lat: 30.8291074,
|
height: 0,
|
},
|
radius: 50,
|
length: 200,
|
multiple: 1.5,
|
});
|
} else {
|
this.jyObjs.sslxlayer &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.sslxlayer.treeobj.id,
|
true
|
);
|
this.jyObjs.saftyCircle &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.saftyCircle.treeobj.id,
|
true
|
);
|
}
|
sgworld.Navigate.flyToPosition(this.rowData.x, this.rowData.y, 1000);
|
} else {
|
this.jyObjs.sslxlayer &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.sslxlayer.treeobj.id,
|
false
|
);
|
this.jyObjs.saftyCircle &&
|
sgworld.ProjectTree.setVisibility(
|
this.jyObjs.saftyCircle.treeobj.id,
|
false
|
);
|
}
|
},
|
playVideo(row, index) {
|
this.videoVisible = true;
|
this.videoTitle = row.bh;
|
|
this.videosrc = row.cameraVideo;
|
},
|
alertFireMergence() {
|
let i = 0;
|
let that = this;
|
let messages = {
|
1: {
|
title: "成功",
|
message: "启动灭火装置",
|
type: "success",
|
},
|
2: {
|
title: "成功",
|
message: "开启消防指示灯",
|
type: "success",
|
},
|
3: {
|
title: "成功",
|
message: "推送危险源信息",
|
type: "success",
|
},
|
4: {
|
title: "成功",
|
message: "推送救援线路",
|
type: "success",
|
},
|
};
|
let w = setInterval(() => {
|
i++;
|
if (i > 4) {
|
clearInterval(w);
|
that.$emit("showHQAnalysis", { title: "火情分析", tag: 3, rowData: that.rowData });
|
that.$emit("showHQAnalysis", { title: "火情处置", tag: 4, rowData: that.rowData });
|
return;
|
}
|
that.$notify(messages[i + ""]);
|
}, 2000);
|
this.dialogVisible = false;
|
},
|
// 添加标注线
|
addSignline(position, width, color) {
|
let linecolor = color.toUpperCase();
|
let s = sgworld._Viewer.entities.add({
|
name: "",
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(position), //[箭尾x1,y1,z1,箭头x2,y2,z2]
|
width, //线宽度
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color[linecolor],
|
dashLength: 25 //短划线长度
|
|
}
|
),
|
},
|
});
|
return s;
|
},
|
|
// // 添加箭头线
|
addArraSignline(position, width, color) {
|
let linecolor = color.toUpperCase();
|
|
let materialLine = new Cesium.PolylineArrowMaterialProperty(
|
Cesium.Color[linecolor] //线颜色
|
);
|
// materialLine.translucent = false;
|
|
let s = sgworld._Viewer.entities.add({
|
name: "",
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(position), //[箭尾x1,y1,z1,箭头x2,y2,z2]
|
width, //线宽度
|
arcType: Cesium.ArcType.NONE,
|
material: materialLine
|
},
|
});
|
return s;
|
},
|
},
|
computed: {
|
...mapState(["bimModelListAll", "bimModelListInitEd", "modelTransform"]),
|
},
|
mounted() {
|
let that = this;
|
this.$nextTick(() => {
|
if (that.data) {
|
that.rowData.hqbh = that.data.hqbh;
|
that.rowData.hqrq = that.data.hqrq;
|
that.rowData.hqdz = that.data.hqdz;
|
that.rowData.xxwz = that.data.xxwz;
|
that.rowData.x = Number(that.data.x);
|
that.rowData.y = Number(that.data.y);
|
that.rowData.alt = Number(that.data.alt);
|
}
|
});
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.divPoint-camera-img {
|
width: 30px;
|
height: 30px;
|
animation: cameraMove 1s linear infinite alternate;
|
-webkit-animation: cameraMove 1s linear infinite alternate;
|
}
|
|
.divPoint-camera-line {
|
height: 120px;
|
width: 5px;
|
margin-top: 20px;
|
border-left: 3px dashed #5b8fee;
|
margin-left: calc(50% - 1px);
|
}
|
|
.divPoint-camera-point {
|
border-radius: 50%;
|
width: 8px;
|
height: 8px;
|
margin-left: calc(50% - 3px);
|
background-color: #5b8fee;
|
}
|
|
.drag_black {
|
min-width: 300px;
|
min-height: 400px;
|
background: #27272760;
|
position: relative;
|
border: #00000090 2px solid;
|
overflow-y: "auto";
|
|
.el-form-item {
|
margin-bottom: 5px;
|
}
|
|
.el-input__inner {
|
background-color: transparent;
|
background-image: none;
|
border: 1px solid #c0c0c1;
|
box-sizing: border-box;
|
// color: #f0f0f0;
|
display: inline-block;
|
font-size: inherit;
|
line-height: 40px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
|
.font_color {
|
color: #000;
|
}
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: rgba(240, 250, 254, 0.65);
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(99, 99, 99, 1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
|
.pop-header {
|
font-weight: 600;
|
font-size: 16px;
|
padding: 10px;
|
background: rgba(0, 0, 0, 0.7);
|
color: rgb(232, 232, 232);
|
}
|
|
.el-tree-node .is-current>.el-tree-node__content {
|
background-color: rgba(52, 55, 63, 0.6) !important;
|
}
|
|
.el-tree-node:focus>.el-tree-node__content {
|
background-color: rgba(52, 55, 63, 0.6) !important;
|
}
|
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(28, 32, 42, 0.6);
|
}
|
}
|
|
.scroll-bar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
|
.scroll-bar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 1px;
|
background-color: rgb(79, 96, 103);
|
background-image: -webkit-linear-gradient(45deg,
|
rgba(255, 255, 255, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0.2) 75%,
|
transparent 75%,
|
transparent);
|
}
|
|
.scroll-bar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #2c2c2c60;
|
border-radius: 1px;
|
}
|
}
|
</style>
|
