gis-one-map-web/src/views/gis/layout/index.vue

<template>
  <div class="gis-layout">
    <EasyMapComponent
        class="map"
        @easyMapLoad="mapLoad"
    />
    <div class="gis-menu">
      <img class="gis-menu-bottom" src="@/assets/images/gis-layout/gis-layout-menu_bottom.png" alt=""/>
      <template v-for="item in menuCpt">
        <div class="gis-menu-item __hover" :class="{active: $route.name === item.name, max: String(item.meta.title).length >5}" @click="$router.push({name: item.name})">
          {{item.meta.title}}
        </div>
      </template>
    </div>
    <div class="gis-tools">
      <div class="gt-search __box-shadow">
        <el-autocomplete
            ref="ref_search"
            v-model="searchInput"
            :fetch-suggestions="searchHandleMapSearch"
            :popper-append-to-body="false"
            clearable
            :debounce="800"
            placeholder="请输入关键字进行搜索"
            @select="searchToMapLocation"
        >
          <template #default="{ item }">
            <div class="search-item __hover">
              <img :src="item.icon"/>
              <div class="name">{{item.name}}</div>
            </div>
          </template>
        </el-autocomplete>
        <div class="search-icon __hover" @click="ref_search.focus()">
          <SvgIcon name="search" color="#ffffff"/>
        </div>
      </div>
      <div class="gt-tools __box-shadow">
        <template v-for="(item, index) in ToolsMapper">
          <div class="tools-line" v-if="index > 0"/>
          <div class="tools-item __hover" :class="{active: toolsType === item.value, disabled: item.disabled}" @click="item.disabled ? undefined : toolsHandleClick(item)">
            {{item.label}}
          </div>
        </template>
      </div>
      <div class="gt-tools-component" v-if="toolsType && toolsType !== 'clear' && toolsCom">
        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc" v-model:transfer="toolsParams[toolsType]" @cancel="toolsType = ''"/>
      </div>
    </div>
    <div class="gis-content">
      <RouterViewCom/>
    </div>
    <VideoPlayKedaCom v-if="showVideo" v-model:layout="videoLayout" :form="qyParams.sbInfo" @close="showVideo = false"/>
  </div>

  <div ref="ref_qyDom" class="qy-info" :class="`qy--info-${qyParams.qyInfo.tab}`">
    <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">{{ qyParams.qyInfo.name }}</div>
        <SvgIcon class="__hover" name="close_4" size="14" color="#8FFFFF" @click="onCloseQy"/>
      </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 === qyParams.qyInfo.tab, disabled: item.disabled}" @click="item.disabled ? undefined : qyParams.qyInfo.tab = item.value">{{item.label}}</div>
        </template>
      </div>
      <div v-if="qyParams.qyInfo.tab === '1'" class="qy-main-content-1">
        <div>企业名称:{{qyParams.qyInfo[qyParams.qyInfo.tab].name}}</div>
        <div>企业法人:{{qyParams.qyInfo[qyParams.qyInfo.tab].people}}</div>
        <div>统一社会信用代码:{{qyParams.qyInfo[qyParams.qyInfo.tab].number}}</div>
        <div>经营地址:{{qyParams.qyInfo[qyParams.qyInfo.tab].address}}</div>
      </div>
      <div v-else-if="qyParams.qyInfo.tab === '5'" class="qy-main-content-5">
        <div class="qy-main-content-5-radius">
          周边范围：
          <div class="radius-min __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius > 1 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius--) : undefined">-</div>
          <CusFormColumn
              link="number"
              label=""
              :min="1"
              :max="30"
              :clearable="false"
              v-model:param="qyParams.qyInfo[qyParams.qyInfo.tab].radius"
              @blur="handleRangeBlur"/>
          <div class="radius-max __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius < 30 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius++) : undefined">+</div>
          km
          <div class="submit __hover" @click="onRadiusSubmit">确定</div>
          <div class="reset __hover" @click="onRadiusReset">重置</div>
        </div>
        <div class="qy-main-content-5-table" :style="`height: ${25 + (qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length > 5 ? 5 * 25 : qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length * 25)}px;`" v-loading="qyParams.qyInfo[qyParams.qyInfo.tab].loading" element-loading-background="rgba(0, 0, 0, 0.3)">
          <el-auto-resizer>
            <template #default="{ height, width }">
              <V2Table
                  :width="width"
                  :height="height"
                  :data="qyParams.qyInfo[qyParams.qyInfo.tab].tableData"
                  :center="qyParams.qyInfo['5'].center"
              />
              <!--                <el-table-v2-->
              <!--                    class="__gis-overlay_table-v2"-->
              <!--                    :columns="qyParams.qyInfo[qyParams.qyInfo.tab].tableHead"-->
              <!--                    :data="qyParams.qyInfo[qyParams.qyInfo.tab].tableData"-->
              <!--                    :width="width"-->
              <!--                    :height="height"-->
              <!--                    fixed-->
              <!--                    :row-height="25"-->
              <!--                    :header-height="25"-->
              <!--                >-->
              <!--                  <template #empty></template>-->
              <!--                </el-table-v2>-->
            </template>
          </el-auto-resizer>
        </div>
      </div>
    </div>
  </div>
  <div ref="ref_sbDom" class="sb-info">
    <div class="sb-info-head">
      <SvgIcon class="__hover" name="tips" size="14" color="#8FFFFF"/>设备
    </div>
    <div class="sb-info-close __hover" @click="onCloseSb">
      <img src="@/components/easyMap/images/close.png" alt=""/>
    </div>
    <div class="sb-main">
      <div class="sb-item">
        <div class="sb-item-label">名称：</div>
        <div class="sb-item-value">{{qyParams.sbInfo?.name}}</div>
      </div>
      <div class="sb-item">
        <div class="sb-item-label">状态：</div>
        <div class="sb-item-value">{{qyParams.sbInfo?.online === '0' ? '在线' : '离线'}}</div>
      </div>
      <div class="play-button __hover" @click="showVideo = true">视频调阅</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 RouterViewCom from '@/layout/router-view.vue'
