Просмотр исходного кода

refactor(sb): 优化矩形坐标输入界面

- 将矩形角点坐标改为左上右下两点坐标
- 更新表单标签为左上经度、左上纬度、右下经度、右下纬度
- 移除角点3和角点4的输入字段
- 修改初始化数据结构,从4个点减少到2个点
- 更新验证提示信息为请填写左上右下坐标
- 调整界面布局以适应新的两点坐标输入方式
dazhaxie 3 дней назад
Родитель
Сommit
d786f4174e
1 измененных файлов с 6 добавлено и 34 удалено
  1. 6 34
      src/views/sb/info/SbInfo.vue

+ 6 - 34
src/views/sb/info/SbInfo.vue

@@ -237,55 +237,31 @@
       width="600px"
     >
       <a-form :form="initPointsForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
-        <a-divider orientation="left">矩形角点坐标</a-divider>
+        <a-divider orientation="left">矩形坐标(左上、右下)</a-divider>
         <a-row :gutter="16">
           <a-col :span="12">
-            <a-form-item label="角点1 经度">
+            <a-form-item label="左上经度">
               <a-input-number v-model="initPointsData.points[0].longitude" :step="0.000001" style="width: 100%" placeholder="经度"/>
             </a-form-item>
           </a-col>
           <a-col :span="12">
-            <a-form-item label="角点1 纬度">
+            <a-form-item label="左上纬度">
               <a-input-number v-model="initPointsData.points[0].latitude" :step="0.000001" style="width: 100%" placeholder="纬度"/>
             </a-form-item>
           </a-col>
         </a-row>
         <a-row :gutter="16">
           <a-col :span="12">
-            <a-form-item label="角点2 经度">
+            <a-form-item label="右下经度">
               <a-input-number v-model="initPointsData.points[1].longitude" :step="0.000001" style="width: 100%" placeholder="经度"/>
             </a-form-item>
           </a-col>
           <a-col :span="12">
-            <a-form-item label="角点2 纬度">
+            <a-form-item label="右下纬度">
               <a-input-number v-model="initPointsData.points[1].latitude" :step="0.000001" style="width: 100%" placeholder="纬度"/>
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="角点3 经度">
-              <a-input-number v-model="initPointsData.points[2].longitude" :step="0.000001" style="width: 100%" placeholder="经度"/>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="角点3 纬度">
-              <a-input-number v-model="initPointsData.points[2].latitude" :step="0.000001" style="width: 100%" placeholder="纬度"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="角点4 经度">
-              <a-input-number v-model="initPointsData.points[3].longitude" :step="0.000001" style="width: 100%" placeholder="经度"/>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="角点4 纬度">
-              <a-input-number v-model="initPointsData.points[3].latitude" :step="0.000001" style="width: 100%" placeholder="纬度"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
         <a-divider orientation="left">选择设备位置</a-divider>
         <a-form-item label="设备位置" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
           <a-select
@@ -389,8 +365,6 @@ export default {
       initPointsData: {
         points: [
           { longitude: undefined, latitude: undefined },
-          { longitude: undefined, latitude: undefined },
-          { longitude: undefined, latitude: undefined },
           { longitude: undefined, latitude: undefined }
         ],
         positionIds: [],
@@ -888,8 +862,6 @@ export default {
       this.initPointsData = {
         points: [
           { longitude: undefined, latitude: undefined },
-          { longitude: undefined, latitude: undefined },
-          { longitude: undefined, latitude: undefined },
           { longitude: undefined, latitude: undefined }
         ],
         positionIds: [],
@@ -904,7 +876,7 @@ export default {
         p => p.longitude !== undefined && p.longitude !== null && p.latitude !== undefined && p.latitude !== null
       )
       if (!validPoints) {
-        this.$message.warning('请填写完整的矩形四角点坐标')
+        this.$message.warning('请填写左上右下坐标')
         return
       }
       if (!this.initPointsData.positionIds || this.initPointsData.positionIds.length === 0) {