|
|
@ -6,10 +6,23 @@ import {areaConversion, calculateCenter, drawGridLines} from "@/utils/ruoyi.js";
|
|
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
|
import useSettingsStore from "@/store/modules/settings.js";
|
|
|
|
import useSettingsStore from "@/store/modules/settings.js";
|
|
|
|
import * as turf from '@turf/turf'
|
|
|
|
import * as turf from '@turf/turf'
|
|
|
|
|
|
|
|
|
|
|
|
const polygonRef = ref(null)
|
|
|
|
const polygonRef = ref(null)
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
|
|
|
|
const theme = computed(()=>settingsStore.theme)
|
|
|
|
|
|
|
|
// 显示地块列表
|
|
|
|
|
|
|
|
const showMassifList = ref(true)
|
|
|
|
// 当前地块
|
|
|
|
// 当前地块
|
|
|
|
const currentMassif = ref(null)
|
|
|
|
const currentMassif = ref(null)
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
|
|
|
// 基地id
|
|
|
|
|
|
|
|
const baseId = Number(route.params.baseId)
|
|
|
|
|
|
|
|
const baseInfo = ref({
|
|
|
|
|
|
|
|
baseId: baseId,
|
|
|
|
|
|
|
|
baseName: '测试基地1',
|
|
|
|
|
|
|
|
area: 1232.45
|
|
|
|
|
|
|
|
})
|
|
|
|
const control = reactive({
|
|
|
|
const control = reactive({
|
|
|
|
// 地图类型
|
|
|
|
// 地图类型
|
|
|
|
dataType: 1,
|
|
|
|
dataType: 1,
|
|
|
@ -28,8 +41,6 @@ const control = reactive({
|
|
|
|
})
|
|
|
|
})
|
|
|
|
// 鼠标工具ref
|
|
|
|
// 鼠标工具ref
|
|
|
|
const mouseToolRef = ref(null)
|
|
|
|
const mouseToolRef = ref(null)
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
|
|
|
// 绘制面积(亩)
|
|
|
|
// 绘制面积(亩)
|
|
|
|
const floorSpace = ref(0)
|
|
|
|
const floorSpace = ref(0)
|
|
|
|
const maxHeight = ref(window.innerHeight - 100);
|
|
|
|
const maxHeight = ref(window.innerHeight - 100);
|
|
|
@ -38,8 +49,7 @@ const zoom = ref(17);
|
|
|
|
const protract = ref(false)
|
|
|
|
const protract = ref(false)
|
|
|
|
// 显示鼠标绘制
|
|
|
|
// 显示鼠标绘制
|
|
|
|
const createdMouse = ref(false)
|
|
|
|
const createdMouse = ref(false)
|
|
|
|
// 基地id
|
|
|
|
|
|
|
|
const baseId = Number(route.params.baseId)
|
|
|
|
|
|
|
|
// 文本标记
|
|
|
|
// 文本标记
|
|
|
|
const componentText = ref([])
|
|
|
|
const componentText = ref([])
|
|
|
|
// 折线标记
|
|
|
|
// 折线标记
|
|
|
@ -49,7 +59,8 @@ const polygonList = reactive([
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
id: 1,
|
|
|
|
title: '测试地块1',
|
|
|
|
title: '测试地块1',
|
|
|
|
path:[
|
|
|
|
cropType: '甘蔗',
|
|
|
|
|
|
|
|
path: [
|
|
|
|
[
|
|
|
|
[
|
|
|
|
116.337325,
|
|
|
|
116.337325,
|
|
|
|
39.979046
|
|
|
|
39.979046
|
|
|
@ -71,12 +82,13 @@ const polygonList = reactive([
|
|
|
|
39.97906
|
|
|
|
39.97906
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
],
|
|
|
|
fillColor:'#09a882'
|
|
|
|
fillColor: undefined
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id:2,
|
|
|
|
id: 2,
|
|
|
|
title:'测试地块2',
|
|
|
|
title: '测试地块2',
|
|
|
|
path:[
|
|
|
|
cropType: '甘蔗',
|
|
|
|
|
|
|
|
path: [
|
|
|
|
[
|
|
|
|
[
|
|
|
|
116.338296,
|
|
|
|
116.338296,
|
|
|
|
39.978921
|
|
|
|
39.978921
|
|
|
@ -93,7 +105,8 @@ const polygonList = reactive([
|
|
|
|
116.33859,
|
|
|
|
116.33859,
|
|
|
|
39.978905
|
|
|
|
39.978905
|
|
|
|
]
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
|
|
|
|
fillColor:undefined
|
|
|
|
}
|
|
|
|
}
|
|
|
|
])
|
|
|
|
])
|
|
|
|
const polygonTemp = ref(null)
|
|
|
|
const polygonTemp = ref(null)
|
|
|
@ -118,7 +131,7 @@ const computeArea = (value) => {
|
|
|
|
// 修改多边形事件
|
|
|
|
// 修改多边形事件
|
|
|
|
const updateMassif = (value) => {
|
|
|
|
const updateMassif = (value) => {
|
|
|
|
// 获取多边形路径
|
|
|
|
// 获取多边形路径
|
|
|
|
let newPath = polygonRef.value.$$getInstance().getPath().map(item =>item.toArray())
|
|
|
|
let newPath = polygonRef.value.$$getInstance().getPath().map(item => item.toArray())
|
|
|
|
polygonTemp.value = newPath
|
|
|
|
polygonTemp.value = newPath
|
|
|
|
computeArea(newPath)
|
|
|
|
computeArea(newPath)
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -151,11 +164,11 @@ const resetMassif = () => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
confirmButtonText: '确认重置',
|
|
|
|
confirmButtonText: '确认重置',
|
|
|
|
cancelButtonText: '不,我再想想',
|
|
|
|
cancelButtonText: '不,我再想想',
|
|
|
|
customClass:'message-box'
|
|
|
|
customClass: 'message-box'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
|
|
|
)
|
|
|
|
.then(() => {
|
|
|
|
.then(() => {
|
|
|
|
if (mouseToolRef.value){
|
|
|
|
if (mouseToolRef.value) {
|
|
|
|
mouseToolRef.value.$$close(true)
|
|
|
|
mouseToolRef.value.$$close(true)
|
|
|
|
mouseToolRef.value.$$open()
|
|
|
|
mouseToolRef.value.$$open()
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -167,29 +180,30 @@ const resetMassif = () => {
|
|
|
|
// 点击确定完成绘制
|
|
|
|
// 点击确定完成绘制
|
|
|
|
const submitMassif = () => {
|
|
|
|
const submitMassif = () => {
|
|
|
|
lazyAMapApiLoaderInstance.then(() => {
|
|
|
|
lazyAMapApiLoaderInstance.then(() => {
|
|
|
|
if (polygonTemp.value.length<3){
|
|
|
|
if (polygonTemp.value.length < 3) {
|
|
|
|
ElMessage.error('地块至少需要三个点')
|
|
|
|
ElMessage.error('地块至少需要三个点')
|
|
|
|
return
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (let item of polygonList) {
|
|
|
|
for (let item of polygonList) {
|
|
|
|
if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(item.path,polygonTemp.value)){
|
|
|
|
if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value, item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value, item.path) || AMap.GeometryUtil.isRingInRing(item.path, polygonTemp.value)) {
|
|
|
|
ElMessage.error('当前地块与已有地块边界重合,请修改后再确认')
|
|
|
|
ElMessage.error('当前地块与已有地块边界重合,请修改后再确认')
|
|
|
|
return
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
polygonList.push({path:polygonTemp.value,edit:false})
|
|
|
|
polygonList.push({path: polygonTemp.value, edit: false})
|
|
|
|
polygonTemp.value = undefined
|
|
|
|
polygonTemp.value = undefined
|
|
|
|
createdMouse.value = false
|
|
|
|
createdMouse.value = false
|
|
|
|
protract.value = false
|
|
|
|
protract.value = false
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
watch(()=>polygonList,(value)=>{
|
|
|
|
watch(() => polygonList, (value) => {
|
|
|
|
componentText.value = []
|
|
|
|
componentText.value = []
|
|
|
|
value.forEach(item=>{
|
|
|
|
let sumArea = 0
|
|
|
|
|
|
|
|
value.forEach(item => {
|
|
|
|
let points = turf.points(item.path);
|
|
|
|
let points = turf.points(item.path);
|
|
|
|
// 格式化标签位置
|
|
|
|
// 格式化标签位置
|
|
|
|
componentText.value.push({text:item.title,position:turf.center(points).geometry.coordinates})
|
|
|
|
componentText.value.push({text: item.title, position: turf.center(points).geometry.coordinates})
|
|
|
|
// 格式化网格线显示
|
|
|
|
// 格式化网格线显示
|
|
|
|
// gridLines.value.push(drawGridLines(item.path))
|
|
|
|
// gridLines.value.push(drawGridLines(item.path))
|
|
|
|
var bbox = turf.bbox(turf.lineString(item.path));
|
|
|
|
var bbox = turf.bbox(turf.lineString(item.path));
|
|
|
@ -198,12 +212,33 @@ watch(()=>polygonList,(value)=>{
|
|
|
|
var options = {units: 'kilometers'};
|
|
|
|
var options = {units: 'kilometers'};
|
|
|
|
var squareGrid = turf.squareGrid(bbox, cellSide, options);
|
|
|
|
var squareGrid = turf.squareGrid(bbox, cellSide, options);
|
|
|
|
let newList = []
|
|
|
|
let newList = []
|
|
|
|
squareGrid.features.map(item => item.geometry.coordinates).forEach(item =>{
|
|
|
|
squareGrid.features.map(item => item.geometry.coordinates).forEach(item => {
|
|
|
|
newList.push(...item)
|
|
|
|
newList.push(...item)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
gridLines.value.push(newList)
|
|
|
|
gridLines.value.push(newList)
|
|
|
|
|
|
|
|
// 计算基地全部地块面积
|
|
|
|
|
|
|
|
lazyAMapApiLoaderInstance.then(() => {
|
|
|
|
|
|
|
|
// 算出平米
|
|
|
|
|
|
|
|
let number = Math.round(AMap.GeometryUtil.ringArea(item.path));
|
|
|
|
|
|
|
|
let number1 = areaConversion(number);
|
|
|
|
|
|
|
|
item.area = parseFloat(number1.toFixed(2))
|
|
|
|
|
|
|
|
// 算出亩
|
|
|
|
|
|
|
|
sumArea += number1
|
|
|
|
|
|
|
|
baseInfo.value.area = parseFloat(sumArea.toFixed(2))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},{deep:true,immediate:true})
|
|
|
|
})
|
|
|
|
|
|
|
|
}, {deep: true, immediate: true})
|
|
|
|
|
|
|
|
// 点击当前地块
|
|
|
|
|
|
|
|
const clickCurrentMassif = (item) => {
|
|
|
|
|
|
|
|
currentMassif.value = item
|
|
|
|
|
|
|
|
let points = turf.points(item.path);
|
|
|
|
|
|
|
|
polygonList.forEach(polygon =>{
|
|
|
|
|
|
|
|
polygon.fillColor = '#00B2D5'
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
item.fillColor = theme.value
|
|
|
|
|
|
|
|
// 点击的中心点
|
|
|
|
|
|
|
|
center.value = turf.center(points).geometry.coordinates
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
@ -241,6 +276,7 @@ watch(()=>polygonList,(value)=>{
|
|
|
|
:visible="true"
|
|
|
|
:visible="true"
|
|
|
|
:fillColor="polygon.fillColor"
|
|
|
|
:fillColor="polygon.fillColor"
|
|
|
|
:editable="false"
|
|
|
|
:editable="false"
|
|
|
|
|
|
|
|
@mousedown="clickCurrentMassif(polygon)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<!--多边形-->
|
|
|
|
<!--多边形-->
|
|
|
|
<el-amap-polygon
|
|
|
|
<el-amap-polygon
|
|
|
@ -272,7 +308,56 @@ watch(()=>polygonList,(value)=>{
|
|
|
|
<base-right-control v-if="!protract" v-model="control"/>
|
|
|
|
<base-right-control v-if="!protract" v-model="control"/>
|
|
|
|
<!--左侧操作区-->
|
|
|
|
<!--左侧操作区-->
|
|
|
|
<div v-if="!protract" class="operate map-left">
|
|
|
|
<div v-if="!protract" class="operate map-left">
|
|
|
|
<el-button @click="addMassif">添加地块</el-button>
|
|
|
|
<div class="massif-head">
|
|
|
|
|
|
|
|
<div class="title">{{ baseInfo.baseName }}</div>
|
|
|
|
|
|
|
|
<div class="all-area">{{ baseInfo.area }}亩</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="massif-control">
|
|
|
|
|
|
|
|
<el-button @click="addMassif" type="primary" plain icon="Plus">
|
|
|
|
|
|
|
|
添加地块
|
|
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
<div class="show-massif" @click="showMassifList = !showMassifList">
|
|
|
|
|
|
|
|
{{ showMassifList ? '收起' : '展开' }}地块
|
|
|
|
|
|
|
|
<i-down v-if="!showMassifList" theme="outline" size="20" fill="#5c5e5d"/>
|
|
|
|
|
|
|
|
<i-up v-if="showMassifList" theme="outline" size="20" fill="#5c5e5d"/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-collapse-transition>
|
|
|
|
|
|
|
|
<div class="massif-list" v-show="showMassifList">
|
|
|
|
|
|
|
|
<div class="massif-item" :class="{'massif-item-click':item.id === currentMassif?.id}" v-for="(item,index) in polygonList" @click="clickCurrentMassif(item)">
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
|
|
<div class="title-icon" :style="{background:theme}">
|
|
|
|
|
|
|
|
<i-more-app theme="outline" size="24" fill="#FFFFFF"/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="title-text">
|
|
|
|
|
|
|
|
{{ item.title || '' }}
|
|
|
|
|
|
|
|
<div class="crop">
|
|
|
|
|
|
|
|
{{ item.cropType || '' }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
|
|
<div class="massif-item-right">
|
|
|
|
|
|
|
|
<div class="area">
|
|
|
|
|
|
|
|
{{ item.area || 0 }}亩
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="enabled">
|
|
|
|
|
|
|
|
{{ item.enabled ? '启用' : '禁用' }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="more">
|
|
|
|
|
|
|
|
<i-more theme="outline" size="24" fill="#5c5e5d"/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-collapse-transition>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--绘制操作区-->
|
|
|
|
<!--绘制操作区-->
|
|
|
|
<div v-if="protract" class="protract-control operate">
|
|
|
|
<div v-if="protract" class="protract-control operate">
|
|
|
@ -298,45 +383,128 @@ watch(()=>polygonList,(value)=>{
|
|
|
|
pointer-events: all;
|
|
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//地图左侧操作区
|
|
|
|
//地图左侧操作区
|
|
|
|
.map-left{
|
|
|
|
.map-left {
|
|
|
|
background: #FFFFFF;
|
|
|
|
background: #FFFFFF;
|
|
|
|
width: 350px;
|
|
|
|
width: 350px;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
padding: 10px;
|
|
|
|
padding: 15px;
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
left: 10px;
|
|
|
|
top: 20px;
|
|
|
|
top: 20px;
|
|
|
|
//透明度
|
|
|
|
//透明度
|
|
|
|
opacity:0.9;
|
|
|
|
opacity: 0.9;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.massif-head {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.all-area {
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #5c5e5d;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.massif-control {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.show-massif {
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
color: #5c5e5d;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//地块列表
|
|
|
|
|
|
|
|
.massif-list {
|
|
|
|
|
|
|
|
.title-icon {
|
|
|
|
|
|
|
|
padding: 6px 5px 4px 5px;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.title-text{
|
|
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
.crop{
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.massif-item-click{
|
|
|
|
|
|
|
|
border: 1px solid v-bind(theme) !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.massif-item {
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
margin: 0 -5px;
|
|
|
|
|
|
|
|
.massif-item-right{
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #5c5e5d;
|
|
|
|
|
|
|
|
div{
|
|
|
|
|
|
|
|
margin: 0 3px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.more{
|
|
|
|
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//点标记图标样式
|
|
|
|
//点标记图标样式
|
|
|
|
.local-icon {
|
|
|
|
.local-icon {
|
|
|
|
width: 30px;
|
|
|
|
width: 30px;
|
|
|
|
height: 30px;
|
|
|
|
height: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//灵活点标记样式
|
|
|
|
//灵活点标记样式
|
|
|
|
:deep(.amap-marker-label) {
|
|
|
|
:deep(.amap-marker-label) {
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
padding: 5px 10px;
|
|
|
|
//padding: 5px 10px;
|
|
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//绘制操作区
|
|
|
|
//绘制操作区
|
|
|
|
.protract-control {
|
|
|
|
.protract-control {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
right: 30px;
|
|
|
|
top: 10px;
|
|
|
|
top: 50px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
|
|
<style lang="scss">
|
|
|
|
//修改确认弹窗样式
|
|
|
|
//修改确认弹窗样式
|
|
|
|
.message-box{
|
|
|
|
.message-box {
|
|
|
|
--el-messagebox-width: 450px;
|
|
|
|
--el-messagebox-width: 450px;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
.el-message-box__btns{
|
|
|
|
|
|
|
|
|
|
|
|
.el-message-box__btns {
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.el-button{
|
|
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
border-radius: 20px;
|
|
|
|
border-radius: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|