<template>
|
<div class="POIlist_box">
|
<div class="SearchBtn" @click="data.chart_isshow = !data.chart_isshow">
|
<span>搜索</span>
|
<div class="ico"></div>
|
</div>
|
<div class="list_box" id="list_box1" v-show="data.chart_isshow">
|
<div class="list_title">监控点位管理</div>
|
<div class="list_close" @click="data.chart_isshow = false"></div>
|
|
<div class="table_box">
|
<el-tabs
|
v-model="data.activeName"
|
class="demo-tabs"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane label="监控点" name="first">
|
<el-form :model="selectform" :inline="true">
|
<el-form-item label="点位名称" prop="id">
|
<el-input
|
v-model="selectform.name"
|
autocomplete="off"
|
placeholder="请输入"
|
>
|
<template #append>
|
<el-button size="small" @click="selectList">
|
<el-icon
|
style="vertical-align: middle; color: #fff"
|
class="elicon"
|
>
|
<search />
|
</el-icon>
|
<!-- <span style="vertical-align: middle"> Search </span> -->
|
</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="data.tableData"
|
style="width: 100%"
|
height="100%"
|
@row-click="listClick"
|
>
|
<el-table-column prop="name" label="名称" />
|
<el-table-column prop="lon" label="经度" />
|
<el-table-column prop="lat" label="纬度" />
|
<el-table-column prop="type" label="类型" /> </el-table
|
></el-tab-pane>
|
<el-tab-pane label="超级站" name="second">
|
<el-form :model="selectform1" :inline="true">
|
<el-form-item label="点位名称" prop="id">
|
<el-input
|
v-model="selectform1.name"
|
autocomplete="off"
|
placeholder="请输入"
|
>
|
<template #append>
|
<el-button size="small" @click="selectList1">
|
<el-icon
|
style="vertical-align: middle; color: #fff"
|
class="elicon"
|
>
|
<search />
|
</el-icon>
|
<!-- <span style="vertical-align: middle"> Search </span> -->
|
</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="data.tableData1"
|
style="width: 100%"
|
height="100%"
|
@row-click="listClick"
|
>
|
<el-table-column prop="name" label="名称" />
|
<el-table-column prop="lon" label="经度" />
|
<el-table-column prop="lat" label="纬度" />
|
<el-table-column prop="type" label="类型" /> </el-table
|
></el-tab-pane>
|
<el-tab-pane label="有组织排放" name="third">
|
<el-form :model="selectform2" :inline="true">
|
<el-form-item label="点位名称" prop="id">
|
<el-input
|
v-model="selectform2.name"
|
autocomplete="off"
|
placeholder="请输入"
|
>
|
<template #append>
|
<el-button size="small" @click="selectList2">
|
<el-icon
|
style="vertical-align: middle; color: #fff"
|
class="elicon"
|
>
|
<search />
|
</el-icon>
|
<!-- <span style="vertical-align: middle"> Search </span> -->
|
</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="data.tableData2"
|
style="width: 100%"
|
height="100%"
|
@row-click="listClick"
|
>
|
<el-table-column prop="name" label="名称" />
|
<el-table-column prop="lon" label="经度" />
|
<el-table-column prop="lat" label="纬度" />
|
<el-table-column prop="type" label="类型" /> </el-table
|
></el-tab-pane>
|
<el-tab-pane label="实时排放" name="fourth">
|
<el-form :model="selectform3" :inline="true">
|
<el-form-item label="点位名称" prop="id">
|
<el-input
|
v-model="selectform3.name"
|
autocomplete="off"
|
placeholder="请输入"
|
>
|
<template #append>
|
<el-button size="small" @click="selectList3">
|
<el-icon
|
style="vertical-align: middle; color: #fff"
|
class="elicon"
|
>
|
<search />
|
</el-icon>
|
<!-- <span style="vertical-align: middle"> Search </span> -->
|
</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="data.tableData3"
|
style="width: 100%"
|
height="100%"
|
@row-click="listClick"
|
>
|
<el-table-column prop="name" label="名称" />
|
<el-table-column prop="lon" label="经度" />
|
<el-table-column prop="lat" label="纬度" />
|
<el-table-column prop="type" label="类型" /> </el-table
|
></el-tab-pane>
|
</el-tabs>
|
</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 { useStore } from "vuex";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: { Search },
|
props: [],
|
setup(props, { emit }) {
|
const store = useStore();
|
// 这个是写在setup()里的！！
|
const formRef = ref < FormInstance > "";
|
function childrenbut() {
|
// props.sonData 可以访问到父组件传递的数据
|
}
|
let data = reactive({
|
tableData: [],
|
tableData1: [],
|
tableData2: [],
|
tableData3: [],
|
dialogFormVisible: false,
|
activeName: "first",
|
chart_isshow: false,
|
inquireData: [],
|
});
|
|
const selectform = reactive({
|
name: "",
|
});
|
const selectform1 = reactive({
|
name: "",
|
});
|
const selectform2 = reactive({
|
name: "",
|
});
|
const selectform3 = reactive({
|
name: "",
|
});
|
const listClick = (row) => {
|
window.sgworld.Navigate.flyToPosition(row.lon, row.lat, 500, {
|
heading: 270,
|
pitch: -89.5,
|
roll: 0,
|
});
|
};
|
const selectList = () => {
|
if (selectform.name == "") {
|
return;
|
}
|
while (selectform.name.lastIndexOf(" ") >= 0) {
|
selectform.name = selectform.name.replace(" ", "");
|
}
|
|
if (selectform.name.length == 0) {
|
return;
|
}
|
let arr = [];
|
|
arr = store.state.jkList.filter((p) => {
|
return p.name.indexOf(selectform.name) > -1;
|
});
|
// store.state.jkList.forEach((e) => {
|
// if (e.name == selectform.name) {
|
// arr.push(e);
|
// }
|
// });
|
data.tableData = arr;
|
};
|
const selectList1 = () => {
|
if (selectform1.name == "") {
|
return;
|
}
|
while (selectform1.name.lastIndexOf(" ") >= 0) {
|
selectform1.name = selectform1.name.replace(" ", "");
|
}
|
if (selectform1.name.length == 0) {
|
return;
|
}
|
let arr = [];
|
arr = store.state.ccList.filter((p) => {
|
return p.name.indexOf(selectform1.name) > -1;
|
});
|
// store.state.ccList.forEach((e) => {
|
// if (e.name == selectform1.name) {
|
// arr.push(e);
|
// }
|
// });
|
data.tableData1 = arr;
|
};
|
const selectList2 = () => {
|
if (selectform2.name == "") {
|
return;
|
}
|
while (selectform2.name.lastIndexOf(" ") >= 0) {
|
selectform2.name = selectform2.name.replace(" ", "");
|
}
|
if (selectform2.name.length == 0) {
|
return;
|
}
|
let arr = [];
|
arr = store.state.yzList.filter((p) => {
|
return p.name.indexOf(selectform2.name) > -1;
|
});
|
// store.state.yzList.forEach((e) => {
|
// if (e.name == selectform2.name) {
|
// arr.push(e);
|
// }
|
// });
|
data.tableData2 = arr;
|
};
|
const selectList3 = () => {
|
if (selectform.name3 == "") {
|
return;
|
}
|
while (selectform3.name.lastIndexOf(" ") >= 0) {
|
selectform3.name = selectform3.name.replace(" ", "");
|
}
|
if (selectform3.name.length == 0) {
|
return;
|
}
|
let arr = [];
|
arr = store.state.ssList.filter((p) => {
|
return p.name.indexOf(selectform3.name) > -1;
|
});
|
// store.state.ssList.forEach((e) => {
|
|
// if (e.name === selectform3.name) {
|
// arr.push(e);
|
// }
|
// });
|
|
data.tableData3 = arr;
|
};
|
const handleClick = () => {};
|
|
watch(
|
() => store.state.jkList,
|
(nVal, oVal) => {
|
data.tableData = nVal;
|
},
|
|
{ deep: true }
|
);
|
watch(
|
() => store.state.ccList,
|
(nVal, oVal) => {
|
data.tableData1 = nVal;
|
},
|
|
{ deep: true }
|
);
|
watch(
|
() => store.state.yzList,
|
(nVal, oVal) => {
|
data.tableData2 = nVal;
|
},
|
|
{ deep: true }
|
);
|
watch(
|
() => store.state.ssList,
|
(nVal, oVal) => {
|
data.tableData3 = nVal;
|
},
|
|
{ deep: true }
|
);
|
watch(
|
() => selectform.name,
|
(nVal, oVal) => {
|
if (nVal == "") {
|
data.tableData = store.state.jkList;
|
}
|
}
|
);
|
watch(
|
() => selectform1.name,
|
(nVal, oVal) => {
|
if (nVal == "") {
|
data.tableData1 = store.state.ccList;
|
}
|
}
|
);
|
watch(
|
() => selectform2.name,
|
(nVal, oVal) => {
|
if (nVal == "") {
|
data.tableData2 = store.state.yzList;
|
}
|
}
|
);
|
watch(
|
() => selectform3.name,
|
(nVal, oVal) => {
|
if (nVal == "") {
|
data.tableData3 = store.state.ssList;
|
}
|
}
|
);
|
onMounted(() => {
|
data.tableData = store.state.jkList;
|
data.tableData1 = store.state.ccList;
|
data.tableData2 = store.state.yzList;
|
data.tableData3 = store.state.ssList;
|
});
|
return {
|
data,
|
childrenbut,
|
formRef,
|
listClick,
|
selectform,
|
selectform1,
|
selectform2,
|
selectform3,
|
selectList,
|
selectList1,
|
selectList2,
|
selectList3,
|
handleClick,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.POIlist_box {
|
// position: absolute;
|
// right: 70px;
|
// top: 300px;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
}
|
.SearchBtn {
|
width: 412px;
|
height: 132px;
|
box-sizing: border-box;
|
background: url("../assets/img/ssbg.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-bottom: 25px;
|
cursor: pointer;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding-top: 15px;
|
span {
|
font-size: 26px;
|
color: #ffffff;
|
}
|
.ico {
|
width: 25px;
|
height: 25px;
|
background: url("../assets/img/ss.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
.list_box {
|
width: calc(775px * 1.5);
|
height: calc(472px * 1.5);
|
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: 10px;
|
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;
|
}
|
}
|
|
.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;
|
font-size: 16px;
|
}
|
.el-input {
|
height: 30px;
|
}
|
.el-form /deep/ .el-input__wrapper {
|
background-color: rgba(134, 132, 132, 0.5);
|
// border-radius: 0;
|
color: white;
|
}
|
.el-form /deep/ .el-form-item__label {
|
color: white;
|
font-size: 16px;
|
}
|
.elicon {
|
font-size: 25px;
|
}
|
.el-form /deep/ .el-input-group__append {
|
background: rgba(49, 180, 255, 0.4) !important;
|
}
|
.el-tabs /deep/ .el-tabs__item {
|
color: #fff;
|
font-size: 16px;
|
}
|
.el-tabs /deep/ .el-tabs__item:hover {
|
color: #409eff;
|
}
|
.el-tabs /deep/ .is-active {
|
color: #409eff;
|
}
|
.el-tabs {
|
height: 80%;
|
}
|
.el-tabs /deep/ .el-tabs__content {
|
height: 100%;
|
}
|
.el-tabs /deep/ .el-tabs__content .el-tab-pane {
|
height: 100%;
|
}
|
</style>
|
<style>
|
.el-dialog {
|
width: 600px !important;
|
background-color: rgba(0, 20, 67, 0.6) !important;
|
}
|
|
.el-dialog__header span {
|
font-size: 25px;
|
color: #fff;
|
}
|
</style>
|
