Merge branch 'mock' into v2

# Conflicts:
#	src/store/modules/gis.ts

package.json

@@ -12,7 +12,7 @@
     "@types/node": "^20.1.0",
     "animate.css": "^4.1.1",
     "axios": "^1.3.4",
-    "element-plus": "^2.4.3",
+    "element-plus": "^2.5.3",
     "sass": "^1.60.0",
     "uuid": "^9.0.0",
     "vue": "^3.3.9",

src/assets/svg/global/analysis-device.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M2.3,1.5c0-0.1,0.1-0.2,0.2-0.2h10.9c0.1,0,0.2,0.1,0.2,0.2v2.9c0,0.1-0.1,0.2-0.2,0.2H2.5
+	c-0.1,0-0.2-0.1-0.2-0.2V1.5z M3.5,2.4c0-0.1,0.1-0.2,0.2-0.2H5c0.1,0,0.2,0.1,0.2,0.2v1.2c0,0.1-0.1,0.2-0.2,0.2H3.7
+	c-0.1,0-0.2-0.1-0.2-0.2V2.4z M6.3,2.2C6.1,2.2,6,2.3,6,2.4v1.2c0,0.1,0.1,0.2,0.2,0.2h1.3c0.1,0,0.2-0.1,0.2-0.2V2.4
+	c0-0.1-0.1-0.2-0.2-0.2H6.3z"/>
+<path class="st0" d="M2.3,11.6c0-0.1,0.1-0.2,0.2-0.2h10.9c0.1,0,0.2,0.1,0.2,0.2v2.9c0,0.1-0.1,0.2-0.2,0.2H2.5
+	c-0.1,0-0.2-0.1-0.2-0.2V11.6z M3.5,12.5c0-0.1,0.1-0.2,0.2-0.2H5c0.1,0,0.2,0.1,0.2,0.2v1.2c0,0.1-0.1,0.2-0.2,0.2H3.7
+	c-0.1,0-0.2-0.1-0.2-0.2V12.5z M6.3,12.3c-0.1,0-0.2,0.1-0.2,0.2v1.2c0,0.1,0.1,0.2,0.2,0.2h1.3c0.1,0,0.2-0.1,0.2-0.2v-1.2
+	c0-0.1-0.1-0.2-0.2-0.2H6.3z"/>
+<path class="st0" d="M2.3,6.6c0-0.1,0.1-0.2,0.2-0.2h10.9c0.1,0,0.2,0.1,0.2,0.2v2.9c0,0.1-0.1,0.2-0.2,0.2H2.5
+	c-0.1,0-0.2-0.1-0.2-0.2V6.6z M3.5,7.6c0-0.1,0.1-0.2,0.2-0.2H5c0.1,0,0.2,0.1,0.2,0.2v1.2C5.2,8.8,5.1,9,5,9H3.7
+	C3.6,9,3.5,8.8,3.5,8.7V7.6z M6.3,7.3C6.1,7.3,6,7.4,6,7.6v1.2C6,8.8,6.1,9,6.3,9h1.3c0.1,0,0.2-0.1,0.2-0.2V7.6
+	c0-0.1-0.1-0.2-0.2-0.2L6.3,7.3L6.3,7.3z"/>
+</svg>

src/assets/svg/global/analysis-power.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+</style>
+<g id="Group_4913_00000002345991200329028690000006927082672944541617_">
+	<path id="Vector_00000145028868686656320590000004738418807195004076_" class="st0" d="M11.5,4.9c-0.3-0.6-1.7-1.1-3.4-1.1
+		s-3,0.5-3.4,1.1c-0.4-0.3-0.8-0.8-1-1.4C3.3,2,4.5,2.7,5.7,2.4c1-0.3,1.6-1.6,2.5-1.7c0.9,0.1,1.5,1.4,2.5,1.7s2.3-0.3,1.9,1
+		C12.3,4.1,12,4.6,11.5,4.9z M8.8,2c0.1-0.1,0.1-0.3,0-0.2c-0.1,0-0.3,0-0.4,0S8.2,1.7,8.1,1.6C8,1.7,7.9,1.8,7.8,1.8s-0.3,0-0.4,0
+		c-0.1-0.1,0,0,0,0.2s0,0.4-0.1,0.6c0,0.1,0,0.2,0,0.2C7.3,2.9,7.4,3,7.4,3c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.2,0.1
+		s0,0.1,0.1,0.1H8h0.1c0.2,0,0.2,0,0.2-0.1c0.1,0,0.2,0,0.2-0.1c0.1,0,0.1-0.1,0.2-0.2c0.1-0.1,0.2,0,0.2-0.1s0-0.2,0-0.3
+		c-0.1,0-0.1-0.1-0.1-0.2C8.8,2.2,8.8,2.1,8.8,2z M6,13.9l0.7-0.7l0.5,1.4H2.6c0,0,0.2-1.9,0.6-2.3c0.6-0.8,2.1-1,2.8-1.2V13.9z
+		 M4.9,5.4c0.9-0.7,2.1-1,3.3-0.9c1.2-0.1,2.3,0.2,3.3,0.9C10.3,5.8,9.2,6,8.1,5.9C7,6,5.9,5.8,4.9,5.4z M7.1,12.1l1-1l1,1l-0.6,1.4
+		l0.1,1.1h-1l0.1-1.1L7.1,12.1z M6.5,9.9c-0.5-0.4-1-1-1.2-1.6c-0.3,0-0.6-0.2-0.6-1c0-0.1,0-0.3,0-0.4s0.1-0.3,0.2-0.4
+		C4.8,6.4,4.8,6.3,4.8,6.2C5.9,6.5,7,6.7,8.1,6.6c1.2,0,2.3-0.2,3.5-0.5c-0.1,0.2-0.1,0.3-0.1,0.5c0.2,0.2,0.3,0.4,0.2,0.7
+		c-0.1,0.8-0.5,1-0.6,1c-0.2,0.6-0.6,1.2-1.2,1.6v0.6l-1.7,0.7l-1.6-0.7L6.5,9.9L6.5,9.9z M10.2,11.1c0.7,0.2,2.2,0.4,2.8,1.2
+		c0.4,0.4,0.6,2.3,0.6,2.3H9l0.5-1.4l0.7,0.7V11.1z"/>
+</g>
+</svg>

src/components/cus/CusTable.vue

@@ -20,7 +20,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column  v-if="showIndex" type="index" label="序号" align="center" fixed="left" width="60"/>
+        <el-table-column  v-if="showIndex" type="index" label="序号" align="center" fixed="left" width="40"/>
         <template v-for="(item, index) in tempTableHead" :key="index">
           <template v-if="item.children && item.children.length > 0">
             <el-table-column :label="item.label" v-if="item.show" align="center">
@@ -85,6 +85,7 @@
           :currentPage="page"
           :page-size="pageSize"
           :page-sizes="pageSizes"
+          :pager-count="5"
           :layout="pageLayoutCpt"
           :total="Number(total)"
           @size-change="handleSizeChange"