import ElementCom from './tools/element.vue'
import SelectCom from './tools/select.vue'
import AnalysisCom from './tools/analysis.vue'
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";
import * as style from "ol/style";
import * as format from "ol/format";
import QyStyle from '../map-info/style/qy'
import SbStyle from '../map-info/style/sb'
import CommonStyle from '../map-info/style/common'
import * as ol from "ol";
import { v4 } from "uuid";
import * as proj from "ol/proj";
import * as turf from '@turf/turf'
import * as geom from 'ol/geom';
import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
import V2Table from "./v2-table.vue";
import {deviceQuery, enterpriseQuery} from "@/api/modules/enterprise";
import {clearLocationDom} from '@/components/easyMap/func/location'
import {clearMeasureDom} from '@/components/easyMap/func/measure'

export default defineComponent({
  name: '',
  components: {
    RouterViewCom,
    ElementCom,
    SelectCom,
    AnalysisCom,
    ToolCom,
    PositionCom,
    BaseCom,
    ExampleCom,
    VideoPlayKedaCom,
    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({
      map: <any>null,
      mapFunc: <any>null,
      searchInput: '',
      toolsType: '',
      toolsCom: null,
      toolsParams: {
        element: null,
        position: null
      },
      qyParams: {
        layer: <any>null,
        source: <any>null,
        tempFeature: <any>null,
        overlay: <any>null,
        qyInfo: <any>{},
        analysisLayer: <any>null,
        analysisSource: <any>null,
        analysisCircle: <any>null,
        tempSbFeature: <any>null,
        sbOverlay: <any>null,
        sbInfo: <any>{
          name: '505县道新安村路口1-枪机-0110580',
          code: '46044123124125125',
        },
      },
      videoLayout: {
        width: 640,
        height: 366,
        left: 1200,
        top: 460
      },
      showVideo: false
    })
    const ToolsMapper = [
      {label: '图层', value: 'element', com: ElementCom, disabled: true},
      {label: '框选', value: 'select', com: SelectCom, disabled: true},
      {label: '周边分析', value: 'analysis', com: AnalysisCom, disabled: true},
      {label: '清空图层', value: 'clear', com: undefined},
      {label: '工具', value: 'tool', com: ToolCom},
      {label: '定位', value: 'position', com: PositionCom},
      {label: '底图', value: 'base', com: BaseCom},
      {label: '图例', value: 'example', com: ExampleCom},
    ]
    const ref_search = ref()
    const mapLoad = (map, func) => {
      state.map = map
      store.dispatch('gis/LOAD_GIS_MAP', state.map)
      state.mapFunc = func
      state.map.on('singleclick', e => {
        let flag = false
        map.forEachFeatureAtPixel(e.pixel, (f) => {
          if (!flag && f.get('featureType')) {
            flag = true
            if (f.get('featureType') === 'qy') {  //  企业
              //  恢复上一个要素的样式
              if (f.getId() !== state.qyParams.tempFeature?.getId()) {
                state.qyParams.tempFeature?.get('resetStyle')?.()
                state.qyParams.analysisSource?.clear()
                //  新的要素
                if (f.get('isAnalysis')) {
                  f.setStyle(f.get('analysisActiveStyle'))
                } else {
                  f.setStyle(f.get('activeStyle'))
                }
                state.qyParams.qyInfo = JSON.parse(JSON.stringify(f.get('info')))
                store.dispatch('gis/LOAD_ACTIVE_QY_ID', f.getId())
                //  备份新的要素
                state.qyParams.tempFeature = f
              }
              state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
            } else if (f.get('featureType') === 'sb') { //  设备
              //  恢复上一个要素的样式
              if (f.getId() !== state.qyParams.tempSbFeature?.getId()) {
                state.qyParams.tempSbFeature?.get('resetStyle')?.()
                //  新的要素
                if (f.get('isAnalysis')) {
                  f.setStyle(f.get('analysisActiveStyle'))
                } else {
                  f.setStyle(f.get('activeStyle'))
                }
                state.qyParams.sbInfo = JSON.parse(JSON.stringify(f.get('info')))
                state.qyParams.sbOverlay.setPosition(f.getGeometry().getCoordinates())
                //  备份新的要素
                state.qyParams.tempSbFeature = f
              }
              state.qyParams.overlay.setPosition(undefined)
            }
          }
        }, {
          hitTolerance: 0,
        });
      })
      initQYLayer()
    }
    const menuCpt = computed(() => {
      return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children?.filter(v => !v.meta.noMenu)
    })
    const searchHandleMapSearch = (queryString: string, cb: (arg: any) => void) => {
      if (queryString.trim()) {
        const arr = [
          {name: 123},
          {name: 123},
          {name: 123},
          {name: 123},
          {name: 123},
          {name: 123},
        ]
        cb(arr)
      } else {
        cb([])
      }
    }
    const searchToMapLocation = (val) => {
      state.searchInput = val.name
      // if (val.source === 'element') {
      //   state.elementFilter.forEach(l => {
      //     l.list.forEach(v => {
      //       if (v.value === val.elementType) {
      //         v.active = true
      //       }
      //     })
      //   })
      // }
      // positionSwitchGeom(val.geomType, val.coordinates, true, val.source)
    }
    const toolsHandleClick = (item) => {
      if (item.value === 'clear') {
        //  工具-标绘'layerName', 'toolDrawViewsLayer'
        state.map.getLayers().getArray().filter(v => v.get('layerName') === 'toolDrawViewsLayer')?.[0]?.getSource()?.clear()
        //  工具-测量'layerName', 'measureLayer'
        state.map.getLayers().getArray().filter(v => v.get('layerName') === 'measureLayer')?.[0]?.getSource()?.clear()
        clearMeasureDom(state.map)
        //  定位'layerName', 'positionLayer'
        state.map.getLayers().getArray().filter(v => v.get('layerName') === 'positionLayer')?.[0]?.getSource()?.clear()
        clearLocationDom()
      } else {
        state.toolsCom = markRaw(item.com)
        state.toolsType = (state.toolsType === item.value ? '' : item.value)
      }
    }
    const ref_qyDom = ref()
    const ref_sbDom = ref()
    const initQYLayer = () => {
      enterpriseQuery({
        "pageNumber":1,
        "pageSize":200,
        // "entName":null,
        // "entType":"加工增值"
      }).then((res: any) => {
        if (res.resp_code === 0 && res.datas?.length > 0) {
          // for (let i = 0; i < 105; i++) {
          //   const obj = {
          //     name: '企业企业企业企业企业_' + i,
          //     wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`,
          //   }
          //   if (i % 2 === 0) {
          //     obj.type = 'lgszyjkscsb'
          //   } else if (i % 2 === 1) {
          //     obj.type = 'jgzzmgs'
          //   } else if (i % 2 === 2) {
          //     obj.type = 'lgsjkyfl'
          //   }
          //   arr.push(obj)
          // }
          const features: any = []
          res.datas.forEach(v => {
            try {
              const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
              let type = ''
              if (v.qykx = '零关税自用进口生产设备') {
                type = 'lgszyjkscsb'
              } else if (v.qykx = '加工增值免关税') {
                type = 'jgzzmgs'
              } else if (v.qykx = '零关税进口原辅料') {
                type = 'lgsjkyfl'
              }
              feat.set('defaultStyle', QyStyle.qyStyle(type))
              feat.set('activeStyle', [...CommonStyle.activeStyle(), ...QyStyle.qyStyle(type)])
              feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(type)])
              feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(type)])
              feat.set('isAnalysis', false)
              feat.set('resetStyle', () => {
                if (feat.get('isAnalysis')) {
                  feat.setStyle(feat.get('analysisStyle'))
                } else {
                  feat.setStyle(feat.get('defaultStyle'))
                }
              })
              const obj = {
                coordinates: feat.getGeometry().getCoordinates(),
                tab: '1',
                name: v.qymc,
                1: {
                  name: v.qymc,
                  people: v.lerep,
                  number: v.uniscid,
                  address: v.dom
                },
                2: {},
                3: {},
                4: {},
                5: {
                  radius: 1,
                  center: feat.getGeometry().getCoordinates(),
                  tableData: [],
                  loading: false
                },
              }
              feat.set('info', obj)
              feat.set('featureType', 'qy')
              feat.setStyle(feat.get('defaultStyle'))
              feat.setId(v.id)
              feat.set('mockClick', () => {
                state.qyParams.tempFeature?.get('resetStyle')?.()
                state.qyParams.analysisSource?.clear()
                //  新的要素
                if (feat.get('isAnalysis')) {
                  feat.setStyle(feat.get('analysisActiveStyle'))
                } else {
                  feat.setStyle(feat.get('activeStyle'))
                }
                state.qyParams.qyInfo = JSON.parse(JSON.stringify(feat.get('info')))
                //  备份新的要素
                state.qyParams.tempFeature = feat
                state.qyParams.overlay.setPosition(feat.getGeometry().getCoordinates())
                store.dispatch('gis/LOAD_ACTIVE_QY_ID', v.id)
              })
              features.push(feat)
            } catch (e) {
              console.error('异常企业：', v)
            }
          })
          state.qyParams.source = new source.Vector({
            features: features,
            wrapX: false
          })
          state.qyParams.layer = new layer.VectorImage({
            source: state.qyParams.source,
            zIndex: 10,
            layerName: 'qy'
          })
          state.map.addLayer(state.qyParams.layer)
          //  详情
          state.qyParams.overlay = new ol.Overlay({
            id: v4(),
            element: ref_qyDom.value,
            autoPan: false,
            offset: [0, -60],
            positioning: 'bottom-center',
            stopEvent: true,
            autoPanAnimation: {
              duration: 250
            }
          })
          state.map.addOverlay(state.qyParams.overlay)
          //  详情
          state.qyParams.sbOverlay = new ol.Overlay({
            id: v4(),
            element: ref_sbDom.value,
            autoPan: false,
            offset: [0, -60],
            positioning: 'bottom-center',
            stopEvent: true,
            autoPanAnimation: {
              duration: 250
            }
          })
          state.map.addOverlay(state.qyParams.sbOverlay)
        }
      })
    }
    const onCloseQy = () => {
      state.qyParams.overlay.setPosition(undefined)
      state.qyParams.tempFeature.get('resetStyle')()
      state.qyParams.tempFeature = null
      state.qyParams.qyInfo = {}
      state.qyParams.analysisSource?.clear()
      store.dispatch('gis/LOAD_ACTIVE_QY_ID', null)
    }
    const onCloseSb = () => {
      state.qyParams.sbOverlay.setPosition(undefined)
      state.qyParams.tempSbFeature.get('resetStyle')()
      state.qyParams.tempSbFeature = null
    }
    const handleRangeBlur = () => {
      if (!state.qyParams.qyInfo['5'].radius) {
        state.qyParams.qyInfo['5'].radius = 10
      }
      setCircle()
    }
    const setCircle = () => {
      const transformProjection = (arr, EPSG, EPSG2) => {
        try {
          if (EPSG2 && EPSG) {
            if (arr && arr.length === 4) {
              return proj.transformExtent(arr, EPSG, EPSG2);
            } else {
              return proj.transform(arr, EPSG, EPSG2);
            }
          }
          return undefined;
        } catch (e) {
          console.error(e);
        }
      }
      state.qyParams.analysisCircle.getGeometry().setRadius(transformProjection([state.qyParams.qyInfo['5'].radius * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
    }
    const onRadiusSubmit = () => {
      if (!state.qyParams.analysisLayer) {
        state.qyParams.analysisSource = new source.Vector()
        state.qyParams.analysisLayer = new layer.Vector({
          zIndex: 9,
          source: state.qyParams.analysisSource,
          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.3)',
              }),
            })
          ]
        });
        state.qyParams.analysisCircle = new ol.Feature({
          geometry: new geom.Circle(state.qyParams.qyInfo.coordinates, 0),

        })
        state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
        setCircle()
        state.map.addLayer(state.qyParams.analysisLayer)
      }
      state.qyParams.analysisSource.clear()
      state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
      state.qyParams.qyInfo['5'].tableData = []
      state.qyParams.qyInfo['5'].loading = true
      that.$api.deviceQuery({
        lon: state.qyParams.qyInfo.coordinates[0],
        lat: state.qyParams.qyInfo.coordinates[1],
        radius: 0.5
      }).then((res: any) => {
        // console.log(res)
        // for (let i = 0; i < 500; i++) {
        //   state.qyParams.qyInfo['5'].tableData.push({
        //     name: '505县道新安村路口1-枪机-0110580_' + i,
        //     code: '46044123124125125',
        //     status: i % 3 === 0 ? '1' : '0',
        //     typeName: '公安类',
        //     type: i % 3 === 0 ? 'galsb' : (i % 3 === 1 ? 'shlsb' : 'mylsb'),
        //     wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`
        //   })
        // }
        if (res.resp_code === 0 && res.datas?.length > 0) {
          console.log(res.datas?.length)
          const features: any = []
          res.datas?.forEach(v => {
            try {
              const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
              let type = ''
              if (v.type = '公安类') {
                type = 'galsb'
              } else if (v.type = '社会类') {
                type = 'shlsb'
              } else if (v.type = '民用类') {
                type = 'mylsb'
              }
              feat.set('defaultStyle', SbStyle.sbStyle(type))
              feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(type)])
              feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
              feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
              feat.set('isAnalysis', true)
              feat.set('resetStyle', () => {
                if (feat.get('isAnalysis')) {
                  feat.setStyle(feat.get('analysisStyle'))
                } else {
                  feat.setStyle(feat.get('defaultStyle'))
                }
              })
              feat.setStyle(feat.get('analysisStyle'))
              feat.set('featureType', 'sb')
              feat.set('info', v)
              feat.setId(v.deviceid)
              features.push(feat)
              state.qyParams.qyInfo['5'].tableData.push(v)
            } catch (e) {
              console.error('异常设备', v)
            }
          })
          state.qyParams.analysisSource.addFeatures(features)
        }
        state.qyParams.qyInfo['5'].loading = false
      }).catch(() => {
        state.qyParams.qyInfo['5'].loading = true
      })
    }
    const onRadiusReset = () => {
      state.qyParams.qyInfo['5'].radius = 10
      onRadiusSubmit()
    }
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      mapLoad,
      ToolsMapper,
      ref_search,
      menuCpt,
      searchHandleMapSearch,
      searchToMapLocation,
      toolsHandleClick,
      ref_qyDom,
      onCloseQy,
      onCloseSb,
      handleRangeBlur,
      setCircle,
      onRadiusSubmit,
      onRadiusReset,
      ref_sbDom
    }
  },
})
</script>

