<template>
|
<div class="popout_box list_box1" id="list_box2">
|
<div class="right_bg"></div>
|
<div class="bottom_bg"></div>
|
<div class="popout_title">排放点位管理</div>
|
<!-- <div class="close" @click="data.dialog.chart_isshow = false"></div> -->
|
<div class="center_bg"></div>
|
<div class="table_box">
|
<el-form :model="selectform" :inline="true">
|
<el-form-item label="点位名称" prop="id">
|
<el-input
|
v-model="selectform.name"
|
autocomplete="off"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="selectList"
|
>搜索</el-button
|
>
|
</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="longitude" label="经度" />
|
<el-table-column prop="latitude" label="纬度" />
|
<el-table-column prop="type" label="类型" />
|
|
<el-table-column align="right">
|
<template #header>
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click="data.dialogFormVisible = true"
|
>添加</el-button
|
>
|
</template>
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click="deleteRow(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-dialog
|
v-model="data.dialogFormVisible"
|
title="添加点位"
|
:append-to-body="true"
|
>
|
<el-form :model="form" label-position="top" ref="formRef" :rules="rules">
|
<el-form-item label="点位ID" prop="id">
|
<el-input
|
v-model="form.id"
|
autocomplete="off"
|
placeholder="请输入id"
|
/>
|
</el-form-item>
|
<el-form-item label="点位名称" prop="name">
|
<el-input
|
v-model="form.name"
|
autocomplete="off"
|
placeholder="请输入名称"
|
/>
|
</el-form-item>
|
<el-form-item label="点位经度" prop="longitude">
|
<el-input
|
v-model="form.longitude"
|
autocomplete="off"
|
placeholder="请输入经度"
|
/>
|
</el-form-item>
|
<el-form-item label="点位纬度" prop="latitude">
|
<el-input
|
v-model="form.latitude"
|
autocomplete="off"
|
placeholder="请输入纬度"
|
/>
|
</el-form-item>
|
<el-form-item label="点位类型" prop="type">
|
<el-select
|
v-model="form.type"
|
placeholder="请选择类型"
|
style="width: 100%"
|
>
|
<el-option label="实时排放" value="实时排放" />
|
<el-option label="监控点" value="监控点" />
|
<el-option label="超级站" value="超级站" />
|
<el-option label="有组织排放" value="有组织排放" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="data.dialogFormVisible = false">关闭</el-button>
|
<el-button type="primary" @click="addPoi(formRef)"> 添加 </el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// import type { FormInstance, FormRules } from "element-plus";
|
import { reactive, onMounted, watch, ref } from "vue";
|
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
|
import { deleteLocation, insertLocation } from "@/api/api.js";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
props: ["POIListData"],
|
setup(props, { emit }) {
|
// 这个是写在setup()里的！！
|
const formRef = ref < FormInstance > "";
|
|
let data = reactive({
|
tableData: [],
|
dialogFormVisible: false,
|
});
|
const form = reactive({
|
name: "",
|
id: "",
|
longitude: "",
|
latitude: "",
|
type: "",
|
});
|
const selectform = reactive({
|
name: "",
|
});
|
const rules = ref({
|
id: [
|
{
|
required: true,
|
message: "请输入id",
|
trigger: "blur",
|
},
|
],
|
name: [
|
{
|
required: true,
|
message: "请输入名称",
|
trigger: "blur",
|
},
|
],
|
|
type: [
|
{
|
type: "array",
|
required: true,
|
message: "请选择类型",
|
trigger: "change",
|
},
|
],
|
longitude: [
|
{
|
required: true,
|
message: "请输入经度",
|
trigger: "change",
|
},
|
],
|
latitude: [
|
{
|
required: true,
|
message: "请输入纬度",
|
trigger: "blur",
|
},
|
],
|
});
|
|
const deleteRow = (row) => {
|
ElMessageBox.confirm("确定是否删除", "Warning", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
const dt = await deleteLocation(row.id);
|
if (dt.code != 200) {
|
return ElMessage.error("删除失败");
|
}
|
ElMessage({
|
message: "删除成功",
|
type: "success",
|
});
|
})
|
.catch(() => {});
|
};
|
const addPoi = (form) => {
|
form.validate(async (valid, fields) => {
|
if (valid) {
|
const dt = await insertLocation(form);
|
if (dt.code != 200) {
|
return ElMessage.error("添加失败");
|
}
|
ElMessage({
|
message: "添加成功",
|
type: "success",
|
});
|
}
|
});
|
};
|
const listClick = (row) => {
|
window.sgworld.Navigate.flyToPosition(row.longitude, row.latitude, 500);
|
};
|
const selectList = () => {
|
let arr = [];
|
data.tableData.forEach((e) => {
|
if (e.name == selectform.name) {
|
arr.push(e);
|
}
|
});
|
data.tableData = arr;
|
};
|
watch(
|
() => selectform.name,
|
(nVal, oVal) => {
|
if (nVal == "") {
|
data.tableData = props.POIListData;
|
}
|
}
|
);
|
watch(
|
() => props.POIListData,
|
(nVal, oVal) => {
|
data.tableData = nVal;
|
},
|
{ deep: true }
|
);
|
onMounted(() => {});
|
return {
|
data,
|
deleteRow,
|
form,
|
addPoi,
|
rules,
|
formRef,
|
listClick,
|
selectform,
|
selectList,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.list_box1 {
|
width: 1010px;
|
height: 702px;
|
|
background: url("../assets/img/top_left.png") top left no-repeat,
|
url("../assets/img/top_right.png") top right no-repeat,
|
url("../assets/img/bottom_left.png") bottom left no-repeat,
|
url("../assets/img/bottom_right.png") 100% 98% no-repeat;
|
background-size: 180px 84px, 118px 85px, 180px 73px, 118px 54px;
|
|
.bottom_bg {
|
background: url("../assets/img/bottom.png") 100% 98.6% repeat-x;
|
background-size: 75px 64px;
|
}
|
.right_bg {
|
height: calc(100% - 155px); //计算所需中间边框的高度
|
top: 86px;
|
}
|
.center_bg {
|
width: calc(100% - 298px);
|
height: calc(100% - 161px);
|
left: 52.8%;
|
top: 50.7%;
|
z-index: 0;
|
}
|
|
.table_box {
|
width: 85%;
|
height: 70%;
|
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;
|
}
|
}
|
#list_box2 {
|
top: 1100px;
|
}
|
.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;
|
}
|
.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;
|
}
|
@media (max-width: 3840px) {
|
.list_box {
|
width: 1010px;
|
height: 700px;
|
|
background: url("../assets/img/top_left.png") top left no-repeat,
|
url("../assets/img/top_right.png") top right no-repeat,
|
url("../assets/img/bottom_left.png") bottom left no-repeat,
|
url("../assets/img/bottom_right.png") 100% 98% no-repeat;
|
background-size: 181px 85px, 118px 85px, 181px 74px, 118px 54px;
|
|
.bottom_bg {
|
background: url("../assets/img/bottom.png") 100% 98.6% repeat-x;
|
background-size: 76px 64px;
|
}
|
.right_bg {
|
height: calc(100% - 154px); //计算所需中间边框的高度
|
top: 85px;
|
}
|
.center_bg {
|
width: calc(100% - 296px);
|
height: calc(100% - 158px);
|
left: 52.7%;
|
top: 50.7%;
|
z-index: 0;
|
}
|
}
|
}
|
@media (max-width: 1920px) {
|
.list_box {
|
width: 1012px;
|
height: 700px;
|
|
background: url("../assets/img/top_left.png") top left no-repeat,
|
url("../assets/img/top_right.png") top right no-repeat,
|
url("../assets/img/bottom_left.png") bottom left no-repeat,
|
url("../assets/img/bottom_right.png") 100% 98% no-repeat;
|
background-size: 180px 84px, 118px 85px, 180px 74px, 118px 54px;
|
|
.bottom_bg {
|
background: url("../assets/img/bottom.png") 100% 98.6% repeat-x;
|
background-size: 75px 64px;
|
}
|
.right_bg {
|
height: calc(100% - 154px); //计算所需中间边框的高度
|
top: 85px;
|
}
|
.center_bg {
|
width: calc(100% - 298px);
|
height: calc(100% - 158px);
|
left: 52.8%;
|
top: 50.5%;
|
z-index: 0;
|
}
|
}
|
}
|
</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>
|
