index.vue

<template lang="pug">
    //div(onselectstart="return false;"  @mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup")
    div(onselectstart="return false;")
        div(class="top_button" style="width:100%;height:40px; padding-top:3px;overflow:hidden;")
            div(style="float:left;margin-left:16px;")
                div(:class="[item.value,iconId==item.id?item.value+'2':'']" name="iconListNow" :title="item.name" :style="{cursor:editable?'pointer':''}" :id="item.id" @click="changeIcon(item)" v-for="item in typeList")
            div(style="float:right; margin-top:6px;")
                el-button(type="primary" size='mini' style="margin-right:10px;" @click="changeEditable" v-if="!editable && isAuth('sys:point:edit')") 编辑
                el-button(type="primary" size='mini' style="margin-right:10px;" @click="handleCancel" v-if="editable" :disabled='cancelDisabled') 取消
                el-button(type="primary" size='mini' style="margin-right:10px;" @click="updateHandle" v-if="editable && isAuth('sys:point:update')" :disabled='listItem?false:true') 修改
                el-button(type="primary" size='mini' style="margin-right:10px;" @click="deleteHandle" v-if="editable && isAuth('sys:point:delete')" :disabled='listItem?false:true') 删除
                el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" :disabled='submitlDisabled' v-if="editable && isAuth('sys:point:save')") 保存
        div(style="clear:both")
        el-container( style='padding-left:0px;')
            el-aside(width="18vw" style='height:750px')
                el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;')
                    div(class="monitor_point_left_top")
                        div.title-bold(slot='header' class="monitor_point_left_topL") 资源点列表
                        div(class="monitor_point_left_topR")
                            el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable)
                    //- el-tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
                    el-tree.dic_tree( :data="treeData"  ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode"  :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick2" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
                        span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }")
                            span(v-if="node.data.level == 3" class="el-icon-zhandian xa-icon")
                            //- span(v-if="node.data.level == 3 && node.data.iconB" class="el-icon-wq-treeIcon1")
                            span(v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon")
                            span(v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon")
                            span(v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin xa-icon")
                            span(v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi xa-icon")
                            span(v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing xa-icon")
                            span(v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha xa-icon")
                            span(v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon')
                            <span style="position: relative;" >&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
                            span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
            el-main(style="padding:0px;")
                el-card.tableCard
                    div(slot='header'  ref="sprtDom" )
                        el-row(:span="24")
                            el-col(:md='12' :sm="5" class='tier-btn')
                                el-button(type="primary" size='mini' plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin:6px 10px 0 0; " v-for="item in mapList" :key='item.id' @click="changeMap(item)") {{item.name}}
                            el-col(:md='12' :sm="5")
                                div(style="float:right;")
                                    div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)")
                    el-row(style="padding-bottom:15px;height:680px" ,:span="24")
                        el-col()
                            <div id="map" style="width: 100%;height: 680px;position: relative;"></div>
                        el-col()

                    // 弹窗, 新增 / 修改
                    add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', :p-list='list' @refreshdatalist='refreshdatalist' @refreshBean='refreshBean' @addNotify='addNotify')
                    query-detail(v-if='queryDetailVisible', ref='queryDetail')
            span(:class="spanDragData.name" v-if="spanDragData.show" :style="{left:spanDragData.x+'px',top:spanDragData.y+'px',position:'fixed'}")
</template>

<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
// openlayer
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Projection } from 'ol/proj'
import { getCenter } from 'ol/extent'
import Modify from 'ol/interaction/Modify'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction'
import Draw from 'ol/interaction/Draw'
import LineString from 'ol/geom/LineString'

// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
let that
export default {
  data() {
    return {
      featureItem: '',
      listItem: '',
      imgLayerList: [],
      iconId: '',
      iconStyle: null,
      mapsrc1: null,
      imgurl1: '',
      mapsrc2: null,
      imgurl2: '',
      mapsrc3: null,
      imgurl3: '',
      imageSrc: '', //资源点图片名称
      jing: '',
      wei: '',
      hwId: [],
      gxRotate: '',
      ssId: '',
      isDone: false,
      drawer: false,
      isCollapse: true,
      delflag: true,
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      urlPath: window.CONFIG.urlPath,
      treeData: [],
      systemList: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level: 'level'
      },
      nodeKey: 'id',
      station: {}, //当前选择的站点
      mapList: [], //当前站点的所有层
      stationMap: {}, //当前选择的层
      resource: {}, //当前选择的资源点
      typeList: [],
      checkedData: {
        stationId: '',
        stationName: '',
        type: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId')
      },
      currentNode: {},
      dragAble: false,
      list: [],
      searchInput: '',
      obj: 'pointer-events:none',
      editable: false,
      clickItem: {},
      iconNameListBottom: [],
      spanDragData: {
        x: 0,
        y: 0,
        show: false,
        name: ''
      },
      spanDragListNow: {},
      mousemoveStatus: false,
      drawType: 'None',
      draw: null,
      lineList: [],
      vectorLayer: null,
      lineVectorLayer: null,
      modify: null,
      //当前选择的层级
      tierMap: null,
      cancelDisabled: false,
      submitlDisabled: false
    }
  },
  components: {
    AddOrUpdate,
    QueryDetail
  },
  watch: {
    searchInput(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    that = this
    this.initTree()
    this.initResourceTypeDicList()
  },
  methods: {
    changeIcon(e) {
      this.iconId = e.id
      this.iconStyle = null
      this.lineList = []
      this.drawType = 'None'
      if (!this.map) {
        return
      }
      this.map.removeInteraction(this.draw)
      if (this.editable) {
        this.iconStyle = e
        if (
          this.iconStyle.name === '红外探测器' ||
          this.iconStyle.name === '振动光纤'
        ) {
          this.drawType = 'LineString'
        } else {
          this.drawType = 'Point'
        }
      }
      this.addInteraction()
    },
    // 初始化地图
    initMap(url) {
      let mapList = this.mapList
      // 计算静态地图映射到地图上的范围
      let extent = [-1100, 110, 1460, 820]
      let projection = new Projection({
        // 投影
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      })
      if (mapList.length > 0) {
        for (var i = 0; i < mapList.length; i++) {
          let layerItem = new ImageLayer({
            id: mapList[i].id,
            source: new ImageStatic({
              url: mapList[i].readPath, //这里添加静态图片的地址
              projection: projection,
              imageExtent: extent
            }),
            visible: false
          })
          this.imgLayerList.push(layerItem)
        }
      }
      let zoomControl = new Zoom({
        delta: 0.2,
        zoomInTipLabel: '',
        zoomOutTipLabel: ''
      })
      // 大图
      this.map = new Map({
        target: 'map',
        layers: this.imgLayerList,
        controls: [zoomControl],
        view: new View({
          projection: projection,
          center: getCenter([0, 0, 418, 600]), // 获取范围的中心坐标。
          zoom: 2.5,
          maxZoom: 5,
          minZoom: 1.5,
          extent: [-1100, -100, 2000, 1000] //[minX,minY,maxX,maxY] 控制拖动
        })
      })
      // 删除默认的双击事件
      const dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom
        })
      this.map.removeInteraction(dblClickInteraction)

      this.changeVectorLayer(this.list)

      this.map.on('click', function (evt) {
        let feature = evt.map.forEachFeatureAtPixel(
          evt.pixel,
          function (feature) {
            return feature
          }
        )
        console.log('***当前点击***', feature)
        let coordinate = evt.coordinate //鼠标单击点的坐标
        if (feature) {
          that.cancelDisabled = false
          for (let i in that.list) {
            //true弹出详情页面
            that.mapClick(feature, that.list[i], true)
          }
        } else {
          //编辑状态下添加资源点事件（不包含红外探测器和振动光纤）
          if (that.iconStyle === null || !that.editable) {
          } else {
            if (
              that.iconStyle.name === '红外探测器' ||
              that.iconStyle.name === '振动光纤'
            ) {
              return
            }
            let bean = that.addPoint(coordinate)
            that.cancelDisabled = false
            that.list.push(bean)
            that.iconStyle = null
            that.lineList = []

            let newFeature = that.vectorLayer
              .getSource()
              .getFeatureById(bean.key)
            for (let i in that.list) {
              //true弹出详情页面
              that.mapClick(newFeature, that.list[i], false)
            }
            that.updateHandle()
          }
        }
      })
    },
    openAddOrUpdate(item) {
      if (this.editable) {
        this.addOrUpdateHandle(item)
      } else {
        this.queryDetail(item)
      }
    },
    mapClick(feature, item, flag) {
      console.log(item, 11)
      //默认样式
      let style = this.getPointStyle(item.imageSrc + '.png', item.name)
      //选中样式
      let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
      //获取feature对象
      let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
      //获取红外探测器或者振动光纤第二个点的feature对象
      let featureEnd = this.vectorLayer
        .getSource()
        .getFeatureById(item.key + 'end')
      if (feature_) {
        if (feature_ === feature || featureEnd === feature) {
          // console.log('选中了', feature_)
          //修改选中样式
          feature_.setStyle(style2)
          if (featureEnd) {
            featureEnd.setStyle(style2)
          }
          //未编辑状态下 点击查看
          if (flag) {
            if (!this.editable) this.openAddOrUpdate(item)
          }
          that.listItem = JSON.parse(JSON.stringify(item)) //地图上图标对应 list中的数据
        } else {
          //清除选中以外的样式
          feature_.setStyle(style)
          if (featureEnd) {
            featureEnd.setStyle(style)
          }
        }
      } else {
        //获取新增的feature对象
        let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
        //获取红外探测器或者振动光纤第二个点的feature对象
        let newFeatureEnd = this.vectorLayer
          .getSource()
          .getFeatureById(item.key + 'end')
        if (newFeature) {
          if (newFeature === feature || newFeatureEnd === feature) {
            newFeature.setStyle(style2)
            if (newFeatureEnd) {
              newFeatureEnd.setStyle(style2)
            }
            //未编辑状态下 点击查看
            if (flag) {
              if (!this.editable) this.openAddOrUpdate(item)
            }
            that.listItem = JSON.parse(JSON.stringify(item))
          } else {
            //清除选中以外的样式
            newFeature.setStyle(style)
            if (newFeatureEnd) {
              newFeatureEnd.setStyle(style)
            }
          }
        }
      }
    },
    //添加点
    addPoint(coordinate) {
      let bean = this.getNewBox(
        this.iconStyle,
        parseFloat(coordinate[0]).toFixed(2),
        parseFloat(coordinate[1]).toFixed(2),
        this.iconStyle.value
      )
      //新建一个要素ol.Feature
      let newFeature = new OlFeature({
        geometry: new OlGeomPoint(coordinate) //几何信息
      })
      newFeature.setStyle(
        this.getPointStyle(this.iconStyle.value + '.png', this.iconStyle.name)
      ) //设置要素样式
      newFeature.setId(bean.key)
      this.vectorLayer.getSource().addFeature(newFeature)
      //添加需要拖动的点
      this.modify.source_.addFeature(newFeature)
      return bean
    },
    //添加线
    addInteraction() {
      let value = this.drawType
      if (value === 'LineString') {
        //创建类型为LineString的Draw对象
        this.draw = new Draw({
          source: this.vectorLayer.getSource(),
          type: this.drawType,
          maxPoints: 2,
          style: this.getLineStyle(),
          // 绘制时停止点击事件
          stopClick: true
        })
        //添加绘制对象
        this.map.addInteraction(this.draw)
        let bean = null

        //画线开始事件
        this.draw.on('drawstart', function (evt) {
          //获取坐标
          let coordinate = evt.target.sketchCoords_[0]
          //添加点
          bean = that.addPoint(coordinate)
          bean.addOrUpdate = 'save'
          that.list.push(bean)
        })
        //画线结束事件
        this.draw.on('drawend', function (evt) {
          //将draw绘制的线设置为透明色
          evt.feature.setStyle(that.setLineNone)
          //获取坐标
          let coordinate_ = evt.target.sketchCoords_[0]
          let coordinate = evt.target.sketchCoords_[1]
          let lineCoordinate = []
          lineCoordinate.push([coordinate_[0], coordinate_[1]])
          lineCoordinate.push([coordinate[0], coordinate[1]])
          //自定义绘制线
          let lineFeature = new OlFeature(new LineString(lineCoordinate))
          lineFeature.setId(bean.key + 'line')
          that.lineVectorLayer.getSource().addFeature(lineFeature)
          //添加需要拖动的线
          that.modify.source_.addFeature(lineFeature)
          //新建一个要素ol.Feature
          let newFeature = new OlFeature({
            geometry: new OlGeomPoint(coordinate) //几何信息
          })
          newFeature.setStyle(
            that.getPointStyle(
              that.iconStyle.value + '.png',
              that.iconStyle.name
            )
          ) //设置要素样式
          newFeature.setId(bean.key + 'end')
          //添加结束的点
          that.vectorLayer.getSource().addFeature(newFeature)
          //添加需要拖动的点
          that.modify.source_.addFeature(newFeature)

          bean.xpoint = parseFloat(coordinate[0]).toFixed(2)
          bean.ypoint = parseFloat(coordinate[1]).toFixed(2)
          that.list.push(bean)
          that.iconStyle = null
          that.lineList = []
          //删除绘制对象
          that.map.removeInteraction(that.draw)

          for (let i in that.list) {
            //true弹出详情页面
            that.mapClick(
              that.vectorLayer.getSource().getFeatureById(bean.key),
              that.list[i],
              false
            )
          }
          that.updateHandle()
        })
      }
    },
    setLineNone() {
      let style = new OlStyleStyle({
        stroke: new Stroke({
          color: 'transparent',
          width: 1
        })
      })
      return style
    },
    getLineStyle(src, name, flag) {
      let style = new OlStyleStyle({
        stroke: new Stroke({
          color: '#409EFF',
          width: 3
        })
      })
      return style
    },
    getPointStyle(src, name, zoom) {
      let style = new OlStyleStyle({
        image: new OlStyleIcon({
          anchor: [0.5, 0.5],
          scale: zoom || 0.4,
          //rotation:0 旋转度
          src: require('@/assets/images/imgs/' + src)
        }),
        text: new Text({
          text: name, // 添加文字描述
          font: 'bold 14px font-size', // 设置字体大小
          stroke: new Stroke({ color: 'white', width: 5 }), //设置文字背景
          fill: new Fill({
            // 设置字体颜色
            color: 'blue'
          }),
          offsetY: 30 // 设置文字偏移量
        })
      })
      return style
    },
    changeVectorLayer(list) {
      if (list) {
        this.list = list
      } else {
        return
      }
      if (this.map) {
        this.map.removeLayer(this.vectorLayer)
        this.map.removeLayer(this.lineVectorLayer)
        this.map.removeInteraction(this.modify)
      } else {
        return
      }

      this.lineVectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: []
        }),
        style: new OlStyleStyle({
          stroke: new Stroke({
            color: '#409EFF',
            width: 3
          })
        })
      })
      this.map.addLayer(this.lineVectorLayer)

      let featuresArr = []
      let lineLastArr = []
      for (let i in list) {
        if (list[i].imageSrc) {
          //振动光纤和红外线对射
          if (
            list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' ||
            list[i].type === '4f69755dbc0c45e49c142857286c5669'
          ) {
            let lineFeatures = []
            lineFeatures.push([list[i].xlongit, list[i].ylat])
            lineFeatures.push([list[i].xpoint, list[i].ypoint])
            let lineFeature = new OlFeature(new LineString(lineFeatures))
            lineFeature.setId(list[i].id + 'line')
            this.lineVectorLayer.getSource().addFeature(lineFeature)
            lineLastArr.push(list[i])
          }
          featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
          let style = this.getPointStyle(
            list[i].imageSrc + '.png',
            this.list[i].name
          )
          featuresArr[i].setStyle(style)
          featuresArr[i].setId(list[i].id)
        } else {
          continue
        }
      }
      let LinefeaturesArr = []
      for (let i in lineLastArr) {
        LinefeaturesArr.push(
          this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint)
        )
        let style = this.getPointStyle(
          lineLastArr[i].imageSrc + '.png',
          lineLastArr[i].name
        )
        LinefeaturesArr[i].setStyle(style)
        lineLastArr[i].key = lineLastArr[i].id
        LinefeaturesArr[i].setId(lineLastArr[i].key + 'end')
        this.list.push(lineLastArr[i])
      }

      this.vectorLayer = new OlLayerVector({
        source: new OlSourceVector({
          features: featuresArr.concat(LinefeaturesArr)
        })
      })
      this.map.addLayer(this.vectorLayer)
      //将点和线的Feature对象 ，放在一个数组里面
      let modifyFeatures = this.lineVectorLayer
        .getSource()
        .getFeatures()
        .concat(this.vectorLayer.getSource().getFeatures())
      // this.modify = new Modify({
      //       source: this.vectorLayer.getSource()
      //   })
      this.modify = new Modify({
        source: new OlSourceVector({
          features: modifyFeatures
        })
      })
      this.modify.on('modifyend', (e) => {
        let pixel = this.map.getEventPixel(e.mapBrowserEvent.originalEvent)
        //获取当前拖拽的feature对象，该feature没有id，
        let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel(
          pixel,
          function (feature) {
            return feature
          }
        )

        if (feature) {
          that.cancelDisabled = false
          //feature与features数组对象比较Geometry对象的坐标是否相等可得出当前拖拽的feature的对象
          for (let i in that.list) {
            //根据id获取feature对象
            //let feature_ = that.vectorLayer.getSource().getFeatureById(that.list[i].id)
            //新增的feature对象没保存，是没有id通过，key获取feature对象
            let featureKey = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].key)
            //红外探测器和振动光纤的第二点同过key+'end'获取feature对象
            let featureEnd = that.vectorLayer
              .getSource()
              .getFeatureById(that.list[i].key + 'end')
            if (featureKey || featureEnd) {
              //获取坐标
              let coordinate
              //if (feature_) coordinate = feature_.getGeometry().flatCoordinates
              if (featureKey) {
                coordinate = featureKey.getGeometry().flatCoordinates
              }
              if (
                featureKey &&
                coordinate.toString() ===
                  feature.getGeometry().flatCoordinates.toString()
              ) {
                that.list[i].xlongit = parseFloat(coordinate[0]).toFixed(2)
                that.list[i].ylat = parseFloat(coordinate[1]).toFixed(2)
                that.listItem = JSON.parse(JSON.stringify(that.list[i]))
                // if (that.listItem) {
                //     that.listItem.xlongit = parseFloat(coordinate[0]).toFixed(2)
                //     that.listItem.ylat = parseFloat(coordinate[1]).toFixed(2)
                // }
                let style = that.getPointStyle(
                  that.list[i].imageSrc + '2.png',
                  that.list[i].name,
                  '0.3'
                )
                featureKey.setStyle(style)

                //break
              } else {
                if (featureKey) {
                  let style = that.getPointStyle(
                    that.list[i].imageSrc + '.png',
                    that.list[i].name
                  )
                  featureKey.setStyle(style)
                }
              }
              if (featureEnd) {
                coordinate = featureEnd.getGeometry().flatCoordinates
              }
              if (
                featureEnd &&
                coordinate.toString() ===
                  feature.getGeometry().flatCoordinates.toString()
              ) {
                that.list[i].xpoint = parseFloat(coordinate[0]).toFixed(2)
                that.list[i].ypoint = parseFloat(coordinate[1]).toFixed(2)
                that.listItem = JSON.parse(JSON.stringify(that.list[i]))
                // if (that.listItem) {
                //     that.listItem.xpoint = parseFloat(coordinate[0]).toFixed(2)
                //     that.listItem.ypoint = parseFloat(coordinate[1]).toFixed(2)
                // }
                let style = that.getPointStyle(
                  that.list[i].imageSrc + '2.png',
                  that.list[i].name,
                  '0.3'
                )
                featureEnd.setStyle(style)
                //break
              } else {
                if (featureEnd) {
                  let style = that.getPointStyle(
                    that.list[i].imageSrc + '.png',
                    that.list[i].name
                  )
                  featureEnd.setStyle(style)
                }
              }
            }
          }
        }
      })

      if (this.editable) {
        //添加拖拽监听事件
        this.map.addInteraction(this.modify)
      }
    },
    handRotate(id) {
      this.hwId.push(id)
    },
    getFeature(x, y) {
      return new OlFeature({
        type: 'icon',
        geometry: new OlGeomPoint([x, y])
      })
    },
    handwheel(e, item) {
      let str = e.wheelDelta
      if (str < 0) {
        // 下滚动 100
        item.width = parseInt(item.width) - 10
        if (item.width <= 40) {
          item.width = 40
        }
        //console.log(item.width)
      }
      if (str > 0) {
        // 上滚动 -100
        item.width = parseInt(item.width) + 10
        if (item.width >= 600) {
          item.width = 600
        }
        //console.log(item.width)
      }
    },
    //新建资源点对象
    getNewBox(item, j, w, src) {
      let uuid = getUUID()
        .replace('-', '')
        .replace('-', '')
        .replace('-', '')
        .replace('-', '')
      return {
        id: uuid,
        key: uuid,
        level: 6,
        name: item.name,
        password: '',
        port: '',
        remark: '',
        stationId: this.checkedData.stationId,
        stationName: this.checkedData.stationName,
        tierId: this.checkedData.tierId,
        tierName: this.checkedData.tierName,
        type: item.id,
        modeTypes: '',
        equipmentModel: '',
        maxPower: '',
        installDate: null,
        maintenanceDate: null,
        region: '',
        icon: item.value,
        iconPath: '',
        username: 'admin',
        // xpoint: x || '100',
        // ypoint: y || '100',
        width: 200,
        xlongit: j || '',
        ylat: w || '',
        imageSrc: src,
        isLine: 0,
        //生成资源点编码的前缀
        codeType: item.remark,
        addOrUpdate: 'save'
      }
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    initTree() {
      // console.log('stationId：', this.checkedData.sId)
      this.$http({
        url: this.$http.adornUrl('/liResource/getTreeList'),
        method: 'post',
        data: {
          stationId: this.checkedData.sId,
          name: this.searchInput
        }
      }).then((data) => {
        if (data && data.code === 0) {
          this.treeData = data.tree
          console.log('treeData', this.treeData)
          this.defaultExpandedKeys = []
          this.$nextTick(() => {
            if (
              !this.treeData ||
              this.treeData.length <= 0 ||
              !this.treeData[0].children ||
              this.treeData[0].children.length <= 0
            ) {
              return
            }
            if (!this.tierMap) {
              this.currentNode = this.$refs.tree.getNode(
                this.treeData[0].children[0].id
              ).data
              //将选中的层级树节点设置为选中
              this.$refs.tree.setCurrentNode(this.currentNode)
              Vue.set(this.treeData[0].children[0], 'iconB', true)
              this.defaultExpandedKeys = [this.currentNode.id]
              this.isFlag(this.treeData, this.currentNode.id)
              this.initStation(this.treeData[0].id, null, 1)
            } else {
              //层级
              if (this.tierMap.level === 4) {
                this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data
                this.initStation(this.tierMap.stationId, null, this.tierMap.id)
              }
              //资源点类型
              if (this.tierMap.level === 5) {
                this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data
                this.initStation(
                  this.tierMap.stationId,
                  this.tierMap.children,
                  this.tierMap.id
                )
              }
              //资源点
              if (this.tierMap.level === 6) {
                this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data

                let res = this.$refs.tree.getNode(
                  this.tierMap.tierId + this.tierMap.type
                ).data
                this.initStation(
                  this.tierMap.stationId,
                  res.children,
                  this.tierMap.tierId + this.tierMap.type
                )
              }
              //将选中的层级树节点设置为选中
              this.$refs.tree.setCurrentNode(this.currentNode)
              Vue.set(this.tierMap, 'iconB', true)
              this.defaultExpandedKeys = [this.currentNode.id]
              this.isFlag(this.treeData, this.currentNode.id)
            }
          })
        }
      })
    },
    initStation(id, res, subId) {
      // console.log('初始化站点id：', id)
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      })
        .then((data) => {
          if (data && data.code === 0) {
            if (data.bean) {
              this.station = data.bean
              this.mapList = data.bean.mapList
              this.mapList.forEach((element) => {
                element.readPath = this.urlPath + element.filePath
              })
              this.checkedData.stationId = this.station.id
              this.checkedData.stationName = this.station.stationName
            }
            if (res) {
              this.mapList.forEach((e) => {
                if (res.tierId === e.id) {
                  this.checkedData.tierId = e.id
                  this.checkedData.tierName = e.name
                  this.stationMap = e
                }
              })
            } else {
              if (!this.checkedData.tierId) {
                this.checkedData.tierId = this.mapList[0].id
                this.checkedData.tierName = this.mapList[0].name
                this.stationMap = this.mapList[0]
              }
            }
            // console.log('站点地图：', this.mapList)
          }
        })
        .then(() => {
          if (subId === 1) {
            this.showResourceByMapId(null)
          } else {
            this.showResourceByParentId(subId)
          }
          if (!this.map) {
            this.initMap()
            this.imgLayerList[0].setVisible(true) //初始第一个显示
          } else {
            this.changeVectorLayer(this.list)
          }
        })
    },

    isFlag(data, id) {
      data.forEach((res) => {
        if (res.id === id) {
          Vue.set(res, 'iconB', true)
        } else {
          Vue.set(res, 'iconB', false)
        }
        if (res.children) {
          this.isFlag(res.children, id)
        }
      })
    },
    // 改变层级和鹰眼图
    changeImgControl(id) {
      for (var k = 0; k < this.imgLayerList.length; k++) {
        if (this.imgLayerList[k].values_.id == id) {
          // that.imgurl=map.readPath
          this.imgLayerList[k].setVisible(true)
        } else {
          this.imgLayerList[k].setVisible(false)
        }
      }
    },
    handleNodeClick2(node) {
      //判断是否为编辑状态，如果为编辑状态提示是否保存编辑的图层在跳转
      // if (this.editable && (node.level === 5 || node.level === 4)) {
      //     this.$confirm(`请确认编辑图层是否保存?`, '提示', {
      //         confirmButtonText: '确认',
      //         cancelButtonText: '取消',
      //         type: 'warning',
      //         closeOnClickModal: false
      //     }).then(() => {
      //         this.handleNodeClick(node)
      //     }).catch(() => {
      //
      //     })
      // } else {
      //     this.handleNodeClick(node)
      // }
      this.handleNodeClick(node)
    },
    //线路资源点树节点点击事件
    handleNodeClick(node) {
      // console.log('node.id', node.id)
      //console.log('选中树节点', node)
      this.currentNode = node
      let level = node.level
      let name = node.name
      let id = node.id
      let code = node.code
      this.isFlag(this.treeData, id)
      // this.treeData.forEach(res => {
      //   if (res.id === id) {
      //     Vue.set(res, 'iconB', true)
      //   } else {
      //     Vue.set(res, 'iconB', false)
      //   }
      // })
      //每次选择节点都先清空资源位
      if (level !== 6) {
        // this.list = []
        this.listItem = '' //控制编辑按钮
      }
      if (level === 2) {
        //线路
        this.checkedData.lineId = id
        this.checkedData.lineName = name
      } else if (level === 3) {
        //站点
        this.checkedData.stationId = id
        this.checkedData.stationName = name
        // this.initTreeStationMap(node)
      } else if (level === 4) {
        this.tierMap = node
        //层级
        this.checkedData.tierId = id
        this.checkedData.tierName = name
        this.checkedData.stationId = node.stationId
        this.stationMap = node
        // console.log('选中节点的层级id', this.tierId)
        this.showResourceByMapId(null)
        this.changeVectorLayer(this.list)
        this.changeImgControl(id)
      } else if (level === 5) {
        this.tierMap = node
        //子系统
        this.checkedData.subCode = code
        this.checkedData.subSystem = name
        this.checkedData.stationId = node.stationId
        this.checkedData.tierId = node.tierId

        this.mapList.forEach((element) => {
          if (element.id === node.tierId) {
            this.stationMap = element
            return false
          }
        })

        this.list = JSON.parse(JSON.stringify(node.children))
        // console.log('资源点列表：', this.list)

        this.list.forEach((res) => {
          Vue.set(res, 'active', false)
        })
        this.changeVectorLayer(this.list)
        this.changeImgControl(node.tierId)
      } else if (level === 6) {
        this.tierMap = node
        // var sysId = ''
        // this.systemList.forEach((element) => {
        //   if (node.subCode === element.value) {
        //     sysId = element.id
        //   }
        // })
        // 资源点
        let subNode = this.$refs.tree.getNode(node.tierId + node.type).data
        // console.log('当前要选中的层级节点', subNode)
        this.list = []
        subNode.children.forEach((res) => {
          this.list.push(res)
        })

        this.checkedData.resourceId = id
        this.checkedData.tierId = node.tierId
        this.changeImgControl(node.tierId)
        this.changeVectorLayer(this.list)

        let feature = this.vectorLayer.getSource().getFeatureById(id)
        if (feature) {
          for (let i in this.list) {
            // if (feature.id_ == that.list[i].id) {
            //     this.listItem = JSON.parse(JSON.stringify(that.list[i]))
            // }
            //flag为ture打开详情或者编辑页面
            this.mapClick(feature, that.list[i], false)
          }
        }
      }

      this.iconNameListBottom.forEach((res) => {
        if (this.clickItem && res.id === this.clickItem.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
      //console.log(this.list)
      // this.clickItem = ''
    },
    //切换层级
    changeMap(map) {
      //图层缩放级别设置为默认
      this.map.getView().setZoom(1)
      for (var k = 0; k < this.imgLayerList.length; k++) {
        if (this.imgLayerList[k].values_.id == map.id) {
          // that.imgurl=map.readPath
          this.imgLayerList[k].setVisible(true)
        } else {
          this.imgLayerList[k].setVisible(false)
        }
      }
      this.currentNode = this.$refs.tree.getNode(map.id).data
      this.tierMap = this.currentNode
      // console.log('当前要选中的节点', this.currentNode)
      //将选中的层级树节点设置为选中
      this.$refs.tree.setCurrentNode(this.currentNode)
      this.defaultExpandedKeys = [this.currentNode.id]
      this.isFlag(this.treeData, this.currentNode.id)

      // console.log('当前要选中的节点2', this.currentNode)
      this.checkedData.tierId = map.id
      this.checkedData.tierName = map.name
      let stationNode = this.$refs.tree.getNode(map.stationId).data
      // console.log('当前要选中的站点', stationNode)
      this.checkedData.stationId = stationNode.id
      this.checkedData.stationName = stationNode.name
      this.stationMap = map
      this.iconNameListBottom.forEach((res) => {
        if (res.id === this.clickItem.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
      if (!this.checkedData.tierId) {
        return
      }
      this.showResourceByMapId(null)
      this.changeVectorLayer(this.list)
      this.changeImgControl(map.id)
    },
    //根据层级id展示当前层级所有的资源点
    showResourceByMapId(item) {
      if (!this.checkedData.tierId) {
        return
      }
      let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
      // console.log('当前要选中的层级节点', tierNode.children)
      this.list = []
      tierNode.children.forEach((type) => {
        type.children.forEach((res) => {
          if (item === null || (item != null && item.id === res.type)) {
            this.list.push(res)
          }
        })
      })

      this.list.forEach((res) => {
        Vue.set(res, 'active', false)
      })
      // console.log(this.list, '++++++')
    },
    //根据上级id展示所有的资源点
    showResourceByParentId(id) {
      let node = this.$refs.tree.getNode(id).data
      this.list = []
      if (node.level === 4) {
        node.children.forEach((type) => {
          type.children.forEach((res) => {
            this.list.push(res)
          })
        })
      } else {
        node.children.forEach((e) => {
          this.list.push(e)
        })
      }
    },
    refreshBean(bean) {
      this.listItem = JSON.parse(JSON.stringify(bean))
    },
    refreshdatalist(res) {
      let style = this.getPointStyle(res.imageSrc + '2.png', res.name, '0.3')
      let newItem = this.vectorLayer.getSource().getFeatureById(res.key)
      let newItemEnd = this.vectorLayer
        .getSource()
        .getFeatureById(res.key + 'end')
      if (newItem) newItem.setStyle(style)
      if (newItemEnd) newItemEnd.setStyle(style)
      for (let i in this.list) {
        if (this.list[i].key === res.key) {
          this.list[i] = res
        }
      }
    },
    //保存当前页面上的资源点位置
    saveResourceList() {
      if (this.list.length === 0) {
        this.$message.error('资源点为空不能保存！')
        return
      }
      //数组去重
      let paramList = Array.from(new Set(this.list))

      let flag = true
      //判断是否有无id的新增资源点
      this.list.forEach((res) => {
        if (res.addOrUpdate === 'save') {
          flag = false
          return false
        }
      })
      console.log('paramList:', paramList)
      this.submitlDisabled = true
      if (flag) {
        this.$http({
          url: this.$http.adornUrl(`/liResource/updateList`),
          method: 'post',
          data: paramList
        }).then((data) => {
          // console.log(data)
          if (data.message) {
            this.addNotify(data.message)
            return
          }
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.initTree()
                this.changeEditable()
                this.checkedData.resourceId = ''
                this.delflag = true
                this.iconId = ''
                this.listItem = ''
                this.submitlDisabled = false
              }
            })
          } else {
            this.iconId = ''
            this.$message.error(data.msg)
            this.submitlDisabled = false
          }
        })
        this.submitlDisabled = false
      } else {
        this.$confirm(
          `未填写信息的新增资源点将被忽略，是否继续?`,
          '保存资源点',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false
          }
        )
          .then(() => {
            // console.log('当前页面资源点位置：', this.list)
            this.$http({
              url: this.$http.adornUrl(`/liResource/updateList`),
              method: 'post',
              data: paramList
            })
              .then((data) => {
                // console.log(data)
                if (data && data.code === 0) {
                  if (data.message) {
                    this.addNotify(data.message)
                    return
                  }
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.initTree()
                      this.changeEditable()
                      this.checkedData.resourceId = ''
                      this.delflag = true
                      this.submitlDisabled = false
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                  this.submitlDisabled = false
                }
              })
              .catch(() => {
                this.submitlDisabled = false
              })
          })
          .catch(() => {
            this.submitlDisabled = false
          })
      }
    },
    //提示
    addNotify(message) {
      this.$message({
        type: 'error',
        message: '存在重复信息，保存失败！',
        duration: 1500,
        showClose: true
      })
      this.$notify({
        title: '以下信息存在重复，请核实：',
        message: message,
        duration: 0,
        dangerouslyUseHTMLString: true
      })
      this.submitlDisabled = false
    },
    // 详情
    queryDetail(item) {
      this.queryDetailVisible = true
      //this.handleNodeClick(item)

      this.currentNode = this.$refs.tree.getNode(item.id).data
      //将选中的层级树节点设置为选中
      this.$refs.tree.setCurrentNode(this.currentNode)
      this.defaultExpandedKeys = [this.currentNode.id]
      this.isFlag(this.treeData, this.currentNode.id)

      this.$nextTick(() => {
        this.$refs.queryDetail.init(item.id)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(item) {
      this.resource = null
      this.addOrUpdateVisible = true
      //   this.list.forEach(res => {
      //     if (res.id === id) {
      //       this.resource = res
      //       console.log(this.resource)
      //     }
      //   })
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(item)
      })
    },
    // 移动资源位坐标
    changeResourceLocation(id, x, y) {
      // console.log('changeResourceLocation:', id, x, y)
      this.list.forEach((res) => {
        if (res.id === id) {
          // console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
          res.xpoint = x
          res.ypoint = y
          // console.log('移动坐标2：', res.name, res.xpoint, res.ypoint)
        }
      })
    },
    handleCancel() {
      this.iconId = ''
      this.initTree()
      this.listItem = ''
      this.cancelDisabled = true
      this.editable = false
    },
    // 修改
    updateHandle() {
      let listItem = this.listItem
      if (listItem) {
        this.openAddOrUpdate(listItem)
      }
    },
    // 删除
    deleteHandle() {
      // console.log('dataListSelections:', this.dataListSelections)
      // var ids = this.checkedData.resourceId
      //   ? [this.checkedData.resourceId]
      //   : this.dataListSelections.map(item => {
      //     return item.id
      //   })
      // this.listItem.id
      // var ids = [this.checkedData.resourceId]
      let ids = []
      if (this.listItem.id) {
        ids.push(this.listItem.id)
      } else {
        ids.push(this.listItem.key)
      }
      for (let i in ids) {
        //删除绘制的图标和线
        // this.delPoint(ids[i])
        for (let j in this.list) {
          if (this.list[j].id === ids[i]) {
            this.$http({
              url: this.$http.adornUrl('/liResource/validateDeleteResource'),
              method: 'get',
              params: this.$http.adornParams({
                stationId: localStorage.getItem('stationId'),
                id: ids[i]
              })
            }).then((data) => {
              if (data && data.code === 0) {
                //删除绘制的图标和线
                this.delPoint(ids[i])
                this.list[j].deleted = 1
                this.listItem = ''
                this.cancelDisabled = false
              }
            })
          }
          if (!this.list[j].id) {
            if (this.list[j].key === ids[i]) {
              //删除绘制的图标和线
              this.delPoint(ids[i])
              this.list.splice(j, 1)
            }
          }
        }
      }
    },
    //删除绘制的图标和线
    delPoint(id) {
      let feature = this.vectorLayer.getSource().getFeatureById(id)
      //删除id对应的资源点
      this.vectorLayer.getSource().removeFeature(feature)
      let featureEnd = this.vectorLayer.getSource().getFeatureById(id + 'end')
      if (featureEnd) {
        //删除红外探测器或者振动光纤id对应的资源点
        this.vectorLayer.getSource().removeFeature(featureEnd)
        let lineFeature = this.lineVectorLayer
          .getSource()
          .getFeatureById(id + 'line')
        if (lineFeature) {
          //删除id对应的连线
          this.lineVectorLayer.getSource().removeFeature(lineFeature)
        }
      }
    },
    changeEditable() {
      this.$nextTick(() => {
        this.clickMap(true)
      })
      this.isDone = !this.isDone
      this.editable = !this.editable //保存按钮切换显示
      this.cancelDisabled = false
      this.$forceUpdate()
      //设置是否启动拖动
      if (!this.editable) {
        this.map.removeInteraction(this.modify)
      } else {
        //添加拖拽监听事件
        this.map.addInteraction(this.modify)
      }
    },
    statusClick(item) {
      //icon状态切换
      if (!this.editable) {
        return
      }

      item.value = item.value + '2'
      this.typeList.forEach((res) => {
        if (item.id !== res.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 2
          ) {
            res.value = res.value.substring(0, res.value.length - 1)
          }
        }
      })
    },
    clickMap() {
      let that = this
      this.map.on('click', function (e) {
        that.jing = parseFloat(e.coordinate[0]).toFixed(2)
        that.wei = parseFloat(e.coordinate[1]).toFixed(2)
      })
    },
    regionMousedown(e) {
      if (!this.editable) {
        return
      }
      if (e.srcElement.id === '') {
        return
      }
      // if (e.path) {
      //     if (
      //       e.path[0].attributes.name &&
      //       e.path[0].attributes.name.nodeValue != 'iconListNow'
      //     ) {
      //       return
      //     }
      // } else {

      // }

      this.typeList.forEach((res) => {
        // if ((e.path && e.path[0].id !== res.id) || e.srcElement.id !== res.id) {
        if (e.srcElement.id !== res.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 2
          ) {
            res.value = res.value.substring(0, res.value.length - 1)
          }
        } else {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 2
          ) {
            return
          }
          res.value = res.value + '2'
          this.spanDragData.name = res.value
          this.spanDragListNow = res
          this.mousemoveStatus = true
        }
      })
    },
    regionMousemove(e) {
      if (this.mousemoveStatus) {
        this.spanDragData.x = e.clientX - 24
        this.spanDragData.y = e.clientY - 106
        this.spanDragData.show = true
      }
    },
    regionMouseup(e) {
      this.mousemoveStatus = false
      this.typeList.forEach((res) => {
        if (res.value.substring(res.value.length - 1, res.value.length) == 2) {
          res.value = res.value.substring(0, res.value.length - 1)
        }
      })
      this.spanDragData.x = 0
      this.spanDragData.y = 0
      this.spanDragData.show = false
      this.spanDragData.name = ''
    },
    iconClick(item) {
      console.log(this.currentNode)
      this.iconNameListBottom.forEach((res) => {
        if (res.id === item.id) {
          if (
            res.value.substring(res.value.length - 1, res.value.length) != 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '4'
          }
        } else {
          if (
            res.value.substring(res.value.length - 1, res.value.length) == 4
          ) {
            res.value = res.value.substring(0, res.value.length - 1) + '3'
          }
        }
      })
      if (this.currentNode.level == 5) {
        this.list = []
        this.currentNode.children.forEach((el) => {
          if (item.id === el.type) {
            this.list.push(el)
          }
        })

        this.list.forEach((res) => {
          Vue.set(res, 'active', false)
        })
      } else {
        this.showResourceByMapId(item)
      }
      this.clickItem = item
      this.changeVectorLayer(this.list)
    },
    initResourceTypeDicList() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.typeList = JSON.parse(JSON.stringify(data.list))
          console.log('类型：', this.typeList)
          this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
          this.iconNameListBottom.forEach((res) => {
            res.value += '3'
          })
        }
      })
    },
    iconMousedown(e) {
      e.width = Number(e.width) + 10
      //console.log(e.width)
    }
  }
}
</script>
<style lang="scss" scoped>
.dic_tree {
  background: #f4f4f4;
  font-size: 14px;
  transform: translateX(-6px);
  margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
  padding-left: 0px !important;
}