<style scoped lang="scss">
.gis-layout {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .map {
    z-index: 1;
  }
  .gis-menu {
    $diff: 14px;
    $menuBottom: 16px;
    position: absolute;
    z-index: 2;
    bottom: $menuBottom;
    display: flex;
    justify-content: center;
    align-items: center;
    &:before, &:after {
      content: '';
      background-image: url("@/assets/images/gis-layout/gis-layout-menu_side.png");
      width: 246px;
      height: 39px;
      position: absolute;
      bottom: -$menuBottom;
    }
    &:before {
      left: calc((#{$diff} + 246px) * -1);
    }
    &:after {
      right: calc((#{$diff} + 246px) * -1);
      transform: rotateY(180deg);
    }
    .gis-menu-bottom {
      position: absolute;
      height: 9px;
      width: calc(100% + 10px + #{$diff} * 2);
      bottom: -$menuBottom;
    }
    .gis-menu-item {
      width: 95px;
      height: 36px;
      background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-min.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #60AEFF;
      &:not(&:last-child) {
        margin-right: 4px;
      }
      &.active {
        color: #FFFFFF;
        background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-min_active.png");
      }
      &.max {
        width: 125px;
        background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-max.png");
        &.active {
          background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-max_active.png");
        }
      }
    }
  }
  .gis-tools {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    width: 404px;
    >div {
      box-sizing: border-box;
    }
    .gt-search {
      height: 38px;
      width: 100%;
      display: flex;
      align-items: center;
      .search-icon {
        width: 54px;
        height: 100%;
        background-color: #3e8ef7;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      :deep(.el-autocomplete) {
        flex: 1;
        height: 100%;
        .el-input {
          width: 100%;
          height: 100%;
          .el-input__wrapper {
            border-radius: 0;
          }
        }
      }
      :deep(.el-autocomplete__popper) {
        opacity: 0.9;
        background-image: linear-gradient(45deg,transparent 10px,#101D69 10px), linear-gradient(-135deg,transparent 10px,#101D69 10px);
        border: none;
        .el-popper__arrow::before {
          background: #101D69;
          border-color: #101D69;
        }
        .el-autocomplete-suggestion {
          .el-scrollbar {
            .el-autocomplete-suggestion__wrap {
              .el-scrollbar__view {
                >li {
                  &:hover {
                    background-color: rgba(59,84,172,0.5);
                  }
                  .search-item {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    >img {
                      margin-right: 6px;
                      width: 16px;
                      height: 16px;
                    }
                    .name {
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .gt-tools {
      width: 100%;
      height: 38px;
      margin-top: 2px;
      background-color: #FFFFFF;
      border: 1px solid #C7CFDE;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 8px;
      .tools-item {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #AEAEAE;
        &.active {
          color: #1174DB;
          font-weight: bold;
        }
        &.disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
      .tools-line {
        width: 1px;
        height: 16px;
        background: linear-gradient(0deg, rgba(174,174,174,0) 0%, rgba(213,213,213,0.99) 50%, rgba(174,174,174,0) 100%);
      }
    }
    .gt-tools-component {
      width: 100%;
      margin-top: 2px;
    }
  }
  .gis-content {
    z-index: 4;
  }
  .qy-info {
    $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;
          }
        }
        .qy-main-content-5-table {
          margin-top: 10px;
          width: 440px;
          :deep(.__gis-overlay_table-v2) {
            .el-table-v2__header-cell{
              justify-content: center;
              &:nth-child(2) {
                color: #00C6FC;
              }
            }
            .el-table-v2__header-cell, .el-table-v2__row-cell {
              width: 60px !important;
              $w1: 60px;
              $w3: 60px;
              $w4: 60px;
              $w5: 60px;
              &:nth-child(1) {
                width: $w1 !important;
              }
              &:nth-child(2) {
                width: calc(100% - #{$w1} - #{$w3} - #{$w4} - #{$w5} - 6px) !important;
              }
              &:nth-child(3) {
                width: $w3 !important;
              }
              &:nth-child(4) {
                width: $w4 !important;
              }
              &:nth-child(5) {
                width: $w5 !important;
              }
            }
          }
        }
      }
    }
  }
  .sb-info {
    $footH: 10px;
    width: 220px;
    background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
    border-radius: 0px 4px 4px 4px;
    position: relative;
    display: flex;
    justify-content: center;
    &:after {
      content: '';
      position: absolute;
      bottom: -$footH;
      border-top: $footH solid #0043C4;
      border-left: $footH solid transparent;
      border-right: $footH solid transparent;
    }
    .sb-info-head {
      min-width: 68px;
      height: 18px;
      position: absolute;
      top: -18px;
      left: 0;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      line-height: 8px;
      &:before {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
        border-radius: 2px 2px 0 0;/* 设置圆角 */
        transform: perspective(20px)rotateX(4deg);
        /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
        transform-origin: bottom left;
        /* bottom left = left bottom = 0 100% 中心点偏移量*/
      }
      .svg-icon {
        margin: 0 4px 0 6px;
      }
    }
    .sb-info-close {
      position: absolute;
      right: 0;
      top: -16px;
    }
    .sb-main {
      width: 100%;
      height: auto;
      padding: 10px;
      .sb-item {
        display: flex;
        .sb-item-label {
          width: 42px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #08FFFF;
          line-height: 20px;
        }
        .sb-item-value {
          flex: 1;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 20px;
        }
      }
      .play-button {
        width: 76px;
        height: 24px;
        background: #1280F1;
        border-radius: 2px;
        border: 1px solid #4BA0FF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: calc((100% - 76px) / 2);
        margin-top: 10px;
      }
    }
  }
}
</style>