gis-one-map-web/src/views/gis/layout/tools/analysis.vue

<template>
  <div class="analysis-com">
    <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>
        <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>
        km
      </div>
      <div class="__cus-buttons-3">
        <div class="__cus-button-submit __hover" @click="initData">确定</div>
        <div class="__cus-button-cancel __hover" @click="$emit('cancel')">取消</div>
      </div>
    </div>
    <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"/>处置力量({{ cusTransfer.result.power.data.length }}人)
        </div>
        <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'device'}" @click="cusTransfer.switchType = 'device'">
          <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>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick, onUnmounted
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";
import * as source from "ol/source";
import * as layer from "ol/layer";
import * as interaction from "ol/interaction";
import * as geom from 'ol/geom';
import * as style from "ol/style";
import * as proj from "ol/proj";
import PointIcon from "@/assets/images/gis-layout/gis-layout-tools_tool-bz_icon.png";
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";
import * as turf from "@turf/turf";

export default defineComponent({
  name: '',
  components: {SelectChartCom},
  props: {
    map: {
      required: true,
      default: <any>{}
    },
    mapFunc: {
      required: true
    },
    transfer: {}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      transfer: <any>props.transfer,
      cusTransfer: <any>{
        draw: {
          center: null,
          radius: 5,
          wkt: ''
        },
        analysisFeat: <any>null,
        analysisLayer: <any>null,
        // analysisModify: <any>null,
        analysisDraw: <any>null,
        switchType: 'power',
        result: {
          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,
      },
    })
    const handleRangeBlur = () => {
      if (!state.cusTransfer.draw.radius) {
        state.cusTransfer.draw.radius = 5
      }
      setCircle()
    }
    const initLayer = () => {
      if (state.cusTransfer.analysisLayer) {
        state.cusTransfer.analysisLayer.setVisible(true)
        // if (state.cusTransfer.analysisModify) {
        //   props.map.addInteraction(state.cusTransfer.analysisModify);
        // }
        if (state.cusTransfer.analysisDraw) {
          props.map.addInteraction(state.cusTransfer.analysisDraw);
        }
      } else {
        const layerFlag = ['layerName', 'analysisDrawViewsLayer']
        state.cusTransfer.analysisSource = new source.Vector(); //图层数据源
        state.cusTransfer.analysisLayer = new layer.Vector({
          zIndex: 10000,
          source: state.cusTransfer.analysisSource,
          style: [
            new style.Style({
              image: new style.Icon({
                src: PointIcon,
                displacement: [0, 24]
              }),
              stroke: new style.Stroke({
                color: '#2860F1',
                width: 2,
                lineDash: [10, 10]
              }),
              fill: new style.Fill({
                color: 'rgba(20, 129, 241, 0.1)',
              }),
            })
          ]
        });
        state.cusTransfer.analysisLayer.set(layerFlag[0], layerFlag[1])
        props.map.addLayer(state.cusTransfer.analysisLayer);
        // state.cusTransfer.analysisModify = new interaction.Modify({
        //   source: state.cusTransfer.analysisSource,
        // });
        // props.map.addInteraction(state.cusTransfer.analysisModify)
        // state.cusTransfer.analysisModify.on('modifyend', evt => {
        //   try {
        //     const feat = evt.features.item(0)
        //     getCircleParams(feat.getGeometry())
        //   } catch {
        //   }
        // })

        let sketch;
        let helpTooltip;
        const createHelpTooltip = () => {
          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 = document.createElement('div');
          state.cusTransfer.analysisDrawHelpTooltipElement.className = 'tooltip hidden';
          helpTooltip = new ol.Overlay({
            id,
            element: state.cusTransfer.analysisDrawHelpTooltipElement,
            offset: [15, 0],
            positioning: 'center-left'
          });
          props.map.addOverlay(helpTooltip);
        }
        createHelpTooltip(); //创建帮助提示框
        //  标绘
        state.cusTransfer.analysisDraw = new interaction.Draw({
          source: state.cusTransfer.analysisSource,//测量绘制层数据源
          type: 'Circle',  //几何图形类型
          style: new style.Style({
            stroke: new style.Stroke({
              color: '#2860F1',
              width: 2,
              lineDash: [10, 10]
            }),
            fill: new style.Fill({
              color: 'rgba(20, 129, 241, 0.1)',
            }),
          })
        });
        // @ts-ignore
        props.map.addInteraction(state.cusTransfer.analysisDraw);
        const drawstartHandle = (evt) => {
          sketch = evt.feature; //绘制的要素
        }
        state.cusTransfer.analysisDraw.on('drawstart', drawstartHandle);
        const drawendHandle = (evt) => {
          // 标绘的时候不需要最终结果dom
          props.map.removeOverlay(helpTooltip)
          sketch = null; //置空当前绘制的要素对象
          state.cusTransfer.analysisDrawHelpTooltipElement.parentNode.removeChild(state.cusTransfer.analysisDrawHelpTooltipElement);
          state.cusTransfer.analysisDrawHelpTooltipElement = null; //置空测量工具提示框对象
          state.cusTransfer.analysisDraw.un('drawstart', drawstartHandle);
          state.cusTransfer.analysisDraw.un('drawend', drawendHandle);
          props.map.removeInteraction(state.cusTransfer.analysisDraw);
          props.map.un('pointermove', pointerMoveHandler)
          state.cusTransfer.analysisDraw = null
          state.cusTransfer.analysisFeat = evt.feature
          getCircleParams(evt.feature.getGeometry())
        }
        state.cusTransfer.analysisDraw.on('drawend', drawendHandle);
        const getCircleParams = (circle) => {
          const sourceProj = props.map.getView().getProjection();
          const radius = Math.round(circle.getRadius() * sourceProj.getMetersPerUnit() / 1000)
          state.cusTransfer.draw.center = circle.getCenter()
          state.cusTransfer.draw.radius = radius
          setCircle()
        }
        const pointerMoveHandler = (evt) => {
          if (evt.dragging) {
            return;
          }
          let helpMsg = '单击开始标绘';//当前默认提示信息
          //判断绘制几何类型设置相应的帮助提示信息
          if (sketch) {
            helpMsg = '双击结束标绘';
          }
          state.cusTransfer.analysisDrawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
          helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
          state.cusTransfer.analysisDrawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
        };
        props.map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
      }
    }
    const  setCircle = () => {
      const circle = turf.circle(state.cusTransfer.draw.center, state.cusTransfer.draw.radius, {units: 'kilometers'})
      state.cusTransfer.analysisFeat.setGeometry(new geom.Polygon(circle.geometry.coordinates))
    }
    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) {
        state.cusTransfer = props.transfer
      } else {
        emit('update:transfer', state.cusTransfer)
      }
      initLayer()
    })
    onUnmounted(() => {
      state.cusTransfer.analysisLayer.setVisible(false)
      // if (state.cusTransfer.analysisModify) {
      //   props.map.removeInteraction(state.cusTransfer.analysisModify);
      // }
      if (state.cusTransfer.analysisDraw) {
        props.map.removeInteraction(state.cusTransfer.analysisDraw);
      }
    })
    return {
      ...toRefs(state),
      handleRangeBlur,
      initData,
      setCircle,
      powerTableFilterCpt,
      powerTableDataCpt,
      handlePagePower,
      onSearchPower,
      onResetPower,
      deviceTableFilterCpt,
      deviceTableDataCpt,
      handlePageDevice,
      onSearchDevice,
      onResetDevice,
    }
  },
})
</script>

<style scoped lang="scss">
.draw-edit {
  width: 160px;
  height: 66px;
  background: #FFFFFF;
  opacity: 0.8;
  border-radius: 5px;
  position: fixed;
  bottom: 68px;
  left: calc((100% - 160px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px 0;
  .draw-edit-content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #808080;
    .radius-min, .radius-max {
      margin: 0 3px;
      &:hover {
        color: #409EFF;
      }
    }
    :deep(.cus-form-column) {
      max-width: unset;
      width: 44px;
      flex: unset;
      .el-form-item {
        margin: 0;
        .el-form-item__content {
          height: 20px;
          .el-input {
            .el-input__wrapper {
              padding: 0;
              border-radius: 5px;
              .el-input__inner {
                height: 100%;
                text-align: center;
                border: 1px solid #808080;
                border-radius: 5px;
                &::placeholder {
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                }
              }
            }
          }
        }
      }
    }
  }
}
.content {
  position: fixed;
  width: 404px;
  height: calc(100% - 100px);
  background-color: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .head-tab {
    height: 40px;
    width: 100%;
    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;
      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;
    }
  }
  .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;
    }
  }
}
</style>