feat: 部分功能新增
This commit is contained in:
kun
parent
c4b0411f73
commit
7d35ff1814
@ -22,6 +22,10 @@ export const updateSystemConfig = (params: any) => {
|
||||
export const baseMapPage = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/page`, params);
|
||||
};
|
||||
// 底图图层列表
|
||||
export const baseMapList = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/list`, params);
|
||||
};
|
||||
// 底图图层新增
|
||||
export const baseMapAdd = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/add`, params);
|
||||
@ -38,3 +42,28 @@ export const baseMapEdit = (params: any) => {
|
||||
export const baseMapDelete = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/delete`, params);
|
||||
};
|
||||
|
||||
// 白膜图层分页列表
|
||||
export const albugineaMapPage = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/page`, params);
|
||||
};
|
||||
// 白膜图层列表
|
||||
export const albugineaMapList = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/list`, params);
|
||||
};
|
||||
// 白膜图层新增
|
||||
export const albugineaMapAdd = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/add`, params);
|
||||
};
|
||||
// 白膜图层详细信息
|
||||
export const albugineaMapDetails = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/queryById`, params);
|
||||
};
|
||||
// 白膜图层编辑
|
||||
export const albugineaMapEdit = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/edit`, params);
|
||||
};
|
||||
// 白膜图层删除
|
||||
export const albugineaMapDelete = (params: any) => {
|
||||
return http.post(BASEURL + `/base/tilesetLayer/delete`, params);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="map-content" id="map-content">
|
||||
<div id="mars3dContainer" class="mars3d-container"></div>
|
||||
<div class="layer-config">
|
||||
<div class="layer-config" v-if="props.type == '底图'">
|
||||
<div class="property-column-item">
|
||||
<span>饱和度：{{ formData.saturation ? formData.saturation : 0 }}</span>
|
||||
<el-slider v-model="formData.saturation" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'saturation')" />
|
||||
@ -31,7 +31,32 @@
|
||||
<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button>保存当前配置</el-button>
|
||||
<el-button @click="editBaseMapsConfig">保存当前配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer-config" v-if="props.type == '白膜'">
|
||||
<div class="property-column-item">
|
||||
<span>偏移量lon经度：{{ formData.lng ? formData.lng : 0 }}</span>
|
||||
<el-slider v-model="formData.lng" :step="0.0001" :max="0.01" :min="-0.01" @change="e => albugineaOperate(e, 'lng')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>偏移量lat纬度：{{ formData.lat ? formData.lat : 0 }}</span>
|
||||
<el-slider v-model="formData.lat" :step="0.0001" :max="0.01" :min="-0.01" @change="e => albugineaOperate(e, 'lat')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>偏移量height高度(米)：{{ formData.alt ? formData.alt : 0 }}</span>
|
||||
<el-slider v-model="formData.alt" :step="10" :max="500" :min="-500" @change="e => albugineaOperate(e, 'alt')" />
|
||||
</div>
|
||||
<!-- <div class="property-row-item">
|
||||
<span>是否反色：</span>
|
||||
<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
|
||||
</div> -->
|
||||
<div class="property-row-item">
|
||||
<span>白膜颜色：{{ formData.color ? formData.color : "" }}</span>
|
||||
<el-color-picker v-model="formData.color" @change="e => albugineaOperate(e, 'color')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button @click="editAlbugineaConfig">保存当前配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-btn" @click="$emit('confirm')">
|
||||
@ -48,10 +73,12 @@ import * as Cesium from "mars3d-cesium";
|
||||
//导入mars3d主库
|
||||
import "mars3d/dist/mars3d.css";
|
||||
import * as mars3d from "mars3d";
|
||||
import { baseMapDetails } from "@/api/modules/mapCommon";
|
||||
import { baseMapDetails, baseMapEdit, albugineaMapDetails, albugineaMapEdit } from "@/api/modules/mapCommon";
|
||||
import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
testMapVisible: Boolean,
|
||||
relativeId: String
|
||||
relativeId: String,
|
||||
type: String
|
||||
});
|
||||
const emits = defineEmits(["confirm"]);
|
||||
const formData: any = ref({});
|
||||
@ -80,21 +107,124 @@ const configJson = ref<any>({
|
||||
let map: any;
|
||||
let graphicLayer: any;
|
||||
let thisLayer: any; // 选中的图层
|
||||
let thisAlbuginea: any; // 选中的白膜
|
||||
// 修改白膜当前配置
|
||||
const editAlbugineaConfig = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId,
|
||||
...formData.value
|
||||
};
|
||||
const res: any = await albugineaMapEdit(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
};
|
||||
// 修改底图当前配置
|
||||
const editBaseMapsConfig = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId,
|
||||
...formData.value
|
||||
};
|
||||
const res: any = await baseMapEdit(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
};
|
||||
let initCenter: any; // 初始中心经纬度
|
||||
let requestNum: number = 0; // 请求中心点次数
|
||||
// 白膜图层操作
|
||||
const albugineaOperate = (e: any, label: any) => {
|
||||
console.log(formData.value);
|
||||
thisAlbuginea = map.getLayerById(formData.value.id);
|
||||
if (requestNum == 0) {
|
||||
initCenter = {
|
||||
lng: thisAlbuginea.orginCenterPoint.lng,
|
||||
lat: thisAlbuginea.orginCenterPoint.lat,
|
||||
alt: thisAlbuginea.orginCenterPoint.alt
|
||||
};
|
||||
++requestNum;
|
||||
}
|
||||
console.log(thisAlbuginea);
|
||||
if (label == "color") {
|
||||
console.log(e, label);
|
||||
if (e) {
|
||||
thisAlbuginea.style = {
|
||||
color: {
|
||||
conditions: [["true", "color('" + e + "')"]]
|
||||
}
|
||||
};
|
||||
} else {
|
||||
thisAlbuginea.style = {
|
||||
color: {
|
||||
conditions: [["true", "color('#fff')"]]
|
||||
}
|
||||
};
|
||||
}
|
||||
} else {
|
||||
thisAlbuginea.position = {
|
||||
lng: initCenter.lng + formData.value.lng,
|
||||
lat: initCenter.lat + formData.value.lat,
|
||||
alt: initCenter.alt + formData.value.alt
|
||||
};
|
||||
console.log(thisAlbuginea);
|
||||
}
|
||||
};
|
||||
// 底图图层操作
|
||||
const layerOperate = (e: any, label: any) => {
|
||||
thisLayer = map.getLayerById(formData.value.id);
|
||||
console.log(thisLayer);
|
||||
if (label == "filterColor") {
|
||||
console.log(e, label);
|
||||
thisLayer.layer[label] = Cesium.Color.fromCssColorString(e);
|
||||
if (e) {
|
||||
thisLayer.layer[label] = Cesium.Color.fromCssColorString(e);
|
||||
// thisLayer.layer[label] = e;
|
||||
} else {
|
||||
thisLayer.layer[label] = Cesium.Color.fromCssColorString("#FBFBFB");
|
||||
// thisLayer.layer[label] = "#FBFBFB";
|
||||
}
|
||||
} else if (label == "invertColor") {
|
||||
thisLayer.layer[label] = e;
|
||||
} else {
|
||||
thisLayer[label] = e;
|
||||
}
|
||||
};
|
||||
// 获取数据详情
|
||||
const getInfo = async () => {
|
||||
// 获取白膜数据详情
|
||||
const getAlbugineaInfo = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId
|
||||
};
|
||||
const { result }: { result: any } = await albugineaMapDetails(requestData);
|
||||
console.log(result, "--------白膜");
|
||||
if (result) {
|
||||
formData.value = {
|
||||
...result
|
||||
};
|
||||
configJson.value.layers = [
|
||||
{
|
||||
id: result.id,
|
||||
name: result.name,
|
||||
icon:
|
||||
result.layer == "gaode"
|
||||
? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
|
||||
: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
|
||||
|
||||
type: "3dtiles",
|
||||
url: result.url,
|
||||
maximumScreenSpaceError: 1,
|
||||
style: {
|
||||
color: {
|
||||
conditions: [["true", "color('" + result.color + "')"]]
|
||||
}
|
||||
},
|
||||
show: result.show ? result.show : false,
|
||||
flyTo: result.flyTo ? result.flyTo : false
|
||||
}
|
||||
];
|
||||
initMars3d(configJson.value);
|
||||
}
|
||||
};
|
||||
// 获取底图数据详情
|
||||
const getBaseMapsInfo = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId
|
||||
};
|
||||
@ -131,7 +261,11 @@ const initMars3d = (option: any) => {
|
||||
map.addLayer(graphicLayer);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getInfo();
|
||||
if (props.type == "底图") {
|
||||
await getBaseMapsInfo();
|
||||
} else if (props.type == "白膜") {
|
||||
await getAlbugineaInfo();
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
map = null;
|
||||
|
||||
@ -74,6 +74,7 @@
|
||||
:data="treeData"
|
||||
:props="props"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</div>
|
||||
@ -105,6 +106,7 @@
|
||||
:data="treeData"
|
||||
:props="props"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</div>
|
||||
@ -243,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 } from "@/api/modules/mapCommon";
|
||||
import { getSystemConfig, baseMapList, albugineaMapList } from "@/api/modules/mapCommon";
|
||||
const configJson = ref<any>({});
|
||||
const screenComparisonShow = ref(false); // 分屏对比弹框
|
||||
const leftRollerList = ref<any>([]);
|
||||
@ -342,6 +344,56 @@ onMounted(async () => {
|
||||
} else {
|
||||
configJson.value = ConfigJson.map3d;
|
||||
}
|
||||
// 查询配置的图层
|
||||
const resBaseMaps: any = await baseMapList({});
|
||||
console.log(resBaseMaps, "6666666666");
|
||||
if (resBaseMaps.result && resBaseMaps.result.length > 0) {
|
||||
let initBasemaps: any = [{ id: 10, name: "地图底图", type: "group" }];
|
||||
resBaseMaps.result.map((item: any) => {
|
||||
initBasemaps.push({
|
||||
pid: 10,
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
icon:
|
||||
item.layer == "gaode"
|
||||
? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
|
||||
: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
|
||||
type: item.layer,
|
||||
layer: item.layer == "gaode" ? "img_d" : "img_z",
|
||||
saturation: item.saturation ? item.saturation : 0,
|
||||
brightness: item.brightness ? item.brightness : 0,
|
||||
contrast: item.contrast ? item.contrast : 0,
|
||||
hue: item.hue ? item.hue : 0,
|
||||
gamma: item.gamma ? item.gamma : 0,
|
||||
show: item.show ? item.show : false
|
||||
});
|
||||
});
|
||||
configJson.value.basemaps = initBasemaps;
|
||||
}
|
||||
// 查询配置的白膜
|
||||
const resAlbuginea: any = await albugineaMapList({});
|
||||
console.log(resAlbuginea, "白膜666666");
|
||||
if (resAlbuginea.result && resAlbuginea.result.length > 0) {
|
||||
let initAlbugineamaps: any = [{ id: 2040, name: "城市白模", type: "group" }];
|
||||
resAlbuginea.result.map((item: any) => {
|
||||
initAlbugineamaps.push({
|
||||
pid: 2040,
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
type: "3dtiles",
|
||||
url: item.url,
|
||||
maximumScreenSpaceError: 1,
|
||||
style: {
|
||||
color: {
|
||||
conditions: [["true", "color('" + item.color + "')"]]
|
||||
}
|
||||
},
|
||||
show: item.show ? item.show : false,
|
||||
flyTo: item.flyTo ? item.flyTo : false
|
||||
});
|
||||
configJson.value.layers = initAlbugineamaps;
|
||||
});
|
||||
}
|
||||
await initMars3d(configJson.value);
|
||||
await initTree();
|
||||
});
|
||||
@ -791,7 +843,7 @@ const initMars3d = (option: any) => {
|
||||
// map.addEffect(snowCover);
|
||||
};
|
||||
// 获取config.json中的底图配置
|
||||
const getBasicMaps = () => {
|
||||
const getBasicMaps = async () => {
|
||||
const layers = {
|
||||
baseMaps: map.getBasemaps(true),
|
||||
hasTerrain: map.hasTerrain
|
||||
@ -807,14 +859,18 @@ const getBasicMaps = () => {
|
||||
options: markRaw(m.options)
|
||||
};
|
||||
});
|
||||
rollerVal.value.leftRollerVal = baseMaps.value[0].id;
|
||||
rollerVal.value.rightRollerVal = baseMaps.value[1].id;
|
||||
leftRollerList.value = baseMaps.value.filter((item: any) => {
|
||||
return item.id != rollerVal.value.rightRollerVal;
|
||||
});
|
||||
rightRollerList.value = baseMaps.value.filter((item: any) => {
|
||||
return item.id != rollerVal.value.leftRollerVal;
|
||||
});
|
||||
if (baseMaps.value.length > 1) {
|
||||
rollerVal.value.leftRollerVal = baseMaps.value[0].id;
|
||||
rollerVal.value.rightRollerVal = baseMaps.value[1].id;
|
||||
leftRollerList.value = baseMaps.value.filter((item: any) => {
|
||||
return item.id != rollerVal.value.rightRollerVal;
|
||||
});
|
||||
rightRollerList.value = baseMaps.value.filter((item: any) => {
|
||||
return item.id != rollerVal.value.leftRollerVal;
|
||||
});
|
||||
} else if (baseMaps.value.length > 0) {
|
||||
rollerVal.value.leftRollerVal = baseMaps.value[0].id;
|
||||
}
|
||||
chkHasTerrain.value = layers.hasTerrain || false;
|
||||
};
|
||||
const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||
@ -845,12 +901,13 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||
};
|
||||
const handleCheckChange = (e: any, isCheck: any) => {
|
||||
const layer = layersObj[e.key];
|
||||
|
||||
console.log(e);
|
||||
console.log(layer);
|
||||
console.log(isCheck);
|
||||
if (layer) {
|
||||
if (!layer.isAdded) {
|
||||
map.addLayer(layer);
|
||||
}
|
||||
|
||||
// 处理子节点
|
||||
if (e.children && e.children.length) {
|
||||
renderChildNode(isCheck, e.children);
|
||||
@ -889,6 +946,7 @@ const initTree = () => {
|
||||
basemaps: true, // 是否取config.json中的basempas
|
||||
layers: true // 是否取config.json中的layers
|
||||
});
|
||||
console.log(layers);
|
||||
// 遍历出config.json中所有的basempas和layers
|
||||
for (let i = layers.length - 1; i >= 0; i--) {
|
||||
const layer = layers[i];
|
||||
|
||||
@ -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,72 +14,96 @@
|
||||
<div class="basic-info">
|
||||
<div class="form-content">
|
||||
<div class="row">
|
||||
<el-form-item label="名称:" prop="engineeringName">
|
||||
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="地址:" prop="engineeringName">
|
||||
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
|
||||
<el-form-item label="地址:" prop="url">
|
||||
<el-input v-model="formData.url" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="偏移量lon经度:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" placeholder="请输入" controls-position="right" disabled />
|
||||
<el-form-item label="偏移量lon经度:">
|
||||
<el-input-number
|
||||
v-model="formData.lng"
|
||||
:step="0.0001"
|
||||
:max="0.01"
|
||||
:min="-0.01"
|
||||
placeholder="请输入"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="偏移量lat维度:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" placeholder="请输入" controls-position="right" disabled />
|
||||
<el-form-item label="偏移量lat维度:">
|
||||
<el-input-number
|
||||
v-model="formData.lat"
|
||||
:step="0.0001"
|
||||
:max="0.01"
|
||||
:min="-0.01"
|
||||
placeholder="请输入"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="偏移量高z米:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" placeholder="请输入" controls-position="right" disabled />
|
||||
<el-form-item label="偏移量高z米:">
|
||||
<el-input-number
|
||||
v-model="formData.alt"
|
||||
:step="10"
|
||||
:max="500"
|
||||
:min="-500"
|
||||
placeholder="请输入"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="是否启用:" prop="engineeringName">
|
||||
<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="飞到该白膜:">
|
||||
<el-switch v-model="formData.flyTo" style="--el-switch-on-color: #13ce66" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="白膜颜色:">
|
||||
<el-color-picker v-model="formData.color" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<el-form-item label="开启打光效果:">
|
||||
<el-switch v-model="formData.engineeringName" 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-input-number v-model="formData.engineeringName" placeholder="请输入" controls-position="right" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="白膜颜色:" prop="engineeringName">
|
||||
<el-form-item label="打光颜色:">
|
||||
<el-color-picker v-model="formData.engineeringName" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="光环的高度范围:" prop="engineeringName">
|
||||
<el-input-number v-model="formData.engineeringName" placeholder="请输入" controls-position="right" disabled />
|
||||
</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-button type="primary" @click="visible1 = false">编辑</el-button>
|
||||
<el-form-item label="可视化设置预览:" v-if="props.title == '编辑白膜图层'">
|
||||
<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 class="cancelButtonStyle" @click="visible1 = false">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 图层效果编辑 -->
|
||||
<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails" type="白膜"></testMap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -87,66 +111,25 @@
|
||||
import { onMounted, ref, watch } 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 layerTypeList = ref([
|
||||
{ label: "ArcGisMapServerImageryProvider", value: "ArcGisMapServerImageryProvider" },
|
||||
{ label: "BingMapsImageryProvider", value: "BingMapsImageryProvider" },
|
||||
{ label: "OpenStreetMapImageryProvider", value: "OpenStreetMapImageryProvider" },
|
||||
{ label: "TileMapServiceImageryProvider", value: "TileMapServiceImageryProvider" },
|
||||
{ label: "GoogleEarthEnterpriseImageryProvider", value: "GoogleEarthEnterpriseImageryProvider" },
|
||||
{ label: "GoogleEarthEnterpriseMapsProvider", value: "GoogleEarthEnterpriseMapsProvider" },
|
||||
{ label: "GridImageryProvider", value: "GridImageryProvider" },
|
||||
{ label: "IonImageryProvider", value: "IonImageryProvider" },
|
||||
{ label: "MapboxImageryProvider", value: "MapboxImageryProvider" },
|
||||
{ label: "MapboxStyleImageryProvider", value: "MapboxStyleImageryProvider" },
|
||||
{ label: "SingleTileImageryProvider", value: "SingleTileImageryProvider" },
|
||||
{ label: "TileCoordinatesImageryProvider", value: "TileCoordinatesImageryProvider" },
|
||||
{ label: "UrlTemplateImageryProvider", value: "UrlTemplateImageryProvider" },
|
||||
{ label: "WebMapServiceImageryProvider", value: "WebMapServiceImageryProvider" },
|
||||
{ label: "WebMapTileServiceImageryProvider", value: "WebMapTileServiceImageryProvider" }
|
||||
]);
|
||||
import { albugineaMapAdd, albugineaMapDetails, albugineaMapEdit } from "@/api/modules/mapCommon";
|
||||
import testMap from "@/components/testMap/index.vue";
|
||||
const testMapVisible = ref(false);
|
||||
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 emits = defineEmits(["update:operateVisible", "confirm"]);
|
||||
const tabPosition = ref(0);
|
||||
const documentDataIndex = ref(0);
|
||||
const current = ref({
|
||||
files: []
|
||||
});
|
||||
const typeList = ref([]);
|
||||
const acceptTypeList = ref([]);
|
||||
const rules = ref({
|
||||
engineeringName: [
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
typeDescribe: [
|
||||
url: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
@ -155,145 +138,54 @@ const rules = ref({
|
||||
]
|
||||
});
|
||||
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 openTestMap = () => {
|
||||
testMapVisible.value = true;
|
||||
};
|
||||
// 获取附件列表
|
||||
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 requestDetails = async () => {
|
||||
testMapVisible.value = false;
|
||||
getInfo();
|
||||
};
|
||||
// 获取施工进度列表
|
||||
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 => {
|
||||
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);
|
||||
} else {
|
||||
ElMessage.error("暂无可下载文件");
|
||||
}
|
||||
};
|
||||
// 表格附件下载
|
||||
const onTableDownLoad = async (row: any) => {
|
||||
console.log(row);
|
||||
// 获取数据详情
|
||||
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);
|
||||
} else {
|
||||
ElMessage.error("暂无可下载文件");
|
||||
const { result }: { result: any } = await albugineaMapDetails(requestData);
|
||||
if (result) {
|
||||
formData.value = { ...result, lng: result.lng || 0, lat: result.lat || 0, alt: result.alt || 0 };
|
||||
}
|
||||
};
|
||||
// 获取验收类型字典
|
||||
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 confirmSubmit = () => {
|
||||
const formEl = formRef.value;
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
if (props.title == "新增白膜图层") {
|
||||
const res: any = await albugineaMapAdd(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
} else if (props.title == "编辑白膜图层") {
|
||||
const res: any = await albugineaMapEdit(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
}
|
||||
visible1.value = false;
|
||||
emits("confirm");
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 关闭两个对话框
|
||||
const closeMain = () => {
|
||||
@ -304,15 +196,15 @@ watch(
|
||||
() => props.operateVisible,
|
||||
n => {
|
||||
if (n) {
|
||||
getAcceptTypeList();
|
||||
getTypeDicMainList();
|
||||
getDetailsData();
|
||||
getConstructionSchemeList();
|
||||
if (props.title == "新增白膜图层") {
|
||||
formData.value = {};
|
||||
} else if (props.title == "编辑白膜图层") {
|
||||
getInfo();
|
||||
}
|
||||
visible1.value = n;
|
||||
setTimeout(function () {
|
||||
formRef.value?.clearValidate();
|
||||
}, 200);
|
||||
visible1.value = n;
|
||||
tabPosition.value = 0;
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -471,51 +363,4 @@ onMounted(() => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
: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>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="table-box">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
title="用户列表"
|
||||
title="白膜图层列表"
|
||||
:columns="columns"
|
||||
:requestApi="getTableList"
|
||||
:initParam="initParam"
|
||||
@ -17,22 +17,32 @@
|
||||
<template #formButton="scope">
|
||||
<el-button class="addButtonStyle" @click="handleAddItem()">新增</el-button>
|
||||
</template>
|
||||
<!-- 是否启用 -->
|
||||
<template #show="scope">
|
||||
<el-switch v-model="scope.row.show" disabled style="--el-switch-on-color: #13ce66" />
|
||||
</template>
|
||||
<!-- 是否飞到该白膜 -->
|
||||
<template #flyTo="scope">
|
||||
<el-switch v-model="scope.row.flyTo" 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>
|
||||
|
||||
@ -43,8 +53,11 @@ 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 { Delete } from "@element-plus/icons-vue";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import { albugineaMapPage, albugineaMapDelete } from "@/api/modules/mapCommon";
|
||||
import { jxj_User } from "@/api/types";
|
||||
const relativeId = ref("");
|
||||
const operateVisible = ref(false);
|
||||
const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
|
||||
@ -59,19 +72,18 @@ const formData = ref({});
|
||||
// 表格配置项
|
||||
const columns: ColumnProps[] = [
|
||||
{
|
||||
prop: "governmentName",
|
||||
label: "ID",
|
||||
search: { el: "input" }
|
||||
prop: "id",
|
||||
label: "ID"
|
||||
},
|
||||
// 多级 prop
|
||||
{ prop: "createTime", label: "名称" },
|
||||
{ prop: "governmentTel", label: "是否启用" },
|
||||
{ prop: "state", label: "飞到该白膜" },
|
||||
{ prop: "diffDay", label: "白膜颜色" },
|
||||
{ prop: "authProject", label: "开启打光效果" },
|
||||
{ prop: "authProject", label: "创建时间" },
|
||||
{ prop: "authProject", label: "更新时间" },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 260 }
|
||||
{ prop: "name", label: "名称", search: { el: "input" } },
|
||||
{ prop: "show", label: "是否启用" },
|
||||
{ prop: "flyTo", label: "飞到该白膜" },
|
||||
{ prop: "color", label: "白膜颜色" },
|
||||
// { prop: "authProject", label: "开启打光效果" },
|
||||
{ prop: "createTime", label: "创建时间" },
|
||||
{ prop: "updateTime", label: "更新时间" },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 160 }
|
||||
];
|
||||
// const AuthIdData = ref([]);
|
||||
|
||||
@ -79,10 +91,26 @@ const columns: ColumnProps[] = [
|
||||
const initParam = reactive({
|
||||
// type: 1
|
||||
});
|
||||
|
||||
// 刷新列表数据
|
||||
const requestTable = () => {
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
// 删除白膜图层
|
||||
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
|
||||
await useHandleData(albugineaMapDelete, { id: params.id }, `删除【${params.name}】`);
|
||||
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 +129,22 @@ const dataCallback = (data: any) => {
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params));
|
||||
return getGovermentTreeList(newParams);
|
||||
return albugineaMapPage(newParams);
|
||||
};
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.table-box {
|
||||
position: relative;
|
||||
}
|
||||
.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>
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 图层效果编辑 -->
|
||||
<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails"></testMap>
|
||||
<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails" type="底图"></testMap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -51,11 +51,10 @@ import { ref, reactive, onMounted } from "vue";
|
||||
import { ColumnProps } from "@/components/ProTable/interface";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import operateDialog from "./components/operateDialog.vue";
|
||||
import { baseMapPage } from "@/api/modules/mapCommon";
|
||||
import { Delete } from "@element-plus/icons-vue";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import { jxj_User } from "@/api/types";
|
||||
import { baseMapDelete } from "@/api/modules/mapCommon";
|
||||
import { baseMapPage, baseMapDelete } from "@/api/modules/mapCommon";
|
||||
const relativeId = ref("");
|
||||
const operateVisible = ref(false);
|
||||
const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user