.dic_tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
}

.dic_tree /deep/ .el-tree-node__children {
  padding-left: 10px;
}

.dic_tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.dic_tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.dic_tree /deep/ .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.dic_tree /deep/ .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.dic_tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #bfbfbf;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.dic_tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #bfbfbf;
  height: 20px;
  top: 12px;
  width: 35px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree-container {
  /* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
  background: url('../../../assets/images/add.png');

  content: '';
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
}
.dic_tree
  /deep/
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url('../../../assets/images/sub.png');
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon {
  padding: 1px;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
  opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
  // margin-left: -15px !important;
}
</style>
<style lang="scss">
.line_warp {
  // width: 300px;
  height: 45px;
  display: flex;
  align-items: center;

  .point_left {
    width: 50px;
    height: 50px;
    transform: translateX(14px);
  }
  .point_right {
    width: 50px;
    height: 50px;
    transform: translateX(-14px);
  }
}
.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .custom-tree-node {
  background-color: #33b0f6 !important;
  color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: transparent;
}
</style>

<style lang="scss" scoped>
#map {
  /deep/.ol-zoom {
    // display: none;
  }
  /deep/ .ol-zoom .ol-unselectable .ol-control {
    display: none;
  }
}

.treeCard {
  .el-tree {
    overflow-y: scroll;
    height: 640px;
  }
}

.tree_house {
  width: 12px;
  height: 18px;
  display: inline-block;
  img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    // transform: translateY(-8px);
    transform: translateX(-40px);
  }
}
.tree_point {
  width: 12px;
  height: 18px;
  display: inline-block;
  img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    transform: translateY(-2px);
  }
}
.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;
  .span-box {
    height: 30px;
    // width: 30px;
    font-size: 12px;
    border-radius: 5px;
    /* border: 1px solid red; */
    position: absolute;
    // left: 0;
    // top: 0;
    .span-img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background-size: 182%;
    }
  }
  .active {
    background-color: #fd949d;
    height: 40px;
    width: 40px;
  }
}

.tier-btn {
  .active-tier {
    background-color: #409eff;
    color: #ffffff;
  }
}
.monitor_point_left_top {
  height: 42px;
  background: #e1edf4;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .monitor_point_left_topL {
    height: 40px;
    padding-top: 10px;
    float: left;
    div {
      height: 40px;
      float: left;
      padding: 0 10px 0 10px;
      line-height: 40px;
      cursor: pointer;
      font-family: Microsoft YaHei;
      font-size: 14px;
      span {
        color: #35aff8;
      }
    }
    div.on {
      background: #fff;
      border: 1px solid #c3c3c3;
      border-bottom: none;
      font-family: Microsoft YaHei;
      font-weight: 400;
    }
  }
  .monitor_point_left_topR {
    // float: right;
    margin-right: 20px;
    // margin-top: 10px;
    .el-input {
      width: 109px;
    }
    /deep/ .el-input--mini .el-icon-search {
      line-height: 28px;
      color: #35aff8;
      font-weight: bold;
    }
  }
}

.top_button {
  background: url(~@/assets/images/sysiconbg.png);
}
</style>