ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 图层管理

sy-water-data-board-ui
yantingyu 1 year ago
parent
e3a58a8205
commit
4ee27ffbce
3 changed files with 368 additions and 226 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/api/aiSupervision/layerConfigApi.js
  2. 163
      src/utils/request.js
  3. 402
      src/views/aiSupervision/layerManage/resource/LayerDetails.vue

29
src/api/aiSupervision/layerConfigApi.js
View File

@ -30,3 +30,32 @@ export function deleteDirectoryApi(id) {
}
});
}
// 增加或更改图层
export function saveOrUpdateLayerApi(paramInfo) {
return request({
url: `/map/layer/saveOrUpdateLayer`,
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: paramInfo
});
}
// 获取图层列表
export function getLayerListApi(data) {
return request({
url: `/map/layer/getLayers`,
method: 'post',
data
});
}
// 删除图层
export function deleteLayerApi(id) {
return request({
url: `/map/layer/deleteLayer/${id}`,
method: 'delete'
});
}

163
src/utils/request.js
View File

@ -1,12 +1,12 @@
import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import axios from 'axios';
import { Notification, MessageBox, Message } from 'element-ui';
import store from '@/store';
import { getToken } from '@/utils/auth';
import errorCode from '@/utils/errorCode';
// form 表单 头部信息 application/x-www-form-urlencoded
//
window._axiosPromiseArr = []
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
window._axiosPromiseArr = [];
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
@ -14,85 +14,86 @@ const service = axios.create({
withCredentials: true,
// 超时
timeout: 60000
})
});
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['shuili'] = 'water ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
service.interceptors.request.use(
(config) => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false;
if (getToken() && !isToken) {
config.headers['shuili'] = 'water ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
}
config.cancelToken = new axios.CancelToken((cancel) => {
window._axiosPromiseArr.push({ cancel });
});
return config;
},
(error) => {
Promise.reject(error);
}
config.cancelToken = new axios.CancelToken(cancel => {
window._axiosPromiseArr.push({ cancel })
})
return config
}, error => {
Promise.reject(error)
})
);
// 响应拦截器
service.interceptors.response.use(res => {
if (res && res.data) {
// 未设置状态码则默认成功状态
const code = res.data.code || 200
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
service.interceptors.response.use(
(res) => {
if (res && res.data) {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default'];
if (code === 401) {
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/';
});
});
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/'
})
})
}
if (code === 403) {
MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
if (code === 403) {
MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/';
});
});
} else if (code !== 200) {
Notification.error({
title: msg
});
return Promise.reject('error');
} else if (code === 500) {
Message({
message: msg,
type: 'error'
});
return Promise.reject(new Error(msg));
} else {
return res.data;
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/'
})
})
} else if (code !== 200) {
Notification.error({
title: msg
})
return Promise.reject('error')
} else if (code === 500) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
} else {
return res.data
}
}
},
error => {
console.log('err' + error)
let { message } = error
if (message == 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
// Message({
// message: message,
// type: 'error',
// duration: 5 * 1000
// })
return Promise.reject(error)
}
)
export default service
// error => {
// console.log('err' + error)
// let { message } = error
// if (message == 'Network Error') {
// message = '后端接口连接异常'
// } else if (message.includes('timeout')) {
// message = '系统接口请求超时'
// } else if (message.includes('Request failed with status code')) {
// message = '系统接口' + message.substr(message.length - 3) + '异常'
// }
// // Message({
// // message: message,
// // type: 'error',
// // duration: 5 * 1000
// // })
// return Promise.reject(error)
// }
);
export default service;

402
src/views/aiSupervision/layerManage/resource/LayerDetails.vue
View File

