<template>
|
<el-collapse v-model="activeName" accordion style="height: 100%" class="zhuantibox">
|
<el-collapse-item title="消防" name="0">
|
<!-- <div class="buttongroups">
|
<el-button size="small">消防进场路线</el-button>
|
<el-button size="small" @click="lineOfEscape">室内逃生路线</el-button>
|
<el-button size="small" @click="locationOfFire">火焰位置</el-button>
|
<el-button size="small">周边消防设施</el-button>
|
</div> -->
|
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
应急演示
|
</el-button>
|
<el-drawer :visible.sync="drawer" direction="ttb" :append-to-body="true" :close-on-press-escape="false"
|
:withHeader="false" :show-close="false" size="70%">
|
<div style="background:red;width:100%;height:40%;text-align: center;">
|
<img src="../../../../public/config/1.jpeg" style="width: 200px;margin: 20px;" />
|
</div>
|
<div style="background:white;width:100%;height:60%;text-align: center;">
|
<div style=" padding:40px">
|
<h1 style="font-weight:bolder;color:black">
|
发生紧急火情！请立即处理！
|
</h1>
|
</div>
|
<div style=" margin-top:40px">
|
<el-button type="danger" style="width:200px;height: 80px;" round @click="locationHQ">立即处理</el-button>
|
</div>
|
</div>
|
</el-drawer>
|
<!-- <el-table :data="tableHQdata" border size="mini"
|
style="width: 100%; background-color: transparent; margin-top: 10px" rowKey="gid">
|
<el-table-column prop="hqbh" header-align="center" width="120" align="center" label="火情编号">
|
</el-table-column>
|
<el-table-column prop="hqrq" header-align="center" width="140" align="center" label="日期">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="详情"><template slot-scope="scope">
|
<div>
|
<el-button type="text" @click="showHQData(scope.row, scope.$index, 1)" size="small">基本信息
|
</el-button>
|
</div>
|
<div>
|
<el-button type="text" @click="showHQData(scope.row, scope.$index, 2)" size="small">火情确认
|
</el-button>
|
</div>
|
<div>
|
<el-button type="text" @click="showHQData(scope.row, scope.$index, 3)" size="small">火情分析
|
</el-button>
|
</div>
|
<div>
|
<el-button type="text" @click="showHQData(scope.row, scope.$index, 4)" size="small">火情处置
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
</el-collapse-item>
|
<el-collapse-item title="兴趣点" name="1">
|
<div style="margin: 10px; margin-top: 20px">
|
<el-input placeholder="请输入关键字查询" size="small" clearable v-model="filterString" @keyup.enter="handleQuery">
|
<el-button slot="append" icon="el-icon-search" size="small" @click="handleQuery"></el-button>
|
</el-input>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="人口统计" name="2">
|
<div style="width: 360px; height: 200px; border: 1px solid #fff; margin: 2px" id="renkoupieECharts"></div>
|
<el-table :data="tabledata" border size="mini"
|
style="width: 100%; background-color: transparent; margin-top: 10px" rowKey="gid">
|
<el-table-column prop="xm" header-align="center" align="center" label="姓名">
|
</el-table-column>
|
<el-table-column prop="xb" header-align="center" width="60" align="center" label="性别">
|
</el-table-column>
|
<el-table-column prop="csrq" header-align="center" align="center" label="出生日期">
|
</el-table-column>
|
<el-table-column prop="zz" header-align="center" align="center" label="住址">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" width="60" label="详情"><template slot-scope="scope">
|
<el-button type="text" @click="showData(scope.row, scope.$index)" size="small">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
<el-collapse-item title="法人数据" name="3">
|
<el-table :data="tabledata2" border size="mini"
|
style="width: 100%; background-color: transparent; margin-top: 10px" rowKey="gid">
|
<el-table-column prop="dwmc" header-align="center" align="center" label="单位名称">
|
</el-table-column>
|
<el-table-column prop="fr" header-align="center" align="center" label="法人">
|
</el-table-column>
|
<el-table-column prop="dz" header-align="center" align="center" label="地址">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" width="60" label="详情"><template slot-scope="scope">
|
<el-button type="text" @click="showData2(scope.row, scope.$index)" size="small">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
<el-collapse-item title="综合治理" name="4">
|
<el-tabs v-model="tabactiveName" @tab-click="handleTabClick" style="margin: 10px">
|
<el-tab-pane label="社会治安" name="first">社会治安</el-tab-pane>
|
<el-tab-pane label="矛盾纠纷" name="second">矛盾纠纷</el-tab-pane>
|
<el-tab-pane label="综治组织" name="third">综治组织</el-tab-pane>
|
<el-tab-pane label="非公组织" name="fourth">非公组织</el-tab-pane>
|
</el-tabs>
|
</el-collapse-item>
|
</el-collapse>
|
</template>
|
<script>
|
import * as SmartEarth from "../../../../public/CimSDK/index.js"
|
let Cesium = SmartEarth.Cesium;
|
export default {
|
data() {
|
return {
|
drawer: false,
|
activeName: "0",
|
tabactiveName: "",
|
filterString: "",
|
tableHQdata: [
|
// {
|
// hqbh: "JSHQ-220928-1",
|
// hqrq: "2022/9/28 11:23:01",
|
// hqdz: "浙江省嘉兴市嘉善县体育南路988号",
|
// xxwz: "嘉善疾病防治中心宿舍楼2#号楼7层701室",
|
// x: "120.90630",
|
// y: "30.83009",
|
// alt: "20",
|
// },
|
{
|
hqbh: "JSHQ-220928-1",
|
hqrq: "2022/9/28 11:23:01",
|
hqdz: "浙江省嘉兴市嘉善县体育南路988号",
|
xxwz: "聚龙学校教学楼1#号楼16层1608室",
|
x: "120.90547653860",
|
y: "30.838487",
|
alt: "57",
|
},
|
{
|
hqbh: "JH-180609-1",
|
hqrq: "2018/6/9 18:43:51",
|
hqdz: "",
|
xxwz: "",
|
x: "",
|
y: "",
|
},
|
],
|
tabledata: [{}, {}, {}],
|
tabledata2: [{}, {}, {}],
|
fireObjs: { f1: null, f2: null, f3: null, f4: null }
|
};
|
},
|
methods: {
|
locationHQ() {
|
this.drawer = false;
|
let f = [this.tableHQdata[0].x, this.tableHQdata[0].y, this.tableHQdata[0].alt];
|
let o1 = this.fireObjs.f1 = 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;
|
data[0].emitter = new Cesium.ConeEmitter(Cesium.Math.toRadians(90))
|
}
|
);
|
let o2 = this.fireObjs.f2 = sgworld.Analysis.createParticleEffect(
|
"smog",
|
{ x: f[0], y: f[1], z: f[2] },
|
null,
|
function (data) {
|
data[0].startColor.alpha = 1;
|
data[0].startColor.green = 0.11;
|
data[0].startColor.blue = 0.11;
|
data[0].endColor.alpha = 1;
|
data[0].minimumParticleLife = 3;
|
data[0].maximumParticleLife = 4;
|
data[0].emitter = new Cesium.ConeEmitter(Cesium.Math.toRadians(90))
|
}
|
);
|
//let f2 = [120.906273981337, 30.8302521, 20];
|
let f2 = [120.90549834, 30.838654, 57];
|
let o3 = this.fireObjs.f3 = 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;
|
data[0].emitter = new Cesium.ConeEmitter(Cesium.Math.toRadians(90))
|
}
|
);
|
let o4 = this.fireObjs.f4 = 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;
|
data[0].emitter = new Cesium.ConeEmitter(Cesium.Math.toRadians(90))
|
}
|
);
|
o3.Flame[0].show = false;
|
o4.Smog[0].show = false;
|
let treeNode = {};
|
//treeNode.flyTo = [ 120.90559211780712, 30.83062170774296, 68.00116120145915, 2.401596281424846, -0.4710041844459605, 6.2831834722744695 ];
|
treeNode.flyTo = [120.9061389563428, 30.839216153394666, 104.33324894006351, 3.7718678634172487, -0.5364230359143076, 0.00001282730382179409];
|
|
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],
|
},
|
});
|
|
let cameraImg = SmartEarthRootUrl + "Workers/image/fire.png";
|
let description = ` <div class="divPoint-camera-content">
|
<img class="divPoint-camera-img" src="${cameraImg}" >
|
</div>
|
`;
|
let that = this;
|
let vl = sgworld.Creator.createDivPoint("火点", {
|
lon: this.tableHQdata[0].x,
|
lat: this.tableHQdata[0].y,
|
height: this.tableHQdata[0].alt
|
}, {
|
type: "custom",
|
offset: ["c", 0],
|
far: 2000,
|
description,
|
onclick(data) {
|
that.$emit("showPopou", { title: "基本信息", tag: 1, rowData: that.tableHQdata[0] });
|
},
|
});
|
},
|
openFloor(isOpen) {
|
if (isOpen === true) {
|
if (this.fireObjs.f1 && this.fireObjs.f2 && this.fireObjs.f3 && this.fireObjs.f4) {
|
this.fireObjs.f1.Flame[0].show = false;
|
this.fireObjs.f2.Smog[0].show = false;
|
this.fireObjs.f3.Flame[0].show = true;
|
this.fireObjs.f4.Smog[0].show = true;
|
}
|
} else {
|
if (this.fireObjs.f1 && this.fireObjs.f2 && this.fireObjs.f3 && this.fireObjs.f4) {
|
this.fireObjs.f1.Flame[0].show = true;
|
this.fireObjs.f2.Smog[0].show = true;
|
this.fireObjs.f3.Flame[0].show = false;
|
this.fireObjs.f4.Smog[0].show = false;
|
}
|
|
}
|
},
|
handleClose() { },
|
handleQuery() { },
|
renkoupieEChartsInitial() {
|
let option = {
|
tooltip: { trigger: "item" },
|
legend: {
|
orient: "vertical",
|
left: "left",
|
textStyle: { color: "#ffffff" },
|
},
|
series: [
|
{
|
type: "pie",
|
radius: "50%",
|
data: [
|
{
|
value: 49,
|
name: "男性 49.9%",
|
},
|
{
|
value: 51,
|
name: "女性 51.1%",
|
itemStyle: {
|
color: "#a90000",
|
},
|
},
|
],
|
emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0 } },
|
},
|
],
|
};
|
let myChart = this.$echarts.init(
|
document.getElementById("renkoupieECharts")
|
);
|
myChart.setOption(option);
|
},
|
showData(row, index) { },
|
showData2(row, index) { },
|
handleTabClick(tab, event) { },
|
showHQData(row, index, tag) {
|
switch (tag) {
|
case 1:
|
this.$emit("showPopou", { title: "基本信息", tag: 1, rowData: row });
|
break;
|
case 2:
|
this.$emit("showPopou", { title: "火情确认", tag: 2, rowData: row });
|
break;
|
case 3:
|
this.$emit("showPopou", { title: "火情分析", tag: 3, rowData: row });
|
break;
|
case 4:
|
this.$emit("showPopou", { title: "火情处置", tag: 4, rowData: row });
|
break;
|
default:
|
break;
|
}
|
},
|
},
|
mounted() {
|
this.renkoupieEChartsInitial();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.divPoint-camera-img {
|
width: 40px;
|
height: 40px;
|
animation: cameraMove 1s linear infinite alternate;
|
-webkit-animation: cameraMove 1s linear infinite alternate;
|
}
|
|
.zhuantibox {
|
/deep/ .el-input__inner {
|
background-color: transparent;
|
background-image: none;
|
border-radius: 0px;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
/deep/.el-input-group__append {
|
background: transparent;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
.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;
|
}
|
|
/deep/.el-tabs__item,
|
/deep/.el-collapse-item__content {
|
color: #ffffff;
|
}
|
|
/deep/.el-tabs__item.is-active {
|
color: #409eff;
|
}
|
}
|
</style>
|
