371 lines
9.9 KiB
Vue
371 lines
9.9 KiB
Vue
<template>
|
|
<div class="overview">
|
|
<el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain" v-if="!testMapVisible">
|
|
<template #title>
|
|
<div class="title-detail">
|
|
<img src="@/assets/images/tableIcon/look.png" alt="" />
|
|
<span>{{ props.title }}</span>
|
|
<el-icon>
|
|
<close @click="closeMain" />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
<el-form ref="formRef" :model="formData" label-width="auto" :rules="rules" class="basic-form" size="default">
|
|
<div class="basic-info">
|
|
<div class="form-content">
|
|
<div class="row">
|
|
<el-form-item label="类型:" prop="type">
|
|
<el-select v-model="formData.type" placeholder="请选择" style="width: 100%" @change="typeChange">
|
|
<el-option v-for="item in lineTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="row" v-if="formData.type != 'ODLine'">
|
|
<el-form-item label="坐标点位:" :required="true">
|
|
<div class="table-content" v-for="(item, index) in addPositions" :key="index">
|
|
<div class="table-head">
|
|
<div class="head-value">{{ index == 0 ? "起始" : "终止" }}经度</div>
|
|
<div class="head-value">{{ index == 0 ? "起始" : "终止" }}纬度</div>
|
|
<div class="head-value">{{ index == 0 ? "起始" : "终止" }}高度</div>
|
|
</div>
|
|
<div class="table-body">
|
|
<div class="body-value">
|
|
<el-input v-model="item.lng" style="width: 100%" placeholder="请输入" />
|
|
</div>
|
|
<div class="body-value">
|
|
<el-input v-model="item.lat" placeholder="请输入" />
|
|
</div>
|
|
<div class="body-value">
|
|
<el-input v-model="item.alt" placeholder="请输入" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="row">
|
|
<el-form-item label="线宽度:" prop="width">
|
|
<el-input-number v-model.number="formData.width" placeholder="请输入" controls-position="right" />
|
|
</el-form-item>
|
|
<el-form-item label="数据文件：" prop="jsonFile" v-if="formData.type == 'ODLine'">
|
|
<el-upload
|
|
ref="upload"
|
|
:headers="headers"
|
|
:file-list="fileList"
|
|
class="upload-demo"
|
|
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
|
:on-remove="onRemove"
|
|
multiple
|
|
:limit="1"
|
|
:on-success="uploadSuccess"
|
|
style="width: 100%"
|
|
>
|
|
<el-button class="uploadBtn" type="primary">点击上传</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="线的背景颜色:" prop="bgColor" v-if="formData.type == 'ODLine'">
|
|
<el-color-picker v-model="formData.bgColor" />
|
|
</el-form-item>
|
|
<el-form-item label="颜色:" prop="color">
|
|
<el-color-picker v-model="formData.color" />
|
|
</el-form-item>
|
|
<el-form-item label="速度:" prop="speed">
|
|
<el-input-number v-model.numer="formData.speed" controls-position="right" placeholder="请输入" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="row">
|
|
<el-form-item label="显示:" prop="show">
|
|
<el-switch v-model="formData.show" style="--el-switch-on-color: #13ce66" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="row" v-if="props.title == '编辑线效果'">
|
|
<el-form-item label="可视化设置预览:">
|
|
<el-button type="primary" @click="openTestMap">编辑</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button type="primary" @click="confirmSubmit">确定</el-button>
|
|
<el-button type="info" @click="visible1 = false">取消</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
<!-- 图层效果编辑 -->
|
|
<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails" type="线效果"></testMap>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, watch, reactive } from "vue";
|
|
import type { FormInstance } from "element-plus";
|
|
import { ElMessage, UploadProps } from "element-plus";
|
|
import { polylineCombineAdd, polylineCombineDetails, polylineCombineEdit } from "@/api/modules/mapCommon";
|
|
import testMap from "@/components/testMap/index.vue";
|
|
import { GlobalStore } from "@/stores";
|
|
const props = defineProps({
|
|
operateVisible: Boolean,
|
|
relativeId: String,
|
|
title: String
|
|
});
|
|
const emits = defineEmits(["update:operateVisible", "confirm"]);
|
|
const addPositions = ref([
|
|
{ lng: "", lat: "", alt: "" },
|
|
{ lng: "", lat: "", alt: "" }
|
|
]);
|
|
const baseUrl = import.meta.env.VITE_API_URL;
|
|
const fileList = ref([]);
|
|
const store = GlobalStore();
|
|
const headers = ref({ Authorization: "Bearer " + store.token });
|
|
const minLength = ref(1); // 最小点位长度
|
|
const sportTypeList = ref([
|
|
{ label: "正向运动", value: 0 },
|
|
{ label: "反向运动", value: 1 },
|
|
{ label: "双向运动", value: 2 }
|
|
]);
|
|
const lineTypeList = ref([
|
|
{ label: "飞线", value: "LineFlowColor" },
|
|
{ label: "城市OD线", value: "ODLine" }
|
|
]);
|
|
const testMapVisible = ref(false);
|
|
const rules = ref({
|
|
type: [
|
|
{
|
|
required: true,
|
|
message: "请选择",
|
|
trigger: "change"
|
|
}
|
|
],
|
|
width: [
|
|
{
|
|
required: true,
|
|
message: "请输入",
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
jsonFile: [
|
|
{
|
|
required: true,
|
|
message: "请上传",
|
|
trigger: "change"
|
|
}
|
|
]
|
|
});
|
|
const formRef = ref<FormInstance>();
|
|
const formData = ref<any>({});
|
|
const visible1 = ref(false);
|
|
// 类型切换
|
|
const typeChange = (e: any) => {
|
|
if (e == "ODLine") {
|
|
fileList.value = reactive([]);
|
|
}
|
|
};
|
|
const uploadSuccess = (response: any) => {
|
|
ElMessage.success("上传成功");
|
|
formData.value.jsonFile = { name: response.result.originalFilename, url: response.result.url };
|
|
fileList.value = [{ name: response.result.originalFilename, url: response.result.url }];
|
|
formRef.value?.validateField("jsonFile");
|
|
};
|
|
const onRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
|
|
formData.value.jsonFile = "";
|
|
fileList.value = reactive([]);
|
|
};
|
|
// 打开测试地图
|
|
const openTestMap = () => {
|
|
testMapVisible.value = true;
|
|
};
|
|
// 刷新详情数据
|
|
const requestDetails = async () => {
|
|
testMapVisible.value = false;
|
|
getInfo();
|
|
};
|
|
// 获取数据详情
|
|
const getInfo = async () => {
|
|
let requestData = {
|
|
id: props.relativeId
|
|
};
|
|
const { result }: { result: any } = await polylineCombineDetails(requestData);
|
|
if (result) {
|
|
formData.value = { ...result };
|
|
if (formData.value.jsonFile) {
|
|
formData.value.jsonFile = JSON.parse(formData.value.jsonFile);
|
|
fileList.value = [{ ...formData.value.jsonFile }];
|
|
} else {
|
|
fileList.value = [];
|
|
}
|
|
if (formData.value.positions) {
|
|
addPositions.value = JSON.parse(formData.value.positions);
|
|
} else {
|
|
addPositions.value = [
|
|
{ lng: "", lat: "", alt: "" },
|
|
{ lng: "", lat: "", alt: "" }
|
|
];
|
|
}
|
|
setTimeout(() => {
|
|
formRef.value?.clearValidate();
|
|
}, 20);
|
|
}
|
|
};
|
|
// 新增确认
|
|
const confirmSubmit = () => {
|
|
const formEl = formRef.value;
|
|
if (!formEl) return;
|
|
formEl.validate(async (valid, fields) => {
|
|
if (valid) {
|
|
let requestData = {
|
|
...formData.value
|
|
};
|
|
delete requestData.createTime;
|
|
delete requestData.updateTime;
|
|
let positionPass = true;
|
|
addPositions.value.map((item: any) => {
|
|
if (!item.lng || !item.lat || !item.alt) {
|
|
positionPass = false;
|
|
}
|
|
});
|
|
if (!positionPass) {
|
|
ElMessage.error("请输入坐标");
|
|
return;
|
|
}
|
|
requestData.positions = JSON.stringify(addPositions.value);
|
|
if (requestData.type == "ODLine") {
|
|
requestData.jsonFile = JSON.stringify(requestData.jsonFile);
|
|
}
|
|
if (props.title == "新增线效果") {
|
|
const res: any = await polylineCombineAdd(requestData);
|
|
if (res.code == 200) {
|
|
ElMessage.success("操作成功");
|
|
}
|
|
} else if (props.title == "编辑线效果") {
|
|
const res: any = await polylineCombineEdit(requestData);
|
|
if (res.code == 200) {
|
|
ElMessage.success("操作成功");
|
|
}
|
|
}
|
|
visible1.value = false;
|
|
emits("confirm");
|
|
} else {
|
|
console.log("error submit!", fields);
|
|
}
|
|
});
|
|
};
|
|
// 关闭两个对话框
|
|
const closeMain = () => {
|
|
visible1.value = false;
|
|
emits("update:operateVisible", false);
|
|
};
|
|
watch(
|
|
() => props.operateVisible,
|
|
n => {
|
|
if (n) {
|
|
if (props.title == "新增线效果") {
|
|
formData.value = {};
|
|
addPositions.value = [
|
|
{ lng: "", lat: "", alt: "" },
|
|
{ lng: "", lat: "", alt: "" }
|
|
];
|
|
} else if (props.title == "编辑线效果") {
|
|
getInfo();
|
|
}
|
|
visible1.value = n;
|
|
setTimeout(function () {
|
|
formRef.value?.clearValidate();
|
|
}, 20);
|
|
}
|
|
}
|
|
);
|
|
watch(
|
|
() => visible1.value,
|
|
n => {
|
|
emits("update:operateVisible", n);
|
|
}
|
|
);
|
|
onMounted(() => {});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
@mixin title {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
border-left: 2px solid #008bff;
|
|
padding-left: 5px;
|
|
}
|
|
.overview {
|
|
:deep() {
|
|
.el-dialog__body {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.title-detail {
|
|
@include flex;
|
|
> img {
|
|
width: 16px;
|
|
height: 18px;
|
|
}
|
|
> span {
|
|
font-size: 18px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-left: 5px;
|
|
margin-right: auto;
|
|
}
|
|
:deep(.el-icon) {
|
|
cursor: pointer;
|
|
color: #a8abb2;
|
|
}
|
|
}
|
|
.basic-form {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
margin-bottom: 42px;
|
|
.basic-info {
|
|
.form-content {
|
|
margin: 0 auto;
|
|
margin-top: 25px;
|
|
.row {
|
|
.table-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.table-head {
|
|
@include flex;
|
|
.head-value {
|
|
width: 200px;
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.table-body {
|
|
@include flex;
|
|
.body-value {
|
|
margin-right: 10px;
|
|
width: 200px;
|
|
}
|
|
.body-operate {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep() {
|
|
.el-progress-bar {
|
|
display: none;
|
|
}
|
|
.el-progress__text {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|