修改样式
This commit is contained in:
@ -7,7 +7,7 @@ Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
// {
|
||||
// path: '/',
|
||||
// path: '/home',
|
||||
// name: 'home',
|
||||
// component: HomeView,
|
||||
// },
|
||||
|
||||
@ -46,13 +46,7 @@
|
||||
<div class="main-container">
|
||||
<div class="control-panel">
|
||||
<div class="title">参数</div>
|
||||
<el-form
|
||||
@submit.native.prevent="calculateShortestPath"
|
||||
label-width="140px"
|
||||
label-position="left"
|
||||
size="mini"
|
||||
:model="form"
|
||||
>
|
||||
<el-form @submit.native.prevent="calculateShortestPath" label-position="left" size="mini" :model="form">
|
||||
<el-form-item label="起点:">
|
||||
<el-input
|
||||
v-model="form.startPoint"
|
||||
@ -108,7 +102,7 @@
|
||||
</div>
|
||||
<div class="control-panel">
|
||||
<div class="title">隐蔽添加</div>
|
||||
<el-form label-width="140px" label-position="left" size="mini">
|
||||
<el-form label-position="left" size="mini">
|
||||
<el-form-item label="缓冲半径(m):">
|
||||
<el-input v-model="hideform.radius"></el-input>
|
||||
</el-form-item>
|
||||
@ -125,7 +119,7 @@
|
||||
<span>参与路线规划</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form @submit.native.prevent="calculateShortestPath" label-width="140px" label-position="left" size="mini">
|
||||
<el-form @submit.native.prevent="calculateShortestPath" label-position="left" size="mini">
|
||||
<el-form-item label="宽度(m):">
|
||||
<el-input v-model="inputform.width"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
@ -5,19 +5,17 @@
|
||||
<el-tooltip effect="dark" content="绘制矩形区域">
|
||||
<img :src="item.src" @click="drawRectangle" />
|
||||
</el-tooltip>
|
||||
<el-button class="form-btn" type="primary" size="mini" @click="analyzeAverageSlope">确定</el-button>
|
||||
<div class="right">
|
||||
<el-button class="form-btn" type="primary" size="mini" :disabled="showExport" @click="clickExport">
|
||||
导出
|
||||
</el-button>
|
||||
<el-button class="form-btn" type="primary" size="mini" @click="handleExportJosn"> json编辑 </el-button>
|
||||
<div class="sure" @click="analyzeAverageSlope">确定</div>
|
||||
<div class="right flex a-c">
|
||||
<div class="sure" :disabled="showExport" @click="clickExport">导出</div>
|
||||
<div class="sure" @click="handleExportJosn">json编辑</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content flex j-s a-c">
|
||||
<div class="left">
|
||||
<el-form label-width="140px" label-position="left" size="small">
|
||||
<el-form label-position="left" size="mini">
|
||||
<!-- 范围 -->
|
||||
<div class="control-panel">
|
||||
<div class="title">范围</div>
|
||||
@ -118,7 +116,7 @@
|
||||
<div class="point">
|
||||
<div class="table-title">
|
||||
<span>道路附属点</span>
|
||||
<el-button type="primary" size="mini" @click="handleAdd('roadPointList')">新增</el-button>
|
||||
<div class="sure" @click="handleAdd('roadPointList')">新增</div>
|
||||
</div>
|
||||
<vxe-table
|
||||
class="item"
|
||||
@ -149,9 +147,9 @@
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="100">
|
||||
<template v-slot="{row}">
|
||||
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
|
||||
<el-button type="text" size="mini" @click="handleDelete('roadPointList', row)">删除</el-button>
|
||||
<div class="sure" v-if="!row.editing" type="text" @click="handleEdit(row)">编辑</div>
|
||||
<div class="sure" v-else type="text" @click="handleSave(row)">保存</div>
|
||||
<div class="sure" type="text" @click="handleDelete('roadPointList', row)">删除</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
@ -161,7 +159,7 @@
|
||||
<div class="line">
|
||||
<div class="table-title">
|
||||
<span>道路附属线</span>
|
||||
<el-button type="primary" size="mini" @click="handleAdd('roadLineList')">新增</el-button>
|
||||
<div class="sure" @click="handleAdd('roadLineList')">新增</div>
|
||||
</div>
|
||||
<vxe-table
|
||||
class="item"
|
||||
@ -192,9 +190,9 @@
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="100">
|
||||
<template v-slot="{row}">
|
||||
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
|
||||
<el-button type="text" size="mini" @click="handleDelete('roadLineList', row)">删除</el-button>
|
||||
<div class="sure" v-if="!row.editing" @click="handleEdit(row)">编辑</div>
|
||||
<div class="sure" v-else @click="handleSave(row)">保存</div>
|
||||
<div class="sure" @click="handleDelete('roadLineList', row)">删除</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
@ -206,7 +204,7 @@
|
||||
<div class="point">
|
||||
<div class="table-title">
|
||||
<span>水系附属点</span>
|
||||
<el-button type="primary" size="mini" @click="handleAdd('waterPointList')">新增</el-button>
|
||||
<div class="sure" @click="handleAdd('waterPointList')">新增</div>
|
||||
</div>
|
||||
<vxe-table
|
||||
class="item"
|
||||
@ -237,9 +235,9 @@
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="100">
|
||||
<template v-slot="{row}">
|
||||
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
|
||||
<el-button type="text" size="mini" @click="handleDelete('waterPointList', row)">删除</el-button>
|
||||
<div class="sure" v-if="!row.editing" @click="handleEdit(row)">编辑</div>
|
||||
<div class="sure" v-else @click="handleSave(row)">保存</div>
|
||||
<div class="sure" @click="handleDelete('waterPointList', row)">删除</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
@ -249,7 +247,7 @@
|
||||
<div class="line">
|
||||
<div class="table-title">
|
||||
<span>水系附属线</span>
|
||||
<el-button type="primary" size="mini" @click="handleAdd('waterLineList')">新增</el-button>
|
||||
<div class="sure" @click="handleAdd('waterLineList')">新增</div>
|
||||
</div>
|
||||
<vxe-table
|
||||
class="item"
|
||||
@ -280,9 +278,9 @@
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="100">
|
||||
<template v-slot="{row}">
|
||||
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
|
||||
<el-button type="text" size="mini" @click="handleDelete('waterLineList', row)">删除</el-button>
|
||||
<div class="sure" v-if="!row.editing" @click="handleEdit(row)">编辑</div>
|
||||
<div class="sure" v-else @click="handleSave(row)">保存</div>
|
||||
<div class="sure" @click="handleDelete('waterLineList', row)">删除</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
@ -292,8 +290,8 @@
|
||||
</el-tabs>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="exportJSON">导出</el-button>
|
||||
<div class="sure" @click="dialogVisible = false">取消</div>
|
||||
<div class="sure" @click="exportJSON">导出</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
@ -685,19 +683,13 @@ export default {
|
||||
|
||||
// 判断矩形与 mars3d GeoJSON 图层是否相交(不转 GeoJSON)
|
||||
getIntersectId(position, layer) {
|
||||
console.log('position===>', position, layer)
|
||||
if (!position || !layer || !layer.graphics) return null
|
||||
|
||||
const rectCoords = position.concat([position[0]]) // 闭合
|
||||
|
||||
console.log('rectCoords===>', rectCoords)
|
||||
|
||||
const rectPoly = turf.polygon([rectCoords])
|
||||
console.log('rectPoly===>', rectPoly)
|
||||
const [minX, minY, maxX, maxY] = turf.bbox(rectPoly) // 矩形 bbox
|
||||
|
||||
console.log('minX, minY, maxX, maxY===>', minX, minY, maxX, maxY)
|
||||
|
||||
let fc = this._polyCache.get(layer)
|
||||
|
||||
if (!fc) {
|
||||
@ -1327,7 +1319,7 @@ export default {
|
||||
.then((response) => {
|
||||
this.jsonInfo = {
|
||||
path: response.data.path,
|
||||
json: JSON.stringify(response.data.json, null, 2),
|
||||
json: JSON.stringify(this.decodeEscapedJson(response.data.json), null, 2),
|
||||
}
|
||||
this.jsonLoading = false
|
||||
})
|
||||
@ -1431,34 +1423,26 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-button--primary {
|
||||
background-color: #176363;
|
||||
.sure {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #176363;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: #176363;
|
||||
}
|
||||
&:active {
|
||||
background-color: #176363;
|
||||
}
|
||||
&:focus {
|
||||
background-color: #176363;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--mini.el-form-item,
|
||||
.el-form-item--small.el-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary.is-disabled,
|
||||
.el-button--primary.is-disabled:active,
|
||||
.el-button--primary.is-disabled:focus,
|
||||
.el-button--primary.is-disabled:hover {
|
||||
background-color: #176363;
|
||||
min-width: 14px;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#page {
|
||||
width: 100%;
|
||||
width: 340px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
@ -1476,12 +1460,9 @@ export default {
|
||||
cursor: pointer;
|
||||
margin-left: 32px;
|
||||
img {
|
||||
margin-right: 10px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.form-btn {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -1504,14 +1485,13 @@ export default {
|
||||
background-color: #d4e5db;
|
||||
.control-panel {
|
||||
width: 340px;
|
||||
padding: 5px 20px;
|
||||
padding: 20px 26px;
|
||||
box-sizing: border-box;
|
||||
background-size: cover;
|
||||
background: #d4e5db;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
color: #1c1c1c;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1523,7 +1503,8 @@ export default {
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 3px 0;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -21,25 +21,25 @@ module.exports = defineConfig({
|
||||
})
|
||||
|
||||
/* 2. 追加 ES5 规则(只转 src,不转 node_modules) */
|
||||
config.module.rules.push({
|
||||
test: /\.js$/,
|
||||
include: path.resolve(__dirname, 'src'),
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {ie: '11'}, // 强制 ES5
|
||||
corejs: 3,
|
||||
useBuiltIns: 'entry',
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
// config.module.rules.push({
|
||||
// test: /\.js$/,
|
||||
// include: path.resolve(__dirname, 'src'),
|
||||
// use: {
|
||||
// loader: 'babel-loader',
|
||||
// options: {
|
||||
// presets: [
|
||||
// [
|
||||
// '@babel/preset-env',
|
||||
// {
|
||||
// targets: {ie: '11'}, // 强制 ES5
|
||||
// corejs: 3,
|
||||
// useBuiltIns: 'entry',
|
||||
// },
|
||||
// ],
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
},
|
||||
|
||||
css: {
|
||||
|
||||
Reference in New Issue
Block a user