互联网-社管一张图-周边分析，半径值仅可输入1-60范围内数据，不满足，则提示“请输入1-60范围内的值!”

src/views/gis/layout/tools/analysis.vue

@@ -3,19 +3,19 @@
     <div class="draw-edit" v-if="cusTransfer.draw.center">
       <div class="draw-edit-content">
         周边范围：
-        <div class="radius-min __hover" @click="cusTransfer.draw.radius > 1 ? (cusTransfer.draw.radius--, setCircle()) : undefined">-</div>
+        <div class="radius-min __hover" @click="cusTransfer.draw.radius > 1 ? (cusTransfer.draw.radius--, handleRangeInput(cusTransfer.draw.radius)) : undefined">-</div>
         <CusFormColumn
             link="number"
             label=""
-            :min="1"
             :clearable="false"
             v-model:param="cusTransfer.draw.radius"
-            @blur="handleRangeBlur"/>
-        <div class="radius-max __hover" @click="cusTransfer.draw.radius++, setCircle()">+</div>
+            @input="handleRangeInput"/>
+        <div class="radius-max __hover" @click="cusTransfer.draw.radius < 60 ? (cusTransfer.draw.radius++, handleRangeInput(cusTransfer.draw.radius)) : undefined">+</div>
+        <div class="tips" v-if="cusTransfer.draw.radiusTips">请输入1~60的正整数！</div>
         km
       </div>
       <div class="__cus-buttons-3">
-        <div class="__cus-button-submit __hover" @click="initData">确定</div>
+        <div class="__cus-button-submit __hover" :style="`cursor: ${cusTransfer.draw.radiusTips ? 'not-allowed' : ''};`" @click="initData">确定</div>
         <div class="__cus-button-cancel __hover" @click="onCancel">取消</div>
       </div>
     </div>
@@ -138,7 +138,8 @@ export default defineComponent({
         draw: {
           center: null,
           radius: 5,
-          wkt: ''
+          wkt: '',
+          radiusTips: false
         },
         analysisDraw: <any>null,
         switchType: 'power',
@@ -178,11 +179,17 @@ export default defineComponent({
         analysisDrawHelpTooltipElement: null,
       },
     })
-    const handleRangeBlur = () => {
-      if (!state.cusTransfer.draw.radius) {
-        state.cusTransfer.draw.radius = 5
+    const handleRangeInput = (v) => {
+      const nV = Number(v)
+      if (!isNaN(Number(nV))) {
+        if (nV < 1 || nV > 60) {
+          state.cusTransfer.draw.radiusTips = true
+        } else {
+          state.cusTransfer.draw.radiusTips = false
+          state.cusTransfer.draw.radius = nV
+          setCircle()
+        }
       }
-      setCircle()
     }
     const initLayer = () => {
       store.state.gis.analysis.layer.setVisible(true)
@@ -249,7 +256,10 @@ export default defineComponent({
         state.cusTransfer.analysisDraw.on('drawend', drawendHandle);
         const getCircleParams = (circle) => {
           const sourceProj = props.map.getView().getProjection();
-          const radius = Math.round(circle.getRadius() * sourceProj.getMetersPerUnit() / 1000)
+          let radius = Math.round(circle.getRadius() * sourceProj.getMetersPerUnit() / 1000)
+          if (radius > 60) {
+            radius = 60
+          }
           state.cusTransfer.draw.center = circle.getCenter()
           state.cusTransfer.draw.radius = radius
           setCircle()
@@ -278,13 +288,15 @@ export default defineComponent({
       state.cusTransfer.draw.wkt = that.$easyMap.formatPosition.cpnTwpn(store.state.gis.analysis.feature.getGeometry().getCoordinates())
     }
     const initData = () => {
-      state.cusTransfer.result.isInit = true
-      state.cusTransfer.result.power.pageNum = 1
-      state.cusTransfer.result.device.pageNum = 1
-      store.dispatch('gis/LOAD_GIS_ANALYSIS', {
-        center: state.cusTransfer.draw.center,
-        wkt: state.cusTransfer.draw.wkt
-      })
+      if (!state.cusTransfer.draw.radiusTips) {
+        state.cusTransfer.result.isInit = true
+        state.cusTransfer.result.power.pageNum = 1
+        state.cusTransfer.result.device.pageNum = 1
+        store.dispatch('gis/LOAD_GIS_ANALYSIS', {
+          center: state.cusTransfer.draw.center,
+          wkt: state.cusTransfer.draw.wkt
+        })
+      }
     }
     const powerTableFilterCpt = computed(() => {
       return store.state.gis.analysis.power.filter(v => v.name.includes(state.cusTransfer.result.power.form.text))
@@ -375,7 +387,7 @@ export default defineComponent({
     })
     return {
       ...toRefs(state),
-      handleRangeBlur,
+      handleRangeInput,
       initData,
       setCircle,
       powerTableFilterCpt,
@@ -451,6 +463,31 @@ export default defineComponent({
         }
       }
     }
+    .tips {
+      $footH: 6px;
+      $bgColor: rgba(255, 255, 255, 0.8);
+      position: absolute;
+      top: -28px;
+      right: -10px;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #E60012;
+      background: $bgColor;
+      border-radius: 4px;
+      padding: 6px 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -$footH;
+        border-top: $footH solid $bgColor;
+        border-left: $footH solid transparent;
+        border-right: $footH solid transparent;
+      }
+    }
   }
 }
 .content {