<template>
|
<div class="YJlist_box">
|
|
|
<div class="list_box" id="list_box1">
|
<div style="display: flex;justify-content: space-between;">
|
<div class="list_title">可疑污染源</div>
|
<div @click="closeData" style="width: 30px;height:30px;color:white">
|
<Close></Close>
|
</div>
|
</div>
|
|
<table>
|
<tr>
|
<th>名称：</th>
|
<th>{{ listData.name }}</th>
|
<th>时间：</th>
|
<th>{{ listData.time }}</th>
|
</tr>
|
<div>溯源结果：</div>
|
|
</table>
|
<table>
|
<tr>
|
<th></th>
|
<th>设备名称</th>
|
<th>经度</th>
|
<th style="padding: 0px 20px;">维度</th>
|
<th style="padding: 0px 20px;">概率</th>
|
</tr>
|
<tr v-if="listData.val">
|
<th>位置1：</th>
|
<td>{{ listData.val.addr1 }}</td>
|
<td>{{ listData.val.x1 }}</td>
|
<td style="padding: 0px 20px;">{{ listData.val.y1 }}</td>
|
<td style="padding: 0px 20px;">{{ (listData.val.odds1 * 100).toFixed(1) }}%</td>
|
</tr>
|
<tr v-if="listData.val">
|
<th>位置2：</th>
|
<td>{{ listData.val.addr2 }}</td>
|
<td>{{ listData.val.x2 }}</td>
|
<td style="padding: 0px 20px;">{{ listData.val.y2 }}</td>
|
<td style="padding: 0px 20px;">{{ (listData.val.odds2 * 100).toFixed(1) }}%</td>
|
</tr>
|
<tr v-if="listData.val">
|
<th>位置3：</th>
|
<td>{{ listData.val.addr3 }}</td>
|
<td>{{ listData.val.x3 }}</td>
|
<td style="padding: 0px 20px;">{{ listData.val.y2 }}</td>
|
<td style="padding: 0px 20px;">{{ (listData.val.odds3 * 100).toFixed(1) }}%</td>
|
</tr>
|
</table>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Search, Close } 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 listData = ref({
|
name: null,
|
time: null,
|
val: null,
|
})
|
|
|
|
const closeData = () => {
|
store.state.YJXQFlag = false;
|
store.state.YJXQ = null;
|
}
|
|
onMounted(() => {
|
var obj = store.state.YJXQ;
|
if (obj) {
|
listData.value = {
|
name: obj.name.name,
|
time: obj.time,
|
val: obj.val,
|
};
|
store.state.YJXQ = null;
|
}
|
});
|
watch(
|
() => store.state.YJXQ,
|
(nVal, oVal) => {
|
if (nVal) {
|
|
listData.value = {
|
name: nVal.name.name,
|
time: nVal.time,
|
val: nVal.val,
|
|
};
|
store.state.YJXQ = null;
|
|
}
|
},
|
{ deep: true, immediate: true }
|
);
|
|
|
return {
|
formRef,
|
selectform,
|
listData,
|
closeData
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.YJlist_box {
|
position: absolute;
|
right: 70px;
|
bottom: 10px;
|
|
.list_box {
|
width: calc(775px * 1.8);
|
// height: calc(472px * 1);
|
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;
|
}
|
|
table {
|
color: white;
|
text-align: left;
|
|
th {
|
min-width: 150px;
|
}
|
|
tr {
|
margin-bottom: 10px !important;
|
|
|
}
|
}
|
|
|
|
.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>
|
