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
Unified 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 axios from 'axios';
import { Notification, MessageBox, Message } from 'element-ui' import { Notification, MessageBox, Message } from 'element-ui';
import store from '@/store' import store from '@/store';
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth';
import errorCode from '@/utils/errorCode' import errorCode from '@/utils/errorCode';
// form 表单 头部信息 application/x-www-form-urlencoded // form 表单 头部信息 application/x-www-form-urlencoded
// //
window._axiosPromiseArr = [] window._axiosPromiseArr = [];
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分 // axios中请求配置有baseURL选项，表示请求URL公共部分
@ -14,85 +14,86 @@ const service = axios.create({
withCredentials: true, withCredentials: true,
// 超时 // 超时
timeout: 60000 timeout: 60000
}) });
// request拦截器 // request拦截器
service.interceptors.request.use(config => { service.interceptors.request.use(
// 是否需要设置 token (config) => {
const isToken = (config.headers || {}).isToken === false // 是否需要设置 token
if (getToken() && !isToken) { const isToken = (config.headers || {}).isToken === false;
config.headers['shuili'] = 'water ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 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 => { service.interceptors.response.use(
if (res && res.data) { (res) => {
// 未设置状态码则默认成功状态 if (res && res.data) {
const code = res.data.code || 200 // 未设置状态码则默认成功状态
// 获取错误信息 const code = res.data.code || 200;
const msg = errorCode[code] || res.data.msg || errorCode['default'] // 获取错误信息
if (code === 401) { const msg = errorCode[code] || res.data.msg || errorCode['default'];
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { if (code === 401) {
confirmButtonText: '重新登录', MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
cancelButtonText: '取消', confirmButtonText: '重新登录',
type: 'warning' cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
location.href = '/';
});
});
} }
).then(() => { if (code === 403) {
store.dispatch('LogOut').then(() => { MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
location.href = '/' confirmButtonText: '重新登录',
}) cancelButtonText: '取消',
}) type: 'warning'
} }).then(() => {
if (code === 403) { store.dispatch('LogOut').then(() => {
MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', { location.href = '/';
confirmButtonText: '重新登录', });
cancelButtonText: '取消', });
type: 'warning' } 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)
} }
) // error => {
export default service // 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"> <div class="directoryInfo">
<span> 图层资源目录名称：{{ directoryInfo.name }}</span> <span> 图层资源目录名称：{{ directoryInfo.name }}</span>
<span> 图层资源目录编号： {{ directoryInfo.id }}</span> <span> 图层资源目录编号： {{ directoryInfo.id }}</span>
<span> 图层数量： {{ (directoryInfo.children && directoryInfo.children.length) || 0 }}</span> <span> 图层数量： {{ pageOptions.total }}</span>
<span> 创建时间： {{ directoryInfo.pubDate }}</span> <span> 创建时间： {{ directoryInfo.pubDate }}</span>
<span> 创建人：{{ directoryInfo.createUser }} </span> <span> 创建人：{{ directoryInfo.createUser }} </span>
</div> </div>
</div> </div>
<div class="middle"> <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"> <div class="keyword-filter">
<el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input> <el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
<el-button class="search-btn">搜索</el-button> <el-button class="search-btn">搜索</el-button>
@ -25,181 +67,241 @@
</div> </div>
<div class="content"> <div class="content">
<el-table :data="tableData" stripe style="width: 100%"> <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
<el-table-column prop="date" label="图层资源目录编号" width="180"> </el-table-column> type="index"
<el-table-column prop="name" label="图层资源目录名称" width="180"> </el-table-column> :index="(index) => index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1"
<el-table-column prop="address" label="创建时间"> </el-table-column> label="序号"
<el-table-column prop="address" label="创建人"> </el-table-column> width="50"
<el-table-column prop="address" label="操作"> 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"> <template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <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> </template>
</el-table-column> </el-table-column>
</el-table> </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> </div>
</el-container> </el-container>
</div> </div>
</template> </template>
<script> <script>
import { getDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js'; import debounce from 'lodash/debounce';
import { saveOrUpdateLayerApi, getLayerListApi, deleteLayerApi } from '@/api/aiSupervision/layerConfigApi.js';
export default { export default {
props: ['directoryInfo'], props: ['directoryInfo'],
data() { data() {
return { return {
tableData: [ tableData: [],
{ editDataInfoForm: {
date: '2016-05-02', serviceType: '', //服务类型,wms/wmts/wfs/3d tiles/terrain
name: '王小虎', isLayerGroup: false,
address: '上海市普陀区金沙江路 1518 弄' serviceUrl: '', //服务地址
}, serviceName: '', //服务名称
{ serviceNameAlias: '', //服务别名
date: '2016-05-04',
name: '王小虎', serviceIndex: '', //服务索引
address: '上海市普陀区金沙江路 1517 弄' //glb模型初始位置和姿态
}, // modelInitPosition: '',
{ //3d图层类型 白膜/BIM/倾斜摄影/点云/人工建模
date: '2016-05-01', // layer3dType: '',
name: '王小虎', //关联建筑id
address: '上海市普陀区金沙江路 1519 弄' // buildingId: '',
},
{ //是否启用自定义代理
date: '2016-05-03', // serviceUseCustomProxy: false,
name: '王小虎', //服务注记地址
address: '上海市普陀区金沙江路 1516 弄' // annotationUrl: '',
}, //token
{ // serviceToken: '',
date: '2016-05-02',
name: '王小虎', //MapBox样式id
address: '上海市普陀区金沙江路 1518 弄' // mapBoxStyleId: '',
}, //注记服务索引
{ // annotationUrlInde: '',
date: '2016-05-04', //服务年份
name: '王小虎', // serviceYear: '',
address: '上海市普陀区金沙江路 1517 弄' //服务标签
}, // serviceTags: '',
{ //瓦片参数
date: '2016-05-01', // tileParamId: '',
name: '王小虎', //选中的目录节点
address: '上海市普陀区金沙江路 1519 弄' dirId: '',
}, //选中的目录名称
{ dirNames: '',
date: '2016-05-03', // 后缀名
name: '王小虎', // format: '',
address: '上海市普陀区金沙江路 1516 弄' // 瓦片大小
}, tileSize: '256',
{ // 坐标投影
date: '2016-05-02', // srs: '',
name: '王小虎', // 矩阵集
address: '上海市普陀区金沙江路 1518 弄' // tileMatrixSet: '',
}, // 是否显示图例
{ // isLegend: '1',
date: '2016-05-04', // 缩略图
name: '王小虎', picture: '',
address: '上海市普陀区金沙江路 1517 弄' // 上传的缩略图
}, file: ''
{ //是否为底图
date: '2016-05-01', // isBaseMap: '0',
name: '王小虎', //默认显示
address: '上海市普陀区金沙江路 1519 弄' // isShow: '0',
}, //备注
{ // remark: '',
date: '2016-05-03', //3D tiles性能调试参数
name: '王小虎', // tileSetOption: {
address: '上海市普陀区金沙江路 1516 弄' // modelMatrix: 'Cesium.Matrix4.IDENTITY',
}, // maximumScreenSpaceError: 16,
{ // skipLevelOfDetail: false,
date: '2016-05-02', // skipScreenSpaceErrorFactor: 16,
name: '王小虎', // skipLevels: 1,
address: '上海市普陀区金沙江路 1518 弄' // immediatelyLoadDesiredLevelOfDetail: false,
}, // loadSiblings: false,
{ // cullWithChildrenBounds: true,
date: '2016-05-04', // cullRequestsWhileMoving: true,
name: '王小虎', // cullRequestsWhileMovingMultiplier: 60.0,
address: '上海市普陀区金沙江路 1517 弄' // preloadWhenHidden: false,
}, // preferLeaves: false,
{ // maximumMemoryUsage: 512,
date: '2016-05-01', // progressiveResolutionHeightFraction: 0.3,
name: '王小虎', // dynamicScreenSpaceErrorDensity: 0.00278,
address: '上海市普陀区金沙江路 1519 弄' // dynamicScreenSpaceErrorFactor: 4.0,
}, // dynamicScreenSpaceError: false
{ // },
date: '2016-05-03', // 字段配置
name: '王小虎', // fields: [],
address: '上海市普陀区金沙江路 1516 弄' // 关联矢量图层信息
}, // relationServiceId: '',
{ // relationServiceName: '',
date: '2016-05-02', // relationServiceUrl: '',
name: '王小虎', // relationStyleId: '', // 关联样式
address: '上海市普陀区金沙江路 1518 弄' // relationStyleName: ''
}, },
{ serviceTypeOptions: [
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', value: '021102',
name: '王小虎', label: 'ArcGISRest图层'
address: '上海市普陀区金沙江路 1518 弄'
}, },
{ {
date: '2016-05-04', value: '030300',
name: '王小虎', label: 'WFS200'
address: '上海市普陀区金沙江路 1517 弄'
}, },
{ {
date: '2016-05-01', value: '113200',
name: '王小虎', label: 'S3M图层'
address: '上海市普陀区金沙江路 1519 弄'
}, },
{ {
date: '2016-05-03', value: '',
name: '王小虎', label: 'XYZ底图'
address: '上海市普陀区金沙江路 1516 弄'
} }
], ],
pageOptions: {
pageNum: 1,
pageSize: 8,
total: 0
},
dialogFormVisible: false, //是否显示对话框
keyword: '' keyword: ''
}; };
}, },
mounted() { mounted() {
console.log(this.directoryInfo); this.editDataInfoForm.dirId = this.directoryInfo.id;
this.editDataInfoForm.dirNames = this.directoryInfo.name;
this.getLayerList();
}, },
methods: { methods: {
goBack() { goBack() {
this.$emit('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> </style>

Write Preview
Loading…
Cancel
Save