gis-one-map-web/src/views/gis/map-info/overlay/qy/index.vue

<template>
  <div ref="ref_dom" class="gis-overlay-qy">
    <div class="qy-bg-icon qy-bg-icon-1"/>
    <div class="qy-bg-icon qy-bg-icon-2"/>
    <div class="qy-bg-icon qy-bg-icon-3"/>
    <div class="qy-bg-icon qy-bg-icon-4"/>
    <div class="qy-main">
      <div class="qy-main-head">
        <div class="qy-main-head-tips">【企业】</div>
        <div class="qy-main-head-name">{{ qyInfoCpt.name }}</div>
        <SvgIcon class="__hover" name="close_4" size="14" color="#8FFFFF" @click="$store.dispatch('gis/LOAD_GIS_PARAMS_QY_RESET')"/>
      </div>
      <div class="qy-main-tab">
        <template v-for="item in [
              {label: '基本信息', value: '1', disabled: false},
              {label: '税收信息', value: '2', disabled: true},
              {label: '运输车辆', value: '3', disabled: true},
              {label: '能耗消息', value: '4', disabled: true},
              {label: '周边设备', value: '5', disabled: false},
          ]">
          <div class="qy-main-tab-item __hover" :class="{active: item.value === qyInfoCpt.tab, disabled: item.disabled}" @click="item.disabled ? undefined : qyInfoCpt.tab = item.value">{{item.label}}</div>
        </template>
      </div>
      <div v-if="qyInfoCpt.tab === '1'" class="qy-main-content-1">
        <div>企业名称：{{qyInfoCpt['1'].name}}</div>
        <div>企业法人：{{qyInfoCpt['1'].people}}</div>
        <div>统一社会信用代码：{{qyInfoCpt['1'].number}}</div>
        <div>经营地址：{{qyInfoCpt['1'].address}}</div>
      </div>
      <div v-else-if="qyInfoCpt.tab === '5'" class="qy-main-content-5">
        <div class="qy-main-content-5-radius">
          周边范围：
          <div class="radius-min __hover" @click="qyInfoCpt['5'].radius > 1 ? (qyInfoCpt['5'].radius--, handleRangeInput(qyInfoCpt['5'].radius)) : undefined">-</div>
          <CusFormColumn
              link="number"
              label=""
              :clearable="false"
              v-model:param="qyInfoCpt['5'].radius"
              @input="handleRangeInput"/>
          <div class="radius-max __hover" @click="qyInfoCpt['5'].radius < 60 ? (qyInfoCpt['5'].radius++, handleRangeInput(qyInfoCpt['5'].radius)) : undefined">+</div>
          km
          <div class="submit __hover" :style="`cursor: ${qyInfoCpt['5'].radiusTips ? 'not-allowed' : ''};`" @click="onRadiusSubmit">确定</div>
          <div class="reset __hover" @click="onRadiusReset">重置</div>
          <div class="tips" v-if="qyInfoCpt['5'].radiusTips"><SvgIcon name="tips" size="16" color="#FFB878"/>请输入1~60的正整数！</div>
        </div>
        <div class="qy-main-content-5-table" :style="`height: ${25 + (qyInfoCpt['5'].tableData.length > 5 ? 5 * 25 : qyInfoCpt['5'].tableData.length * 25)}px;`" v-loading="qyInfoCpt[qyInfoCpt.tab].loading" element-loading-background="rgba(0, 0, 0, 0.3)">
          <V2Table
              :data="qyInfoCpt['5'].tableData"
              :center="qyInfoCpt['5'].center"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick, markRaw
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";
import V2Table from "./v2-table.vue";
import * as turf from "@turf/turf";
import * as geom from "ol/geom";
import * as source from "ol/source";
import * as layer from "ol/layer";
import * as style from "ol/style";
import * as ol from "ol";
import * as format from "ol/format";
import SbStyle from "@/views/gis/map-info/style/sb";
import CommonStyle from "@/views/gis/map-info/style/common";

