<template>
|
<div class="YJlist_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="true"
|
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
|
width="120"
|
prop="time"
|
label="时间"
|
show-overflow-tooltip
|
:formatter="dateFormatter"
|
align="center"
|
/>
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click.stop="listClick(scope.row)"
|
>污染源</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</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 menuTool from "@/assets/js/menuTool";
|
import { useStore } from "vuex";
|
import {
|
ysshSuYuanX00Controller,
|
getCoordByName,
|
selectSuYuan46ById,
|
} from "@/api/api.js";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: { Search },
|
props: ["POIListData"],
|
setup(props, { emit }) {
|
const store = useStore();
|
// 这个是写在setup()里的！！
|
|
const formRef = ref < FormInstance > "";
|
const selectform = reactive({
|
value1: [],
|
});
|
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);
|
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 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
|
// );
|
data.WGlist = [];
|
const dt = await ysshSuYuanX00Controller(
|
{ name: POIobj.locationName, 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.locationName);
|
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;
|
};
|
|
// watch(
|
// () => store.state.YJlist,
|
// (nVal, oVal) => {
|
// data.tableData = nVal;
|
// },
|
|
// { deep: true }
|
// );
|
// data.tableData = menuTool.YJlist;
|
const YJlist = async (val) => {
|
const dt = await menuTool.yjthis(val);
|
|
data.tableData = dt;
|
if (dt) {
|
YJtext.value = `${dt.length}条预警信息`;
|
console.log(YJtext.value);
|
}
|
};
|
//时间格式化
|
const dateFormatter = (row) => {
|
return insertStr(row.time);
|
};
|
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) {
|
YJlist({ start: `${value[0]}:00:00`, end: `${value[1]}:00:00` });
|
} else {
|
YJlist();
|
}
|
}
|
|
onMounted(() => {
|
// data.tableData = store.state.YJlist;
|
|
YJlist();
|
});
|
return {
|
data,
|
formRef,
|
listClick,
|
YJtext,
|
dateFormatter,
|
WRY,
|
flytoPoi,
|
selectform,
|
changeTime,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.YJlist_box {
|
// position: absolute;
|
// right: 20px;
|
// top: 490px;
|
.bjtext {
|
margin-left: 35px;
|
width: calc(723px * 1.8);
|
height: 80px;
|
background: rgba(24, 25, 12, 0.8);
|
border: 2px solid rgba(255, 114, 0);
|
border-radius: 10px;
|
padding: 30px;
|
box-sizing: border-box;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
|
.ico {
|
width: 33px;
|
height: 33px;
|
background: #ff7200;
|
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;
|
overflow: auto;
|
.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;
|
}
|
.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>
|
