feat: 部分功能新增
This commit is contained in:
kun
parent
7d35ff1814
commit
4f9555a3f2
@ -67,3 +67,28 @@ export const albugineaMapEdit = (params: any) => {
|
||||
export const albugineaMapDelete = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/delete`, params);
|
||||
};
|
||||
|
||||
// 点坐标效果分页列表
|
||||
export const diffuseWallPage = (params: any) => {
|
||||
return http.post(BASEURL + `/base/diffuseWall/page`, params);
|
||||
};
|
||||
// 点坐标效果列表
|
||||
export const diffuseWallList = (params: any) => {
|
||||
return http.post(BASEURL + `/base/diffuseWall/list`, params);
|
||||
};
|
||||
// 点坐标效果新增
|
||||
export const diffuseWallAdd = (params: any) => {
|
||||
return http.post(BASEURL + `/base/diffuseWall/add`, params);
|
||||
};
|
||||
// 点坐标效果详细信息
|
||||
export const diffuseWallDetails = (params: any) => {
|
||||
return http.post(BASEURL + `/base/diffuseWall/queryById`, params);
|
||||
};
|
||||
// 点坐标效果编辑
|
||||
export const diffuseWallEdit = (params: any) => {
|
||||
return http.post(BASEURL + `/base/diffuseWall/edit`, params);
|
||||
};
|
||||
// 点坐标效果删除
|
||||
export const diffuseWallDelete = (params: any) => {
|
||||
return http.post(BASEURL + `/base/diffuseWall/delete`, params);
|
||||
};
|
||||
|
||||
@ -59,6 +59,35 @@
|
||||
<el-button @click="editAlbugineaConfig">保存当前配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer-config" v-if="props.type == '点坐标效果'">
|
||||
<div class="property-row-item">
|
||||
<span>效果颜色：{{ formData.color ? formData.color : "" }}</span>
|
||||
<el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>半径：{{ formData.radius ? formData.radius : 0 }}米</span>
|
||||
<el-slider
|
||||
v-model.number="formData.radius"
|
||||
:step="200"
|
||||
:max="10000"
|
||||
:min="200"
|
||||
@change="e => pointPositionOperate(e, 'radius')"
|
||||
/>
|
||||
</div>
|
||||
<div class="property-column-item" v-if="formData.type != 'CircleScan'">
|
||||
<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
|
||||
<el-slider
|
||||
v-model.number="formData.speed"
|
||||
:step="1"
|
||||
:max="100"
|
||||
:min="1"
|
||||
@change="e => pointPositionOperate(e, 'speed')"
|
||||
/>
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button @click="editPointPositionConfig">保存当前配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-btn" @click="$emit('confirm')">
|
||||
<el-icon color="#fff" size="18"><CircleClose /></el-icon>
|
||||
</div>
|
||||
@ -73,7 +102,14 @@ import * as Cesium from "mars3d-cesium";
|
||||
//导入mars3d主库
|
||||
import "mars3d/dist/mars3d.css";
|
||||
import * as mars3d from "mars3d";
|
||||
import { baseMapDetails, baseMapEdit, albugineaMapDetails, albugineaMapEdit } from "@/api/modules/mapCommon";
|
||||
import {
|
||||
baseMapDetails,
|
||||
baseMapEdit,
|
||||
albugineaMapDetails,
|
||||
albugineaMapEdit,
|
||||
diffuseWallDetails,
|
||||
diffuseWallEdit
|
||||
} from "@/api/modules/mapCommon";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
testMapVisible: Boolean,
|
||||
@ -108,6 +144,17 @@ let map: any;
|
||||
let graphicLayer: any;
|
||||
let thisLayer: any; // 选中的图层
|
||||
let thisAlbuginea: any; // 选中的白膜
|
||||
// 修改点坐标当前配置
|
||||
const editPointPositionConfig = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId,
|
||||
...formData.value
|
||||
};
|
||||
const res: any = await diffuseWallEdit(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
};
|
||||
// 修改白膜当前配置
|
||||
const editAlbugineaConfig = async () => {
|
||||
let requestData = {
|
||||
@ -130,6 +177,32 @@ const editBaseMapsConfig = async () => {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
};
|
||||
// 点坐标效果操作
|
||||
const pointPositionOperate = (e: any, label: any) => {
|
||||
console.log(formData.value);
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
console.log(graphic);
|
||||
let _rotation = Math.random();
|
||||
let loadJson = {
|
||||
radius: formData.value.radius,
|
||||
materialType: mars3d.MaterialType[formData.value.type],
|
||||
materialOptions: {
|
||||
// 扫描材质
|
||||
image: formData.value.type == "CircleScan" ? formData.value.image : "",
|
||||
color: formData.value.color,
|
||||
speed: formData.value.speed
|
||||
},
|
||||
clampToGround: true // 是否贴地
|
||||
};
|
||||
if (formData.value.type == "CircleScan") {
|
||||
loadJson.stRotation = new Cesium.CallbackProperty(function (e) {
|
||||
_rotation += 0.1;
|
||||
return _rotation;
|
||||
}, false);
|
||||
loadJson.classificationType = Cesium.ClassificationType.BOTH;
|
||||
}
|
||||
graphic.setStyle(loadJson);
|
||||
};
|
||||
let initCenter: any; // 初始中心经纬度
|
||||
let requestNum: number = 0; // 请求中心点次数
|
||||
// 白膜图层操作
|
||||
@ -188,6 +261,20 @@ const layerOperate = (e: any, label: any) => {
|
||||
thisLayer[label] = e;
|
||||
}
|
||||
};
|
||||
// 获取点坐标数据详情
|
||||
const getPointPositionInfo = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId
|
||||
};
|
||||
const { result }: { result: any } = await diffuseWallDetails(requestData);
|
||||
console.log(result, "--------点坐标");
|
||||
if (result) {
|
||||
formData.value = {
|
||||
...result
|
||||
};
|
||||
await initMars3d(configJson.value);
|
||||
}
|
||||
};
|
||||
// 获取白膜数据详情
|
||||
const getAlbugineaInfo = async () => {
|
||||
let requestData = {
|
||||
@ -259,12 +346,49 @@ const initMars3d = (option: any) => {
|
||||
// 创建矢量数据图层
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
map.addLayer(graphicLayer);
|
||||
if (props.type == "点坐标效果") {
|
||||
let _rotation = Math.random();
|
||||
let loadJson = {
|
||||
id: formData.value.id,
|
||||
position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
|
||||
style: {
|
||||
radius: formData.value.radius,
|
||||
materialType: mars3d.MaterialType[formData.value.type],
|
||||
materialOptions: {
|
||||
// 扫描材质
|
||||
image: formData.value.type == "CircleScan" ? formData.value.image : "",
|
||||
color: formData.value.color,
|
||||
speed: formData.value.speed
|
||||
},
|
||||
// stRotation: new Cesium.CallbackProperty(function (e) {
|
||||
// _rotation += 0.1;
|
||||
// return _rotation;
|
||||
// }, false),
|
||||
// classificationType: Cesium.ClassificationType.BOTH,
|
||||
clampToGround: true // 是否贴地
|
||||
},
|
||||
attr: { remark: "展示" }
|
||||
};
|
||||
|
||||
if (formData.value.type == "CircleScan") {
|
||||
loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) {
|
||||
_rotation += 0.1;
|
||||
return _rotation;
|
||||
}, false);
|
||||
loadJson.style.classificationType = Cesium.ClassificationType.BOTH;
|
||||
}
|
||||
const graphic = new mars3d.graphic.CircleEntity(loadJson);
|
||||
graphicLayer.addGraphic(graphic);
|
||||
graphic.flyTo();
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
if (props.type == "底图") {
|
||||
await getBaseMapsInfo();
|
||||
} else if (props.type == "白膜") {
|
||||
await getAlbugineaInfo();
|
||||
} else if (props.type == "点坐标效果") {
|
||||
await getPointPositionInfo();
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
|
||||
@ -245,7 +245,7 @@ import MapPrint from "./components/mapPrint.vue";
|
||||
import FlyRoam from "./components/flyRoam.vue";
|
||||
import MapMark from "./components/mapMark.vue";
|
||||
import RouteNavigation from "./components/routeNavigation.vue";
|
||||
import { getSystemConfig, baseMapList, albugineaMapList } from "@/api/modules/mapCommon";
|
||||
import { getSystemConfig, baseMapList, albugineaMapList, diffuseWallList } from "@/api/modules/mapCommon";
|
||||
const configJson = ref<any>({});
|
||||
const screenComparisonShow = ref(false); // 分屏对比弹框
|
||||
const leftRollerList = ref<any>([]);
|
||||
@ -792,6 +792,8 @@ const initMars3d = (option: any) => {
|
||||
map.addLayer(graphicLayer);
|
||||
// 获取配置文件底图数据
|
||||
getBasicMaps();
|
||||
// 查询配置点坐标效果
|
||||
getPointPosition();
|
||||
// 添加数据
|
||||
// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
|
||||
// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
|
||||
@ -842,6 +844,49 @@ const initMars3d = (option: any) => {
|
||||
// map.addEffect(snowEffect);
|
||||
// map.addEffect(snowCover);
|
||||
};
|
||||
// 查询配置点坐标效果
|
||||
const getPointPosition = async () => {
|
||||
const resPointPosition: any = await diffuseWallList({});
|
||||
console.log(resPointPosition, "点坐标效果666666");
|
||||
if (resPointPosition.result && resPointPosition.result.length > 0) {
|
||||
resPointPosition.result.map((item: any) => {
|
||||
if (item.show) {
|
||||
let _rotation = Math.random();
|
||||
let loadJson = {
|
||||
id: item.id,
|
||||
position: new mars3d.LngLatPoint(item.lng, item.lat, item.alt),
|
||||
style: {
|
||||
radius: item.radius,
|
||||
materialType: mars3d.MaterialType[item.type],
|
||||
materialOptions: {
|
||||
// 扫描材质
|
||||
image: item.type == "CircleScan" ? item.image : "",
|
||||
color: item.color,
|
||||
speed: item.speed
|
||||
},
|
||||
// stRotation: new Cesium.CallbackProperty(function (e) {
|
||||
// _rotation += 0.1;
|
||||
// return _rotation;
|
||||
// }, false),
|
||||
// classificationType: Cesium.ClassificationType.BOTH,
|
||||
clampToGround: true // 是否贴地
|
||||
},
|
||||
attr: { remark: "展示" }
|
||||
};
|
||||
|
||||
if (item.type == "CircleScan") {
|
||||
loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) {
|
||||
_rotation += 0.1;
|
||||
return _rotation;
|
||||
}, false);
|
||||
loadJson.style.classificationType = Cesium.ClassificationType.BOTH;
|
||||
}
|
||||
const graphic = new mars3d.graphic.CircleEntity(loadJson);
|
||||
graphicLayer.addGraphic(graphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// 获取config.json中的底图配置
|
||||
const getBasicMaps = async () => {
|
||||
const layers = {
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="confirmSubmit">确定</el-button>
|
||||
<el-button class="cancelButtonStyle" @click="visible1 = false">取消</el-button>
|
||||
<el-button type="info" @click="visible1 = false">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 图层效果编辑 -->
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="confirmSubmit">确定</el-button>
|
||||
<el-button class="cancelButtonStyle" @click="visible1 = false">取消</el-button>
|
||||
<el-button type="info" @click="visible1 = false">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 图层效果编辑 -->
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="overview">
|
||||
<el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain">
|
||||
<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>新增点坐标</span>
|
||||
<span>{{ props.title }}</span>
|
||||
<el-icon>
|
||||
<close @click="closeMain" />
|
||||
</el-icon>
|
||||
@ -14,261 +14,274 @@
|
||||
<div class="basic-info">
|
||||
<div class="form-content">
|
||||
<div class="row">
|
||||
<el-form-item label="效果类型:" prop="engineeringName">
|
||||
<el-select v-model="formData.engineeringName" placeholder="请选择" style="width: 100%">
|
||||
<el-form-item label="效果类型:" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择" style="width: 100%" @change="typeChange">
|
||||
<el-option v-for="item in effectTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="经度:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
|
||||
<el-form-item label="坐标点位:" :required="true">
|
||||
<div class="table-content" v-for="(item, index) in positions" :key="index">
|
||||
<div class="table-head">
|
||||
<div class="head-value">经度</div>
|
||||
<div class="head-value">纬度</div>
|
||||
<div class="head-value">高度</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 class="body-operate">
|
||||
<el-button type="danger" link @click="deleteRow(index)">删除</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="table-operate" v-if="formData.type == '多边形扩散'">
|
||||
<div>
|
||||
<el-button type="success" @click="appendRow">追加</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<el-form-item label="经度:" prop="position.lng">
|
||||
<el-input-number v-model="formData.position.lng" controls-position="right" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="高度:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
|
||||
<el-form-item label="纬度:" prop="position.lat">
|
||||
<el-input-number v-model="formData.position.lat" controls-position="right" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="高度:" prop="position.alt">
|
||||
<el-input-number v-model="formData.position.alt" controls-position="right" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<div class="row">
|
||||
<el-form-item label="半径:" prop="radius">
|
||||
<el-input-number v-model.numer="formData.radius" controls-position="right" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="速度:" prop="speed">
|
||||
<el-input-number v-model.numer="formData.speed" controls-position="right" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="扫描图片:" prop="image" v-if="formData.type == 'CircleScan'">
|
||||
<div class="face-img">
|
||||
<el-upload
|
||||
class="face-uploader"
|
||||
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
accept="image/jpg, image/jpeg, image/png"
|
||||
>
|
||||
<img v-if="formData.image" :src="formData.image" class="face-avatar" />
|
||||
<el-icon v-else><plus /></el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="图形高度:" prop="diffHeight">
|
||||
<el-input-number v-model="formData.diffHeight" controls-position="right" placeholder="请输入" />
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="是否启用:">
|
||||
<el-switch v-model="formData.show" style="--el-switch-on-color: #13ce66" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="是否启用:" prop="engineeringName">
|
||||
<el-switch v-model="formData.engineeringName" style="--el-switch-on-color: #13ce66" />
|
||||
<el-form-item label="颜色:">
|
||||
<el-color-picker v-model="formData.color" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="颜色:" prop="engineeringName">
|
||||
<el-color-picker v-model="formData.engineeringName" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="半径:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="延迟时间:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="扩展参数:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" controls-position="right" placeholder="请输入" disabled />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="可视化设置预览:" prop="engineeringName">
|
||||
<el-button type="primary" @click="visible1 = false">编辑</el-button>
|
||||
<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="visible1 = false">确定</el-button>
|
||||
<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 } from "vue";
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getDicList } from "@/api/modules/jxjview";
|
||||
import FilesUploadPlus from "@/components/FilesUploadPlus/FilesUpload.vue";
|
||||
import {
|
||||
dangerousEngineerDetails,
|
||||
constructionSchemeList,
|
||||
constructionSchemeFile,
|
||||
constructionProgressList,
|
||||
localInspectList,
|
||||
engineerAcceptList
|
||||
} from "@/api/modules/goverment";
|
||||
import DownLoad from "@/utils/annexDowload.ts";
|
||||
const effectTypeList = ref([
|
||||
{ label: "圆扩散", value: "圆扩散" },
|
||||
{ label: "线圈发光扩散", value: "线圈发光扩散" },
|
||||
{ label: "雷达圆扫", value: "雷达圆扫" },
|
||||
{ label: "水波纹", value: "水波纹" },
|
||||
{ label: "六边形扩散", value: "六边形扩散" },
|
||||
{ label: "墙推扩散", value: "墙推扩散" }
|
||||
]);
|
||||
import { ElMessage, UploadProps } from "element-plus";
|
||||
import { diffuseWallAdd, diffuseWallDetails, diffuseWallEdit } from "@/api/modules/mapCommon";
|
||||
import testMap from "@/components/testMap/index.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const props = defineProps({
|
||||
operateVisible: Boolean,
|
||||
relativeId: String
|
||||
relativeId: String,
|
||||
title: String
|
||||
});
|
||||
const emits = defineEmits(["update:operateVisible"]);
|
||||
const arrOne = ref<any>([]);
|
||||
const arrFive = ref<any>([]);
|
||||
const arrSeven = ref<any>([]);
|
||||
const arrEight = ref<any>([]);
|
||||
const tabPosition = ref(0);
|
||||
const documentDataIndex = ref(0);
|
||||
const current = ref({
|
||||
files: []
|
||||
});
|
||||
const typeList = ref([]);
|
||||
const acceptTypeList = ref([]);
|
||||
const emits = defineEmits(["update:operateVisible", "confirm"]);
|
||||
const baseUrl = import.meta.env.VITE_API_URL;
|
||||
const fileList = ref([]);
|
||||
const store = GlobalStore();
|
||||
const headers = ref({ Authorization: "Bearer " + store.token });
|
||||
const positions = ref([{ lng: "", lat: "", alt: "" }]);
|
||||
const minLength = ref(1); // 最小点位长度
|
||||
const effectTypeList = ref([
|
||||
{ label: "圆扩散", value: "ScanLine" },
|
||||
{ label: "波纹扩散", value: "CircleWave" },
|
||||
{ label: "雷达线", value: "RadarLine" },
|
||||
{ label: "波纹雷达扫描", value: "RadarWave" },
|
||||
{ label: "自定义图形扩散", value: "CircleScan" }
|
||||
]);
|
||||
const testMapVisible = ref(false);
|
||||
const rules = ref({
|
||||
engineeringName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
message: "请选择",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
typeDescribe: [
|
||||
radius: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
speed: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
diffHeight: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
image: [
|
||||
{
|
||||
required: true,
|
||||
message: "请上传",
|
||||
trigger: "change"
|
||||
}
|
||||
]
|
||||
});
|
||||
const formRef = ref<FormInstance>();
|
||||
const formData = ref<any>({
|
||||
technicalDisclosureFile: [],
|
||||
securityConstructionSchemeFile: [],
|
||||
specialConstructionSchemeFile: []
|
||||
});
|
||||
const formData = ref<any>({});
|
||||
const visible1 = ref(false);
|
||||
// 验收类型文本转换;
|
||||
const textTransform = (id: any) => {
|
||||
let findItem: any = acceptTypeList.value.find(item => item.value == id);
|
||||
return findItem?.label;
|
||||
// 图片上传成功后的钩子
|
||||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile, index) => {
|
||||
console.log(response.result.url);
|
||||
console.log(response, uploadFile, index);
|
||||
formData.value.image = response.result.url;
|
||||
};
|
||||
// 获取附件列表
|
||||
const getConstructionSchemeList = async () => {
|
||||
const res = await constructionSchemeList({ dangerousEngineeringId: props.relativeId, type: tabPosition.value });
|
||||
console.log(res);
|
||||
if (res.result && res.result.length > 0) {
|
||||
arrOne.value = res.result;
|
||||
} else {
|
||||
arrOne.value = [];
|
||||
|
||||
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
|
||||
if (rawFile.type !== "image/png" && rawFile.type !== "image/jpg" && rawFile.type !== "image/jpeg") {
|
||||
console.log(rawFile.type);
|
||||
|
||||
ElMessage.error("请上传jpg或者png格式的图片");
|
||||
return false;
|
||||
}
|
||||
// 限制文件大小
|
||||
// else if (rawFile.size / 1024 / 1024 > 2) {
|
||||
// ElMessage.error('Avatar picture size can not exceed 2MB!')
|
||||
// return false
|
||||
// }
|
||||
return true;
|
||||
};
|
||||
// 获取施工进度列表
|
||||
const getConstructionProgressList = async () => {
|
||||
const res = await constructionProgressList({ dangerousEngineeringId: props.relativeId });
|
||||
console.log(res);
|
||||
if (res.result && res.result.length > 0) {
|
||||
arrFive.value = res.result;
|
||||
} else {
|
||||
arrFive.value = [];
|
||||
}
|
||||
};
|
||||
// 获取现场巡视列表
|
||||
const getLocalInspectList = async () => {
|
||||
const res = await localInspectList({ dangerousEngineeringId: props.relativeId });
|
||||
console.log(res);
|
||||
if (res.result && res.result.length > 0) {
|
||||
arrSeven.value = res.result;
|
||||
} else {
|
||||
arrSeven.value = [];
|
||||
}
|
||||
};
|
||||
// 获取危大工程验收列表
|
||||
const getengineerAcceptList = async () => {
|
||||
const res = await engineerAcceptList({ dangerousEngineeringId: props.relativeId });
|
||||
console.log(res);
|
||||
if (res.result && res.result.length > 0) {
|
||||
arrEight.value = res.result;
|
||||
} else {
|
||||
arrEight.value = [];
|
||||
}
|
||||
};
|
||||
// 获取危大工程详情
|
||||
const getDetailsData = async () => {
|
||||
const res = await dangerousEngineerDetails({ id: props.relativeId });
|
||||
console.log(res);
|
||||
if (res && res.result) {
|
||||
formData.value = { ...res.result };
|
||||
}
|
||||
if (formData.value.constructionPlanStartTime && formData.value.constructionPlanEndTime) {
|
||||
formData.value.planRange = [formData.value.constructionPlanStartTime, formData.value.constructionPlanEndTime];
|
||||
}
|
||||
if (formData.value.constructionStartTime && formData.value.constructionEndTime) {
|
||||
formData.value.constructionRange = [formData.value.constructionStartTime, formData.value.constructionEndTime];
|
||||
}
|
||||
};
|
||||
// tabs项点击时
|
||||
const handleClick = (pane: any) => {
|
||||
tabPosition.value = pane.props.name;
|
||||
const listOperation = [getConstructionSchemeList, getConstructionProgressList, getLocalInspectList, getengineerAcceptList];
|
||||
if (tabPosition.value < 5 || tabPosition.value == 8) {
|
||||
listOperation[0]();
|
||||
} else {
|
||||
listOperation[tabPosition.value - 4]();
|
||||
}
|
||||
};
|
||||
// 附件上传改变
|
||||
const handlechange = e => {
|
||||
// 类型切换
|
||||
const typeChange = (e: any) => {
|
||||
console.log(e);
|
||||
current.value.files = e.map(item => {
|
||||
item.label = current.value.dictLabel;
|
||||
return item;
|
||||
});
|
||||
console.log(current.value.files);
|
||||
arrOne.value[documentDataIndex.value].fileList = current.value.files;
|
||||
};
|
||||
// 危大工程资料
|
||||
const onDownLoad = (key: any) => {
|
||||
console.log(key);
|
||||
console.log(formData.value[key]);
|
||||
let val = JSON.parse(formData.value[key]);
|
||||
if (val && val.length > 0) {
|
||||
DownLoad(val);
|
||||
if (!e) return;
|
||||
if (e == "多边形扩散") {
|
||||
minLength.value = 3;
|
||||
} else {
|
||||
ElMessage.error("暂无可下载文件");
|
||||
minLength.value = 1;
|
||||
}
|
||||
};
|
||||
// 表格附件下载
|
||||
const onTableDownLoad = async (row: any) => {
|
||||
console.log(row);
|
||||
// 追加行数据
|
||||
const appendRow = () => {
|
||||
positions.value.push({ lng: "", lat: "", alt: "" });
|
||||
};
|
||||
// 删除行数据
|
||||
const deleteRow = (index: number) => {
|
||||
if (positions.value.length == minLength.value) {
|
||||
ElMessage.error("不能少于最少点位数据");
|
||||
return;
|
||||
}
|
||||
positions.value.splice(index, 1);
|
||||
};
|
||||
// 打开测试地图
|
||||
const openTestMap = () => {
|
||||
testMapVisible.value = true;
|
||||
};
|
||||
// 刷新详情数据
|
||||
const requestDetails = async () => {
|
||||
testMapVisible.value = false;
|
||||
getInfo();
|
||||
};
|
||||
// 获取数据详情
|
||||
const getInfo = async () => {
|
||||
let requestData = {
|
||||
id: row.id
|
||||
id: props.relativeId
|
||||
};
|
||||
const { result } = await constructionSchemeFile(requestData);
|
||||
console.log(result);
|
||||
if (result && result.length > 0) {
|
||||
DownLoad(result);
|
||||
const { result }: { result: any } = await diffuseWallDetails(requestData);
|
||||
if (result) {
|
||||
formData.value = { ...result };
|
||||
positions.value = formData.value.lng ? [{ lng: formData.value.lng, lat: formData.value.lat, alt: formData.value.alt }] : [];
|
||||
}
|
||||
};
|
||||
// 新增确认
|
||||
const confirmSubmit = () => {
|
||||
const formEl = formRef.value;
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
let positionPass = true;
|
||||
positions.value.map((item: any) => {
|
||||
if (!item.lng || !item.lat || !item.alt) {
|
||||
positionPass = false;
|
||||
}
|
||||
});
|
||||
if (!positionPass) {
|
||||
ElMessage.error("请输入坐标");
|
||||
return;
|
||||
}
|
||||
requestData = { ...requestData, ...positions.value[0] };
|
||||
if (props.title == "新增点坐标效果") {
|
||||
const res: any = await diffuseWallAdd(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
} else if (props.title == "编辑点坐标效果") {
|
||||
const res: any = await diffuseWallEdit(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
}
|
||||
visible1.value = false;
|
||||
emits("confirm");
|
||||
} else {
|
||||
ElMessage.error("暂无可下载文件");
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
};
|
||||
// 获取验收类型字典
|
||||
const getAcceptTypeList = async () => {
|
||||
const { result } = await getDicList({ dictType: "check_accept_type" });
|
||||
if (result.length > 0) {
|
||||
let arr: any = [];
|
||||
result.map(item => {
|
||||
arr.push({
|
||||
label: item.dictValue,
|
||||
value: item.dictLabel
|
||||
});
|
||||
});
|
||||
acceptTypeList.value.length = 0;
|
||||
acceptTypeList.value.push(...arr);
|
||||
}
|
||||
};
|
||||
const getTypeDicMainList = async () => {
|
||||
// 获取起重机械设备类型字典
|
||||
const { result } = await getDicList({ dictType: "dangerous_engineer_type" });
|
||||
if (result.length > 0) {
|
||||
let arr: any = [];
|
||||
result.map(item => {
|
||||
arr.push({
|
||||
label: item.dictValue,
|
||||
value: item.dictLabel
|
||||
});
|
||||
});
|
||||
typeList.value.length = 0;
|
||||
typeList.value.push(...arr);
|
||||
}
|
||||
};
|
||||
// 关闭两个对话框
|
||||
const closeMain = () => {
|
||||
@ -279,15 +292,16 @@ watch(
|
||||
() => props.operateVisible,
|
||||
n => {
|
||||
if (n) {
|
||||
getAcceptTypeList();
|
||||
getTypeDicMainList();
|
||||
getDetailsData();
|
||||
getConstructionSchemeList();
|
||||
if (props.title == "新增点坐标效果") {
|
||||
formData.value = {};
|
||||
positions.value = [{ lng: "", lat: "", alt: "" }];
|
||||
} else if (props.title == "编辑点坐标效果") {
|
||||
getInfo();
|
||||
}
|
||||
visible1.value = n;
|
||||
setTimeout(function () {
|
||||
formRef.value?.clearValidate();
|
||||
}, 200);
|
||||
visible1.value = n;
|
||||
tabPosition.value = 0;
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -348,58 +362,34 @@ onMounted(() => {});
|
||||
margin: 0 auto;
|
||||
margin-top: 25px;
|
||||
.row {
|
||||
.table-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.table-head {
|
||||
@include flex;
|
||||
.head-key {
|
||||
width: 110px;
|
||||
.head-value {
|
||||
width: 200px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.head-value {
|
||||
width: 110px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.table-body {
|
||||
@include flex;
|
||||
.body-key {
|
||||
width: 110px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.body-value {
|
||||
width: 400px;
|
||||
margin-right: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
.body-operate {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-operate {
|
||||
width: 100%;
|
||||
@include flex;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.switch-box {
|
||||
width: 380px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
margin-right: auto;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
.tabs-option {
|
||||
width: 100%;
|
||||
.table {
|
||||
width: 100%;
|
||||
// height: 310px;
|
||||
margin-top: 15px;
|
||||
:deep(.el-table) {
|
||||
height: 100%;
|
||||
}
|
||||
.face-img {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
@ -414,83 +404,22 @@ onMounted(() => {});
|
||||
border-color: #409eff !important;
|
||||
}
|
||||
:deep(.el-icon) {
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
line-height: 53px;
|
||||
text-align: center;
|
||||
}
|
||||
.face-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.showImg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.table-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-tabs--card > .el-tabs__header) {
|
||||
border-bottom: none;
|
||||
}
|
||||
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
|
||||
width: 100%;
|
||||
background: #f8f8f8;
|
||||
border: 0;
|
||||
}
|
||||
:deep(.el-tabs__nav-scroll) {
|
||||
display: flex;
|
||||
.el-tabs__item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
// background: #f8f8f8;
|
||||
color: #333;
|
||||
// border: 1px solid #e5e5e5;
|
||||
// border-radius: 8px;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
background-color: #008bff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
|
||||
border-bottom-color: #008bff !important;
|
||||
}
|
||||
:deep(#tab-0) {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-right: 0;
|
||||
}
|
||||
:deep() {
|
||||
#tab-1,
|
||||
#tab-2,
|
||||
#tab-3,
|
||||
#tab-4,
|
||||
#tab-5,
|
||||
#tab-6,
|
||||
#tab-7 {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
:deep(#tab-8) {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,34 +17,54 @@
|
||||
<template #formButton="scope">
|
||||
<el-button class="addButtonStyle" @click="handleAddItem()">新增</el-button>
|
||||
</template>
|
||||
<!-- 坐标点 -->
|
||||
<template #positions="scope">
|
||||
<div class="position-operate">
|
||||
<span>{{ `\{lng: ${scope.row.lng}, lat: ${scope.row.lat}, alt: ${scope.row.alt}\}` }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 是否启用 -->
|
||||
<template #show="scope">
|
||||
<el-switch v-model="scope.row.show" disabled style="--el-switch-on-color: #13ce66" />
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<div class="operate-option"></div>
|
||||
</template>
|
||||
<template #state="{ row }">
|
||||
<span :class="row.state === 1 ? '' : 'redText'">{{ row.state === 1 ? "启用" : "禁用" }}</span>
|
||||
</template>
|
||||
<template #authProject="{ row }">
|
||||
{{ (row.installProject ? row.installProject : 0) + "/" + row.authProject }}
|
||||
</template>
|
||||
<template #diffDay="{ row }">
|
||||
{{ row.expireTime === null ? "永久有效" : row.diffDay }}
|
||||
<div class="operate-option">
|
||||
<el-button type="primary" link @click="handleEditItem(scope.row)">
|
||||
<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
|
||||
<span>编辑</span>
|
||||
</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</ProTable>
|
||||
<!-- 图层新增/编辑 -->
|
||||
<operateDialog v-model:operateVisible="operateVisible" :relativeId="relativeId"></operateDialog>
|
||||
<operateDialog
|
||||
v-model:operateVisible="operateVisible"
|
||||
:relativeId="relativeId"
|
||||
:title="title"
|
||||
@confirm="requestTable"
|
||||
></operateDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="jxjGovernMent">
|
||||
import { ref, reactive, onMounted, watch, nextTick } from "vue";
|
||||
import { ElMessage, ElMessageBox, FormRules, FormInstance } from "element-plus";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { User } from "@/api/interface";
|
||||
import { ColumnProps } from "@/components/ProTable/interface";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { getGovermentTreeList } from "@/api/modules/jxjview";
|
||||
import operateDialog from "./components/operateDialog.vue";
|
||||
import { diffuseWallPage, diffuseWallDelete } from "@/api/modules/mapCommon";
|
||||
import { Delete } from "@element-plus/icons-vue";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import { jxj_User } from "@/api/types";
|
||||
const typeList = ref([
|
||||
{ label: "圆扩散", value: "ScanLine" },
|
||||
{ label: "波纹扩散", value: "CircleWave" },
|
||||
{ label: "雷达线", value: "RadarLine" },
|
||||
{ label: "波纹雷达扫描", value: "RadarWave" },
|
||||
{ label: "自定义图形扩散", value: "CircleScan" }
|
||||
]);
|
||||
const relativeId = ref("");
|
||||
const operateVisible = ref(false);
|
||||
const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
|
||||
@ -59,19 +79,16 @@ const formData = ref({});
|
||||
// 表格配置项
|
||||
const columns: ColumnProps[] = [
|
||||
{
|
||||
prop: "governmentName",
|
||||
label: "ID",
|
||||
search: { el: "input" }
|
||||
prop: "id",
|
||||
label: "ID"
|
||||
},
|
||||
// 多级 prop
|
||||
{ prop: "createTime", label: "效果类型" },
|
||||
{ prop: "createTime", label: "经度" },
|
||||
{ prop: "createTime", label: "纬度" },
|
||||
{ prop: "createTime", label: "高度" },
|
||||
{ prop: "governmentTel", label: "是否启用" },
|
||||
{ prop: "state", label: "创建时间" },
|
||||
{ prop: "diffDay", label: "更新时间" },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 260 }
|
||||
{ prop: "type", label: "效果类型", search: { el: "select" }, enum: typeList.value },
|
||||
{ prop: "positions", label: "坐标点", width: 200 },
|
||||
{ prop: "show", label: "是否启用" },
|
||||
{ prop: "createTime", label: "创建时间" },
|
||||
{ prop: "updateTime", label: "更新时间" },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 160 }
|
||||
];
|
||||
// const AuthIdData = ref([]);
|
||||
|
||||
@ -79,10 +96,25 @@ const columns: ColumnProps[] = [
|
||||
const initParam = reactive({
|
||||
// type: 1
|
||||
});
|
||||
// 刷新列表数据
|
||||
const requestTable = () => {
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
// 删除白膜图层
|
||||
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
|
||||
await useHandleData(diffuseWallDelete, { id: params.id }, `删除该效果`);
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
// 编辑
|
||||
const handleEditItem = (row: any) => {
|
||||
operateVisible.value = true;
|
||||
title.value = "编辑点坐标效果";
|
||||
relativeId.value = row.id;
|
||||
};
|
||||
// 添加数据按钮
|
||||
const handleAddItem = () => {
|
||||
operateVisible.value = true;
|
||||
title.value = "新增市级政务";
|
||||
title.value = "新增点坐标效果";
|
||||
formData.value = reactive({});
|
||||
};
|
||||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
||||
@ -101,48 +133,28 @@ const dataCallback = (data: any) => {
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params));
|
||||
return getGovermentTreeList(newParams);
|
||||
return diffuseWallPage(newParams);
|
||||
};
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.table-box {
|
||||
position: relative;
|
||||
}
|
||||
.position-operate {
|
||||
> span {
|
||||
display: inline-block;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.operate-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
:deep() {
|
||||
.el-button + .el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.littleTitle {
|
||||
border-left: 3px solid #008bff;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.allModular {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.modularItem {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
.select-all {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.radio-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
:deep(.el-dialog__footer) {
|
||||
text-align: center;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
// .redText {
|
||||
// color: red;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user