export default defineComponent({
  name: '',
  components: {
    V2Table,
  },
  props: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      qyInfo: <any>store.state.gis.gisParams.qy.info,
    })
    const qyInfoCpt = computed(() => {
      return store.state.gis.gisParams.qy.info
    })
    const ref_dom = ref()
    const handleRangeInput = (v) => {
      const nV = Number(v)
      if (!isNaN(Number(nV))) {
        if (nV < 1 || nV > 60) {
          qyInfoCpt.value['5'].radiusTips = true
        } else {
          qyInfoCpt.value['5'].radiusTips = false
        }
      }
    }
    const setCircle = () => {
      const circle = turf.circle(qyInfoCpt.value['5'].center, qyInfoCpt.value['5'].radius, {steps: 32, units: 'kilometers'})
      store.state.gis.gisParams.qy.analysisCircle.setGeometry(new geom.Polygon(circle.geometry.coordinates))
    }
    const onRadiusSubmit = () => {
      if (store.state.gis.analysis.wkt) {
        ElMessage.warning('请先关闭周边分析！')
      } else {
        if (!qyInfoCpt.value['5'].radiusTips) {
          store.state.gis.gisParams.qy.feature.set('isAnalysis', true)
          store.state.gis.gisParams.qy.feature.get('resetStyle')()
          store.state.gis.gisParams.default.feature?.set('isAnalysis', true)
          store.state.gis.gisParams.default.feature?.get('resetStyle')()
          store.state.gis.gisParams.qy.analysisSource.clear()
          store.state.gis.gisParams.qy.analysisSource.addFeature(store.state.gis.gisParams.qy.analysisCircle)
          setCircle()
          store.dispatch('gis/LOAD_GIS_PARAMS_QY_ANALYSIS')
        }
      }
    }
    const onRadiusReset = () => {
      qyInfoCpt.value['5'].radius = 10
      qyInfoCpt.value['5'].radiusTips = false
      onRadiusSubmit()
    }
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      ref_dom,
      handleRangeInput,
      onRadiusSubmit,
      onRadiusReset,
      qyInfoCpt
    }
  },
})
</script>

<style scoped lang="scss">
.gis-overlay-qy {
  $bgColor: #2860CE;
  $footH: 10px;
  min-width: 315px;
  min-height: 168px - $footH;
  background-color: $bgColor;
  position: relative;
  display: flex;
  justify-content: center;
  &:after {
    content: '';
    position: absolute;
    bottom: -$footH;
    border-top: $footH solid $bgColor;
    border-left: $footH solid transparent;
    border-right: $footH solid transparent;
  }
  .qy-bg-icon {
    width: 16px;
    height: 16px;
    background-image: url("@/views/gis/map-info/qy-dom-icon1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 1;
    &.qy-bg-icon-1 {
      left: 0;
      top: 0;
    }
    &.qy-bg-icon-2 {
      right: 0;
      top: 0;
      transform: rotate(90deg);
    }
    &.qy-bg-icon-3 {
      right: 0;
      bottom: 0;
      transform: rotate(180deg);
    }
    &.qy-bg-icon-4 {
      left: 0;
      bottom: 0;
      transform: rotate(270deg);
    }
  }
  .qy-main {
    width: 100%;
    height: auto;
    z-index: 2;
    padding: 12px;
    .qy-main-head {
      display: flex;
      align-items: center;
      position: relative;
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        bottom: -9px;
        background-image: url("@/views/gis/map-info/qy-info-icon2.png");
        background-repeat: no-repeat;
      }
      .qy-main-head-tips {
        font-size: 10px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #8FFFFF;
      }
      .qy-main-head-name {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
      }
      .svg-icon {
        margin-left: auto;
      }
    }
    .qy-main-tab {
      margin: 20px 0 10px 0;
      display: flex;
      align-items: center;
      .qy-main-tab-item {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #CEE6FF;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, 0.2);
        &.active {
          background-color: #1280F1;
          color: #61FFFF;
        }
        &.disabled {
          cursor: not-allowed;
          opacity: 0.7;
        }
        &:not(:last-child) {
          margin-right: 2px;
        }
      }
    }
    .qy-main-content-1 {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      >div {
        line-height: 18px;
      }
    }
    .qy-main-content-5 {
      .qy-main-content-5-radius {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        .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: 18px;
              .el-input {
                .el-input__wrapper {
                  padding: 0;
                  border-radius: 5px;
                  background-color: transparent;
                  .el-input__inner {
                    color: #FFFFFF;
                    background-color: transparent;
                    height: 100%;
                    text-align: center;
                    border: 1px solid #ffffff;
                    border-radius: 5px;
                    &::placeholder {
                      font-size: 12px;
                      font-family: Microsoft YaHei;
                    }
                  }
                }
              }
            }
          }
        }
        .submit {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 18px;
          background: #8FFFFF;
          border-radius: 4px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1174DB;
          margin-left: 10px;
        }
        .reset {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 18px;
          border: 1px solid #8FFFFF;
          border-radius: 4px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #8FFFFF;
          margin-left: 8px;
        }
        .tips {
          margin-left: auto;
          display: flex;
          align-items: center;
          color: #FFB878;
          .svg-icon {
            margin-right: 2px;
          }
        }
      }
      .qy-main-content-5-table {
        margin-top: 10px;
        width: 440px;
      }
    }
  }
}
</style>