<template>
|
<div class="SYFK_box">
|
<div class="SYFK_title">溯源反馈</div>
|
<div class="close" @click="popoutClose()"></div>
|
<el-form :model="selectform" :inline="true" size="large">
|
<el-form-item class="selectinp" label="点位名称" prop="search">
|
<el-input v-model="search" autocomplete="off" placeholder="请输入名称">
|
<!-- <template #append>
|
<el-button size="small" @click="selectList">
|
<el-icon
|
style="vertical-align: middle; color: #fff"
|
class="elicon"
|
>
|
<search />
|
</el-icon>
|
|
</el-button>
|
</template> -->
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="filterTableData"
|
style="width: 100%"
|
height="82%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="vocsName" label="名称" />
|
<el-table-column prop="lon" label="经度" />
|
<el-table-column prop="lat" label="纬度" />
|
<el-table-column align="right" width="55">
|
<!-- <template #header>
|
<el-input v-model="search" size="small" placeholder="请输入名称" />
|
</template> -->
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click="editName(scope.row)"
|
>编辑</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-dialog
|
v-model="data.dialogFormVisible"
|
title="编辑选中名称"
|
:append-to-body="true"
|
>
|
<el-form
|
:model="form"
|
label-position="top"
|
ref="formRef"
|
:rules="rules"
|
size="large"
|
>
|
<el-form-item label="点位名称" prop="vocsName" style="color: #fff">{{
|
form.vocsName
|
}}</el-form-item>
|
<el-form-item label="点位值" prop="newvalue">
|
<el-input
|
size="large"
|
v-model="form.newvalue"
|
autocomplete="off"
|
placeholder="请输入名称"
|
/>
|
</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 dayjs from "dayjs";
|
import { reactive, onMounted, watch, ref, computed } from "vue";
|
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
|
import { useStore } from "vuex";
|
import {
|
ysshSuYuanX00Controller,
|
ysshSuYuanX00ControllerUpdate,
|
locationControllerQ,
|
updateSuYuan,
|
querySuYuan,
|
editSuYuan,
|
} from "@/api/api.js";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
props: ["syfkData"],
|
setup(props, { emit }) {
|
const formRef = ref < FormInstance > "";
|
const store = useStore();
|
const POIname = computed(() => store.state.POIname);
|
let data = reactive({
|
SJvalue: props.syfkData.SJvalue,
|
JLvalue: props.syfkData.JLvalue,
|
date: props.syfkData.date,
|
SYPOIname: POIname,
|
tableData: [],
|
dialogFormVisible: false,
|
changelist: [],
|
changeID: [],
|
id: "",
|
});
|
|
// console.log("syfkData", props);
|
const form = reactive({
|
name: POIname,
|
correct: false,
|
suYuanId: "",
|
id: "",
|
newid: 0,
|
newvalue: "",
|
newvocsName: "",
|
time: "",
|
vocsName: "",
|
vocsValue: "",
|
});
|
const rules = ref({
|
name: [
|
{
|
required: true,
|
message: "请输入名称",
|
trigger: "blur",
|
},
|
],
|
value: [
|
{
|
required: true,
|
message: "请输入值",
|
trigger: "blur",
|
},
|
],
|
});
|
let optionsSJ = ref([]);
|
const optionsJL = reactive([
|
{
|
value: "100",
|
label: "100m",
|
},
|
{
|
value: "200",
|
label: "200m",
|
},
|
// {
|
// value: "300",
|
// label: "300m",
|
// },
|
// {
|
// value: "500",
|
// label: "500m",
|
// },
|
]);
|
|
const selectList = async () => {
|
const dt = await ysshSuYuanX00Controller(
|
{ name: data.SYPOIname, date: data.date },
|
data.JLvalue
|
);
|
let arr = [];
|
data.tableData = dt.result.data;
|
let result = dt.result.data.slice(0);
|
const maxVal = result.sort((a, b) => b.vocsValue - a.vocsValue)[0];
|
// console.log("maxVal", maxVal);
|
if (maxVal.id) {
|
form.id = maxVal.id;
|
form.suYuanId = maxVal.id;
|
// console.log(maxVal, dt.result[0]);
|
}
|
// sgworld.Navigate.flyToPosition(dt.result[30].lon, dt.result[30].lat, 400);
|
sgworld.Navigate.flyToPosition(maxVal.lon, maxVal.lat, 340, {
|
heading: 270,
|
pitch: -90,
|
roll: 0,
|
});
|
|
dt.result.data.forEach((e) => {
|
arr.push({
|
id: e.id,
|
name: e.vocsName,
|
vocs: e.vocsValue,
|
tm: 2,
|
lon: e.lon,
|
lat: e.lat,
|
high: 300,
|
vc: "E9FF00FF",
|
nc: "FFFFFFFF",
|
bool: false,
|
});
|
});
|
data.id = dt.result.feedbackId;
|
sgworld.Core.postMessage({
|
type: "neSYFKezi",
|
geziarr: arr,
|
});
|
};
|
const selectform = reactive({
|
name: "",
|
});
|
//网格名称选择框
|
const getSYFKname = async () => {
|
const dt = await locationControllerQ({ type: "监控点" });
|
const dt1 = await locationControllerQ({ type: "超级站" });
|
let arr = [...dt.result, ...dt1.result];
|
|
arr.forEach((e) => {
|
optionsSJ.value.push({ value: e.name, label: e.name });
|
});
|
|
data.optionisshow = true;
|
};
|
//编辑溯源
|
const addPoi = (res) => {
|
res.validate(async (valid, fields) => {
|
if (valid) {
|
ElMessageBox.confirm("确定是否修改", "溯源反馈", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
let parmas = {
|
id: data.id,
|
practicalId: form.newid,
|
practicalVocsName: form.vocsName,
|
practicalValue: form.newvalue,
|
};
|
const res = await editSuYuan(parmas);
|
if (res.code != 200) {
|
return ElMessage.error("溯源反馈失败");
|
}
|
ElMessage({
|
message: "溯源反馈成功",
|
type: "success",
|
});
|
selectList();
|
data.dialogFormVisible = false;
|
// const suYuanId = form.id;
|
// const curr = await querySuYuan({
|
// suYuanId: suYuanId,
|
// name: form.name,
|
// });
|
//
|
// if (curr.code == 200) {
|
// let result = curr.result[0];
|
// form.id = result.id;
|
// form.correct = false;
|
//
|
// const res = await updateSuYuan(form);
|
// if (res.code != 200) {
|
// return ElMessage.error("溯源反馈失败");
|
// }
|
// ElMessage({
|
// message: "溯源反馈成功",
|
// type: "success",
|
// });
|
// selectList();
|
// data.dialogFormVisible = false;
|
// }
|
})
|
.catch(() => {});
|
}
|
});
|
};
|
const handleSelectionChange = (val) => {
|
// console.log(val);
|
data.changeID = [];
|
data.changelist = val;
|
val.forEach((element) => {
|
data.changeID.push(element.id);
|
});
|
};
|
|
const editName = (row) => {
|
// console.log("ROPW", row);
|
// form.id = row.id
|
form.newid = row.id;
|
form.vocsName = row.vocsName;
|
form.newvocsName = row.vocsName;
|
form.vocsValue = row.vocsValue;
|
form.time = dayjs().format("YYYY-MM-DD HH:mm:ss ");
|
form.newvalue = row.vocsValue;
|
data.dialogFormVisible = true;
|
// if (data.changelist.length > 0) {
|
// form.name = row.vocsName
|
// data.dialogFormVisible = true
|
// } else {
|
// return ElMessage.error("请选择需要修改的网格")
|
// }
|
};
|
const popoutClose = () => {
|
emit("FKclose", false);
|
};
|
getSYFKname();
|
onMounted(() => {
|
selectList();
|
});
|
|
const search = ref("");
|
const filterTableData = computed(() =>
|
data.tableData.filter((data) => {
|
// console.log("data", data);
|
const result =
|
!search.value ||
|
data.vocsName.toLowerCase().includes(search.value.toLowerCase());
|
return result;
|
})
|
);
|
|
return {
|
data,
|
selectList,
|
optionsSJ,
|
optionsJL,
|
form,
|
addPoi,
|
rules,
|
formRef,
|
handleSelectionChange,
|
editName,
|
search,
|
filterTableData,
|
selectform,
|
popoutClose,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.SYFK_box {
|
// position: absolute;
|
// left: 240px;
|
// top: 490px;
|
width: 964px;
|
height: 591px;
|
padding: 50px;
|
box-sizing: border-box;
|
background: url("../assets/img/zbg.png") no-repeat center;
|
background-size: 100% 100%;
|
.SYFK_title {
|
font-size: 30px;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
}
|
.close {
|
width: 22px;
|
height: 22px;
|
cursor: pointer;
|
background: url("../assets/img/close.png") center no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
right: 50px;
|
top: 50px;
|
}
|
.form_box {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.inp_box {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
}
|
:deep(.el-select) {
|
width: 140px;
|
height: 64px;
|
}
|
.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: 3px;
|
height: 64px;
|
}
|
.el-select /deep/ .el-input__inner {
|
color: #ffffff;
|
font-size: 24px;
|
}
|
}
|
|
.el-button {
|
background: rgba(0, 0, 0, 0.2);
|
border: 4px solid #2e58cc !important;
|
border-radius: 20px !important;
|
color: #ffffff;
|
height: 64px !important;
|
font-size: 24px !important;
|
padding: 10px 15px !important;
|
}
|
}
|
.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-table {
|
// // height: 370px;
|
// width: 100%;
|
// overflow: auto;
|
// background-color: transparent;
|
// font-size: 28px;
|
// .el-button--small {
|
// font-size: 28px;
|
// }
|
// .el-table__cell {
|
// padding: 16px 0;
|
// }
|
// .cell {
|
// line-height: 46px;
|
// padding: 0 24px;
|
// font-size: 28px;
|
// overflow: hidden;
|
// }
|
// }
|
// .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;
|
}
|
.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;
|
}
|
.el-form .selectinp {
|
margin-bottom: 0;
|
}
|
</style>
|
<style lang="less">
|
.el-dialog {
|
width: 600px !important;
|
background-color: rgba(0, 20, 67, 0.6) !important;
|
}
|
|
.el-dialog__header span {
|
font-size: 25px;
|
color: #fff;
|
}
|
.el-overlay-message-box {
|
// background-color: rgba(0, 20, 67, 0.6) !important;
|
|
// padding: 16px;
|
.el-message-box__title {
|
color: #fff;
|
span {
|
font-size: 20px;
|
color: #fff;
|
}
|
}
|
.el-message-box__headerbtn {
|
font-size: 28px;
|
}
|
.el-message-box {
|
border: none;
|
background-color: rgba(0, 20, 67, 0.6) !important;
|
|
// max-width: 840px !important;
|
// height: 300px;
|
// padding-bottom: 40px;
|
// font-size: 36px;
|
}
|
// .el-message-box__header {
|
// padding-bottom: 40px;
|
// }
|
// .el-message-box__btns {
|
// padding: 10px 30px 0;
|
// }
|
// .el-message-box__content {
|
// font-size: 28px;
|
// line-height: 28px;
|
// p {
|
// font-size: 28px;
|
// line-height: 28px;
|
// }
|
}
|
.el-message-box__status + .el-message-box__message {
|
// padding-left: 72px;
|
// padding-right: 25px;
|
p {
|
font-size: 18px;
|
color: #fff;
|
}
|
}
|
// .el-message-box__status {
|
// font-size: 28px !important;
|
// }
|
// .el-button {
|
// height: 64px !important;
|
// font-size: 28px !important;
|
// padding: 16px 30px !important;
|
// }
|
// }
|
// .el-overlay-dialog {
|
// .el-dialog {
|
// // width: 900px !important;
|
// // height: 600px;
|
// --el-dialog-content-font-size: 28px;
|
// background-color: rgba(0, 20, 67, 0.6) !important;
|
// .el-dialog__title {
|
// font-size: 35px;
|
// }
|
// .el-form-item__label {
|
// margin-bottom: 24px;
|
// line-height: 44px;
|
// font-size: 28px;
|
// }
|
// .el-input__inner,
|
// .el-form-item__content {
|
// height: 64px;
|
// font-size: 28px;
|
// }
|
// .el-dialog__close {
|
// font-size: 30px;
|
// }
|
// .el-form-item__error {
|
// padding-top: 8px;
|
// font-size: 24px;
|
// line-height: 24px;
|
// }
|
// .el-button {
|
// height: 64px !important;
|
// font-size: 24px !important;
|
// padding: 10px 15px !important;
|
// }
|
// }
|
// }
|
// .el-message {
|
// // max-width: 340px !important;
|
// // width: 340px !important;
|
// // height: 150px;
|
// top: 142.9375px;
|
// .el-message__icon {
|
// font-size: 34px;
|
// }
|
// .el-message__content {
|
// font-size: 34px;
|
// line-height: 34px;
|
// p {
|
// font-size: 34px;
|
// line-height: 34px;
|
// }
|
// }
|
// }
|
// .SYFK_box {
|
// .el-table__header {
|
// .el-input__inner {
|
// font-size: 28px;
|
// height: 40px;
|
// }
|
// }
|
// .el-table__header-wrapper {
|
// .cell {
|
// line-height: 46px !important;
|
// padding: 0 24px !important;
|
// font-size: 28px !important;
|
// overflow: hidden !important;
|
// }
|
// }
|
// }
|
</style>
|
