yclw/src/views/groupPage/districtPageModules/pipeUnitInfo/index.vue

<template>
  <ComMapBox ref="ComMapBox">
    <div class="widget-pipeUnitInfo">
      <div class="header">
        <div class="wrap">
          <div class="title">{{ title }}</div>
          <span class="close" @click="close()">
            <i class="el-icon-close" />
          </span>
        </div>
      </div>
      <div class="content">
        <el-tabs value="info">
          <el-tab-pane label="概览" name="info"
            ><BaseInfo ref="baseInfoPanel" :apiUrls="apiUrls" :currentUnit="currentUnit"
          /></el-tab-pane>
          <el-tab-pane label="设计" name="design"><Design ref="designPanel" /></el-tab-pane>
          <el-tab-pane label="扫码" name="sminfo"><SmInfo ref="scanPanel" /></el-tab-pane>
          <el-tab-pane label="质量" name="quality"><Quality ref="qualityPanel" /></el-tab-pane>
          <el-tab-pane label="合同材料" name="contract"><Contract ref="contractPanel" /></el-tab-pane>
          <el-tab-pane label="图纸档案" name="document"><Dcouments ref="dcoumentPanel" /></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </ComMapBox>
</template>

<script lang="ts">
import _ from 'lodash'
import Config from './config.json'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComMapBox from '@/views/groupPage/components/ComMapBox.vue'
//内容组件
import BaseInfo from '@/views/groupPage/districtPageModules/pipeUnitInfo/BaseInfo.vue'
import Design from '@/views/groupPage/districtPageModules/pipeUnitInfo/Design.vue'
import SmInfo from '@/views/groupPage/districtPageModules/pipeUnitInfo/SmInfo.vue'
import Quality from '@/views/groupPage/districtPageModules/pipeUnitInfo/Quality.vue'
import Contract from '@/views/groupPage/districtPageModules/pipeUnitInfo/Contract.vue'
import Dcouments from '@/views/groupPage/districtPageModules/pipeUnitInfo/Documents.vue'
//API以及帮助工具
import apis from '@/api/PipeUnitInfo'
import {
  createTooltip,
  converCesiumToSuperMapEllipse,
  CesiumToSuperMap,
  PipeUnitInfoPipe,
  queryMapByGeometry,
  queryByAttribute,
  drawRect
} from '@/views/groupPage/util'
const Cesium = (window as any).Cesium
const SuperMap = (window as any).SuperMap
//属性查看
@Component({ name: 'pipeUnitInfo', components: { ComMapBox, BaseInfo, Design, SmInfo, Quality, Contract, Dcouments } })
export default class pipeUnitInfo extends Vue {
  position: Array<any> = []
  viewer
  primitiveCollection
  pointPrimitiveCollection
  polylineprimitiveCollection
  title: string = ''
  apiUrls = {
    bjsmidfw: '',
    sjdt: '',
    sjfw: '',
    createPicNode: '/tofly-sxgk/structure/createPicNode', //检查井部件二维码
    createPicPipe: '/tofly-sxgk/structure/createPicPipe' //管道部件二维码
  }
  getDircList = null
  pickType = 'point' //点选（point）、框选(rect)模式
  clickType = '' //用于点击(click)不缩放情况
  isInteractive: boolean = true //是否与gis场景交互
  locateUnit = null //用于不合GIS场景交互情况下，查看部件信息{}
  toolTip = null
  tooltipHandler = null
  selectPick = null
  currentUnit = {
    geoType: '',
    code: '',
    prjId: ''
  }
  //computed
  get mapConfig() {
    return this.$store.state.bigScreen.mapConfig
  }
  mounted() {
    //
    this.viewer = (window as any).viewer

    this.getDirc(() => {
      this.apiUrls.sjfw = this.mapConfig.gisResource.tiplayers.config['sjfw'].url
      this.apiUrls.bjsmidfw = this.mapConfig.gisResource.tiplayers.config['bjsmidfw'].url
      this.apiUrls.sjdt = this.mapConfig.gisResource.maps.config['sjdt'].url
      if (this.isInteractive) {
        if (this.pickType === 'point') {
          this.addPointClickEvent()
        } else {
          this.addRectClickEvent()
        }
      } else {
        if (this.locateUnit) {
          this.queryForPipeUnitInfoByPBS(this.locateUnit.name, this.locateUnit.id)
        }
      }
    })
  }
  /**
   * 获取图层空间管理信息表
   *
   */
  getDirc(callback) {
    let data = {
      current: 1,
      size: 1000
    }
    apis.getLayermanagement(data).then((results) => {
      this.getDircList = results.result.records
      callback()
    })
  }
  //点选
  addPointClickEvent() {
    this.toolTip = createTooltip(document.querySelector('#' + this.$store.state.bigScreen.mapContainerId))
    const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    this.tooltipHandler = 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
        }
      })
      this.close()
      const positions = converCesiumToSuperMapEllipse(ellpise)
      this.queryForPipeUnitInfoByPolygon(positions.positions)
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.setInputAction((movement) => {
      this.toolTip.showAt(movement.endPosition, '<p>鼠标左键确定缓冲中心,右键单击取消</p>')
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    this.tooltipHandler.setInputAction(
      function (movement) {
        this.otherDestroy()
      }.bind(this),
      Cesium.ScreenSpaceEventType.RIGHT_CLICK
    )
  }
  /**
   * 框选查询
   */
  addRectClickEvent() {
    const drawRectHandler = drawRect(
      document.querySelector('#' + this.$store.state.bigScreen.mapContainerId),
      this.viewer,
      (ids) => {
        const leftTopPoint = this.viewer.scene.pickPosition(ids.leftTopPoint)
        const rightBottomPoint = this.viewer.scene.pickPosition(ids.rightBottomPoint)
        const leftBottomPoint = this.viewer.scene.pickPosition(ids.leftBottomPoint)
        const rightTopPoint = this.viewer.scene.pickPosition(ids.rightTopPoint)

        const positions = [leftTopPoint, leftBottomPoint, rightBottomPoint, rightTopPoint]
        this.queryForPipeUnitInfoByPolygon(positions)
      }
    )
    drawRectHandler.activate()
  }
  /**
   * 该方法用于空间查询数据服务
   * @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 = PipeUnitInfoPipe
    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) && sjpipe.pipeType === 'SJ'
      })
      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
        filters.push(filter)
      }
    })
    if (filters.length === 0) return
    const onComplete = function (geoResult) {
      if (geoResult.originResult.currentCount === 0) {
        this.$message.warning('当前范围内无管网数据')
        this.close()
        return
      }
      this.flashMapService(geoResult.originResult.recordsets, geoResult.originResult.totalCount)
    }.bind(this)
    queryMapByGeometry({
      url: this.apiUrls.sjdt,
      datasetNames: filters,
      geometry: geometry,
      fields: [fieldName.id, fieldName.pbs, fieldName.pipeID],
      completed: onComplete.bind(this),
      failed: function (err) {
        console.log(err)
      }
    })
    if (!this.primitiveCollection) {
      this.primitiveCollection = new Cesium.PrimitiveCollection()
      this.viewer.scene.primitives.add(this.primitiveCollection)
    }
  }
  /**
   * 该方法用于添加二维管线高亮
   * @param records
   */
  flashMapService(records, totalCount) {
    if (!records || records.length === 0) return
    if (!this.primitiveCollection) return
    const primtCol = this.primitiveCollection
    primtCol.removeAll()
    this.selectPick = null
    records.forEach((record) => {
      if (record.features.length == 0) return false

      record.features.forEach((feature) => {
        const geometry = feature.geometry.points
        const geotype = feature.geometry.type.toLowerCase().indexOf('line') > -1 ? 'LINE' : 'POINT'

        if (geotype === 'LINE') {
          const pointA = Cesium.Cartesian3.fromDegrees(geometry[0].x, geometry[0].y, 200)
          const pointB = Cesium.Cartesian3.fromDegrees(geometry[1].x, geometry[1].y, 200)

          primtCol.add(this.generaGroundPolyline([pointA, pointB], feature, totalCount === 1))
        } else {
          const pointS = Cesium.Cartesian3.fromDegrees(geometry[0].x, geometry[0].y, 70)
          primtCol.add(this.generaGroundCircle(pointS, 1.5, feature, totalCount === 1))
        }
      })
    })
    if (primtCol.length === 1) {
      const primitive = primtCol.get(0)
      this.showUnitInfoPanel(primitive.geometryInstances.id)
      // this.showUnitInfoPanel('HB06BB02.001.01.01.27')
    } else {
      this.addPrimitiveHandler()
    }
  }
  //添加多选容器
  addPrimitiveHandler() {
    this.clearDrawEvent()
    this.toolTip = createTooltip(document.querySelector('#' + this.$store.state.bigScreen.mapContainerId))
    const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    this.tooltipHandler = handler
    const that = this
    handler.setInputAction(function () {}, Cesium.ScreenSpaceEventType.WHEEL)
    handler.setInputAction(function (movement) {
      that.removeHightLight(that.selectPick)
      var pick = that.viewer.scene.drillPick(movement.position)
      if (pick.length != 0) {
        that.showSelect(pick)
      } else {
        this.close()
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.setInputAction(
      function (movement) {
        that.toolTip.showAt(movement.endPosition, '<p>鼠标左键选择高亮管线,右键单击取消</p>')
      }.bind(this),
      Cesium.ScreenSpaceEventType.MOUSE_MOVE
    )
    handler.setInputAction(
      function (movement) {
        that.otherDestroy()
      }.bind(this),
      Cesium.ScreenSpaceEventType.RIGHT_CLICK
    )
  }
  /**
   *
   * @param pick 屏幕点击获取到的对象
   */
  showSelect(pick) {
    if (pick.length > 0) {
      this.pickHightLight(pick[0])
      this.showUnitInfoPanel(pick[0].id)
    }
  }
  /**
   * 对象高亮
   * @param pick 拾取对象
   * @param index 对象索引值
   */
  pickHightLight(pick) {
    var attributes = pick.primitive.getGeometryInstanceAttributes(pick.id) //获取某个实例的属性集
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(255, 125, 0)) //设置其高亮
    this.selectPick = 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)) //设置其初始颜色
    }
  }
  /**
   * 该方法用于生成贴地线图元
   * @returns groundPolylinePrimitive
   */
  generaGroundPolyline(positions, 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.GroundPolylineGeometry({
        positions: positions,
        width: 15.0
      }),
      attributes: {
        color: color
      },
      id: code
    })
    const polyline = new Cesium.GroundPolylinePrimitive({
      geometryInstances: instance,
      appearance: new Cesium.PolylineColorAppearance(),
      classificationType: Cesium.ClassificationType.TERRAIN
    })
    polyline.custom = { id: id, pipeId: pipeId }
    return polyline
  }
  /**
   * 该方法用于生成贴地圆图元
   * @returns groundPolylinePrimitive
   */
  generaGroundCircle(center, 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.0
      }),
      attributes: {
        color: color
      },
      id: code
    })
    const circle = new Cesium.GroundPrimitive({
      geometryInstances: instance,
      appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
      }),
      classificationType: Cesium.ClassificationType.TERRAIN
    })
    circle.custom = { id: id, pipeId: pipeId }
    return circle
  }
  /**
   * 该方法用于根据pbs编码定位部件位置
   * @param pbs
   */
  showUnitInfoPanel(pbs) {
    const data = {
      pbs: pbs
    }
    apis.getPidByPbs(data).then((result) => {
      if (result.code !== 1) return
      let lyName = result.result.layerName
      const code = pbs
      if (lyName.indexOf(',') > -1) {
        lyName = lyName.split(',')[1]
      } else {
        lyName = lyName
      }
      this.queryForPipeUnitInfoByPBS(lyName, code)
    })
  }
  /**
   * 该方法用于通过iserver接口利用pbs编码查询构件信息
   * @param {string} tableName 数据服务中的三维数据表名
   * @param {string} code 构件pbs编码
   */
  queryForPipeUnitInfoByPBS(tableName, code) {
    const gl = this
    const queryParameter = Config.queryParameter
    const datasets = queryParameter.datasets
    const dataset = _.find(datasets, function (item) {
      return item.layername === tableName
    })
    if (dataset) {
      const options = {
        url: this.apiUrls.sjfw,
        datasetNames: [queryParameter.dataSource + ':' + dataset.layername],
        whereclause: "CODE='" + code + "'",
        completed: function (result) {
          if (result.result.featureCount > 0) {
            // this.clearAllPrimitives() //先清除已存在的高亮对象
            //交互式部件查看不需高亮
            if (!gl.isInteractive) {
              this.entitiesHighLight(result, code, dataset.name)
            } //++
            const attrs = result.result.features[0].attributes
            const geometry = result.originResult.features[0].geometry
            const geoType = geometry.type
            gl.formPipeAttribs(geoType, attrs)
            //添加部件类型
            const title = attrs['TYPE'] + ' ' + attrs['PIPE_ID']
            gl.location(geometry, () => {
              gl.title = title
              gl.initPanle()
            })
          }
        }.bind(this),
        failed: function (error) {
          console.error(error)
        }
      }
      queryByAttribute(options)
    }
  }
  /**
   * 该方法用于组织管线或管点属性信息
   * @param {object} attrs 属性信息
   * @param {string} geotType 几何类型
   * @returns {Array<any>} 返回包含中文字段名的信息
   */
  formPipeAttribs(geotType, attrs) {
    const unitType = geotType === 'LINE3D' ? 'LINE' : 'POINT'
    const fields = Config.fieldsInfo[unitType]
    let info = []
    for (let name in fields) {
      info.push({ title: fields[name], value: attrs[name] })
    }
    //记录部件类型和PBScode
    this.currentUnit.code = attrs['CODE']
    this.currentUnit.prjId = attrs['PRJ_ID']
    this.currentUnit.geoType = unitType
    return info
  }
  /**
   * 提供对外接口时，定位至构件位置
   * @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)
    ;(this.$refs['ComMapBox'] as any).setPosition(Cesium.Cartographic.toCartesian(scenePosition))
    const camera = this.viewer.camera
    if (this.clickType === 'click') {
      completed()
    } else {
      camera.flyTo({
        destination: cartesian3,
        orientation: {
          heading: camera.heading,
          pitch: Cesium.Math.toRadians(-82),
          roll: 0
        },
        complete: completed()
      })
    }
  }
  //各面板数据注入
  initPanle() {
    //设计信息初始化
    let sjhtml = ''
    let designInfos: any = this.currentUnit.geoType === 'LINE' ? Config.pipeDesignInfo : Config.pointDesignInfo
    let simpleInfos: any = this.currentUnit.geoType === 'LINE' ? Config.fieldsInfo.LINE : Config.fieldsInfo.POINT
    designInfos = replaceUpperCase(designInfos, 1)
    simpleInfos = replaceUpperCase(simpleInfos, 2)
    function replaceUpperCase(obj, type) {
      const result = Object.keys(obj).map((item) => {
        return {
          title: type == 1 ? item : obj[item],
          code: type == 1 ? obj[item].replace(/_/g, '').toLowerCase() : item.replace(/_/g, '').toLowerCase()
        }
      })
      return result
    }
    const apirequest =
      this.currentUnit.geoType === 'LINE'
        ? apis.getPipeInfo({ code: this.currentUnit.code })
        : apis.getNodeInfo({ code: this.currentUnit.code })
    apirequest.then((res) => {
      let result = res.result
      if (res.result.pressureType) {
        let indexInfo = ''
        switch (res.result.pressureType) {
          case '1':
            indexInfo = '待建'
            break
          case '2':
            indexInfo = '建设中'
            break
          case '3':
            indexInfo = '完工'
            break
        }
        if (indexInfo != '') {
          // let dom = $('.bubbletitle')
          // let title = dom.text()
          // //modify by tmx 20210630 统一图层和业务库中部件编码显示
          // let arrTitle = title.split(' ')
          // if (arrTitle.length > 0) {
          //   dom.text(arrTitle[0] + ' ' + (res.result.pipeId ? res.result.pipeId : '') + '(' + indexInfo + ')')
          // } else {
          //   dom.text(dom.text() + '(' + indexInfo + ')')
          // }
        }
      }
      if (result !== null) {
        result = Object.keys(result).map((item) => {
          let temp = item.toLowerCase()
          return {
            compare: temp,
            value: result[item]
          }
        })
        designInfos.forEach((item) => {
          result.forEach((el) => {
            if (item.code === el.compare) {
              item.value = el.value
            }
          })
        })
        simpleInfos.forEach((item) => {
          result.forEach((el) => {
            if (item.code === el.compare) {
              if (item.code == 'flowdirection') {
                let value = el.value + ''
                item.value = value == '0' ? '起点到终点' : value == '1' ? '终点到起点' : value == '2' ? '双向流动' : '/'
              } else {
                item.value = el.value
              }
            }
          })
        })
        //概述信息
        ;(this.$refs.baseInfoPanel as any).showUnitInfoPage(res.result, simpleInfos)
        //设计信息
        ;(this.$refs.designPanel as any).showDesignPage(designInfos)
        // 合同信息初始化
        ;(this.$refs.contractPanel as any).showhtclPage(result, this.currentUnit)
      } else {
        // sjhtml += `<tbody>
        //           <tr><td style="text-align: center">暂无设计信息</td></tr>
        //       </tbody>`
        // this.domObj
        //   .find('#' + this.unitQualityID)
        //   .empty()
        //   .append("<table class='table'>" + sjhtml + '</table>')
      }
    })
    const unitInfo = this.currentUnit
    // 质量信息初始化
    if (unitInfo.code) {
      ;(this.$refs.qualityPanel as any).showUnitQualityPage(unitInfo.code)
    }
    //扫码信息初始化
    if (unitInfo.code && unitInfo.geoType) {
      ;(this.$refs.scanPanel as any).showSmInfoPage(unitInfo.geoType, 'CON', unitInfo.code, unitInfo.prjId)
    }
    //档案信息资料
    ;(this.$refs.dcoumentPanel as any).showDAPage(unitInfo)
  }
  //清除所有元素
  otherDestroy() {
    this.clearDrawEvent()
    this.clearAllPrimitives()
    this.$store.state.bigScreen.propertiesViewValue = null
    this.close()
  }
  //清除所有元素并清空属性选择
  reset() {
    this.clearDrawEvent()
    this.clearAllPrimitives()
  }
  //清除鼠标事件
  clearDrawEvent() {
    if (this.toolTip) {
      this.toolTip.remove()
      this.toolTip = null
    }
    if (this.tooltipHandler && !this.tooltipHandler.isDestroyed()) {
      this.tooltipHandler.destroy()
      this.tooltipHandler = null
    }
  }
  /**
   * 该方法用于清除二维点和线的primitivecollection
   */
  clearAllPrimitives() {
    this.viewer.scene.layers.releaseSelection()
    if (this.pointPrimitiveCollection) {
      this.pointPrimitiveCollection.removeAll()
      const isPointDel = this.viewer.scene.primitives.remove(this.pointPrimitiveCollection)
      if (isPointDel) this.pointPrimitiveCollection = null
    }
    if (this.polylineprimitiveCollection) {
      this.polylineprimitiveCollection.removeAll()
      const isPolylineDel = this.viewer.scene.primitives.remove(this.polylineprimitiveCollection)
      if (isPolylineDel) this.polylineprimitiveCollection = null
    }
    if (this.primitiveCollection) {
      this.primitiveCollection.removeAll()
      const isDel = this.viewer.scene.primitives.remove(this.primitiveCollection)
      if (isDel) this.primitiveCollection = null
    }
  }
  //关闭弹窗
  close() {
    ;(this.$refs['ComMapBox'] as any).remove()
  }
}
</script>

