<template>
|
<div class="BJlist_box">
|
<div class="bjtext">
|
<div class="ico">!</div>
|
<div class="text">{{ YJtext }}</div>
|
</div>
|
<div class="list_box" id="list_box1">
|
<div class="list_title">报警点位列表</div>
|
<div class="inp_box">
|
<span>选择时间段：</span>
|
<el-date-picker size="large" v-model="selectform.value1" type="datetimerange" @change="changeTime"
|
value-format="YYYY-MM-DD HH" format="YYYY-MM-DD HH" />
|
</div>
|
|
<div class="table_box">
|
<el-table :data="data.tableData" style="width: 100%" height="100%" @row-click="flytoPoi">
|
<el-table-column prop="name" label="名称" show-overflow-tooltip align="center" />
|
<!-- <el-table-column prop="name" label="名称" show-overflow-tooltip />-->
|
<el-table-column prop="lon" label="经度" show-overflow-tooltip align="center" />
|
<el-table-column prop="lat" label="纬度" show-overflow-tooltip align="center" />
|
<el-table-column prop="value" label="数值" show-overflow-tooltip align="center" />
|
<el-table-column prop="time" label="时间" show-overflow-tooltip :formatter="dateFormatter" align="center" />
|
<el-table-column label="操作" width="180px">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click.stop="listClick(scope.row)" :disabled="scope.row.isSuYuan == 0 || scope.row.isSuYuan == null
|
">污染源</el-button>
|
|
<el-button link type="primary" size="small" @click.stop="kssyClick(scope.row)">快速溯源</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<!-- :disabled="scope.row.isFast == 0 || scope.row.isFast == null" -->
|
</template>
|
//
|
<script>
|
import { Search } from "@element-plus/icons-vue"; // svg图标
|
// import type { FormInstance, FormRules } from "element-plus";
|
import { reactive, onMounted, watch, ref } from "vue";
|
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
|
import {
|
ysshSuYuanX00Controller,
|
getCoordByName,
|
selectSuYuan46ById,
|
selectFastByld,
|
} from "@/api/api.js";
|
import menuTool from "@/assets/js/menuTool";
|
import { useStore } from "vuex";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: { Search },
|
props: ["POIListData"],
|
setup(props, { emit }) {
|
const store = useStore();
|
const selectform = reactive({
|
value1: [],
|
});
|
// 这个是写在setup()里的！！
|
const formRef = ref < FormInstance > "";
|
let YJtext = ref("0条预警信息");
|
let data = reactive({
|
tableData: [],
|
dialogFormVisible: false,
|
activeName: "first",
|
chart_isshow: false,
|
time: "",
|
WGlist: [],
|
});
|
const flytoPoi = (row) => {
|
sgworld.Navigate.flyToPosition(row.lon, row.lat, 500, {
|
heading: 270,
|
pitch: -89.5,
|
roll: 0,
|
});
|
};
|
const listClick = (row) => {
|
SYWG(row);
|
|
sgworld.Core.postMessage({
|
func_name: "SetSmallWind",
|
lon: "",
|
lat: "",
|
alt: 300,
|
Scope: scope,
|
Direction: "",
|
Hidden: "true",
|
});
|
window.sgworld.Core.postMessage("Type=customewinds;Bool=false;");
|
window.sgworld.Core.postMessage(
|
`Type=customewinds;Bool=true;Year=${row.time.slice(
|
0,
|
4
|
)};Mouth=${row.time.slice(4, 6)};Day=${row.time.slice(
|
6,
|
8
|
)};Hour=${row.time.slice(8, 10)};Density=${BJFC.Density};Speed=${BJFC.Speed
|
};d1=0;d2=30;Corp=1;Lon=${row.lon};Lat=${row.lat};Length=${BJFC.Length
|
};`
|
);
|
};
|
/**
|
* 快速溯源
|
*/
|
const kssyClick = (row) => {
|
kssyOperator(row);
|
};
|
|
const kssyOperator = async (POIobj) => {
|
sgworld.Core.postMessage({ type: "delete" });
|
|
const dt1 = await getCoordByName(POIobj.name);
|
|
var date = insertStr(POIobj.time) + ":00:00";
|
// const dt = await ysshSuYuanX00Controller(
|
// { name: POIobj.name, date: date },
|
// 100
|
// );
|
// console.log("快速溯源-获取溯源列表", dt);
|
|
// if (dt1.result) {
|
sgworld.Core.postMessage({ func_name: "RemoveGridLines", id: "" });
|
//删除边界
|
sgworld.Core.postMessage({ func_name: "RemoveGridSide", id: "" });
|
|
const dt2 = await selectFastByld({
|
id: dt1.result.id.slice(0, -2) + "_0",
|
date: date,
|
});
|
|
window.sgworld.Core.postMessage("Type=customewinds;Bool=false;");
|
sgworld.Core.postMessage({
|
func_name: "SetSmallWind",
|
lon: "",
|
lat: "",
|
alt: 300,
|
Scope: scope,
|
Direction: "",
|
Hidden: "true",
|
});
|
|
console.log("快速溯源-获取溯源详情", dt2);
|
if (dt2.result) {
|
|
dt2.result.map((item) => {
|
console.log("val_step",item.dir);
|
var dir = item.dir + val_step;
|
console.log("val_step",dir);
|
sgworld.Core.postMessage({
|
func_name: "SetSmallWind",
|
lon: item.x,
|
lat: item.y,
|
alt: 300,
|
Scope: scope,
|
Direction: dir,
|
Hidden: "false",
|
});
|
});
|
console.log("快速溯源-获取经纬度，", dt2);
|
|
|
sgworld.Navigate.flyToPosition(dt2.result[0].x, dt2.result[0].y, 500, {
|
heading: 270,
|
pitch: -89.5,
|
roll: 0,
|
});
|
}
|
|
// dt.result.data.forEach(async (e) => {
|
// const dt2 = await selectFastByld({
|
// id: e.id,
|
// date: date,
|
// });
|
// console.log("快速溯源-获取溯源详情", dt2);
|
// if (dt2.result) {
|
// dt2.result.nap((item) => {
|
// sgworld.Core.postMessage({
|
// func_name: "SetSmallWind",
|
// lon: item.x,
|
// lat: item.y,
|
// alt: 300,
|
// Scope: 300000,
|
// Direction: item.dir,
|
// Hidden: "false",
|
// });
|
// });
|
// }
|
// });
|
|
// } else {
|
// return ElMessage.error("请检查是否有数据");
|
// }
|
};
|
|
const SYWG = async (POIobj) => {
|
// data.time = insertStr(POIobj.time) + ":00:00";
|
var date = insertStr(POIobj.time) + ":00:00";
|
sgworld.Core.postMessage({ type: "delete" });
|
// const dt = await ysshSuYuanX00Controller(
|
// { name: store.state.POIname },
|
// data.JLvalue
|
// );
|
|
const dt = await ysshSuYuanX00Controller(
|
{ name: POIobj.name, date: date },
|
100
|
);
|
if (dt.result) {
|
data.feedbackId = dt.result.feedbackId;
|
data.WGlist = dt.result.data;
|
let h = 450;
|
|
let arr = [];
|
dt.result.data.forEach((e) => {
|
arr.push({
|
id: e.id,
|
name: e.vocsName,
|
vocs: e.vocsValue,
|
// vocs: e[data.SJvalue],
|
tm: 2,
|
lon: e.lon,
|
lat: e.lat,
|
high: 300,
|
vc: "E9FF00FF",
|
nc: "FFFFFFFF",
|
bool: false,
|
b: true,
|
x: e.windDirection,
|
f: e.windSpeed,
|
Time: date,
|
});
|
});
|
sgworld.Core.postMessage({
|
type: "newgezi",
|
geziarr: arr,
|
});
|
if (data.JLvalue == 200) {
|
h = 500;
|
}
|
const dt1 = await getCoordByName(POIobj.name);
|
sgworld.Navigate.flyToPosition(dt1.result.lon, dt1.result.lat, h, {
|
heading: 270,
|
pitch: -89.5,
|
roll: 0,
|
});
|
WRY(dt.result.data, date);
|
} else {
|
return ElMessage.error("请检查是否有数据");
|
}
|
};
|
const insertStr = (source) => {
|
var s1 = source.slice(0, 4) + "-" + source.slice(4);
|
var s2 = s1.slice(0, 7) + "-" + s1.slice(7);
|
var s3 = s2.slice(0, 10) + " " + s2.slice(10);
|
|
return s3;
|
};
|
const BJlist = async (val) => {
|
const dt = await menuTool.bjthis(val);
|
|
data.tableData = dt;
|
if (dt) {
|
YJtext.value = `${dt.length}条预警信息`;
|
}
|
};
|
//时间格式化
|
const dateFormatter = (row) => {
|
return insertStr(row.time) + ":00:00";
|
};
|
const WRY = (val, time) => {
|
sgworld.Core.postMessage({ func_name: "RemoveGridLines", id: "" });
|
//删除边界
|
sgworld.Core.postMessage({ func_name: "RemoveGridSide", id: "" });
|
// if (data.WGlist.length == 0) {
|
// return ElMessage.error("请先点击列表溯源");
|
// }
|
val.forEach(async (e) => {
|
const dt = await selectSuYuan46ById({
|
id: e.id,
|
date: time,
|
});
|
if (dt.result) {
|
sgworld.Core.postMessage({
|
func_name: "RemoveGridLines",
|
id: "line",
|
});
|
//删除边界
|
sgworld.Core.postMessage({
|
func_name: "RemoveGridSide",
|
id: "boundary",
|
});
|
var location = [];
|
if (dt.result.x1) {
|
location.push({
|
lon: dt.result.x1,
|
lat: dt.result.y1,
|
alt: 150,
|
Odds: dt.result.odds1,
|
Addr: dt.result.addr1,
|
});
|
}
|
if (dt.result.x2) {
|
location.push({
|
lon: dt.result.x2,
|
lat: dt.result.y2,
|
alt: 150,
|
Odds: dt.result.odds2,
|
Addr: dt.result.addr2,
|
});
|
}
|
if (dt.result.x3) {
|
location.push({
|
lon: dt.result.x3,
|
lat: dt.result.y3,
|
alt: 150,
|
Odds: dt.result.odds3,
|
Addr: dt.result.addr3,
|
});
|
}
|
sgworld.Core.postMessage({
|
func_name: "SpawnGridLines",
|
StartPointArr: location,
|
EndPoint: { endlon: e.lon, endlat: e.lat, endalt: 150 },
|
id: "line",
|
scale: 30,
|
speed: 0.6,
|
color: "#ff0000",
|
color_strength: 2.0,
|
fx_number: 20,
|
line_scale: 0.5,
|
});
|
}
|
});
|
};
|
function changeTime(value) {
|
if (value) {
|
BJlist({ start: `${value[0]}:00:00`, end: `${value[1]}:00:00` });
|
} else {
|
BJlist();
|
}
|
}
|
watch(
|
() => selectform.value1,
|
(nVal, oVal) => {
|
if (nVal.length == 0) {
|
BJlist({ start: ``, end: `` });
|
}
|
},
|
{ deep: true }
|
);
|
onMounted(() => {
|
BJlist();
|
});
|
return {
|
data,
|
formRef,
|
listClick,
|
YJtext,
|
dateFormatter,
|
WRY,
|
flytoPoi,
|
selectform,
|
changeTime,
|
kssyClick,
|
kssyOperator,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.BJlist_box {
|
|
// position: absolute;
|
// right: 20px;
|
// top: 490px;
|
.bjtext {
|
margin-left: 35px;
|
width: calc(723px * 1.8);
|
height: 80px;
|
background: rgba(41, 9, 9, 0.8);
|
border: 2px solid rgba(255, 91, 91);
|
border-radius: 10px;
|
padding: 30px;
|
box-sizing: border-box;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
|
.ico {
|
width: 33px;
|
height: 33px;
|
background: #eb1213;
|
border-radius: 50%;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// text-align: center;
|
color: #fff;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.text {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
|
.list_box {
|
width: calc(775px * 1.8);
|
height: calc(472px * 1.8);
|
box-sizing: border-box;
|
background: url("../assets/img/bgk.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: calc(45px * 1.5);
|
position: relative;
|
|
.list_close {
|
width: 22px;
|
height: 22px;
|
cursor: pointer;
|
background: url("../assets/img/close.png") center no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
right: 80px;
|
top: 80px;
|
}
|
|
.list_title {
|
font-size: 30px;
|
margin-bottom: 20px;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
|
.table_box {
|
width: 100%;
|
height: 80%;
|
// position: absolute;
|
// top: 110px;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// z-index: 10;
|
overflow: auto;
|
}
|
|
.el-table {
|
// height: 370px;
|
width: 100%;
|
overflow: auto;
|
background-color: transparent;
|
}
|
|
.el-table::before {
|
height: 0;
|
}
|
|
.el-table /deep/ .el-tooltip {
|
padding: 0;
|
}
|
|
.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, 1) !important;
|
}
|
|
/deep/ .el-table__body {
|
width: 100% !important;
|
}
|
|
/deep/ .el-table__header {
|
width: 100% !important;
|
}
|
}
|
|
.inp_box {
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
}
|
|
/deep/ .el-input__wrapper {
|
// width: 460px;
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 3px;
|
}
|
|
/deep/ .el-input__inner,
|
/deep/ .el-textarea__inner {
|
// background-color: rgba(134, 132, 132, 0.5);
|
color: #ffffff;
|
font-size: 24px;
|
}
|
|
/deep/.el-range-input {
|
color: white;
|
}
|
|
/deep/ .el-range-separator {
|
color: white;
|
}
|
|
.el-select {
|
width: 180px;
|
}
|
|
.el-select /deep/ .el-input__wrapper {
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 6px;
|
}
|
|
.el-select /deep/ .el-input__inner {
|
color: #ffffff;
|
font-size: 24px;
|
}
|
}
|
}
|
</style>
|
