<template>
|
<div class="box">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="预案姓名" style="width: 45%">
|
<el-input v-model="formInline.name" placeholder="预案姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="预案类型" style="width: 45%">
|
<el-input v-model="formInline.accidentTypeNames" placeholder="预案类型"></el-input>
|
</el-form-item>
|
<el-form-item label="预案等级" style="width: 45%">
|
<el-input v-model="formInline.planLevelName" placeholder="预案等级"></el-input>
|
</el-form-item>
|
<el-form-item style="width: 45%; padding-top: 40px">
|
<el-button type="primary" @click="onSubmit" style="background-color: transparent">提交</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="box_content">
|
<el-radio-group v-model="labelPosition" style="width: 100%" @change="changelabel">
|
<el-radio-button label="YJDW" style="width: 33.3%">应急队伍</el-radio-button>
|
<el-radio-button label="YJZY" style="width: 33.3%">应急资源</el-radio-button>
|
<el-radio-button label="YY" style="width: 33.3%">医院</el-radio-button>
|
</el-radio-group>
|
<div class="list">
|
<el-table :data="tableData" border style="width: 100%" highlight-current-row
|
@current-change="handleCurrentChange">
|
<el-table-column prop="properties.name" label="名称">
|
</el-table-column>
|
<el-table-column prop="properties.address" label="位置">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
var fireParticlePrimitive = null
|
var waterParticlePrimitive = null
|
var entity = null
|
var emitterModelMatrix = null
|
var translation = null
|
var rotation = null
|
var hpr = null
|
var trs = null
|
var gravityScratch = null
|
var model;
|
import axios from "axios";
|
import { axios_get, axios_post } from "../../../until/request.js";
|
import HttpUrl from "../../../config/http.js";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
labelPosition: "YJDW",
|
toickTime: null,
|
formInline: {
|
planFileUrls:
|
"http://120.201.201.87:8081//appfiles/uploadfile/plan/appendix/1656909336155.doc",
|
},
|
tableData: [],
|
//2022.9.14
|
fireParticlePrimitive: null,
|
waterParticlePrimitive: null,
|
entity: null,
|
emitterModelMatrix: null,
|
translation: null,
|
rotation: null,
|
hpr: null,
|
trs: null,
|
gravityScratch: null,
|
};
|
},
|
//方法集合
|
methods: {
|
// 最短路径
|
amapRoute(x1, y1, x2, y2) {
|
// var jsonurl =
|
// HttpUrl.GISERVEER +
|
// "/gisserver/wnsserver/JKQ_LJGH2?start=" +
|
// x1 +
|
// "," +
|
// y1 +
|
// "&end=" +
|
// x2 +
|
// "," +
|
// y2 +
|
// "&propertyName=Shape&tolerance=500&request=FindPath&format=json";
|
// var jsonurl =
|
// "http://103.85.165.98:9055/gisserver/wnsserver/JKQroad_wns?start=" +
|
// x1 +
|
// "," +
|
// y1 +
|
// "&end=" +
|
// x2 +
|
// "," +
|
// y2 +
|
// "&propertyName=Shape&tolerance=500&request=FindPath&format=json";
|
var routeList = [
|
|
[120.54698294618969, 41.65921572158251],
|
|
[120.54628609106244, 41.65713535288827],
|
|
[120.54380554395682, 41.65737759808522],
|
|
[120.5429852961289, 41.65752681351214],
|
|
[120.54057724410904, 41.657697812935886],
|
]
|
var jsonurl =
|
"http://172.16.0.71:8090/gisserver/wnsserver/road_wns?start=" +
|
"120.50077550962,41.635292371096" +
|
"&end=" +
|
"120.49901325448,41.636802875499" +
|
"&propertyName=Shape&tolerance=500&request=FindPath&format=json";
|
$.ajax({
|
url: jsonurl,
|
async: false,
|
type: "GET",
|
dataType: "json",
|
|
contentType: "application/json;charset=utf-8",
|
success: (data) => {
|
data.features.forEach((e) => {
|
if (e.geometry.type == "LineString") {
|
|
//this.executeFly3D(e.geometry.coordinates);
|
this.executeFly3D(routeList);
|
|
}
|
});
|
},
|
});
|
},
|
// closeWaterAll() {
|
// this.waterParticlePrimitive.emissionRate = 0;
|
// sgworld.Viewer.scene.primitives.remove(this.waterParticlePrimitive);
|
// },
|
// startWater() {
|
//
|
|
// var fireParticlePrimitive = null;
|
// var waterParticlePrimitive = null;
|
// var entity = null;
|
// var emitterModelMatrix = new Cesium.Matrix4();
|
// var translation = new Cesium.Cartesian3();
|
// var rotation = new Cesium.Quaternion();
|
// // var hpr = new Cesium.HeadingPitchRoll();
|
// var hpr = {
|
// heading: 120.6325362317272143,
|
// pitch: -100.44926908149976796,
|
// roll: 30
|
// };
|
// var trs = new Cesium.TranslationRotationScale();
|
// var gravityScratch = new Cesium.Cartesian3();
|
// Viewer.scene.preUpdate.addEventListener(update);
|
// entity = sgworld.Viewer.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(120.540723, 41.657735, 100)
|
// });
|
|
// waterParticlePrimitive = sgworld.Viewer.scene.primitives.add(new Cesium.ParticleSystem({
|
// image: SmartEarthRootUrl + 'Workers/image/penquan.png',
|
// startColor: new Cesium.Color(1, 1, 1, 0.6),
|
// endColor: new Cesium.Color(0.80, 0.86, 1, 0.4),
|
// startScale: 1,
|
// endScale: 7,
|
// minimumParticleLife: 6,
|
// maximumParticleLife: 7,
|
// minimumSpeed: 26,
|
// maximumSpeed: 26,
|
// imageSize: new Cesium.Cartesian2(10, 10),
|
// emissionRate: 200,
|
// lifetime: 16.0,
|
// emitter: new Cesium.CircleEmitter(0.2),
|
// emitterModelMatrix: computeEmitterModelMatrix(),
|
// updateCallback: applyGravity
|
// }));
|
// Viewer.scene.preUpdate.addEventListener(update);
|
// this.waterParticlePrimitive = waterParticlePrimitive;
|
|
// function computeModelMatrix(entity, time) {
|
// return entity.computeModelMatrix(time, new Cesium.Matrix4());
|
// }
|
|
// function computeEmitterModelMatrix() {
|
|
// hpr = Cesium.HeadingPitchRoll.fromDegrees(110.0, 40.0, 0.0, hpr); // 倾斜角度
|
// trs.translation = Cesium.Cartesian3.fromElements(0, 0, 80, translation); // 发高度
|
// trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
|
// return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
|
// }
|
|
// function applyGravity(p, dt) {
|
// var position = p.position;
|
// Cesium.Cartesian3.normalize(position, gravityScratch);
|
// Cesium.Cartesian3.multiplyByScalar(gravityScratch, -4 * dt, gravityScratch);
|
// p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
|
// }
|
// function update(scene, time) {
|
// waterParticlePrimitive.modelMatrix = computeModelMatrix(entity, time);
|
// waterParticlePrimitive.emitterModelMatrix = computeEmitterModelMatrix();
|
// }
|
// this.waterParticlePrimitive = waterParticlePrimitive;
|
// this.waterentity = entity;
|
// },
|
//单击列表路径规划
|
handleCurrentChange(val) {
|
|
this.amapRoute(
|
val.properties.longitude,
|
val.properties.latitude,
|
120.541223,
|
41.658835
|
);
|
},
|
// 清空模型路线
|
clearFly3DPaths() {
|
sgworld.Viewer.trackedEntity = undefined;
|
// bxmap.FlyCesium.isDrawFly = false;
|
// bxmap.FlyCesium.draw3DObj = null;
|
model = null;
|
sgworld.Viewer.entities.removeAll(); //清空所有模型
|
//清空绘制飞行路线
|
// if (this.drawPolyline) {
|
// this.cesiumViewer.scene.primitives.remove(this.drawPolyline);
|
// this.drawPolyline = null;
|
// }
|
},
|
// 停止漫游
|
stopFly3DPaths() {
|
var start = Cesium.JulianDate.fromDate(new Date());
|
sgworld.Viewer.clock.startTime = start.clone();
|
var stop = Cesium.JulianDate.addSeconds(
|
start,
|
300000000,
|
new Cesium.JulianDate()
|
);
|
sgworld.Viewer.clock.stopTime = stop.clone();
|
|
this.clearFly3DPaths();
|
},
|
// 创建漫游
|
executeFly3D(pathsData) {
|
this.stopFly3DPaths();
|
this.HideWater();
|
if (pathsData) {
|
var positionA = pathsData;
|
var position = [];
|
if (positionA.length > 0) {
|
for (var i = 0; i < positionA.length; i++) {
|
var x = positionA[i][0];
|
var y = positionA[i][1];
|
position.push({ x: x, y: y });
|
}
|
} else {
|
return;
|
}
|
var timevial = null;
|
function computeCirclularFlight() {
|
var property = new Cesium.SampledPositionProperty();
|
for (var i = 0; i < position.length; i++) {
|
if (i === 0) {
|
var time = Cesium.JulianDate.addSeconds(
|
start,
|
i,
|
new Cesium.JulianDate()
|
);
|
//var _position = Cesium.Cartesian3.fromDegrees(position[i].x, position[i].y, 1170);
|
var _position = Cesium.Cartesian3.fromDegrees(
|
position[i].x,
|
position[i].y,
|
193
|
);
|
property.addSample(time, _position);
|
}
|
if (i < 10000 && i > 0) {
|
var position_a = new Cesium.Cartesian3(
|
property._property._values[i * 3 - 3],
|
property._property._values[i * 3 - 2],
|
property._property._values[i * 3 - 1]
|
);
|
if (i < 976) {
|
var _position = Cesium.Cartesian3.fromDegrees(
|
position[i].x,
|
position[i].y,
|
193
|
);
|
} else if (i > 975 && i < 986) {
|
var _position = Cesium.Cartesian3.fromDegrees(
|
position[i].x,
|
position[i].y,
|
193
|
);
|
} else if (i > 985) {
|
var _position = Cesium.Cartesian3.fromDegrees(
|
position[i].x,
|
position[i].y,
|
193
|
);
|
}
|
|
var positions = [
|
Cesium.Ellipsoid.WGS84.cartesianToCartographic(position_a),
|
Cesium.Ellipsoid.WGS84.cartesianToCartographic(_position),
|
];
|
var a = new Cesium.EllipsoidGeodesic(positions[0], positions[1]);
|
var long = a.surfaceDistance;
|
var _time = long / 50;
|
var time = Cesium.JulianDate.addSeconds(
|
property._property._times[i - 1],
|
_time,
|
new Cesium.JulianDate()
|
);
|
if (i == (position.length - 1)) {
|
timevial = time;
|
}
|
property.addSample(time, _position);
|
}
|
}
|
return property;
|
}
|
this.toickTime = timevial;
|
var start = Cesium.JulianDate.fromDate(new Date());
|
var stop = Cesium.JulianDate.addSeconds(
|
start,
|
120,
|
new Cesium.JulianDate()
|
);
|
sgworld.Viewer.clock.startTime = start.clone();
|
sgworld.Viewer.clock.stopTime = stop.clone();
|
sgworld.Viewer.clock.currentTime = start.clone();
|
// sgworld.Viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
sgworld.Viewer.clock.multiplier = 1; //值越大，飞行越快
|
sgworld.Viewer.clock.canAnimate = false;
|
sgworld.Viewer.clock.shouldAnimate = true; //设置时间轴动态效果
|
|
var _position = computeCirclularFlight();
|
|
let model = sgworld.Viewer.entities.add({
|
availability: new Cesium.TimeIntervalCollection([
|
new Cesium.TimeInterval({
|
start: start,
|
stop: stop,
|
}),
|
]),
|
position: _position,
|
orientation: new Cesium.VelocityOrientationProperty(_position),
|
model: {
|
uri: SmartEarthRootUrl + "Workers/Model/xiaofangche.gltf",
|
scale: 1,
|
minimumPixelSize: 90,
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 让模型在地形上紧贴
|
},
|
//Show the path as a pink line sampled in 1 second increments.
|
path: {
|
resolution: 1,
|
material: new Cesium.PolylineGlowMaterialProperty({
|
glowPower: 0.1,
|
color: Cesium.Color.YELLOW,
|
}),
|
//width: 30
|
width: 10,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 让模型在地形上紧贴
|
},
|
});
|
|
sgworld.Viewer.trackedEntity = model;
|
var that = this;
|
function onTickCallback(tick) {
|
if (parseFloat(tick._currentTime.secondsOfDay).toFixed(2) > parseFloat(timevial.secondsOfDay).toFixed(2)) {
|
|
that.ShowWater();
|
sgworld.Viewer.clock.onTick.removeEventListener(onTickCallback)
|
}
|
}
|
sgworld.Viewer.clock.onTick.addEventListener(onTickCallback)
|
|
|
setTimeout(function () {
|
sgworld.Viewer.camera.zoomOut(700.0); //缩小地图，避免底图没有数据
|
}, 100);
|
} else {
|
return;
|
}
|
},
|
|
changelabel(res) {
|
this.getList(res);
|
},
|
formatDate(date) {
|
var date = new Date(date);
|
var YY = date.getFullYear() + "-";
|
var MM =
|
(date.getMonth() + 1 < 10
|
? "0" + (date.getMonth() + 1)
|
: date.getMonth() + 1) + "-";
|
var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
var hh =
|
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
|
var mm =
|
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
|
":";
|
var ss =
|
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
return YY + MM + DD + " " + hh + mm + ss;
|
// return YY + MM + DD;
|
},
|
getList(res) {
|
axios
|
.get(
|
`http://172.16.0.71:8090/gisserver/wfsserver/JKQ_YJ?version=1.3.0&request=GetFeature&typename=${res}&propertyname=*&format=json`
|
)
|
.then((response) => {
|
this.tableData = response.data.features;
|
});
|
},
|
onSubmit() {
|
this.formInline.time = this.formatDate(new Date().getTime());
|
var jsonData = JSON.stringify(this.formInline);
|
$.ajax({
|
url: "/LC/emergency/addDisposalPlans",
|
async: false,
|
type: "POST",
|
dataType: "json",
|
data: jsonData,
|
contentType: "application/json;charset=utf-8",
|
success: (data) => {
|
this.$message({
|
message: "添加成功",
|
type: "success",
|
});
|
this.$store.commit("setchildState", true);
|
// if (data.isSuccess) {
|
|
// //成功处理方式
|
// } else if ("403" == data) {
|
// //失败方式处理
|
// }
|
},
|
});
|
},
|
changeWater() {
|
|
fireParticlePrimitive = null;
|
waterParticlePrimitive = null;
|
entity = null;
|
emitterModelMatrix = new Cesium.Matrix4();
|
translation = new Cesium.Cartesian3();
|
rotation = new Cesium.Quaternion();
|
hpr = {
|
heading: 120.6325362317272143,
|
pitch: -100.44926908149976796,
|
roll: 30,
|
};
|
trs = new Cesium.TranslationRotationScale();
|
gravityScratch = new Cesium.Cartesian3();
|
},
|
HideWater() {
|
sgworld.Viewer.entities.removeAll();
|
sgworld.Viewer.scene.primitives.remove(waterParticlePrimitive);
|
},
|
ShowWater() {
|
function applyGravity(p, dt) {
|
var position = p.position;
|
Cesium.Cartesian3.normalize(position, gravityScratch);
|
Cesium.Cartesian3.multiplyByScalar(
|
gravityScratch,
|
-4 * dt,
|
gravityScratch
|
);
|
p.velocity = Cesium.Cartesian3.add(
|
p.velocity,
|
gravityScratch,
|
p.velocity
|
);
|
}
|
this.changeWater();
|
let that = this
|
entity = sgworld.Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(120.540723, 41.657735, 100)
|
});
|
waterParticlePrimitive = sgworld.Viewer.scene.primitives.add(
|
new Cesium.ParticleSystem({
|
image: SmartEarthRootUrl + "Workers/image/penquan.png",
|
startColor: new Cesium.Color(1, 1, 1, 0.6),
|
endColor: new Cesium.Color(0.8, 0.86, 1, 0.4),
|
startScale: 1,
|
endScale: 7,
|
minimumParticleLife: 6,
|
maximumParticleLife: 7,
|
minimumSpeed: 26,
|
maximumSpeed: 26,
|
imageSize: new Cesium.Cartesian2(10, 10),
|
emissionRate: 200,
|
lifetime: 16.0,
|
emitter: new Cesium.CircleEmitter(0.2),
|
emitterModelMatrix: that.computeEmitterModelMatrix(),
|
updateCallback: applyGravity,
|
})
|
);
|
Viewer.scene.preUpdate.addEventListener(that.update());
|
},
|
|
|
update(scene, time) {
|
waterParticlePrimitive.modelMatrix = this.computeModelMatrix(
|
entity,
|
time
|
);
|
waterParticlePrimitive.emitterModelMatrix =
|
this.computeEmitterModelMatrix();
|
},
|
computeModelMatrix(entities, time) {
|
return entities.computeModelMatrix(time, new Cesium.Matrix4());
|
},
|
computeEmitterModelMatrix() {
|
hpr = Cesium.HeadingPitchRoll.fromDegrees(
|
110.0,
|
40.0,
|
0.0,
|
hpr
|
); // 倾斜角度
|
trs.translation = Cesium.Cartesian3.fromElements(
|
0,
|
0,
|
80,
|
translation
|
); // 发射高度
|
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
|
hpr,
|
rotation
|
);
|
return Cesium.Matrix4.fromTranslationRotationScale(
|
trs,
|
emitterModelMatrix
|
);
|
},
|
},
|
created() { },
|
mounted() {
|
this.getList("YJDW");
|
|
this.$bus.$on("closerWater", (res) => {
|
|
this.HideWater();
|
});
|
|
},
|
beforeDestroy() {
|
this.stopFly3DPaths()
|
this.HideWater();
|
}
|
};
|
</script>
|
<style lang='less' scoped>
|
//@import url(); 引入公共css类
|
.box {
|
width: 100%;
|
height: 100%;
|
|
.el-form-item {
|
/deep/ .el-form-item__label {
|
color: #fff;
|
}
|
}
|
|
.el-form /deep/ .el-input__inner,
|
.el-form /deep/ .el-textarea__inner {
|
background-color: rgba(134, 132, 132, 0.5);
|
border-radius: 0;
|
color: white;
|
}
|
|
.box_content {
|
width: 100%;
|
|
.el-table {
|
background-color: transparent;
|
}
|
|
.el-table /deep/ th,
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: white;
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 0, 0, 0.8) !important;
|
}
|
|
.el-table /deep/ .el-table__body tr.current-row>td.el-table__cell {
|
background-color: rgba(0, 0, 0, 0.8) !important;
|
}
|
}
|
}
|
</style>
|
<style lang='less'>
|
.box_content {
|
// /deep/ .el-radio-button__inner {
|
// width: 100% !important;
|
// }
|
|
.el-radio-group .el-radio-button .el-radio-button__inner {
|
//修改按钮样式
|
width: 99% !important;
|
color: white;
|
background-color: transparent;
|
}
|
|
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
background: rgba(0, 0, 0, 0.8);
|
border: 1px solid #98b5ca;
|
color: #fff;
|
line-height: 14px;
|
outline: none;
|
box-shadow: none;
|
}
|
}
|
</style>
|