<style lang='scss' scoped>
.widget-pipeUnitInfo {
  height: 2.864583rem /* 550/192 */;
  width: 5rem /* 960/192 */;
  background-color: rgba(7, 44, 73, 0.86);
  .header {
    padding: 0.026042rem /* 5/192 */;
    background: #0ea7ff;
    .wrap {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0.026042rem /* 5/192 */;
      background: rgba(6, 13, 25, 1);
      box-shadow: 0 0 8px 5px #060d19;
      border-radius: 2px;
      .title {
        font-size: 0.072917rem /* 14/192 */;
        font-family: Source Han Sans CN-HEAVY;
        font-weight: bold;
        color: #0ea7ff;
        background: linear-gradient(0deg, #a3d3ff 0%, #e4f3ff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .close {
        color: #a3d3ff;
        font-size: 0.083333rem /* 16/192 */;
        cursor: pointer;
      }
    }
  }
  .content {
    padding: 0.052083rem /* 10/192 */ 0.104167rem /* 20/192 */;
    >>> .el-tabs {
      height: 100%;
      width: 100%;
      padding: 0;
      .el-tabs__item {
        font-size: 0.072917rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
      }
      .el-tabs__item.is-active {
        color: #0ea7ff;
        background: transparent;
      }
      .el-tabs__item:hover {
        color: #0ea7ff;
      }
      .el-tabs__content {
        height: calc(100% - 42px);
        color: #8eb2ce;
      }
      .el-tab-pane {
        height: 100%;
        width: 100%;
      }
      .el-tabs__nav-wrap::after {
        background-color: rgba(14, 167, 255, 0.2);
      }
    }
    /deep/ .el-input__inner {
      background: rgba(14, 167, 255, 0.2);
      border: none;
      border-radius: 2px;
      color: #e5f4ff;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    >>> .el-input.value {
      flex: 0.6;
      display: inline-block;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: black;
      border: none;
    }
    >>> span.title {
      flex: 0.4;
      display: block;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 6px;
      position: relative;
      float: left;
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      color: #82bae2;
    }
  }
  .content:after {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 50% !important;
    border-width: 14px;
    border-style: solid;
    border-color: transparent #fff;
    display: block;
    border-top-color: rgba(7, 44, 73, 0.86);
    border-left-color: rgba(255, 255, 255, 0);
    width: 0;
    border-right-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgba(255, 255, 255, 0);
  }
}
</style>