@ -11,13 +11,55 @@
<div class="directoryInfo">
<span> 图层资源目录名称：{{ directoryInfo.name }}</span>
<span> 图层资源目录编号： {{ directoryInfo.id }}</span>
<span> 图层数量： {{ (directoryInfo.children && directoryInfo.children.length) || 0 }}</span>
<span> 图层数量： {{ pageOptions.total }}</span>
<span> 创建时间： {{ directoryInfo.pubDate }}</span>
<span> 创建人：{{ directoryInfo.createUser }} </span>
</div>
</div>
<div class="middle">
<el-button type="primary" plain>添加图层</el-button>
<el-button type="primary" plain @click="dialogFormVisible = true">添加图层</el-button>
<el-dialog title="新增图层" :visible.sync="dialogFormVisible">
<el-form :model="editDataInfoForm">
<el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'">
<el-select
style="width: 80%"
v-model="editDataInfoForm.serviceType"
placeholder="请选择"
@change="handleServiceTypeChange"
>
<el-option
v-for="item in serviceTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'">
<el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'">
<el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'">
<el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input>
</el-form-item>
<el-form-item
v-if="editDataInfoForm.serviceType === '030300'"
label="服务索引"
prop="serviceIndex"
style="font-size: 1rem"
:label-width="'120px'"
>
<el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="saveOrUpdateLayer">确 定</el-button>
</div>
</el-dialog>
<div class="keyword-filter">
<el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
<el-button class="search-btn">搜索</el-button>
@ -25,181 +67,241 @@
</div>
<div class="content">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column type="index" label="序号" width="50" header-align="center"> </el-table-column>
<el-table-column prop="date" label="图层资源目录编号" width="180"> </el-table-column>
<el-table-column prop="name" label="图层资源目录名称" width="180"> </el-table-column>
<el-table-column prop="address" label="创建时间"> </el-table-column>
<el-table-column prop="address" label="创建人"> </el-table-column>
<el-table-column prop="address" label="操作">
<el-table-column
type="index"
:index="(index) => index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1"
label="序号"
width="50"
header-align="center"
></el-table-column>
<el-table-column prop="id" label="图层资源目录编号" width="350"> </el-table-column>
<el-table-column prop="serviceName" label="图层资源目录名称"> </el-table-column>
<el-table-column prop="pubDate" label="创建时间"> </el-table-column>
<el-table-column prop="createUser" label="创建人"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
<el-pagination
background
layout="prev, pager, next"
:current-page.sync="pageOptions.pageNum"
:total="pageOptions.total"
:page-size="pageOptions.pageSize"
@current-change="getLayerList"
>
</el-pagination>
</div>
</el-container>
</div>
</template>
<script>
import { getDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js';
import debounce from 'lodash/debounce';
import { saveOrUpdateLayerApi, getLayerListApi, deleteLayerApi } from '@/api/aiSupervision/layerConfigApi.js';
export default {
props: ['directoryInfo'],
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
tableData: [],
editDataInfoForm: {
serviceType: '', //服务类型,wms/wmts/wfs/3d tiles/terrain
isLayerGroup: false,
serviceUrl: '', //服务地址
serviceName: '', //服务名称
serviceNameAlias: '', //服务别名
serviceIndex: '', //服务索引
//glb模型初始位置和姿态
// modelInitPosition: '',
//3d图层类型 白膜/BIM/倾斜摄影/点云/人工建模
// layer3dType: '',
//关联建筑id
// buildingId: '',
//是否启用自定义代理
// serviceUseCustomProxy: false,
//服务注记地址
// annotationUrl: '',
//token
// serviceToken: '',
//MapBox样式id
// mapBoxStyleId: '',
//注记服务索引
// annotationUrlInde: '',
//服务年份
// serviceYear: '',
//服务标签
// serviceTags: '',
//瓦片参数
// tileParamId: '',
//选中的目录节点
dirId: '',
//选中的目录名称
dirNames: '',
// 后缀名
// format: '',
// 瓦片大小
tileSize: '256',
// 坐标投影
// srs: '',
// 矩阵集
// tileMatrixSet: '',
// 是否显示图例
// isLegend: '1',
// 缩略图
picture: '',
// 上传的缩略图
file: ''
//是否为底图
// isBaseMap: '0',
//默认显示
// isShow: '0',
//备注
// remark: '',
//3D tiles性能调试参数
// tileSetOption: {
// modelMatrix: 'Cesium.Matrix4.IDENTITY',
// maximumScreenSpaceError: 16,
// skipLevelOfDetail: false,
// skipScreenSpaceErrorFactor: 16,
// skipLevels: 1,
// immediatelyLoadDesiredLevelOfDetail: false,
// loadSiblings: false,
// cullWithChildrenBounds: true,
// cullRequestsWhileMoving: true,
// cullRequestsWhileMovingMultiplier: 60.0,
// preloadWhenHidden: false,
// preferLeaves: false,
// maximumMemoryUsage: 512,
// progressiveResolutionHeightFraction: 0.3,
// dynamicScreenSpaceErrorDensity: 0.00278,
// dynamicScreenSpaceErrorFactor: 4.0,
// dynamicScreenSpaceError: false
// },
// 字段配置
// fields: [],
// 关联矢量图层信息
// relationServiceId: '',
// relationServiceName: '',
// relationServiceUrl: '',
// relationStyleId: '', // 关联样式
// relationStyleName: ''
},
serviceTypeOptions: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
value: '021102',
label: 'ArcGISRest图层'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
value: '030300',
label: 'WFS200'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
value: '113200',
label: 'S3M图层'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
value: '',
label: 'XYZ底图'
}
],
pageOptions: {
pageNum: 1,
pageSize: 8,
total: 0
},
dialogFormVisible: false, //是否显示对话框
keyword: ''
};
},
mounted() {
console.log(this.directoryInfo);
this.editDataInfoForm.dirId = this.directoryInfo.id;
this.editDataInfoForm.dirNames = this.directoryInfo.name;
this.getLayerList();
},
methods: {
goBack() {
this.$emit('goback');
},
handleEdit(index, row) {
console.log(index, row);
// this.editDataInfoForm = row;
this.dialogFormVisible = true;
},
handleClose() {
// this.editDataInfoForm = {};
this.dialogFormVisible = false;
},
handleDelete(row) {
this.$confirm('删除图层将同时删除该图层资源以及关联的图层数据，删除后将不可恢复，是否继续删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
const res = await deleteLayerApi(row.id);
if (res.success) {
this.getLayerList();
this.$message({
type: 'success',
message: '删除成功!'
});
}
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 获取图层列表
getLayerList() {
const params = {
pageNum: this.pageOptions.pageNum,
pageSize: this.pageOptions.pageSize,
data: {
serviceName: this.keyword,
dirId: this.directoryInfo.id
},
params: {
orderBy: 'pub_date',
sortBy: 'asc'
}
};
getLayerListApi(params).then((res) => {
this.pageOptions.total = res.total;
this.tableData = res.records;
});
},
async saveOrUpdateLayer() {
const reg = /^(\w|[\u4e00-\u9fa5]){3,30}$/g;
if (!reg.test(this.editDataInfoForm.serviceName)) {
this.$message({
type: 'info',
message: '格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30'
});
return;
}
await saveOrUpdateLayerApi(this.editDataInfoForm);
this.getLayerList();
this.handleClose();
},
handleServiceTypeChange() {}
},
created() {
// 使用 lodash 的 debounce 函数创建防抖版本
this.debouncedGetLayerList = debounce(this.getLayerList, 500);
},
watch: {
keyword() {
this.debouncedGetLayerList();
}
}
};
@ -279,5 +381,15 @@ header {
}
}
}
.content {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
flex: 1;
.el-pagination {
text-align: center;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save