@@ -152,7 +153,7 @@ import {
         default: false
       },
       noLayout: {
-        default: () => ['sizes']
+        default: () => []
       },
       full: {
         default: false
@@ -322,6 +323,7 @@ import {
                   font-family: Microsoft YaHei;
                   font-weight: 400;
                   color: #757575;
+                  padding: 0;
                 }
               }
               &:first-child {

src/components/easyMap/func/base-draw.ts

@@ -14,6 +14,7 @@ import {unByKey} from "ol/Observable";
 import {formatPosition} from "@/utils/easyMap";
 import {isValue} from "@/utils/util";
 import {fromCircle} from "ol/geom/Polygon";
+import store from "@/store";
 
 const globalLineDash = [
     [0, 0], //实线
@@ -401,7 +402,27 @@ export const drawEdits = (map, obj, emitWkt) => {
                 };
                 const addInteraction = () => {
                     const id = 'baseDrawName'
+                    let drawLastPoint = ''
+                    let drawLastPointTimer: any = null
                     const draw = new interaction.Draw({
+                        stopClick: true,
+                        condition: (e) => {
+                            const str = e.coordinate.join(',')
+                            let flag = true
+                            // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                            if (!drawLastPointTimer && str === drawLastPoint) {
+                                flag = false
+                            } else {
+                                if (drawLastPointTimer) {
+                                    clearTimeout(drawLastPointTimer)
+                                }
+                                drawLastPoint = str
+                            }
+                            drawLastPointTimer = setTimeout(() => {
+                                drawLastPointTimer = null
+                            }, 1000)
+                            return flag
+                        },
                         source: _source,//测量绘制层数据源
                         type: obj.featureType,  //几何图形类型
                         // geometryFunction: typeSelect === 'rectangle' ? createBox() : null,
@@ -416,6 +437,7 @@ export const drawEdits = (map, obj, emitWkt) => {
                     let listener;
                     //绑定交互绘制工具开始绘制的事件
                     const drawstartHandle = (evt) => {
+                        store.commit('gis/SET_IS_DRAWING', true)
                         sketch = evt.feature; //绘制的要素
                         let tooltipCoord = evt.coordinate;// 绘制的坐标
                         //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -462,6 +484,9 @@ export const drawEdits = (map, obj, emitWkt) => {
                         map.un('pointermove', pointerMoveHandler)
                         const baseDrawFeature = evt.feature
                         getWkt(baseDrawFeature)
+                        setTimeout(() => {
+                            store.commit('gis/SET_IS_DRAWING', false)
+                        }, 600)
                     }
                     draw.on('drawend', drawendHandle);
                 }

src/components/easyMap/func/draw.ts

@@ -14,6 +14,7 @@ import './dom.scss'
 import {createBox} from "ol/interaction/Draw";
 import {Circle, LineString, Polygon} from "ol/geom";
 import {formatPosition} from '@/utils/easyMap'
+import store from "@/store";
 
 const layerFlag = ['layerName', 'drawLayer']
 let drawTooltipElement;
@@ -148,7 +149,49 @@ export default function Draw (map, typeSelect) {
             };
             const addInteraction = () => {
                 const id = 'drawName'
+                let drawLastPoint = ''
+                let drawLastPointTimer: any = null
+                let drawCircleDBClickTimer: any = null
                 const draw = new interaction.Draw({
+                    stopClick: true,
+                    condition: (e) => {
+                        // 圆形单击即触发finishCondition，跳过
+                        if (typeSelect === 'circle') {
+                            return true
+                        }
+                        const str = e.coordinate.join(',')
+                        let flag = true
+                        // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                        if (!drawLastPointTimer && str === drawLastPoint) {
+                            flag = false
+                        } else {
+                            if (drawLastPointTimer) {
+                                clearTimeout(drawLastPointTimer)
+                            }
+                            drawLastPoint = str
+                        }
+                        drawLastPointTimer = setTimeout(() => {
+                            drawLastPointTimer = null
+                        }, 1000)
+                        return flag
+                    },
+                    finishCondition: (e) => {
+                        if (typeSelect !== 'circle') {
+                            return true
+                        }
+                        let flag = true
+                        //  圆形进行双击延时监听判断
+                        if (!drawCircleDBClickTimer) {
+                            flag = false
+                        }
+                        if (drawCircleDBClickTimer) {
+                            clearTimeout(drawCircleDBClickTimer)
+                        }
+                        drawCircleDBClickTimer = setTimeout(() => {
+                            drawCircleDBClickTimer = null
+                        }, 1000)
+                        return flag
+                    },
                     source: _source,//测量绘制层数据源
                     // @ts-ignore
                     type: typeMapper.get(typeSelect),  //几何图形类型
@@ -181,6 +224,7 @@ export default function Draw (map, typeSelect) {
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
+                    store.commit('gis/SET_IS_DRAWING', true)
                     sketch = evt.feature; //绘制的要素
                     let tooltipCoord = evt.coordinate;// 绘制的坐标
                     //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -260,6 +304,9 @@ export default function Draw (map, typeSelect) {
                         wkt = formatPosition.cpnTwpn(circlePoly.getCoordinates())
                     }
                     resolve({feature: oldDrawFeature, wkt: wkt})
+                    setTimeout(() => {
+                        store.commit('gis/SET_IS_DRAWING', false)
+                    }, 600)
                 }
                 draw.on('drawend', drawendHandle);
             }

src/components/easyMap/func/location.ts

@@ -7,6 +7,7 @@ import * as proj from 'ol/proj'
 import * as interaction from 'ol/interaction'
 import * as coordinate from 'ol/coordinate'
 import * as format from "ol/format";
+import {fromExtent} from 'ol/geom/Polygon';
 // @ts-ignore
 import LocationImg from '../images/location.png'
 import {ElMessage} from "element-plus";
@@ -16,6 +17,14 @@ export let locationTooltipElement
 export default function Location ({map, position = null, wkt = null, zoom = null, color = '#039ff3'}) {
     try {
         const feat: any = new format.WKT().readFeature(position ? `POINT(${position[0]} ${position[1]})` : wkt)
+        const mapViewExtent = map.getView().get('extent')
+        if (mapViewExtent) {
+            const poly = fromExtent(mapViewExtent)
+            if (!poly.intersectsCoordinate(feat.getGeometry().getCoordinates())) {
+                ElMessage.warning('超出范围，无法定位该位置!')
+                return
+            }
+        }
         let _source
         const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
         if (realLayer[0]) {

src/components/easyMap/func/measure.ts

@@ -153,7 +153,49 @@ export default function Measure (map, typeSelect) {
         };
         const addInteraction = () => {
             const id = 'measureName'
+            let drawLastPoint = ''
+            let drawLastPointTimer: any = null
+            let drawCircleDBClickTimer: any = null
             const draw = new interaction.Draw({
+                stopClick: true,
+                condition: (e) => {
+                    // 圆形单击即触发finishCondition，跳过
+                    if (typeSelect === 'circle') {
+                        return true
+                    }
+                    const str = e.coordinate.join(',')
+                    let flag = true
+                    // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                    if (!drawLastPointTimer && str === drawLastPoint) {
+                        flag = false
+                    } else {
+                        if (drawLastPointTimer) {
+                            clearTimeout(drawLastPointTimer)
+                        }
+                        drawLastPoint = str
+                    }
+                    drawLastPointTimer = setTimeout(() => {
+                        drawLastPointTimer = null
+                    }, 1000)
+                    return flag
+                },
+                finishCondition: (e) => {
+                    if (typeSelect !== 'circle') {
+                        return true
+                    }
+                    let flag = true
+                    //  圆形进行双击延时监听判断
+                    if (!drawCircleDBClickTimer) {
+                        flag = false
+                    }
+                    if (drawCircleDBClickTimer) {
+                        clearTimeout(drawCircleDBClickTimer)
+                    }
+                    drawCircleDBClickTimer = setTimeout(() => {
+                        drawCircleDBClickTimer = null
+                    }, 1000)
+                    return flag
+                },
                 source: _source,//测量绘制层数据源
                 // @ts-ignore
                 type: typeMapper.get(typeSelect),  //几何图形类型
@@ -185,6 +227,7 @@ export default function Measure (map, typeSelect) {
             let listener;
             //绑定交互绘制工具开始绘制的事件
             const drawstartHandle = (evt) => {
+                store.commit('gis/SET_IS_DRAWING', true)
                 sketch = evt.feature; //绘制的要素
                 let tooltipCoord = evt.coordinate;// 绘制的坐标
                 //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -245,7 +288,10 @@ export default function Measure (map, typeSelect) {
                 draw.un('drawend', drawendHandle);
                 map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                 map.un('pointermove', pointerMoveHandler)
-                store.commit('gis/SET_IS_TOOLING', false)
+                store.dispatch('gis/LOAD_IS_TOOLING', false)
+                setTimeout(() => {
+                    store.commit('gis/SET_IS_DRAWING', false)
+                }, 600)
             }
             draw.on('drawend', drawendHandle);
         }

src/components/easyMap/initMapInfo.ts

@@ -15,8 +15,8 @@ const isInternet = window.cusConfig?.mapInternet
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],
   projection: "EPSG:4326",
-  zoom: 9
-  // extent: [120.8953306326286,31.3667480047968,121.37735577911297,31.692561298253832]
+  zoom: 9,
+  extent: [104,15,115,22]
 }
 const initBaseLayer = (obj: any) => {
   const layers: any = []

src/components/easyMap/ol-map.vue

@@ -49,7 +49,7 @@
     },
     props: {
       baseMapLayers: { default: () => [] },
-      baseMapView: {},
+      baseMapView: <any>{},
     },
     setup(props, { emit }) {
       const store = useStore();
@@ -63,7 +63,7 @@
           formatLatitude: <any>null,
         },
         interactionZoom: props.baseMapView.zoom,
-        realBaseLayers: null,
+        realBaseLayers: <any>null,
       });
       const easyMapOl = ref()
       const ref_easyMapOl = ref()
@@ -72,6 +72,10 @@
       const ref_easyMap_scaleLine = ref()
       const initMap = () => {
         state.realBaseLayers = props.baseMapLayers.map(v => InitMapInfoClass.isInternet ? InitMapInfoClass.initInternet(v) : InitMapInfoClass.initBaseLayer(v))
+        const view = new ol.View(props.baseMapView)
+        for (const baseMapViewKey in props.baseMapView) {
+          view.set(baseMapViewKey, props.baseMapView[baseMapViewKey])
+        }
         easyMapOl.value = new ol.Map({
           target: ref_easyMapOl.value,
           layers: [
@@ -81,7 +85,7 @@
               zIndex: 1
             }),
           ],
-          view: new ol.View(props.baseMapView),
+          view: view,
           controls: control.defaults({
             attribution: false,
             rotate: false,

src/store/modules/gis.ts

@@ -22,6 +22,7 @@ const formatWkt = (wkt) => {
 const featureTypeKey = 'featureType'
 
 const state = {
+  isDrawing: false,
   menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be',
   isTooling: false,
   videoParams: {
@@ -137,6 +138,9 @@ const getters = {
 }
 
 const mutations = {
+  SET_IS_DRAWING(state, flag) {
+    state.isDrawing = flag
+  }
 }
 
 const actions = {
@@ -399,26 +403,30 @@ const actions = {
         }
       }
       state.map.on('singleclick', e => {
-        let isFeature = false
-        e.map.forEachFeatureAtPixel(e.pixel, (feature) => {
-          if (!isFeature) {
-            isFeature = true
-            switch (feature.get(featureTypeKey)) {
-              case 'qy': clickQy(e, feature)
-                break
-              case 'sb': clickDefault(e, feature)
-                break
-              case 'qyAnalysisCircle': isFeature = false
-                break
-              case 'analysisCircle': isFeature = false
-                break
+        if (!state.isDrawing) {
+          let isFeature = false
+          e.map.forEachFeatureAtPixel(e.pixel, (feature) => {
+            if (!isFeature) {
+              isFeature = true
+              switch (feature.get(featureTypeKey)) {
+                case 'qy': clickQy(e, feature)
+                  break
+                case 'sb': clickDefault(e, feature)
+                  break
+                case 'qyAnalysisCircle': isFeature = false
+                  break
+                case 'analysisCircle': isFeature = false
+                  break
+                case 'statisticFeature': isFeature = false
+                  break
+              }
             }
+          }, {
+            hitTolerance: 0,
+          });
+          if (!isFeature) {
+            handleTileClick(e)
           }
-        }, {
-          hitTolerance: 0,
-        });
-        if (!isFeature) {
-          handleTileClick(e)
         }
       })
     }
@@ -791,41 +799,22 @@ const actions = {
       state.gisParams.default.overlay.setPosition(undefined)
       state.gisParams.default.feature = null
       dispatch('LOAD_GIS_ELEMENT')
+      dispatch('LOAD_GIS_ANALYSIS_ELEMENT')
     }
   },
   LOAD_GIS_ELEMENT({state, dispatch, getters, rootState}: any, activeArr: any = []) {
-    // const cql: any = ["(geoType = 2)"]
-    // cql.push(`(typeValue in (${getters['elementActiveArr'].length > 0 ? getters['elementActiveArr'].map(v => `'${v.value}'`).join(',') : -1}))`)
-    // const notIds: Array<string> = []
-    // if (state.gisParams.default.feature) {
-    //   notIds.push(`'${state.gisParams.default.feature.getId()}'`)
-    // }
-    // if (state.gisParams.qy.feature) {
-    //   notIds.push(`'${state.gisParams.qy.feature.getId()}'`)
-    // }
-    // if (notIds.length > 0) {
-    //   cql.push(`(dataId not in (${notIds.join(',')}))`)
-    // }
-    // let vp: null | string = null
-    // if (state.gisParams.qy.analysisWKT) {
-    //   vp = `locationValue:${formatWkt(state.gisParams.qy.analysisWKT)}`
-    // }
-    // if (state.analysis.wkt) {
-    //   vp = `locationValue:${formatWkt(state.analysis.wkt)}`
-    // }
-    // const tileWMS = new source.TileWMS({
-    //   url: `/${rootState.app.apiProxy.geoserverApi}/geoserver/mysqlGeo/wms`,
-    //   params: {
-    //     'FORMAT': 'image/png8',
-    //     'VERSION': '1.1.1',
-    //     "exceptions": 'application/vnd.ogc.se_inimage',
-    //     refresh: new Date().getTime(),
-    //     LAYERS: 'mysqlGeo:socialManagementElement',
-    //     viewparams: vp,
-    //     CQL_FILTER: `(${cql.join(' and ')})`
-    //   }
-    // })
-    // state.element.layer.setSource(tileWMS)
+    if (activeArr.length > 0) {
+      state.element.list.forEach(p => {
+        if (p.children?.length > 0) {
+          p.children.forEach(s => {
+            s.active = activeArr.includes(s.value)
+          })
+          p.active = p.children.every(v => v.active)
+        } else {
+          p.active = activeArr.includes(p.value)
+        }
+      })
+    }
     const cql: any = ["(geoType = 2)"]
     cql.push(`(typeValue in (${getters['elementActiveArr'].length > 0 ? getters['elementActiveArr'].map(v => `'${v.value}'`).join(',') : -1}))`)
     const notIds: Array<string> = []
@@ -941,7 +930,10 @@ const actions = {
             status: v.properties.online === '1' ? '在线' : '离线',
             type: rootGetters['dictionary/elementTypeMap'].get(v.properties.typeValue),
             distanceValue: turf.distance(center, [Number(v.geometry.coordinates[0]), Number(v.geometry.coordinates[1])], {units: 'kilometers'}).toFixed(3),
-            distance: turf.distance(center, [Number(v.geometry.coordinates[0]), Number(v.geometry.coordinates[1])], {units: 'kilometers'}).toFixed(2) + 'km'
+            distance: turf.distance(center, [Number(v.geometry.coordinates[0]), Number(v.geometry.coordinates[1])], {units: 'kilometers'}).toFixed(2) + 'km',
+            info: v.properties,
+            id: v.properties.dataId,
+            wkt: `POINT(${v.geometry.coordinates.join(' ')})`,
           })
         }
       })

src/style/cus.scss

@@ -72,21 +72,36 @@
     font-weight: 400;
     color: #AEAEAE;
   }
-  //.el-pagination__sizes {
-  //  .el-input {
-  //    max-width: 100px !important;
-  //    .el-input__wrapper {
-  //      padding-left: 8px !important;
-  //      padding-right: 8px !important;
-  //      .el-input__inner {
-  //        font-size: 14px;
-  //        font-family: Microsoft YaHei;
-  //        font-weight: 400;
-  //        color: #999999;
-  //      }
-  //    }
-  //  }
-  //}
+  .el-pagination__sizes {
+    .el-select {
+      width: auto;
+      height: 20px;
+      position: unset;
+      .el-select__wrapper {
+        position: unset;
+        color: #AEAEAE;
+        min-height: unset;
+        height: 100%;
+        padding: 0 4px;
+        .el-select__selection {
+          position: unset;
+          .el-select__selected-item {
+            position: unset;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #AEAEAE;
+            &.is-hidden {
+              display: none;
+            }
+            &.el-select__placeholder {
+              transform: none;
+            }
+          }
+        }
+      }
+    }
+  }
   .btn-prev, .btn-next {
     background-color: transparent !important;
     color: #AEAEAE !important;

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

@@ -45,7 +45,7 @@ export default defineComponent({
       expend: true
     })
     const toIndex = () => {
-      store.dispatch('gis/LOAD_GIS_ELEMENT', ['lgszyjkscsb', 'jgzzmgs', 'lgsjkyfl', 'galsb', 'shlsb', 'mylsb'])
+      store.dispatch('gis/LOAD_GIS_ELEMENT', store.state.dictionary.elementTypeList.filter(v => ['qy', 'sb'].includes(v.dictType)).map(v => v.dictValue))
       router.push('/gis/index')
     }
     onMounted(() => {

src/views/gis/business/common/focus-content.vue

@@ -5,8 +5,8 @@
       <div class="icon-1"/>
       <div class="icon-1"/>
       <div class="icon-1"/>
-      <div class="icon-2"/>
-      <div class="icon-2"/>
+<!--      <div class="icon-2"/>-->
+<!--      <div class="icon-2"/>-->
     </div>
     <div class="focus-content-com_slot">
       <slot/>
@@ -66,7 +66,7 @@ export default defineComponent({
     top: 0;
     left: 0;
     background: #FFFFFF;
-    border: 1px solid #D6D6D6;
+    border: 1px solid #f5f5f5;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -77,6 +77,7 @@ export default defineComponent({
       background-repeat: no-repeat;
       background-size: 100% 100%;
       position: absolute;
+      opacity: 0.3;
       &:nth-child(1) {
         left: 0;
         top: 0;

src/views/gis/business/enterprise/index.vue

@@ -90,10 +90,13 @@
         </div>
         <el-pagination
             class="__cus-pagination"
-            :current-page="enterprise.table.pageNum"
+            :currentPage="enterprise.table.pageNum"
             :page-size="enterprise.table.pageSize"
-            :total="enterprise.table.total"
-            layout="total,prev,pager,next,jumper"
+            :page-sizes="[10, 20, 30, 50, 100]"
+            :pager-count="5"
+            layout="total,sizes,prev,pager,next,jumper"
+            :total="Number(enterprise.table.total)"
+            @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
         />
       </div>
@@ -177,6 +180,11 @@ export default defineComponent({
       }
       onSearch()
     }
+    const handleSizeChange = (val: Number) => {
+      state.enterprise.table.pageNum = 1
+      state.enterprise.table.pageSize = val
+      handleSearch()
+    }
     const handleCurrentChange = (val: number) => {
       state.enterprise.table.pageNum = val
       handleSearch()
@@ -223,11 +231,12 @@ export default defineComponent({
     }
     const handleClick = (item) => {
       if (item.dataId === store.state.gis.gisParams.qy.feature?.getId()) {
-        store.state.gis.gisParams.qy.overlay.setPosition(store.state.gis.gisParams.qy.feature.getGeometry().getCoordinates())
-        store.state.gis.map.getView().animate({
-          center: store.state.gis.gisParams.qy.feature.getGeometry().getCoordinates(),
-          zoom: store.state.gis.gisParams.autoZoom,
-        });
+        // store.state.gis.gisParams.qy.overlay.setPosition(store.state.gis.gisParams.qy.feature.getGeometry().getCoordinates())
+        // store.state.gis.map.getView().animate({
+        //   center: store.state.gis.gisParams.qy.feature.getGeometry().getCoordinates(),
+        //   zoom: store.state.gis.gisParams.autoZoom,
+        // });
+        store.dispatch('gis/LOAD_GIS_PARAMS_QY_RESET')
       } else {
         axios({
           url: store.state.gis.element.layer.getSource().getUrls()[0],
@@ -263,13 +272,14 @@ export default defineComponent({
     })
     onActivated(() => {
       nextTick(() => {
-        store.dispatch('gis/LOAD_GIS_ELEMENT', ['lgszyjkscsb', 'jgzzmgs', 'lgsjkyfl'])
+        store.dispatch('gis/LOAD_GIS_ELEMENT', store.state.dictionary.elementTypeList.filter(v => ['qy'].includes(v.dictType)).map(v => v.dictValue))
       })
     })
     return {
       ...toRefs(state),
       onSearch,
       onReset,
+      handleSizeChange,
       handleCurrentChange,
       handleClick
     }

src/views/gis/layout/index.vue

@@ -126,7 +126,9 @@ export default defineComponent({
       toolsCom: null,
       toolsParams: {
         element: null,
-        position: null
+        position: null,
+        select: null,
+        analysis: null
       },
       videoLayout: {
         width: 640,
@@ -212,7 +214,6 @@ export default defineComponent({
       state.searchInput = val.name
       switch (val.featureType) {
         case 'qy': {
-          console.log(1)
           store.dispatch('gis/LOAD_GIS_PARAMS_QY_RESET')
           store.dispatch('gis/LOAD_GIS_PARAMS_QY', {
             wkt: val.wkt,
@@ -221,7 +222,6 @@ export default defineComponent({
           })
         } break
         case 'sb': {
-          console.log(2)
           store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_RESET')
           store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_SB', {
             wkt: val.wkt,
@@ -233,6 +233,8 @@ export default defineComponent({
     }
     const toolsHandleClick = (item) => {
       if (item.value === 'clear') {
+        state.toolsCom = null
+        state.toolsType = ''
         //  工具-标绘'layerName', 'toolDrawViewsLayer'
         state.map.getLayers().getArray().filter(v => v.get('layerName') === 'toolDrawViewsLayer')?.[0]?.getSource()?.clear()
         state.map.getOverlayById('toolOverlay')?.setPosition(undefined)
@@ -242,9 +244,18 @@ export default defineComponent({
         //  定位'layerName', 'positionLayer'
         state.map.getLayers().getArray().filter(v => v.get('layerName') === 'positionLayer')?.[0]?.getSource()?.clear()
         clearLocationDom()
+        //  框选清空
+        state.toolsParams.select?.clearFunc()
+        state.toolsParams.select = null
+        //  周边分析清空
+        state.toolsParams.analysis = null
       } else {
-        state.toolsCom = markRaw(item.com)
-        state.toolsType = (state.toolsType === item.value ? '' : item.value)
+        const _type = JSON.parse(JSON.stringify(state.toolsType))
+        state.toolsType = ''
+        setTimeout(() => {
+          state.toolsType = (_type === item.value ? '' : item.value)
+          state.toolsCom = markRaw(item.com)
+        }, 100)
       }
     }
     const mockSB1 = () => {

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

@@ -3,31 +3,31 @@
     <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>
     <div class="content __box-shadow" v-if="cusTransfer.result.isInit" v-loading="$store.state.gis.analysis.loading">
       <div class="head-tab">
         <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'power'}" @click="cusTransfer.switchType = 'power'">
-          <SvgIcon name="search"/>处置力量({{ $store.state.gis.analysis.power.length }}人)
+          <SvgIcon name="analysis-power"/>处置力量({{ $store.state.gis.analysis.power.length }}人)
         </div>
         <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'device'}" @click="cusTransfer.switchType = 'device'">
-          <SvgIcon name="search"/>设备({{ $store.state.gis.analysis.device.length }}台)
+          <SvgIcon name="analysis-device"/>设备({{ $store.state.gis.analysis.device.length }}台)
         </div>
-        <div class="head-tab-close __hover" @click="$emit('cancel')">
+        <div class="head-tab-close __hover" @click="onCancel">
           <SvgIcon name="close_2" color="#0069FF" size="14"/>
         </div>
       </div>
@@ -39,6 +39,7 @@
                 :span="24"
                 label="搜索:"
                 v-model:param="cusTransfer.result.power.tempForm.text"
+                @keyup.enter="onSearchPower"
             />
             <div class="__cus-buttons-2">
               <div class="__cus-button-submit __hover" @click="onSearchPower">搜索</div>
@@ -64,6 +65,7 @@
                 :span="24"
                 label="搜索:"
                 v-model:param="cusTransfer.result.device.tempForm.text"
+                @keyup.enter="onSearchDevice"
             />
             <div class="__cus-buttons-2">
               <div class="__cus-button-submit __hover" @click="onSearchDevice">搜索</div>
@@ -72,12 +74,15 @@
           </div>
           <div class="table">
             <CusTable
+                class="device-table"
                 :tableData="deviceTableDataCpt"
                 :tableHead="cusTransfer.result.device.head"
                 :total="deviceTableFilterCpt.length"
                 :page="cusTransfer.result.device.pageNum"
                 :pageSize="cusTransfer.result.device.pageSize"
                 @handlePage="handlePageDevice"
+                :row-class-name="deviceTableRowClassName"
+                @row-click="deviceHandleRowClick"
             >
             </CusTable>
           </div>
@@ -98,7 +103,7 @@ import {
   getCurrentInstance,
   ComponentInternalInstance,
   toRefs,
-  nextTick, onUnmounted
+  nextTick, onUnmounted, onBeforeUnmount
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
@@ -109,8 +114,7 @@ import * as style from "ol/style";
 import * as ol from "ol";
 import SelectChartCom from "@/views/gis/layout/tools/select-chart.vue";
 import * as turf from "@turf/turf";
-import axios from "axios";
-import {formatPosition} from "@/utils/easyMap";
+import store from "@/store";
 
 export default defineComponent({
   name: '',
@@ -136,7 +140,8 @@ export default defineComponent({
         draw: {
           center: null,
           radius: 5,
-          wkt: ''
+          wkt: '',
+          radiusTips: false
         },
         analysisDraw: <any>null,
         switchType: 'power',
@@ -159,8 +164,8 @@ export default defineComponent({
           },
           device: {
             head: [
-              {value: "name", label: "名称", show: true,},
-              {value: "status", label: "状态", show: true, width: 60},
+              {value: "name", label: "名称", show: true},
+              // {value: "status", label: "状态", show: true, width: 60},
               {value: "type", label: "类型", show: true, width: 90},
               {value: "distance", label: "距离", show: true, width: 90},
             ],
@@ -176,11 +181,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)
@@ -195,7 +206,7 @@ export default defineComponent({
           const id = 'analysisDrawHelpTooltipElementId'
           if (state.cusTransfer.analysisDrawHelpTooltipElement) {
             props.map.removeOverlay(props.map.getOverlayById(id))
-            state.cusTransfer.analysisDrawHelpTooltipElement.parentNode.removeChild(state.cusTransfer.analysisDrawHelpTooltipElement);
+            state.cusTransfer.analysisDrawHelpTooltipElement.parentNode?.removeChild(state.cusTransfer.analysisDrawHelpTooltipElement);
           }
           state.cusTransfer.analysisDrawHelpTooltipElement = document.createElement('div');
           state.cusTransfer.analysisDrawHelpTooltipElement.className = 'tooltip hidden';
@@ -209,7 +220,23 @@ export default defineComponent({
         }
         createHelpTooltip(); //创建帮助提示框
         //  标绘
+        let drawCircleDBClickTimer: any = null
         state.cusTransfer.analysisDraw = new interaction.Draw({
+          stopClick: true,
+          finishCondition: (e) => {
+            let flag = true
+            //  圆形进行双击延时监听判断
+            if (!drawCircleDBClickTimer) {
+              flag = false
+            }
+            if (drawCircleDBClickTimer) {
+              clearTimeout(drawCircleDBClickTimer)
+            }
+            drawCircleDBClickTimer = setTimeout(() => {
+              drawCircleDBClickTimer = null
+            }, 1000)
+            return flag
+          },
           source: store.state.gis.analysis.source,//测量绘制层数据源
           type: 'Circle',  //几何图形类型
           style: new style.Style({
@@ -226,6 +253,7 @@ export default defineComponent({
         // @ts-ignore
         props.map.addInteraction(state.cusTransfer.analysisDraw);
         const drawstartHandle = (evt) => {
+          store.commit('gis/SET_IS_DRAWING', true)
           sketch = evt.feature; //绘制的要素
         }
         state.cusTransfer.analysisDraw.on('drawstart', drawstartHandle);
@@ -241,12 +269,22 @@ export default defineComponent({
           props.map.un('pointermove', pointerMoveHandler)
           state.cusTransfer.analysisDraw = null
           store.state.gis.analysis.feature = evt.feature
+          store.state.gis.analysis.feature.set('featureType', 'analysisCircle')
           getCircleParams(evt.feature.getGeometry())
+          setTimeout(() => {
+            store.commit('gis/SET_IS_DRAWING', false)
+          }, 600)
         }
         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
+          }
+          if (radius < 1) {
+            radius = 1
+          }
           state.cusTransfer.draw.center = circle.getCenter()
           state.cusTransfer.draw.radius = radius
           setCircle()
@@ -260,9 +298,11 @@ export default defineComponent({
           if (sketch) {
             helpMsg = '双击结束标绘';
           }
-          state.cusTransfer.analysisDrawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
-          helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
-          state.cusTransfer.analysisDrawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+          if (state.cusTransfer.analysisDrawHelpTooltipElement) {
+            state.cusTransfer.analysisDrawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
+            helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
+            state.cusTransfer.analysisDrawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+          }
         };
         props.map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
       }
@@ -273,13 +313,16 @@ 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
+        })
+        that.$easyMap.getShapeView(props.map, that.$easyMap.formatPosition.wpnTcpn(state.cusTransfer.draw.wkt)[0])
+      }
     }
     const powerTableFilterCpt = computed(() => {
       return store.state.gis.analysis.power.filter(v => v.name.includes(state.cusTransfer.result.power.form.text))
@@ -322,8 +365,26 @@ export default defineComponent({
       onSearchDevice()
     }
     const onCancel = () => {
+      emit('update:transfer', null)
       emit('cancel')
     }
+    const deviceTableRowClassName = ({row}) => {
+      if (row.id === store.state.gis.gisParams.default.feature?.getId()) {
+        return 'row-active'
+      }
+      return ''
+    }
+    const deviceHandleRowClick = (row) => {
+      if (row.id === store.state.gis.gisParams.default.feature?.getId()) {
+        store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_RESET')
+      } else {
+        store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_SB', {
+          wkt: row.wkt,
+          id: row.id,
+          info: row.info
+        })
+      }
+    }
     watch(() => state.cusTransfer, () => {
       emit('update:transfer', state.cusTransfer)
     }, { deep: true })
@@ -342,17 +403,22 @@ export default defineComponent({
         initLayer()
       }
     })
+    onBeforeUnmount(() => {
+      state.cusTransfer.draw.radiusTips = false
+      emit('update:transfer', state.cusTransfer)
+    })
     onUnmounted(() => {
       state.cusTransfer.result.isInit = false
       store.state.gis.analysis.layer.setVisible(false)
       if (state.cusTransfer.analysisDraw) {
         props.map.removeInteraction(state.cusTransfer.analysisDraw);
       }
+      state.cusTransfer.analysisDrawHelpTooltipElement?.parentNode.removeChild(state.cusTransfer.analysisDrawHelpTooltipElement);
       store.dispatch('gis/LOAD_GIS_ANALYSIS_RESET')
     })
     return {
       ...toRefs(state),
-      handleRangeBlur,
+      handleRangeInput,
       initData,
       setCircle,
       powerTableFilterCpt,
@@ -365,7 +431,9 @@ export default defineComponent({
       handlePageDevice,
       onSearchDevice,
       onResetDevice,
-      onCancel
+      onCancel,
+      deviceTableRowClassName,
+      deviceHandleRowClick,
     }
   },
 })
@@ -426,6 +494,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 {
@@ -496,6 +589,27 @@ export default defineComponent({
     }
     .table {
       flex: 1;
+      :deep(.row-active) {
+        >td {
+          background: rgba(16,140,243,0.1);
+        }
+      }
+      :deep(.device-table) {
+        .el-table__row {
+          .el-table__cell:nth-child(2) {
+            .cell {
+              width: 80px;
+              -webkit-line-clamp: 2;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis !important;
+              word-break: break-all !important;
+              white-space: normal !important;
+            }
+          }
+        }
+      }
     }
   }
 }

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

@@ -169,7 +169,11 @@ export default defineComponent({
       const lonS = state.cusTransfer.format.isEast ? 1 : -1
       const latS = state.cusTransfer.format.isSouth ? -1 : 1
       const coor = [lonS * convertGPSToXY(state.cusTransfer.format[state.cusTransfer.tab].lon1, state.cusTransfer.format[state.cusTransfer.tab].lon2, state.cusTransfer.format[state.cusTransfer.tab].lon3), latS * convertGPSToXY(state.cusTransfer.format[state.cusTransfer.tab].lat1, state.cusTransfer.format[state.cusTransfer.tab].lat2, state.cusTransfer.format[state.cusTransfer.tab].lat3)]
-      props.mapFunc.toLocation({position: coor})
+      if (coor[0] && coor[1]) {
+        props.mapFunc.toLocation({position: coor})
+      } else {
+        ElMessage.warning('请输入坐标！')
+      }
     }
     onMounted(() => {
       if (props.transfer) {

src/views/gis/layout/tools/select-chart.vue

@@ -44,6 +44,16 @@ export default defineComponent({
     const initChart = () => {
       const chart = echarts.init(ref_chart.value);
       const option = {
+        title: {
+          show: props.data.length === 0,
+          text: '暂无数据',
+          left: 'center',
+          top: '50%',
+          textStyle: {
+            color: '#4C4C4C',
+            fontWeight: 'normal'
+          }
+        },
         tooltip: {
           trigger: 'item'
         },

src/views/gis/layout/tools/select-draw.ts

@@ -13,6 +13,7 @@ import { unByKey } from 'ol/Observable'
 import {createBox} from "ol/interaction/Draw";
 import {Circle, LineString, Polygon} from "ol/geom";
 import {formatPosition} from '@/utils/easyMap'
+import store from "@/store";
 
 const layerFlag = ['layerName', 'selectDrawLayer']
 let drawTooltipElement;
@@ -24,6 +25,8 @@ const typeMapper = new Map([
     ['circle', 'Circle'],
 ])
 let oldDrawFeature
+let selectDraw: any = null
+const drawId = 'selectDrawName'
 /**
  *
  * @param map
@@ -146,8 +149,49 @@ export default function SelectDraw (map, typeSelect) {
                 return output;
             };
             const addInteraction = () => {
-                const id = 'selectDrawName'
-                const draw = new interaction.Draw({
+                let drawLastPoint = ''
+                let drawLastPointTimer: any = null
+                let drawCircleDBClickTimer: any = null
+                selectDraw = new interaction.Draw({
+                    stopClick: true,
+                    condition: (e) => {
+                        // 圆形单击即触发finishCondition，跳过
+                        if (typeSelect === 'circle') {
+                            return true
+                        }
+                        const str = e.coordinate.join(',')
+                        let flag = true
+                        // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                        if (!drawLastPointTimer && str === drawLastPoint) {
+                            flag = false
+                        } else {
+                            if (drawLastPointTimer) {
+                                clearTimeout(drawLastPointTimer)
+                            }
+                            drawLastPoint = str
+                        }
+                        drawLastPointTimer = setTimeout(() => {
+                            drawLastPointTimer = null
+                        }, 1000)
+                        return flag
+                    },
+                    finishCondition: (e) => {
+                        if (typeSelect !== 'circle') {
+                            return true
+                        }
+                        let flag = true
+                        //  圆形进行双击延时监听判断
+                        if (!drawCircleDBClickTimer) {
+                            flag = false
+                        }
+                        if (drawCircleDBClickTimer) {
+                            clearTimeout(drawCircleDBClickTimer)
+                        }
+                        drawCircleDBClickTimer = setTimeout(() => {
+                            drawCircleDBClickTimer = null
+                        }, 1000)
+                        return flag
+                    },
                     source: _source,//测量绘制层数据源
                     // @ts-ignore
                     type: typeMapper.get(typeSelect),  //几何图形类型
@@ -173,13 +217,14 @@ export default function SelectDraw (map, typeSelect) {
                         }),
                     }),
                 });
-                draw.set(id, id)
+                selectDraw.set(drawId, drawId)
                 createMeasureTooltip(); //创建测量工具提示框
                 createHelpTooltip(); //创建帮助提示框
-                map.addInteraction(draw);
+                map.addInteraction(selectDraw);
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
+                    store.commit('gis/SET_IS_DRAWING', true)
                     sketch = evt.feature; //绘制的要素
                     let tooltipCoord = evt.coordinate;// 绘制的坐标
                     //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -200,7 +245,7 @@ export default function SelectDraw (map, typeSelect) {
                         // measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
                     });
                 }
-                draw.on('drawstart', drawstartHandle);
+                selectDraw.on('drawstart', drawstartHandle);
                 //绑定交互绘制工具结束绘制的事件
                 const copy = (value) => {
                     const str = document.createElement('input')
@@ -211,7 +256,7 @@ export default function SelectDraw (map, typeSelect) {
                     document.body.removeChild(str)
                 }
                 const drawendHandle = (evt) => {
-                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
+                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)[0]);
                     // const del = document.createElement("div");
                     // del.className = "lineDel";
                     // drawTooltipElement.append(del);
@@ -238,9 +283,9 @@ export default function SelectDraw (map, typeSelect) {
                     drawHelpTooltipElement.parentNode.removeChild(drawHelpTooltipElement);
                     drawHelpTooltipElement = null; //置空测量工具提示框对象
                     unByKey(listener);
-                    draw.un('drawstart', drawstartHandle);
-                    draw.un('drawend', drawendHandle);
-                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
+                    selectDraw.un('drawstart', drawstartHandle);
+                    selectDraw.un('drawend', drawendHandle);
+                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)[0]);
                     map.un('pointermove', pointerMoveHandler)
                     if (oldDrawFeature) {
                         _source.removeFeature(oldDrawFeature)
@@ -259,8 +304,11 @@ export default function SelectDraw (map, typeSelect) {
                         wkt = formatPosition.cpnTwpn(circlePoly.getCoordinates())
                     }
                     resolve({feature: oldDrawFeature, wkt: wkt})
+                    setTimeout(() => {
+                        store.commit('gis/SET_IS_DRAWING', false)
+                    }, 600)
                 }
-                draw.on('drawend', drawendHandle);
+                selectDraw.on('drawend', drawendHandle);
             }
             addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
             const pointerMoveHandler = (evt) => {
@@ -278,9 +326,11 @@ export default function SelectDraw (map, typeSelect) {
                     //     helpMsg = continueMsg; //绘制线时提示相应内容
                     // }
                 }
-                drawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
-                helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
-                drawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+                if (drawHelpTooltipElement) {
+                    drawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
+                    helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
+                    drawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+                }
             };
             map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
             //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
@@ -303,3 +353,16 @@ export const SelectDrawClear = (map) => {
         oldDrawFeature = null
     }
 }
+
+export const InteractionDrawClear = (map) => {
+    const draw = map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)?.[0]
+    if (draw) {
+        map.removeInteraction(draw)
+        selectDraw = null
+    }
+    drawTooltipElement?.parentNode?.removeChild(drawTooltipElement)
+    drawTooltipElement = null
+    drawHelpTooltipElement?.parentNode?.removeChild(drawHelpTooltipElement)
+    drawHelpTooltipElement = null
+}
+

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

@@ -22,8 +22,11 @@
         </div>
       </div>
     </div>
-    <div class="result __box-shadow" v-if="cusTransfer.selectParams.wkt">
-      <div class="head">查询结果</div>
+    <div class="result __box-shadow" v-if="cusTransfer.selectParams.wkt" v-loading="cusTransfer.result.table.loading">
+      <div class="head">
+        查询结果
+        <SvgIcon class="__hover" name="close_2" size="14" @click="mapClear"/>
+      </div>
       <div class="chart">
         <SelectChartCom :data="hasTypeCpt"/>
       </div>
@@ -36,6 +39,9 @@
               label="类型:"
               v-model:param="cusTransfer.result.tempForm.type"
               :options="hasTypeCpt"
+              static
+              multiple
+              collapse-tags
           />
           <div class="two">
             <CusFormColumn
@@ -43,6 +49,7 @@
                 :span="24"
                 label="搜索:"
                 v-model:param="cusTransfer.result.tempForm.name"
+                @keyup.enter="onSearch"
             />
             <div class="__cus-buttons-2">
               <div class="__cus-button-submit __hover" @click="onSearch">搜索</div>
@@ -50,7 +57,7 @@
             </div>
           </div>
         </div>
-        <div class="table" v-loading="cusTransfer.result.table.loading">
+        <div class="table">
           <CusTable
               ref="ref_cusTable"
               :tableData="resultTableDataCpt"
@@ -59,6 +66,8 @@
               :page="cusTransfer.result.table.pageNum"
               :pageSize="cusTransfer.result.table.pageSize"
               @handlePage="handlePage"
+              :row-class-name="tableRowClassName"
+              @row-click="handleRowClick"
           >
           </CusTable>
         </div>
@@ -85,7 +94,7 @@ import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import SelectChartCom from './select-chart.vue'
 import axios from "axios";
-import SelectDraw, {SelectDrawClear} from "./select-draw";
+import SelectDraw, {SelectDrawClear, InteractionDrawClear} from "./select-draw";
 
 export default defineComponent({
   name: '',
@@ -116,12 +125,12 @@ export default defineComponent({
         result: {
           form: {},
           tempForm: {
-            type: '',
+            type: [],
             name: ''
           },
           table: {
             head: [
-              {value: "type", label: "类型", show: true, align: 'left', width: 100},
+              {value: "typeName", label: "类型", show: true, align: 'left', width: 100},
               {value: "name", label: "名称", show: true, align: 'left'},
             ],
             data: <any>[],
@@ -141,12 +150,13 @@ export default defineComponent({
       state.cusTransfer.result.table.data = []
       state.cusTransfer.result.table.pageNum = 1
       state.cusTransfer.result.form = {
-        type: '',
+        type: [],
         name: ''
       }
     }
     const mapDraw = (type) => {
-      SelectDraw(props.map, type).then(({feature, wkt}) => {
+      SelectDraw(props.map, type).then(({feature, wkt}: any) => {
+        feature.set('featureType', 'statisticFeature')
         state.cusTransfer.selectParams.type = type
         state.cusTransfer.selectParams.wkt = wkt
         initData()
@@ -170,10 +180,22 @@ export default defineComponent({
           }
         }).then(res => {
           state.cusTransfer.result.table.data = res.data.features.map(v => {
-            return {
+            const obj = {
               name: v.properties.name,
-              type: store.getters['dictionary/elementTypeMap'].get(v.properties.typeValue)
+              typeName: store.getters['dictionary/elementTypeMap'].get(v.properties.typeValue),
+              type: v.properties.typeValue,
+              info: v.properties,
+              id: v.properties.dataId,
+              typeValue: v.properties.typeValue,
+              wkt: `POINT(${v.geometry.coordinates.join(' ')})`,
+              featureType: '',
+            }
+            if (['lgszyjkscsb', 'jgzzmgs', 'lgsjkyfl'].includes(v.properties.typeValue)) {
+              obj.featureType = 'qy'
+            } else if (['gal', 'shl', 'myl'].includes(v.properties.typeValue)) {
+              obj.featureType = 'sb'
             }
+            return obj
           })
           state.cusTransfer.result.table.loading = false
         }).catch(() => {
@@ -182,7 +204,7 @@ export default defineComponent({
       }
     }
     const resultTableFilterCpt = computed(() => {
-      return state.cusTransfer.result.table.data.filter(v => (!state.cusTransfer.result.form.type || v.type === state.cusTransfer.result.form.type) && v.name.includes(state.cusTransfer.result.form.name))
+      return state.cusTransfer.result.table.data.filter(v => (state.cusTransfer.result.form.type.length === 0 || state.cusTransfer.result.form.type.includes(v.typeName)) && v.name.includes(state.cusTransfer.result.form.name))
     })
     const resultTableDataCpt = computed(() => {
       return resultTableFilterCpt.value.slice((state.cusTransfer.result.table.pageNum - 1) * state.cusTransfer.result.table.pageSize, state.cusTransfer.result.table.pageNum * state.cusTransfer.result.table.pageSize)
@@ -194,10 +216,10 @@ export default defineComponent({
     const hasTypeCpt = computed(() => {
       const m = new Map()
       state.cusTransfer.result.table.data.forEach(v => {
-        if (m.has(v.type)) {
-          m.set(v.type, m.get(v.type) + 1)
+        if (m.has(v.typeName)) {
+          m.set(v.typeName, m.get(v.typeName) + 1)
         } else {
-          m.set(v.type, 1)
+          m.set(v.typeName, 1)
         }
       })
       const arr: any = []
@@ -217,10 +239,45 @@ export default defineComponent({
     const onReset = () => {
       state.cusTransfer.result.tempForm = {
         name: '',
-        type: ''
+        type: []
       }
       onSearch()
     }
+    const tableRowClassName = ({row}) => {
+      if (
+        (row.featureType === 'qy' && row.id === store.state.gis.gisParams.qy.feature?.getId()) ||
+        (row.featureType === 'sb' && row.id === store.state.gis.gisParams.default.feature?.getId())
+      ) {
+        return 'row-active'
+      }
+      return ''
+    }
+    const handleRowClick = (row) => {
+      switch (row.featureType) {
+        case 'qy': {
+          if (row.id === store.state.gis.gisParams.qy.feature?.getId()) {
+            store.dispatch('gis/LOAD_GIS_PARAMS_QY_RESET')
+          } else {
+            store.dispatch('gis/LOAD_GIS_PARAMS_QY', {
+              wkt: row.wkt,
+              id: row.id,
+              info: row.info
+            })
+          }
+        } break
+        case 'sb': {
+          if (row.id === store.state.gis.gisParams.default.feature?.getId()) {
+            store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_RESET')
+          } else {
+            store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_SB', {
+              wkt: row.wkt,
+              id: row.id,
+              info: row.info
+            })
+          }
+        } break
+      }
+    }
     watch(() => state.cusTransfer, () => {
       emit('update:transfer', state.cusTransfer)
     }, { deep: true })
@@ -228,7 +285,7 @@ export default defineComponent({
       if (props.transfer) {
         state.cusTransfer = props.transfer
       } else {
-        emit('update:transfer', state.cusTransfer)
+        emit('update:transfer', Object.assign(state.cusTransfer, {clearFunc: mapClear}))
       }
       state.cusTransfer.result.form = JSON.parse(JSON.stringify(state.cusTransfer.result.tempForm))
       const realLayer = props.map?.getLayers().getArray().filter(v => v.get('layerName') === 'selectDrawLayer')?.[0]
@@ -241,6 +298,7 @@ export default defineComponent({
       if (realLayer) {
         realLayer.setVisible(false)
       }
+      InteractionDrawClear(props.map)
     })
     return {
       ...toRefs(state),
@@ -251,7 +309,9 @@ export default defineComponent({
       handlePage,
       hasTypeCpt,
       onSearch,
-      onReset
+      onReset,
+      tableRowClassName,
+      handleRowClick,
     }
   },
 })
@@ -333,6 +393,10 @@ export default defineComponent({
       align-items: center;
       padding-left: 14px;
       border-bottom: 1px solid #EEEEEE;
+      .svg-icon {
+        margin-left: auto;
+        margin-right: 14px;
+      }
     }
     .chart {
       height: 212px;
@@ -358,6 +422,11 @@ export default defineComponent({
       }
       .table {
         flex: 1;
+        :deep(.row-active) {
+          >td {
+            background: rgba(16,140,243,0.1);
+          }
+        }
       }
     }
   }

src/views/gis/layout/tools/tool-draw.ts

@@ -283,7 +283,49 @@ export const draw = (map, obj) => {
                 };
                 const addInteraction = () => {
                     const id = 'baseDrawName'
+                    let drawLastPoint = ''
+                    let drawLastPointTimer: any = null
+                    let drawCircleDBClickTimer: any = null
                     const draw = new interaction.Draw({
+                        stopClick: true,
+                        condition: (e) => {
+                            // 圆形单击即触发finishCondition，跳过
+                            if (obj.featureType === 'Circle') {
+                                return true
+                            }
+                            const str = e.coordinate.join(',')
+                            let flag = true
+                            // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                            if (!drawLastPointTimer && str === drawLastPoint) {
+                                flag = false
+                            } else {
+                                if (drawLastPointTimer) {
+                                    clearTimeout(drawLastPointTimer)
+                                }
+                                drawLastPoint = str
+                            }
+                            drawLastPointTimer = setTimeout(() => {
+                                drawLastPointTimer = null
+                            }, 1000)
+                            return flag
+                        },
+                        finishCondition: (e) => {
+                            if (obj.featureType !== 'Circle') {
+                                return true
+                            }
+                            let flag = true
+                            //  圆形进行双击延时监听判断
+                            if (!drawCircleDBClickTimer) {
+                                flag = false
+                            }
+                            if (drawCircleDBClickTimer) {
+                                clearTimeout(drawCircleDBClickTimer)
+                            }
+                            drawCircleDBClickTimer = setTimeout(() => {
+                                drawCircleDBClickTimer = null
+                            }, 1000)
+                            return flag
+                        },
                         source: _source,//测量绘制层数据源
                         type: obj.rectangle ? 'LineString' : obj.featureType,  //几何图形类型
                         // @ts-ignore
@@ -291,7 +333,6 @@ export const draw = (map, obj) => {
                         geometryFunction: obj.rectangle ? createBox() : null,
                         // geometryFunction: createRegularPolygon(6),
                         style: commonStyle(obj.featureType === 'Point' ? true : false),
-                        stopClick: true
                     });
                     draw.set('showText', obj.featureType === 'Point' ? true : false)
                     draw.set(drawFlag[0], drawFlag[1])
@@ -302,6 +343,7 @@ export const draw = (map, obj) => {
                     let listener;
                     //绑定交互绘制工具开始绘制的事件
                     const drawstartHandle = (evt) => {
+                        store.commit('gis/SET_IS_DRAWING', true)
                         sketch = evt.feature; //绘制的要素
                         let tooltipCoord = evt.coordinate;// 绘制的坐标
                         //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -351,6 +393,9 @@ export const draw = (map, obj) => {
                         featEnd.set(layerFlag[0], layerFlag[1])
                         featEnd.setId(v4())
                         store.dispatch('gis/LOAD_IS_TOOLING', false)
+                        setTimeout(() => {
+                            store.commit('gis/SET_IS_DRAWING', false)
+                        }, 600)
                     }
                     draw.on('drawend', drawendHandle);
                 }