<template>
  <div class="widget-pipeunitnowinfo">
    <div class="item" v-for="info in infos" :key="info.title">
      <span class="title" :title="info.title">{{ info.title }}:</span>
      <span class="value" :title="info.value">{{ info.value }}</span>
    </div>
    <!-- <div class="card">
       
        <div class="card-body">
            <table id="baseInfoTb" class="table table-borderless table-sm">
                <tbody>
                </tbody>
            </table>
        </div>
    </div> -->
  </div>
</template>
<script>
import { InfoWindow, createTooltip, CesiumToSuperMap } from '@/utils/mapCommon/tools'
import PipeQueryHelper from '@/utils/mapCommon/PipeQueryHelper'
import $ from 'jquery'
import _ from 'lodash'
import Config from './config.json'
let gPrimitiveCollection = null
let gPointPrimitiveCollection = null
let gPolylineprimitiveCollection = null
let gToolTip = null
let gTooltipHandler = null
let gInfoWindow = null
let gSelectPick = null //已选中的对象
export default {
  name: 'PipeUnitNowInfo',
  data() {
    return {
      infos: [],
      isInteractive: true, //是否与模型交互
      locateUnit: undefined,
      _selectFeatures: [],
      apiUrls: {
        getUnitInfo: '/tofly-sxgkloc/structure/spatialData',
        sjfw: ''
      }
    }
  },
  computed: {
    AppX() {
      return this.$store.getters.AppX
    }
  },
  mounted() {
    if (!window.viewer) return
    this.viewer = window.viewer
    this.apiUrls.sjfw = this.AppX.appConfig.gisResource.tiplayers.config['sjfw'].url
    if (!gPrimitiveCollection) {
      gPrimitiveCollection = new Cesium.PrimitiveCollection()
      this.viewer.scene.primitives.add(gPrimitiveCollection)
    }
    this.initInfoWindow()
    if (this.isInteractive) {
      gInfoWindow._setHandler(true)
      this.addPointClickEvent()
    } else {
      if (this.locateUnit) {
        gInfoWindow._handler.setInputAction(function () {}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        this.queryForpipeunitnowinfoBySQL(this.locateUnit.name, this.locateUnit.sql)
      }
    }
  },
  methods: {
    /**
     * 该方法用于初始化信息窗,考虑工程结构树的对外接口
     *
     */
    initInfoWindow() {
      if (!this.AppX.appConfig.infowindow) {
        this.AppX.appConfig.infowindow = InfoWindow(
          document.querySelector('#' + this.$store.state.cesiumMap.mapContainerId),
          this.viewer
        )
      }
      gInfoWindow = this.AppX.appConfig.infowindow
      this.domObj = $(gInfoWindow._div)
      var that = this
      this.domObj
        .find('.bubbleclose')
        .off('click')
        .on('click', function () {
          if (!that.isInteractive) {
            that.clearSelection()
          }
          that.domObj.hide() //++
        })
    },
    /**
     * 该方法用于更新对话库中的部件信息
     * @param unitInfo
     *
     */
    updateUnitInfo(unitInfo) {
      this.infos = unitInfo.baseInfo
    },
    /**
     * 该方法用于组织管线或管点属性信息
     * @param {object} attrs 属性信息
     * @param {string} geotType 几何类型
     * @returns {Array<any>} 返回包含中文字段名的信息
     */
    formPipeAttribs(geotType, attrs, pipeType) {
      const unitType = geotType === 'LINE3D' ? 'LINE' : 'POINT'
      const fieldsInfo = pipeType === 'SJ' ? Config.sjFieldsInfo : Config.pcFieldsInfo
      const fields = fieldsInfo[unitType]
      let info = []
      for (let name in fields) {
        info.push({ title: fields[name], value: attrs[name] })
      }
      return info
    },
    /**
     *  点选
     */
    addPointClickEvent() {
      gToolTip = createTooltip(document.querySelector('#' + this.$store.state.cesiumMap.mapContainerId))
      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
      gTooltipHandler = handler
      handler.setInputAction((e) => {
        const radius = 2
        const position = this.viewer.scene.pickPosition(e.position)
        const ellpise = new Cesium.Entity({
          position: position,
          ellipse: {
            semiMajorAxis: radius,
            semiMinorAxis: radius,
            material: Cesium.Color.ORANGERED,
            classificationType: Cesium.ClassificationType.TERRAIN
          }
        })
        gInfoWindow.hide()
        const positions = PipeQueryHelper.converCesiumToSuperMapEllipse(ellpise)
        this.queryForPipeUnitInfoByPolygon(positions.positions)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      handler.setInputAction((movement) => {
        gToolTip.showAt(movement.endPosition, '<p>鼠标左键确定缓冲中心,右键单击取消</p>')
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      gTooltipHandler.setInputAction(
        function (movement) {
          this.otherDestroy()
        }.bind(this),
        Cesium.ScreenSpaceEventType.RIGHT_CLICK
      )
    },
    /**
     * 该方法用于空间查询数据服务
     * @param {Cesium.Cartesian3[]} positions 多边形顶点
     */
    queryForPipeUnitInfoByPolygon(positions) {
      const geometry = CesiumToSuperMap.convertPolygon(Cesium, SuperMap, { positions: positions })

      const layers = this.viewer.scene.layers
      const layerList = layers.layerQueue
      const fieldName = Config.fields
      const pipeInfo = []
      const allPipe = PipeQueryHelper.pipe
      const filters = []
      layerList.forEach((item) => {
        if (!item.visible) return false
        const pipe = _.find(allPipe, (sjpipe) => {
          const isnode = sjpipe.geometryType === 'point' && sjpipe.WELL.indexOf(item.name) > -1
          const ispipe = sjpipe.geometryType === 'line' && item.name === sjpipe.name
          return isnode || ispipe
        })
        if (!pipe) return false
        let unipipeInfo = { dataset: null }
        if (pipe.geometryType === 'line') {
          unipipeInfo.dataset = pipe.origindataset
        } else if (pipe.geometryType === 'point' && pipe.WELL.indexOf(item.name) > -1) {
          unipipeInfo.dataset = pipe.origindataset
        }
        const isExsit = _.find(pipeInfo, (pipeItem) => {
          return pipeItem.dataset === unipipeInfo.dataset
        })
        if (!isExsit) {
          pipeInfo.push(unipipeInfo)
          const filter = unipipeInfo.dataset + '@' + pipe.datasource
          // const filter = new SuperMap.REST.FilterParameter({
          //     name: unipipeInfo.dataset + "@" + pipe.datasource,
          //     fields: [fieldName.id, fieldName.pbs, fieldName.pipeID]
          // });
          filters.push(filter)
        }
      })
      if (filters.length === 0) return
      const onComplete = function (geoResult) {
        if (geoResult.originResult.currentCount === 0) {
          this.$message.warning('当前范围内无管网数据')
          return
        }
        // if (gTooltipHandler && !gTooltipHandler.isDestroyed()) {
        //     gTooltipHandler.destroy();
        //     gTooltipHandler = null;
        // }
        this.flashMapService(geoResult.originResult.recordsets, geoResult.originResult.totalCount)
      }.bind(this)
      PipeQueryHelper.queryMapByGeometry({
        url: this.AppX.appConfig.gisResource.tiplayers.config['geoquery'].url,
        datasetNames: filters,
        geometry: geometry,
        completed: onComplete.bind(this),
        failed: function (err) {
          console.log(err)
        }
      })
    },
    /**
     * 该方法用于添加二维管线高亮
     * @param records
     */
    flashMapService(records, totalCount) {
      const that = this
      //that.pointArrCluster.splice(0,this.pointArrCluster.length);//清空已存在的数据
      if (!records || records.length === 0) return
      if (!gPrimitiveCollection) return
      const primtCol = gPrimitiveCollection
      primtCol.removeAll()
      //保存feature属性信息
      const newFeatures = []
      records.forEach((record) => {
        record.features.forEach((feature) => {
          const obj = new Object()
          feature.fieldNames.forEach((fieldName, index) => {
            obj[fieldName] = feature.fieldValues[index]
          })
          obj['s3mlayername'] = record.datasetName.split('@')[0]
          newFeatures.push(obj)
        })
      })
      this._selectFeatures = newFeatures
      //fade材质
      let t = 0.0
      const linefadeMaterial = Cesium.Material.fromType(Cesium.Material.FadeType, {
        repeat: true,
        fadeInColor: Cesium.Color.CYAN,
        fadeOutColor: Cesium.Color.CYAN.withAlpha(0.0),
        time: new Cesium.Cartesian2(0.0, 0.0),
        fadeDirection: {
          x: false,
          y: false
        }
      })
      records.forEach((record) => {
        if (record.features.length == 0) return false
        // const pipe = _.find(that.config.pipe, function (item: any) {
        //     return item.smidmapname === record.datasetName;
        // })
        // const ids = record.features.map(item => { return item.ID; });
        // const s3mNames = pipe.geometryType === "line" ? [pipe.name] : pipe.WELL;
        const layerName = record.datasetName
        record.features.forEach((feature) => {
          const geometry = feature.geometry.points
          const geotype = feature.geometry.type.toLowerCase().indexOf('line') > -1 ? 'LINE' : 'POINT'
          let entity
          if (geotype === 'LINE') {
            const pointA = Cesium.Cartesian3.fromDegrees(geometry[0].x, geometry[0].y)
            const pointB = Cesium.Cartesian3.fromDegrees(geometry[1].x, geometry[1].y)
            primtCol.add(this.generaGroundPolyline([pointA, pointB], layerName, feature, totalCount === 1))
            //primtCol.show=false;
            const pointL = [geometry[0].x, geometry[0].y, geometry[0].z]
            //this.pointArrCluster.push(pointL);
          } else {
            const pointS = Cesium.Cartesian3.fromDegrees(geometry[0].x, geometry[0].y, 1000)
            primtCol.add(this.generaGroundCircle(pointS, 10, 1.5, layerName, feature, totalCount === 1))
            //primtCol.show=false;
            const pointR = [geometry[0].x, geometry[0].y, geometry[0].z]
            //this.pointArrCluster.push(pointR);
          }
        })
      })
      if (totalCount === 1) {
        const primitive = primtCol.get(0)
        that.queryForpipeunitnowinfoBySQL(primitive.custom.tablename, primitive.custom.sql)
      } else {
        this.clearDrawEvent()
        this.addPrimitiveHandler()
      }
    },
    addPrimitiveHandler() {
      if (gToolTip) {
        gToolTip.remove()
        gToolTip = null
      }
      gToolTip = createTooltip(document.querySelector('#' + this.$store.state.cesiumMap.mapContainerId))
      //二维亮圈比例变换
      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
      gTooltipHandler = handler
      const that = this
      const fields = Config.fields
      handler.setInputAction(function () {}, Cesium.ScreenSpaceEventType.WHEEL)
      handler.setInputAction(function (movement) {
        that.removeHightLight(gSelectPick)
        var pick = that.viewer.scene.pick(movement.position)
        if (pick) {
          that.pickHightLight(pick)
          const tablename = pick.primitive.custom.tablename
          const sql = pick.primitive.custom.sql
          that.queryForpipeunitnowinfoBySQL(tablename, sql)
        } else {
          gInfoWindow.hide()
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      handler.setInputAction(
        function (movement) {
          gToolTip.showAt(movement.endPosition, '<p>当前范围内有多条管线，鼠标左键选中目标管线,右键单击取消</p>')
        }.bind(this),
        Cesium.ScreenSpaceEventType.MOUSE_MOVE
      )
      handler.setInputAction(
        function (movement) {
          that.otherDestroy()
        }.bind(this),
        Cesium.ScreenSpaceEventType.RIGHT_CLICK
      )
    },
    /**
     * 该方法用于通过iserver接口利用smid查询构件信息
     * @param {string} tableName 数据服务中的二维数据表名
     * @param {number} whereclause 查询条件
     */
    queryForpipeunitnowinfoBySQL(tableName, whereclause) {
      const gl = this
      const pipes = PipeQueryHelper.pipe
      const queryParameter = _.find(pipes, function (item) {
        return item.origindataset === tableName
      })
      if (queryParameter) {
        const options = {
          url: this.apiUrls.sjfw,
          datasetNames: [queryParameter.datasource + ':' + queryParameter.threeDDateset],
          whereclause: whereclause,
          completed: function (result) {
            if (result.result.featureCount > 0) {
              if (!gl.isInteractive) {
                //去除高亮
                gl.clearSelection()
                //高亮
                gl.clickHightLight(result.originResult)
              }
              const attrs = result.result.features[0].attributes
              const geometry = result.originResult.features[0].geometry
              const geoType = geometry.type
              const baseInfo = gl.formPipeAttribs(geoType, attrs, queryParameter.pipeType)
              //添加部件类型
              //baseInfo.unshift({ "title": "类型", "value": queryParameter.title });
              let config = Config.pipeunitnowinfo
              config.baseInfo = baseInfo
              const title = queryParameter.title + ' ' + attrs['PIPE_ID']
              const pbsCode = attrs['CODE']
              if (!gl.isInteractive) {
                gl.location(geometry, function () {
                  gInfoWindow.show(title, gl.$el)
                  gl.updateUnitInfo(config)
                })
              } else {
                gl.location(geometry, function () {
                  gInfoWindow.show(title, gl.$el)
                  gl.updateUnitInfo(config)
                })
              }
            } else {
              gInfoWindow.hide()
            }
          },
          failed: function (error) {
            console.error(error)
          }
        }
        this.queryByAttribute(options)
      }
    },
    /**
     * 清除拾取对象框
     */
    removePickInfo() {
      this.parentDom = $('#mainMap .pickUpInfo')
      if (this.parentDom.hasClass('show')) {
        this.parentDom.removeClass('show')
      }
      this.parentDom.empty()
    },
    /**
     * 对象高亮
     * @param pick 拾取对象
     * @param index 对象索引值
     */
    pickHightLight(pick) {
      var attributes = pick.primitive.getGeometryInstanceAttributes(pick.id) //获取某个实例的属性集
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(255, 125, 0)) //设置其高亮
      gSelectPick = pick
    },
    /**
     * 清除对象高亮
     * @param pick
     * @param index
     */
    removeHightLight(pick) {
      if (pick) {
        var attributes = pick.primitive.getGeometryInstanceAttributes(pick.id) //获取某个实例的属性集
        attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(0, 255, 255, 100)) //设置其初始颜色
      }
    },
    /**
     * 该方法用于属性查询(查询数据服务)
     * @param options
     */
    queryByAttribute(options) {
      const filterparams = new SuperMap.REST.FilterParameter({
        attributeFilter: options.whereclause,
        fields: options.fields
      })
      const sqlParams = new SuperMap.REST.GetFeaturesBySQLParameters({
        queryParameter: filterparams,
        datasetNames: options.datasetNames,
        toIndex: -1
      })
      const queryservice = new SuperMap.REST.GetFeaturesBySQLService(options.url, {
        eventListeners: {
          processCompleted: options.completed,
          processFailed: options.failed
        }
      })
      queryservice.processAsync(sqlParams)
    },
    /**
     * 提供对外接口时，定位至构件位置
     * @param geometry 几何图形
     * @param completed 回调函数
     */
    location(geometry, completed) {
      const position = geometry.position
      const location = Cesium.Cartographic.fromDegrees(position.x, position.y, position.z + 50)
      const scenePosition = Cesium.Cartographic.fromDegrees(position.x, position.y, position.z)
      const cartesian3 = Cesium.Cartographic.toCartesian(location)
      gInfoWindow._scenePosition = Cesium.Cartographic.toCartesian(scenePosition)
      const camera = this.viewer.camera
      camera.flyTo({
        destination: cartesian3,
        orientation: {
          heading: camera.heading,
          pitch: Cesium.Math.toRadians(-82),
          roll: 0
        },
        complete: completed()
      })
    },
    /**
     * 查询结果二三维高亮
     * @param result
     * @returns
     */
    entitiesHighLight(result, pbsCode, name) {
      const that = this
      if (result.originResult.featureCount === 0) {
        return
      }
      // this.hightLight3D(pbsCode,name);
      this.clickHightLight(result.originResult)
    },
    /**
     * 二维高亮
     * @param result
     * @returns
     */
    clickHightLight(result) {
      if (!gPolylineprimitiveCollection) {
        gPolylineprimitiveCollection = new Cesium.PrimitiveCollection()
        this.viewer.scene.primitives.add(gPolylineprimitiveCollection) //添加线容器
      }
      if (!gPointPrimitiveCollection) {
        gPointPrimitiveCollection = new Cesium.PointPrimitiveCollection()
        this.viewer.scene.primitives.add(gPointPrimitiveCollection) //添加点容器
      }
      if (!result) return
      if (!gPolylineprimitiveCollection) return
      if (!gPointPrimitiveCollection) return
      const geometry = result.features[0].geometry.points
      const geotype = result.features[0].geometry.type
      if (geotype === 'LINE3D') {
        const pointA = Cesium.Cartesian3.fromDegrees(geometry[0].x, geometry[0].y, geometry[0].z)
        const pointB = Cesium.Cartesian3.fromDegrees(geometry[1].x, geometry[1].y, geometry[0].z)
        gPolylineprimitiveCollection.add(GroundPolyline([pointA, pointB]))
      } else {
        const pointS = Cesium.Cartesian3.fromDegrees(geometry[0].x, geometry[0].y, geometry[0].z)
        gPointPrimitiveCollection.add({
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          pixelSize: 30,
          color: Cesium.Color.fromBytes(255, 125, 0),
          outlineColor: Cesium.Color.TRANSPARENT,
          outlineWidth: 0.0,
          position: pointS
        })
      }
      function GroundPolyline(positions) {
        const instance = new Cesium.GeometryInstance({
          geometry: new Cesium.GroundPolylineGeometry({
            positions: positions,
            width: 15.0
          }),
          attributes: {
            color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.5, 0.0, 1)
          }
        })
        const polyline = new Cesium.GroundPolylinePrimitive({
          geometryInstances: instance,
          appearance: new Cesium.PolylineColorAppearance(),
          classificationType: Cesium.ClassificationType.TERRAIN
        })
        return polyline
      }
    },
    clearDrawEvent() {
      if (gToolTip) {
        gToolTip.remove()
        gToolTip = null
      }
      if (gTooltipHandler && !gTooltipHandler.isDestroyed()) {
        gTooltipHandler.destroy()
        gTooltipHandler = null
      }
    },
    /**
     * 清除高亮显示
     */
    clearSelection() {
      this.viewer.scene.layers.releaseSelection()
      this.clearAllPrimitives()
    },
    /**
     * 该方法用于清除二维点和线的primitivecollection
     */
    clearAllPrimitives() {
      if (gPointPrimitiveCollection) {
        gPointPrimitiveCollection.removeAll()
        const isPointDel = this.viewer.scene.primitives.remove(gPointPrimitiveCollection)
        if (isPointDel) gPointPrimitiveCollection = null
      }
      if (gPolylineprimitiveCollection) {
        gPolylineprimitiveCollection.removeAll()
        const isPolylineDel = this.viewer.scene.primitives.remove(gPolylineprimitiveCollection)
        if (isPolylineDel) gPolylineprimitiveCollection = null
      }
    },
    /**
     * 设置选中的空间数据
     */
    setSpaceSelect(target, condition, dircList, attributes) {
      Object.keys(target).forEach((item) => {
        if (item.indexOf(condition) !== -1) {
          const result = dircList.find((v) => {
            if (v.name == target[item].parentLayer && v.layerType == target[item].type) return v
          })
          this.selectTarget = {
            layerId: result.id,
            prjId: attributes['PRJ_ID'],
            partsCode: attributes['PARTS_CODE'],
            size: 1000
          }
        }
      })
    },
    /**
     * 清除临时对象
     */
    clearObjs() {
      if (gToolTip) {
        gToolTip.remove()
        gToolTip = null
      }
      if (gInfoWindow) {
        gInfoWindow.remove()
        gInfoWindow = null
        this.AppX.appConfig.infowindow = null
      }
      //this.activeCursor(false);
      if (gTooltipHandler && !gTooltipHandler.isDestroyed()) {
        gTooltipHandler.destroy()
        gTooltipHandler = null
      }
      this.clearPrimitives()
      this.clearAllPrimitives()
    },
    /**
     * 该方法用于清除primitivecollection
     */
    clearPrimitives() {
      if (gPrimitiveCollection) {
        gPrimitiveCollection.removeAll()
        const isDel = this.viewer.scene.primitives.remove(gPrimitiveCollection)
        if (isDel) gPrimitiveCollection = null
      }
    },
    /**
     * 其他模块操作冲突销毁
     */
    otherDestroy() {
      this.clearObjs()
      gSelectPick = null
    },
    /**
     * 该方法用于生成贴地线图元
     * @returns groundPolylinePrimitive
     */
    generaGroundPolyline(positions, mapname, feature, isPicked) {
      const fields = Config.fields
      const pipe = _.find(PipeQueryHelper.pipe, (item) => {
        return item.mapname === mapname
      })
      const id = feature.fieldValues[feature.fieldNames.indexOf(fields.id)]
      const code =
        pipe.pipeType === 'SJ'
          ? feature.fieldValues[feature.fieldNames.indexOf(fields.pbs)]
          : feature.fieldValues[feature.fieldNames.indexOf(fields.pipeID)]
      const pipeId = feature.fieldValues[feature.fieldNames.indexOf(fields.pipeID)]
      const color = isPicked
        ? new Cesium.ColorGeometryInstanceAttribute(1.0, 0.5, 0.0, 1.0)
        : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
      const instance = new Cesium.GeometryInstance({
        geometry: new Cesium.GroundPolylineGeometry({
          positions: positions,
          width: 15.0
        }),
        attributes: {
          color: color
        },
        id: code
      })
      const polyline = new Cesium.GroundPolylinePrimitive({
        geometryInstances: instance,
        // appearance: new Cesium.MaterialAppearance({
        //     material: material,
        //     faceForward: true,
        //     flat: true
        // }),
        appearance: new Cesium.PolylineColorAppearance(),
        classificationType: Cesium.ClassificationType.TERRAIN
      })
      let sql = ''
      if (pipe.pipeType === 'SJ') {
        sql = fields.pbs + "='" + code + "'"
      } else {
        sql = fields.pipeID + "='" + code + "'"
      }
      polyline.custom = { tablename: pipe.origindataset, sql: sql }
      return polyline
    },
    /**
     * 该方法用于生成贴地圆图元
     * @returns groundPolylinePrimitive
     */
    generaGroundCircle(center, radius, axis, mapname, feature, isPicked) {
      const fields = Config.fields
      const pipe = _.find(PipeQueryHelper.pipe, (item) => {
        return item.mapname === mapname
      })
      const id = feature.fieldValues[feature.fieldNames.indexOf(fields.id)]
      const code =
        pipe.pipeType === 'SJ'
          ? feature.fieldValues[feature.fieldNames.indexOf(fields.pbs)]
          : feature.fieldValues[feature.fieldNames.indexOf(fields.pipeID)]
      const pipeId = feature.fieldValues[feature.fieldNames.indexOf(fields.pipeID)]
      const color = isPicked
        ? new Cesium.ColorGeometryInstanceAttribute(1.0, 0.5, 0.0, 1.0)
        : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
      const instance = new Cesium.GeometryInstance({
        geometry: new Cesium.EllipseGeometry({
          center: center,
          semiMajorAxis: axis,
          semiMinorAxis: axis,
          height: 100
        }),
        attributes: {
          color: color
        },
        id: code
      })
      const circle = new Cesium.GroundPrimitive({
        geometryInstances: instance
      })
      let sql = ''
      if (pipe.pipeType === 'SJ') {
        sql = fields.pbs + "='" + code + "'"
      } else {
        sql = fields.pipeID + "='" + code + "'"
      }
      circle.custom = { tablename: pipe.origindataset, sql: sql }
      return circle
    },
    /**
     * 贴地线
     * @param positions
     * @returns
     */
    GroundPolyline(positions) {
      const instance = new Cesium.GeometryInstance({
        geometry: new Cesium.GroundPolylineGeometry({
          positions: positions,
          width: 15.0
        }),
        attributes: {
          color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.5, 0.0, 1)
        }
      })
      const polyline = new Cesium.GroundPolylinePrimitive({
        geometryInstances: instance,
        appearance: new Cesium.PolylineColorAppearance(),
        classificationType: Cesium.ClassificationType.TERRAIN
      })
      return polyline
    },
    /**
     * 该方法用于生成贴地圆图元
     * @returns groundPolylinePrimitive
     */
    GroundCircle(center, radius, axis, feature, isPicked) {
      // const fields = Config.fields;
      // const id = feature.fieldValues[feature.fieldNames.indexOf(fields.id)];
      // const code = feature.fieldValues[feature.fieldNames.indexOf(fields.pbs)];
      // const pipeId = feature.fieldValues[feature.fieldNames.indexOf(fields.pipeID)];
      const color = isPicked
        ? new Cesium.ColorGeometryInstanceAttribute(1.0, 0.5, 0.0, 1.0)
        : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
      const instance = new Cesium.GeometryInstance({
        geometry: new Cesium.EllipseGeometry({
          center: center,
          semiMajorAxis: axis,
          semiMinorAxis: axis,
          height: 100
        }),
        attributes: {
          color: color
        }
        //id: code
      })
      const circle = new Cesium.GroundPrimitive({
        geometryInstances: instance
      })
      //circle.custom = { id: id, pipeId: pipeId };
      return circle
    }
  }
}
</script>
<style lang="scss" scoped>
.widget-pipeunitnowinfo {
  height: 100%;
  overflow-y: auto;
  .item {
    position: relative;
    width: 95%;
    //padding: 14px 0px 0px 10px;
    display: flex;
    align-items: center;
    padding: 5px;

    span.value {
      flex: 0.6;
      display: inline-block;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      color: black;
      border: none;
    }
    span.title {
      flex: 0.4;
      display: block;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      color: #888888;
      padding: 6px;
      position: relative;
      float: left;
    }
  }
}
</style>
<style lang="scss">
.bubblewindow {
  max-width: unset;
  max-height: unset;
  height: 394px;
  width: 440px;

  .bubblecontent {
    overflow: hidden;
    background-color: #fff;
  }
}

.bubblewindow:after {
  left: 216px;
}
</style>