周边分析

src/views/gis/index.vue

@@ -47,7 +47,7 @@ export default defineComponent({
     }
     const initWMSElement = () => {
       const _tileWMS = new source.TileWMS({
-        url: `http://192.168.31.19:8082/poiwmts/color/getTile2`,
+        url: `http://192.168.31.19:7074/queryTile`,
         params: {
           'FORMAT': 'image/png8',
           'VERSION': '1.1.1',

src/views/gis/layout/index.vue

@@ -78,6 +78,8 @@ import ToolCom from './tools/tool.vue'
 import PositionCom from './tools/position.vue'
 import BaseCom from './tools/base.vue'
 import ExampleCom from './tools/example.vue'
+import * as source from "ol/source";
+import * as layer from "ol/layer";
 
 
 export default defineComponent({
@@ -123,6 +125,7 @@ export default defineComponent({
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
+      // initWMSElement()
     }
     const menuCpt = computed(() => {
       return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children
@@ -184,6 +187,35 @@ export default defineComponent({
         state.toolsType = (state.toolsType === item.value ? '' : item.value)
       }
     }
+
+    const initWMSElement = () => {
+      const _tileWMS = new source.TileWMS({
+        url: `http://192.168.31.19:7074/queryTile`,
+        params: {
+          'FORMAT': 'image/png8',
+          'VERSION': '1.1.1',
+          "exceptions": 'application/vnd.ogc.se_inimage',
+          'CQL_FILTER': "(mergeTarget in ('110'))",
+          layers: 'geo_fk_ship',
+          refresh: new Date().getTime()
+        }
+      })
+      const elementLayer = new layer.Tile({
+        source: _tileWMS,
+        zIndex: 2,
+        homeLayer: 'WMSElement'
+      })
+      state.map.addLayer(elementLayer)
+      state.map.on('singleclick', e => {
+        console.log(e)
+        const viewResolution = e.map.getView().getResolution()
+        const url = e.map.getLayers().getArray().filter(v => v.get('homeLayer') === 'WMSElement')[0]?.getSource().getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', {
+          INFO_FORMAT: 'application/json'
+        })
+        console.log(url)
+      })
+
+    }
     onMounted(() => {
       // state.toolsCom = AnalysisCom
       // state.toolsType = 'analysis'

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

@@ -19,18 +19,76 @@
         <div class="__cus-button-cancel __hover" @click="$emit('cancel')">取消</div>
       </div>
     </div>
-    <div class="content __box-shadow" v-if="cusTransfer.draw.radius">
+    <div class="content __box-shadow" v-if="cusTransfer.result.isInit">
       <div class="head-tab">
         <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'power'}" @click="cusTransfer.switchType = 'power'">
-          <SvgIcon name="search"/>处置力量(4人)
+          <SvgIcon name="search"/>处置力量({{ cusTransfer.result.power.data.length }}人)
         </div>
         <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'device'}" @click="cusTransfer.switchType = 'device'">
-          <SvgIcon name="search"/>设备(2台)
+          <SvgIcon name="search"/>设备({{ cusTransfer.result.device.data.length }}台)
         </div>
         <div class="head-tab-close __hover" @click="$emit('cancel')">
           <SvgIcon name="close_2" color="#0069FF" size="14"/>
         </div>
       </div>
+      <div class="result">
+        <template v-if="cusTransfer.switchType === 'power'">
+          <div class="form">
+            <CusFormColumn
+                labelWidth="50"
+                :span="24"
+                label="搜索:"
+                v-model:param="cusTransfer.result.power.tempForm.text"
+            />
+            <div class="__cus-buttons-2">
+              <div class="__cus-button-submit __hover" @click="onSearchPower">搜索</div>
+              <div class="__cus-button-cancel __hover" @click="onResetPower">重置</div>
+            </div>
+          </div>
+          <div class="table">
+            <CusTable
+                :tableData="powerTableDataCpt"
+                :tableHead="cusTransfer.result.power.head"
+                :total="powerTableFilterCpt.length"
+                :page="cusTransfer.result.power.pageNum"
+                :pageSize="cusTransfer.result.power.pageSize"
+                @handlePage="handlePagePower"
+            >
+              <template #distance-column-value="{ scope }">
+                {{scope.row.distance < 1000 ? `${scope.row.distance}m` : `${(scope.row.distance / 1000).toFixed(1)}km`}}
+              </template>
+            </CusTable>
+          </div>
+        </template>
+        <template v-else>
+          <div class="form">
+            <CusFormColumn
+                labelWidth="50"
+                :span="24"
+                label="搜索:"
+                v-model:param="cusTransfer.result.device.tempForm.text"
+            />
+            <div class="__cus-buttons-2">
+              <div class="__cus-button-submit __hover" @click="onSearchDevice">搜索</div>
+              <div class="__cus-button-cancel __hover" @click="onResetDevice">重置</div>
+            </div>
+          </div>
+          <div class="table">
+            <CusTable
+                :tableData="deviceTableDataCpt"
+                :tableHead="cusTransfer.result.device.head"
+                :total="deviceTableFilterCpt.length"
+                :page="cusTransfer.result.device.pageNum"
+                :pageSize="cusTransfer.result.device.pageSize"
+                @handlePage="handlePageDevice"
+            >
+              <template #distance-column-value="{ scope }">
+                {{scope.row.distance < 1000 ? `${scope.row.distance}m` : `${(scope.row.distance / 1000).toFixed(1)}km`}}
+              </template>
+            </CusTable>
+          </div>
+        </template>
+      </div>
     </div>
   </div>
 </template>
@@ -62,10 +120,11 @@ import * as ol from "ol";
 import {fromCircle} from "ol/geom/Polygon";
 import {unByKey} from "ol/Observable";
 import * as sphere from "ol/sphere";
+import SelectChartCom from "@/views/gis/layout/tools/select-chart.vue";
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {SelectChartCom},
   props: {
     map: {
       required: true,
@@ -95,7 +154,37 @@ export default defineComponent({
         analysisDraw: <any>null,
         switchType: 'power',
         result: {
-          power: {}
+          isInit: false,
+          power: {
+            head: [
+              {value: "name", label: "姓名", show: true,},
+              {value: "phone", label: "联系电话", show: true, width: 120},
+              {value: "area", label: "管辖区域", show: true,},
+              {value: "distance", label: "距离", show: true},
+            ],
+            data: <any>[],
+            pageNum: 1,
+            pageSize: 20,
+            form: {},
+            tempForm: {
+              text: ''
+            }
+          },
+          device: {
+            head: [
+              {value: "name", label: "名称", show: true,},
+              {value: "status", label: "状态", show: true,},
+              {value: "type", label: "类型", show: true,},
+              {value: "distance", label: "距离", show: true,},
+            ],
+            data: <any>[],
+            pageNum: 1,
+            pageSize: 20,
+            form: {},
+            tempForm: {
+              text: ''
+            }
+          }
         },
         analysisDrawHelpTooltipElement: null,
       },
@@ -248,6 +337,67 @@ export default defineComponent({
       state.cusTransfer.analysisFeat.getGeometry().setRadius(transformProjection([state.cusTransfer.draw.radius * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
     }
     const initData = () => {
+      state.cusTransfer.result.power.data = []
+      state.cusTransfer.result.power.pageNum = 1
+      state.cusTransfer.result.device.data = []
+      state.cusTransfer.result.device.pageNum = 1
+      for (let i = 0; i <= 10000; i++) {
+        const obj1 = {
+          name: '王宝强' + i,
+          phone: '18976000123',
+          area: '海口市' + i,
+          distance: i
+        }
+        state.cusTransfer.result.power.data.push(obj1)
+        const obj2 = {
+          name: '505县道-新安村路口1-枪机-0110580_'+ i,
+          status: '在线',
+          type: 'galsb',
+          distance: i
+        }
+        state.cusTransfer.result.device.data.push(obj2)
+      }
+      state.cusTransfer.result.isInit = true
+    }
+    const powerTableFilterCpt = computed(() => {
+      return state.cusTransfer.result.power.data.filter(v => v.name.includes(state.cusTransfer.result.power.tempForm.text))
+    })
+    const powerTableDataCpt = computed(() => {
+      return powerTableFilterCpt.value.slice((state.cusTransfer.result.power.pageNum - 1) * state.cusTransfer.result.power.pageSize, state.cusTransfer.result.power.pageNum * state.cusTransfer.result.power.pageSize)
+    })
+    const handlePagePower = ({page, pageSize}: any) => {
+      state.cusTransfer.result.power.pageNum = page
+      state.cusTransfer.result.power.pageSize = pageSize
+    }
+    const onSearchPower = () => {
+      state.cusTransfer.result.power.pageNum = 1
+      state.cusTransfer.result.power.form = JSON.parse(JSON.stringify(state.cusTransfer.result.power.tempForm))
+    }
+    const onResetPower = () => {
+      state.cusTransfer.result.power.tempForm = {
+        text: '',
+      }
+      onSearchPower()
+    }
+    const deviceTableFilterCpt = computed(() => {
+      return state.cusTransfer.result.device.data.filter(v => v.name.includes(state.cusTransfer.result.device.tempForm.text))
+    })
+    const deviceTableDataCpt = computed(() => {
+      return deviceTableFilterCpt.value.slice((state.cusTransfer.result.device.pageNum - 1) * state.cusTransfer.result.device.pageSize, state.cusTransfer.result.device.pageNum * state.cusTransfer.result.device.pageSize)
+    })
+    const handlePageDevice = ({page, pageSize}: any) => {
+      state.cusTransfer.result.device.pageNum = page
+      state.cusTransfer.result.device.pageSize = pageSize
+    }
+    const onSearchDevice = () => {
+      state.cusTransfer.result.device.pageNum = 1
+      state.cusTransfer.result.device.form = JSON.parse(JSON.stringify(state.cusTransfer.result.device.tempForm))
+    }
+    const onResetDevice = () => {
+      state.cusTransfer.result.device.tempForm = {
+        text: '',
+      }
+      onSearchDevice()
     }
     onMounted(() => {
       if (props.transfer) {
@@ -270,7 +420,17 @@ export default defineComponent({
       ...toRefs(state),
       handleRangeBlur,
       initData,
-      setCircle
+      setCircle,
+      powerTableFilterCpt,
+      powerTableDataCpt,
+      handlePagePower,
+      onSearchPower,
+      onResetPower,
+      deviceTableFilterCpt,
+      deviceTableDataCpt,
+      handlePageDevice,
+      onSearchDevice,
+      onResetDevice,
     }
   },
 })
@@ -333,56 +493,74 @@ export default defineComponent({
     }
   }
 }
-.analysis-com {
+.content {
   position: fixed;
   width: 404px;
-  max-height: calc(100% - 100px);
+  height: calc(100% - 100px);
   background-color: #FFFFFF;
   box-sizing: border-box;
-  overflow-y: auto;
-  .content {
+  display: flex;
+  flex-direction: column;
+  .head-tab {
+    height: 40px;
     width: 100%;
-    height: 100%;
-    .head-tab {
-      height: 40px;
-      width: 100%;
-      border-bottom: 1px solid #EEEEEE;
+    border-bottom: 1px solid #EEEEEE;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 12px;
+    padding-right: 22px;
+    .head-tab-item {
+      height: 100%;
       display: flex;
       align-items: center;
-      box-sizing: border-box;
-      padding-left: 12px;
-      padding-right: 22px;
-      .head-tab-item {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #757575;
-        padding: 0 4px;
-        min-width: 60px;
-        margin-right: 10px;
-        &:last-child {
-          margin-right: 0;
-        }
-        &.active {
-          color: #0069FF;
-          &:after {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 3px;
-            bottom: -1px;
-            background-color: #0062E9;
-          }
+      justify-content: center;
+      position: relative;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #757575;
+      padding: 0 4px;
+      min-width: 60px;
+      margin-right: 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+      &.active {
+        color: #0069FF;
+        &:after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 3px;
+          bottom: -1px;
+          background-color: #0062E9;
         }
       }
-      .head-tab-close {
-        margin-left: auto;
+    }
+    .head-tab-close {
+      margin-left: auto;
+    }
+  }
+  .result {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0 10px 10px 10px;
+    .form {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      :deep(.el-form-item) {
+        margin-bottom: 0px;
       }
+      .cus-form-column {
+        flex: 1;
+        margin-right: 8px;
+      }
+    }
+    .table {
+      flex: 1;
     }
   }
 }

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

@@ -149,6 +149,7 @@ export default defineComponent({
       }).catch(() => {})
     }
     const initData = () => {
+      console.log(state.selectParams.wkt)
       state.result.table.data = []
       state.result.table.pageNum = 1
       for (let i = 0; i <= 10000; i++) {