修改

src/views/gis/business/common/VideoPlayKeda.vue

@@ -78,6 +78,12 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="scss">
+.drag {
+  color: red;
+  :deep(.vdr-stick-tm), :deep(.vdr-stick-mr), :deep(.vdr-stick-bm), :deep(.vdr-stick-ml) {
+    display: none;
+  }
+}
 .video-play-keda {
   width: 100%;
   height: 100%;

src/views/gis/business/common/business-main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="business-main-com">
+  <div class="business-main-com __background-grid">
     <div class="business-main-com_expend __hover" :class="{'business-main-com_expend-not': !expend}" @click="expend = !expend"></div>
     <div class="business-main-com_content __box-shadow" v-show="expend">
       <div class="business-main-com_content-head">
@@ -77,7 +77,6 @@ export default defineComponent({
   .business-main-com_content {
     width: 100%;
     height: 100%;
-    background-color: #FFFFFF;
     display: flex;
     flex-direction: column;
     .business-main-com_content-head {

src/views/gis/layout/index.vue

@@ -77,27 +77,27 @@
         </template>
       </div>
       <div v-if="qyParams.qyInfo.tab === '1'" class="qy-main-content-1">
-        <div>企业名称:{{qyParams.qyInfo[qyParams.qyInfo.tab].name}}</div>
-        <div>企业法人:{{qyParams.qyInfo[qyParams.qyInfo.tab].people}}</div>
-        <div>统一社会信用代码:{{qyParams.qyInfo[qyParams.qyInfo.tab].number}}</div>
-        <div>经营地址:{{qyParams.qyInfo[qyParams.qyInfo.tab].address}}</div>
+        <div>企业名称：{{qyParams.qyInfo[qyParams.qyInfo.tab].name}}</div>
+        <div>企业法人：{{qyParams.qyInfo[qyParams.qyInfo.tab].people}}</div>
+        <div>统一社会信用代码：{{qyParams.qyInfo[qyParams.qyInfo.tab].number}}</div>
+        <div>经营地址：{{qyParams.qyInfo[qyParams.qyInfo.tab].address}}</div>
       </div>
       <div v-else-if="qyParams.qyInfo.tab === '5'" class="qy-main-content-5">
         <div class="qy-main-content-5-radius">
           周边范围：
-          <div class="radius-min __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius > 1 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius--) : undefined">-</div>
+          <div class="radius-min __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius > 1 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius--, handleRangeInput(qyParams.qyInfo[qyParams.qyInfo.tab].radius)) : undefined">-</div>
           <CusFormColumn
               link="number"
               label=""
-              :min="1"
-              :max="60"
               :clearable="false"
               v-model:param="qyParams.qyInfo[qyParams.qyInfo.tab].radius"
+              @input="handleRangeInput"
               @blur="handleRangeBlur"/>
-          <div class="radius-max __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius < 60 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius++) : undefined">+</div>
+          <div class="radius-max __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius < 60 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius++, handleRangeInput(qyParams.qyInfo[qyParams.qyInfo.tab].radius)) : undefined">+</div>
           km
-          <div class="submit __hover" @click="onRadiusSubmit">确定</div>
+          <div class="submit __hover" :style="`cursor: ${qyParams.qyInfo[qyParams.qyInfo.tab].radiusTips ? 'not-allowed' : ''};`" @click="onRadiusSubmit">确定</div>
           <div class="reset __hover" @click="onRadiusReset">重置</div>
+          <div class="tips" v-if="qyParams.qyInfo[qyParams.qyInfo.tab].radiusTips"><SvgIcon name="tips" size="16" color="#FFB878"/>请输入1~60的正整数！</div>
         </div>
         <div class="qy-main-content-5-table" :style="`height: ${25 + (qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length > 5 ? 5 * 25 : qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length * 25)}px;`" v-loading="qyParams.qyInfo[qyParams.qyInfo.tab].loading" element-loading-background="rgba(0, 0, 0, 0.3)">
           <el-auto-resizer>
@@ -408,7 +408,8 @@ export default defineComponent({
                   radius: 10,
                   center: feat.getGeometry().getCoordinates(),
                   tableData: [],
-                  loading: false
+                  loading: false,
+                  radiusTips: false
                 },
               }
               feat.set('info', obj)
@@ -496,11 +497,21 @@ export default defineComponent({
       state.qyParams.tempSbFeature = null
     }
     const handleRangeBlur = () => {
-      if (!state.qyParams.qyInfo['5'].radius) {
-        state.qyParams.qyInfo['5'].radius = 10
-      }
+      // if (!state.qyParams.qyInfo['5'].radius) {
+      //   state.qyParams.qyInfo['5'].radius = 10
+      // }
       // setCircle()
     }
+    const handleRangeInput = (v) => {
+      const nV = Number(v)
+      if (!isNaN(Number(nV))) {
+        if (nV < 1 || nV > 60) {
+          state.qyParams.qyInfo['5'].radiusTips = true
+        } else {
+          state.qyParams.qyInfo['5'].radiusTips = false
+        }
+      }
+    }
     const setCircle = () => {
       const circle = turf.circle(state.qyParams.qyInfo.coordinates, state.qyParams.qyInfo['5'].radius, {steps: 1024, units: 'kilometers'})
       state.qyParams.analysisCircle.setGeometry(new geom.Polygon(circle.geometry.coordinates))
@@ -529,72 +540,75 @@ export default defineComponent({
         setCircle()
         state.map.addLayer(state.qyParams.analysisLayer)
       }
-      state.qyParams.analysisSource.clear()
-      state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
-      setCircle()
-      state.qyParams.qyInfo['5'].tableData = []
-      state.qyParams.qyInfo['5'].loading = true
-      that.$api.deviceQuery({
-        lon: state.qyParams.qyInfo.coordinates[0],
-        lat: state.qyParams.qyInfo.coordinates[1],
-        radius: state.qyParams.qyInfo['5'].radius
-      }).then((res: any) => {
-        // console.log(res)
-        // for (let i = 0; i < 500; i++) {
-        //   state.qyParams.qyInfo['5'].tableData.push({
-        //     name: '505县道新安村路口1-枪机-0110580_' + i,
-        //     code: '46044123124125125',
-        //     status: i % 3 === 0 ? '1' : '0',
-        //     typeName: '公安类',
-        //     type: i % 3 === 0 ? 'galsb' : (i % 3 === 1 ? 'shlsb' : 'mylsb'),
-        //     wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`
-        //   })
-        // }
-        if (res.resp_code === 0 && res.datas?.length > 0) {
-          console.log(res.datas?.length)
-          const features: any = []
-          res.datas?.forEach(v => {
-            try {
-              const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
-              let type = ''
-              if (v.type === '公安类') {
-                type = 'galsb'
-              } else if (v.type === '社会类') {
-                type = 'shlsb'
-              } else if (v.type === '民用类') {
-                type = 'mylsb'
-              }
-              feat.set('defaultStyle', SbStyle.sbStyle(type))
-              feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(type)])
-              feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
-              feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
-              feat.set('isAnalysis', true)
-              feat.set('resetStyle', () => {
-                if (feat.get('isAnalysis')) {
-                  feat.setStyle(feat.get('analysisStyle'))
-                } else {
-                  feat.setStyle(feat.get('defaultStyle'))
-                }
-              })
-              feat.setStyle(feat.get('analysisStyle'))
-              feat.set('featureType', 'sb')
-              feat.set('info', v)
-              feat.setId(v.deviceid)
-              features.push(feat)
-              state.qyParams.qyInfo['5'].tableData.push(v)
-            } catch (e) {
-              console.error('异常设备', v)
-            }
-          })
-          state.qyParams.analysisSource.addFeatures(features)
-        }
-        state.qyParams.qyInfo['5'].loading = false
-      }).catch(() => {
+      if (!state.qyParams.qyInfo['5'].radiusTips) {
+        state.qyParams.analysisSource.clear()
+        state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
+        setCircle()
+        state.qyParams.qyInfo['5'].tableData = []
         state.qyParams.qyInfo['5'].loading = true
-      })
+        that.$api.deviceQuery({
+          lon: state.qyParams.qyInfo.coordinates[0],
+          lat: state.qyParams.qyInfo.coordinates[1],
+          radius: state.qyParams.qyInfo['5'].radius
+        }).then((res: any) => {
+          // console.log(res)
+          // for (let i = 0; i < 500; i++) {
+          //   state.qyParams.qyInfo['5'].tableData.push({
+          //     name: '505县道新安村路口1-枪机-0110580_' + i,
+          //     code: '46044123124125125',
+          //     status: i % 3 === 0 ? '1' : '0',
+          //     typeName: '公安类',
+          //     type: i % 3 === 0 ? 'galsb' : (i % 3 === 1 ? 'shlsb' : 'mylsb'),
+          //     wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`
+          //   })
+          // }
+          if (res.resp_code === 0 && res.datas?.length > 0) {
+            console.log(res.datas?.length)
+            const features: any = []
+            res.datas?.forEach(v => {
+              try {
+                const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
+                let type = ''
+                if (v.type === '公安类') {
+                  type = 'galsb'
+                } else if (v.type === '社会类') {
+                  type = 'shlsb'
+                } else if (v.type === '民用类') {
+                  type = 'mylsb'
+                }
+                feat.set('defaultStyle', SbStyle.sbStyle(type))
+                feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(type)])
+                feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
+                feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
+                feat.set('isAnalysis', true)
+                feat.set('resetStyle', () => {
+                  if (feat.get('isAnalysis')) {
+                    feat.setStyle(feat.get('analysisStyle'))
+                  } else {
+                    feat.setStyle(feat.get('defaultStyle'))
+                  }
+                })
+                feat.setStyle(feat.get('analysisStyle'))
+                feat.set('featureType', 'sb')
+                feat.set('info', v)
+                feat.setId(v.deviceid)
+                features.push(feat)
+                state.qyParams.qyInfo['5'].tableData.push(v)
+              } catch (e) {
+                console.error('异常设备', v)
+              }
+            })
+            state.qyParams.analysisSource.addFeatures(features)
+          }
+          state.qyParams.qyInfo['5'].loading = false
+        }).catch(() => {
+          state.qyParams.qyInfo['5'].loading = true
+        })
+      }
     }
     const onRadiusReset = () => {
       state.qyParams.qyInfo['5'].radius = 10
+      state.qyParams.qyInfo['5'].radiusTips = false
       onRadiusSubmit()
     }
     const onPlay = () => {
@@ -631,6 +645,7 @@ export default defineComponent({
       onCloseQy,
       onCloseSb,
       handleRangeBlur,
+      handleRangeInput,
       setCircle,
       onRadiusSubmit,
       onRadiusReset,
@@ -1010,6 +1025,15 @@ export default defineComponent({
             color: #8FFFFF;
             margin-left: 8px;
           }
+          .tips {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            color: #FFB878;
+            .svg-icon {
+              margin-right: 2px;
+            }
+          }
         }
         .qy-main-content-5-table {
           margin-top: 10px;