feat: 部分功能新增
This commit is contained in:
kun
parent
e9feecbf95
commit
c4b0411f73
@ -18,3 +18,23 @@ export const getSystemConfig = (params: any) => {
|
||||
export const updateSystemConfig = (params: any) => {
|
||||
return http.post(BASEURL + `/xmgl/systemConfig/edit`, params);
|
||||
};
|
||||
// 底图图层分页列表
|
||||
export const baseMapPage = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/page`, params);
|
||||
};
|
||||
// 底图图层新增
|
||||
export const baseMapAdd = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/add`, params);
|
||||
};
|
||||
// 底图图层详细信息
|
||||
export const baseMapDetails = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/queryById`, params);
|
||||
};
|
||||
// 底图图层编辑
|
||||
export const baseMapEdit = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/edit`, params);
|
||||
};
|
||||
// 底图图层删除
|
||||
export const baseMapDelete = (params: any) => {
|
||||
return http.post(BASEURL + `/base/baseMap/delete`, params);
|
||||
};
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<div @click="router.push('/largeScreen')">
|
||||
<div @click="backCenter">
|
||||
<img src="@/assets/images/icon/fire.png" alt="" srcset="" />
|
||||
<span>首页</span>
|
||||
</div>
|
||||
@ -30,9 +30,14 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { HOME_URL } from "@/enums/Home";
|
||||
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
|
||||
const emits = defineEmits(["toCenter"]);
|
||||
const router = useRouter();
|
||||
const globalStore = GlobalStore();
|
||||
const moduleTitle = globalStore.moduleName;
|
||||
const backCenter = () => {
|
||||
emits("toCenter");
|
||||
router.push("/largeScreen");
|
||||
};
|
||||
const goHome = () => {
|
||||
router.push(HOME_URL[globalStore.accountType - 1]);
|
||||
};
|
||||
|
||||
278
src/components/testMap/index.scss
Normal file
278
src/components/testMap/index.scss
Normal file
@ -0,0 +1,278 @@
|
||||
@mixin flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.map-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: #ccc;
|
||||
overflow: hidden;
|
||||
.mars3d-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layer-config {
|
||||
width: 360px;
|
||||
height: auto;
|
||||
min-width: 360px;
|
||||
min-height: 420px;
|
||||
border: 1px solid #fff;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 30px 20px;
|
||||
.property-column-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> span {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.property-row-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
> span {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.operate-btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
:deep() {
|
||||
// 全局基础样式
|
||||
.cesium-viewer-toolbar {
|
||||
top: auto;
|
||||
bottom: 35px;
|
||||
left: 12px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.cesium-toolbar-button img {
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cesium-viewer-toolbar > .cesium-toolbar-button,
|
||||
.cesium-navigationHelpButton-wrapper,
|
||||
.cesium-viewer-geocoderContainer {
|
||||
margin-bottom: 5px;
|
||||
float: left;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cesium-button {
|
||||
background-color: rgba(23, 49, 71, 0.7);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
fill: #e6e6e6;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.cesium-button:hover {
|
||||
background-color: rgba(0, 138, 255, 0.7);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/**cesium 底图切æ¢é¢æ¿*/
|
||||
.cesium-baseLayerPicker-dropDown {
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
max-height: 700px;
|
||||
margin-bottom: 5px;
|
||||
background-color: rgba(23, 49, 71, 0.7);
|
||||
}
|
||||
|
||||
/**cesium 帮助é¢æ¿*/
|
||||
.cesium-navigation-help {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
.cesium-navigation-help-instructions,
|
||||
.cesium-navigation-button {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
.cesium-navigation-button-selected,
|
||||
.cesium-navigation-button-unselected:hover {
|
||||
background-color: rgba(23, 49, 71, 1);
|
||||
}
|
||||
|
||||
/**cesium 二维三维切æ¢*/
|
||||
.cesium-sceneModePicker-wrapper {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
|
||||
float: right;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
/**cesium POI查询输入框*/
|
||||
.cesium-viewer-geocoderContainer .search-results {
|
||||
left: 0;
|
||||
right: 40px;
|
||||
width: auto;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.cesium-geocoder-searchButton {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
|
||||
background-color: rgba(63, 72, 84, 0.7);
|
||||
}
|
||||
|
||||
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
|
||||
background-color: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
|
||||
}
|
||||
|
||||
.cesium-viewer-geocoderContainer .search-results {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
/**cesium infoä¿¡æ¯æ¡†*/
|
||||
.cesium-infoBox {
|
||||
top: 50px;
|
||||
background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
|
||||
}
|
||||
|
||||
.cesium-infoBox-title {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
/**cesium 任务æ çš„FPSä¿¡æ¯*/
|
||||
.cesium-performanceDisplay-defaultContainer {
|
||||
top: auto;
|
||||
bottom: 35px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.cesium-performanceDisplay-ms,
|
||||
.cesium-performanceDisplay-fps {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**cesium tileset调试信æ¯é¢æ¿*/
|
||||
.cesium-viewer-cesiumInspectorContainer {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.cesium-cesiumInspector {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
/**覆盖mars3d内部控件的颜色ç‰æ ·å¼*/
|
||||
.mars3d-compass .mars3d-compass-outer {
|
||||
fill: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
.mars3d-contextmenu-ul,
|
||||
.mars3d-sub-menu {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
}
|
||||
|
||||
.mars3d-contextmenu-ul > li > a:hover,
|
||||
.mars3d-sub-menu > li > a:hover,
|
||||
.mars3d-contextmenu-ul > li > a:focus,
|
||||
.mars3d-sub-menu > li > a:focus,
|
||||
.mars3d-contextmenu-ul > li > .active,
|
||||
.mars3d-sub-menu > li > .active {
|
||||
background-color: var(--mars-hover-btn-bg, #3ea6ff);
|
||||
}
|
||||
|
||||
.mars3d-contextmenu-ul > .active > a,
|
||||
.mars3d-sub-menu > .active > a,
|
||||
.mars3d-contextmenu-ul > .active > a:hover,
|
||||
.mars3d-sub-menu > .active > a:hover,
|
||||
.mars3d-contextmenu-ul > .active > a:focus,
|
||||
.mars3d-sub-menu > .active > a:focus {
|
||||
background-color: var(--mars-hover-btn-bg, #3ea6ff);
|
||||
}
|
||||
|
||||
/* Popupæ ·å¼*/
|
||||
.mars3d-popup-color {
|
||||
color: var(--mars-text-color, #ffffff);
|
||||
}
|
||||
|
||||
.mars3d-popup-background {
|
||||
background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
|
||||
}
|
||||
|
||||
.mars3d-tooltip {
|
||||
color: var(--mars-text-color, #ffffff);
|
||||
background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
|
||||
border: 1px solid var(--mars-bg-base, rgba(63, 72, 84, 0.9));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-top:before {
|
||||
border-top-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-bottom:before {
|
||||
border-bottom-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-left:before {
|
||||
border-left-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
|
||||
}
|
||||
|
||||
.mars3d-tooltip-right:before {
|
||||
border-right-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
|
||||
}
|
||||
|
||||
.mars3d-template-content label {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.mars3d-template-titile {
|
||||
color: var(--mars-base-color, #ffffff);
|
||||
border-bottom: 1px solid var(--mars-hover-btn-bg, #3ea6ff);
|
||||
}
|
||||
|
||||
.mars3d-template-titile a {
|
||||
font-size: 16px;
|
||||
color: var(--mars-msg-title-color, #c7d3dd);
|
||||
}
|
||||
|
||||
.mars3d-popup-btn-custom {
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #209ffd;
|
||||
background: #209ffd1c;
|
||||
}
|
||||
|
||||
.mars3d-popup-content {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.mars3d-divGraphic:hover {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
}
|
||||
145
src/components/testMap/index.vue
Normal file
145
src/components/testMap/index.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="map-content" id="map-content">
|
||||
<div id="mars3dContainer" class="mars3d-container"></div>
|
||||
<div class="layer-config">
|
||||
<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')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>亮度：{{ formData.brightness ? formData.brightness : 0 }}</span>
|
||||
<el-slider v-model="formData.brightness" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'brightness')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>对比度：{{ formData.contrast ? formData.contrast : 0 }}</span>
|
||||
<el-slider v-model="formData.contrast" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'contrast')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>色调：{{ formData.hue ? formData.hue : 0 }}</span>
|
||||
<el-slider v-model="formData.hue" :step="0.5" :max="2" :min="-2" @change="e => layerOperate(e, 'hue')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>伽马校正：{{ formData.gamma ? formData.gamma : 0 }}</span>
|
||||
<el-slider v-model="formData.gamma" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'gamma')" />
|
||||
</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.filterColor ? formData.filterColor : "" }}</span>
|
||||
<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button>保存当前配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-btn" @click="$emit('confirm')">
|
||||
<el-icon color="#fff" size="18"><CircleClose /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
//引入cesium基础库
|
||||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||||
import * as Cesium from "mars3d-cesium";
|
||||
//导入mars3d主库
|
||||
import "mars3d/dist/mars3d.css";
|
||||
import * as mars3d from "mars3d";
|
||||
import { baseMapDetails } from "@/api/modules/mapCommon";
|
||||
const props = defineProps({
|
||||
testMapVisible: Boolean,
|
||||
relativeId: String
|
||||
});
|
||||
const emits = defineEmits(["confirm"]);
|
||||
const formData: any = ref({});
|
||||
const configJson = ref<any>({
|
||||
scene: {
|
||||
center: { lat: 14.029537, lng: 105.94238, alt: 4879779, heading: 0, pitch: -66 }
|
||||
},
|
||||
control: {
|
||||
baseLayerPicker: false, // basemaps底图切换按钮
|
||||
homeButton: true, // 视角复位按钮
|
||||
sceneModePicker: true, // 二三维切换按钮
|
||||
navigationHelpButton: true, // 帮助按钮
|
||||
fullscreenButton: true, // 全屏按钮
|
||||
contextmenu: { hasDefault: true } // 右键菜单
|
||||
},
|
||||
basemaps: [
|
||||
{
|
||||
name: "天地图影像",
|
||||
icon: "img/basemaps/tdt_img.png",
|
||||
type: "tdt",
|
||||
layer: "img_d",
|
||||
show: true
|
||||
}
|
||||
]
|
||||
});
|
||||
let map: any;
|
||||
let graphicLayer: any;
|
||||
let thisLayer: any; // 选中的图层
|
||||
// 底图图层操作
|
||||
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);
|
||||
} else if (label == "invertColor") {
|
||||
thisLayer.layer[label] = e;
|
||||
} else {
|
||||
thisLayer[label] = e;
|
||||
}
|
||||
};
|
||||
// 获取数据详情
|
||||
const getInfo = async () => {
|
||||
let requestData = {
|
||||
id: props.relativeId
|
||||
};
|
||||
const { result }: { result: any } = await baseMapDetails(requestData);
|
||||
if (result) {
|
||||
formData.value = { ...result };
|
||||
configJson.value.basemaps = [
|
||||
{
|
||||
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: result.layer,
|
||||
layer: result.layer == "gaode" ? "img_d" : "img_z",
|
||||
saturation: result.saturation ? result.saturation : 0,
|
||||
brightness: result.brightness ? result.brightness : 0,
|
||||
contrast: result.contrast ? result.contrast : 0,
|
||||
hue: result.hue ? result.hue : 0,
|
||||
gamma: result.gamma ? result.gamma : 0,
|
||||
show: true
|
||||
}
|
||||
];
|
||||
initMars3d(configJson.value);
|
||||
}
|
||||
};
|
||||
const initMars3d = (option: any) => {
|
||||
console.log(666);
|
||||
map = new mars3d.Map("mars3dContainer", option);
|
||||
|
||||
// 创建矢量数据图层
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
map.addLayer(graphicLayer);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getInfo();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
map = null;
|
||||
thisLayer = null;
|
||||
graphicLayer = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<layoutTop></layoutTop>
|
||||
<layoutTop @toCenter="toCenter"></layoutTop>
|
||||
<div class="map-content" id="map-content">
|
||||
<div id="mars3dContainer" class="mars3d-container"></div>
|
||||
<!-- 搜索框 -->
|
||||
@ -243,6 +243,8 @@ 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";
|
||||
const configJson = ref<any>({});
|
||||
const screenComparisonShow = ref(false); // 分屏对比弹框
|
||||
const leftRollerList = ref<any>([]);
|
||||
const rightRollerList = ref<any>([]);
|
||||
@ -331,7 +333,16 @@ onMounted(async () => {
|
||||
const img = await getCanvas(i + 1);
|
||||
imgArr.push(img);
|
||||
}
|
||||
await initMars3d(ConfigJson.map3d);
|
||||
let requestData = {
|
||||
configKey: "mapConfig"
|
||||
};
|
||||
const { result } = await getSystemConfig(requestData);
|
||||
if (result) {
|
||||
configJson.value = JSON.parse(result.configValue);
|
||||
} else {
|
||||
configJson.value = ConfigJson.map3d;
|
||||
}
|
||||
await initMars3d(configJson.value);
|
||||
await initTree();
|
||||
});
|
||||
const qingtianSkybox = new mars3d.GroundSkyBox({
|
||||
@ -390,6 +401,10 @@ const data = [
|
||||
]
|
||||
}
|
||||
];
|
||||
// 再次点击首页到中心点
|
||||
const toCenter = () => {
|
||||
map.flyHome();
|
||||
};
|
||||
// 清除分屏对比
|
||||
const clearScreenComparison = () => {
|
||||
if (mapScreenSplit) {
|
||||
|
||||
@ -54,7 +54,9 @@
|
||||
<el-table-column type="index" label="序号" width="120" align="center" />
|
||||
<el-table-column prop="title" label="变量标题" align="left" width="150" />
|
||||
<el-table-column prop="value" label="变量值" align="left">
|
||||
<template #default="{ row }"><el-input v-model="row.value" placeholder="请输入" style="width: 70%" /></template>
|
||||
<template #default="{ row }"
|
||||
><el-input v-model="configJson.scene.center[row.key]" placeholder="请输入" style="width: 70%"
|
||||
/></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="key" label="变量名" align="left" width="200">
|
||||
<template #default="{ row }">
|
||||
@ -88,10 +90,12 @@ import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getSystemConfig, updateSystemConfig } from "@/api/modules/mapCommon";
|
||||
import configData from "./config.json";
|
||||
import { config } from "process";
|
||||
const configId = ref("");
|
||||
const configJson = ref<any>({
|
||||
control: {}
|
||||
control: {},
|
||||
scene: {
|
||||
center: {}
|
||||
}
|
||||
});
|
||||
const viewsTable = ref([
|
||||
{ title: "初始化经度", value: "", key: "lng" }, // 180-180
|
||||
@ -121,15 +125,15 @@ const showPage = ref(false);
|
||||
// 保存修改配置
|
||||
const saveConfig = async (label: any) => {
|
||||
console.log(controlsTable.value);
|
||||
if (label == "control") {
|
||||
controlsTable.value.map((item: any) => {
|
||||
configJson.value.control[item.key] = item.value;
|
||||
});
|
||||
} else {
|
||||
controlsTable.value.map((item: any) => {
|
||||
configJson.value.center[item.key] = item.value;
|
||||
});
|
||||
}
|
||||
// if (label == "control") {
|
||||
// controlsTable.value.map((item: any) => {
|
||||
// configJson.value.control[item.key] = item.value;
|
||||
// });
|
||||
// } else {
|
||||
// controlsTable.value.map((item: any) => {
|
||||
// configJson.value.scene.center[item.key] = item.value;
|
||||
// });
|
||||
// }
|
||||
let requestData: any = { configKey: "mapConfig", configValue: JSON.stringify(configJson.value) };
|
||||
if (configJson.value) {
|
||||
requestData.configId = configId.value;
|
||||
|
||||
@ -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,18 +14,18 @@
|
||||
<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-select v-model="formData.engineeringName" placeholder="请选择" style="width: 100%">
|
||||
<el-form-item label="图层类型:" prop="layer">
|
||||
<el-select v-model="formData.layer" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="item in layerTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- <div class="row">
|
||||
<el-form-item label="实例化ImageryProvider类配置:" prop="engineeringName">
|
||||
<div class="table-head">
|
||||
<div class="head-key">键名</div>
|
||||
@ -86,258 +86,138 @@
|
||||
>https://cesium.com/learn/cesiumjs/ref-doc/ImageryLayer.html</a
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div> -->
|
||||
<!-- <div class="row">
|
||||
<el-form-item label="坐标偏移x,y:" prop="engineeringName">
|
||||
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
|
||||
<el-input v-model="formData.engineeringName" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<div class="row">
|
||||
<el-form-item label="是否开启反色:" prop="invertColor">
|
||||
<el-switch v-model="formData.invertColor" 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="滤镜颜色:" prop="filterColor">
|
||||
<el-color-picker v-model="formData.filterColor" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-form-item label="滤镜颜色:" prop="engineeringName">
|
||||
<el-color-picker v-model="formData.engineeringName" />
|
||||
<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">
|
||||
<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">
|
||||
<!-- <div class="row">
|
||||
<el-form-item label="权重:" prop="engineeringName">
|
||||
<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div> -->
|
||||
<div class="row" v-if="props.title == '编辑地图层'">
|
||||
<el-form-item label="可视化设置预览:" prop="engineeringName">
|
||||
<el-button type="primary" @click="visible1 = false">编辑</el-button>
|
||||
<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"></testMap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
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";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { baseMapAdd, baseMapDetails, baseMapEdit } from "@/api/modules/mapCommon";
|
||||
import testMap from "@/components/testMap/index.vue";
|
||||
const testMapVisible = ref(false);
|
||||
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" }
|
||||
{ label: "天地图", value: "tdt" },
|
||||
{ label: "百度地图", value: "baidu" },
|
||||
{ label: "高德地图", value: "gaode" },
|
||||
{ label: "腾讯地图", value: "tencent" },
|
||||
{ label: "OSM地图", value: "osm" },
|
||||
{ label: "谷歌地图", value: "google" },
|
||||
{ label: "微软Bing地图", value: "bing" },
|
||||
{ label: "图层组", value: "group" },
|
||||
{ label: "空白图层", value: "empty" }
|
||||
]);
|
||||
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 rules = ref({
|
||||
engineeringName: [
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
type: [
|
||||
layer: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
message: "请选择",
|
||||
trigger: "change"
|
||||
}
|
||||
],
|
||||
typeDescribe: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
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 } = await baseMapDetails(requestData);
|
||||
if (result) {
|
||||
formData.value = { ...result };
|
||||
}
|
||||
};
|
||||
// 获取验收类型字典
|
||||
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 baseMapAdd(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
} else if (props.title == "编辑地图层") {
|
||||
const res: any = await baseMapEdit(requestData);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
}
|
||||
visible1.value = false;
|
||||
emits("confirm");
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 关闭两个对话框
|
||||
const closeMain = () => {
|
||||
@ -348,15 +228,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);
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -374,14 +254,6 @@ onMounted(() => {});
|
||||
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 {
|
||||
@ -451,115 +323,7 @@ onMounted(() => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
:deep(.face-uploader .el-upload) {
|
||||
border: 1px dashed #d9d9d9 !important;
|
||||
border-radius: 6px !important;
|
||||
cursor: pointer !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.face-uploader .el-upload:hover {
|
||||
border-color: #409eff !important;
|
||||
}
|
||||
:deep(.el-icon) {
|
||||
font-size: 24px;
|
||||
color: #8c939d;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
.face-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
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>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="table-box">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
title="用户列表"
|
||||
title="地图层列表"
|
||||
:columns="columns"
|
||||
:requestApi="getTableList"
|
||||
:initParam="initParam"
|
||||
@ -17,60 +17,65 @@
|
||||
<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 #invertColor="scope">
|
||||
<el-switch v-model="scope.row.invertColor" 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"
|
||||
:title="title"
|
||||
:relativeId="relativeId"
|
||||
@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 { useRouter } from "vue-router";
|
||||
import { User } from "@/api/interface";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
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 { 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";
|
||||
const relativeId = ref("");
|
||||
const operateVisible = ref(false);
|
||||
const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
|
||||
const router = useRouter();
|
||||
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
||||
const proTable = ref();
|
||||
const title = ref("");
|
||||
|
||||
const visible = ref(false);
|
||||
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: "operation", label: "操作", fixed: "right", width: 260 }
|
||||
{ prop: "name", label: "底图名称", search: { el: "input" } },
|
||||
{ prop: "invertColor", label: "是否开启反色" },
|
||||
{ prop: "createTime", label: "创建时间" },
|
||||
{ prop: "updateTime", label: "更新时间" },
|
||||
{ prop: "show", label: "是否显示" },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 160 }
|
||||
];
|
||||
// const AuthIdData = ref([]);
|
||||
|
||||
@ -78,11 +83,25 @@ const columns: ColumnProps[] = [
|
||||
const initParam = reactive({
|
||||
// type: 1
|
||||
});
|
||||
// 刷新列表数据
|
||||
const requestTable = () => {
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
// 删除底图
|
||||
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
|
||||
await useHandleData(baseMapDelete, { 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 = "新增市级政务";
|
||||
formData.value = reactive({});
|
||||
title.value = "新增地图层";
|
||||
};
|
||||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
||||
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
||||
@ -100,48 +119,25 @@ const dataCallback = (data: any) => {
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params));
|
||||
return getGovermentTreeList(newParams);
|
||||
return baseMapPage(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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user