<template>
    <el-container style="position: relative" id="dept">
        <el-form v-show="false" ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>
        </el-form>
        <el-aside v-show="view" style="width: 300px" id="drag-dept-left">
            <div></div>
            <muentree
                v-if="flag"
                @eleMenuData="getTreeText"
                :checkbox="checkbox"
                :tablename="tablename"
                ref="commonTree"
                @statisticalType="statisticalType"
                @treeClick="treeClick"
            ></muentree>
        </el-aside>
        <div id="drag-dept">
            <el-tooltip class="item" effect="dark" :content="view ? '收缩' : '展开'" placement="top-start">
                <i
                    @click="changeview"
                    :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                    style="
                        font-size: 18px;
                        z-index: 2000;
                        cursor: pointer;
                        margin-right: 0px;
                        width: 30px;
                        height: 30px;
                        background: rgba(6, 70, 122, 0);
                    "
                ></i>
            </el-tooltip>

            <!-- 
      <img
        v-if="view"
        @click="changeview"
        src="@/assets/ZJT.png"
        style="
          height: 30px;
          margin-right: 2%;
          font-size: 18px;
          cursor: pointer;
          position: relative;
          left: -2px;
        "
      />
      <img
        v-else
        @click="changeview"
        src="@/assets/YJT.png"
        style="
          height: 30px;
          margin-right: 2%;
          font-size: 18px;
          cursor: pointer;
          position: relative;
          left: -5px;
        "
      /> -->
        </div>
        <el-main id="drag-dept-right">
            <!-- <baidu-map id="container" :style="'height:'+(vh -80) +'px ;'"></baidu-map> -->
            <baidu-map
                class="bm-view"
                id="container"
                @ready="builmap"
                :style="'height:' + (vh - 70) + 'px ;'"
            ></baidu-map>
        </el-main>
        <div class="iconBox">
            <div class="div">
                <img src="@/assets/jcd.png" alt="" />
                <span>变电站</span>
            </div>
            <div class="div">
                <img src="@/assets/rby.png" alt="" />
                <span>热备用</span>
            </div>
            <div class="div">
                <img src="@/assets/ty.png" alt="" />
                <span>停运</span>
            </div>
            <div class="div">投运</div>
            <div class="div" style="padding-left: 10px">
                <span>通讯正常</span>
            </div>
            <div class="div" style="padding-left: 20px">
                <img src="@/assets/txzcyzj.gif" alt="" />
                <span>有暂降</span>
            </div>
            <div class="div" style="padding-left: 20px">
                <img src="@/assets/txzcwzj.png" alt="" />
                <span>无暂降</span>
            </div>
            <div class="div" style="padding-left: 10px">
                <span>通讯异常</span>
            </div>
            <div class="div" style="padding-left: 20px">
                <img src="@/assets/txycyzj.gif" alt="" />
                <span>有暂降</span>
            </div>
            <div class="div" style="padding-left: 20px">
                <img src="@/assets/txzdwzj.png" alt="" />
                <span>无暂降</span>
            </div>
        </div>
    </el-container>
</template>
<script>
function SuperPipe(points, style) {
    this._points = points || []
    this._style = style || {}
}
SuperPipe.prototype = new BMap.Overlay()
SuperPipe.prototype.initialize = function (map) {
    this._map = map
    if (this._points.length <= 0) {
        return
    }
    //存储两个PolyLine对象
    var bot, top
    var botStyle = {
        strokeColor: 'red',
        strokeWeight: this._style.strokeWeight + 2,
        strokeOpacity: this._style.strokeOpacity
    }
    if (this._style.borderColor) {
        botStyle.strokeColor = this._style.borderColor
    }
    if (this._style.borderWidth) {
        botStyle.strokeWeight = parseInt(this._style.strokeWeight) + parseInt(this._style.borderWidth) * 2
    }
    bot = new BMap.Polyline(this._points, botStyle)
    if (this._style) {
        top = new BMap.Polyline(this._points, this._style)
    } else {
        top = new BMap.Polyline(this._points)
    }
    this._bot = bot
    this._top = top

    this.addEventListener = function (eventname, cb) {
        var that = this
        if (eventname !== 'mouseover' && eventname !== 'mouseout') {
            this._bot.addEventListener(eventname, cb)
            this._top.addEventListener(eventname, cb)
        } else {
            var setEvent = function () {
                setTimeout(function () {
                    var svgElem = that._top.V
                    if (svgElem) {
                        svgElem.addEventListener(eventname, cb)
                        svgElem = null
                        setEvent = null
                        that = null
                    } else {
                        svgElem = null
                        setEvent()
                    }
                }, 500)
            }
            setEvent()
        }
    }

    this.setStrokeColor = function (a) {
        this._top.setStrokeColor(a)
    }
    this.setStrokeOpacity = function (a) {
        this._top.setStrokeOpacity(a)
        this._bot.setStrokeOpacity(a)
    }
    //其他的API
}
SuperPipe.prototype.draw = function () {
    var map = this._map
    map.addOverlay(this._bot)
    map.addOverlay(this._top)
}
SuperPipe.prototype.remove = function () {
    var map = this._map
    map.removeOverlay(this._bot)
    map.removeOverlay(this._top)
}
SuperPipe.prototype.show = function () {
    this._top.show()
    this._bot.show()
}
SuperPipe.prototype.hide = function () {
    this._top.hide()
    this._bot.hide()
}
import { getAreaLineInfo } from '@/api/monitoringpointStatistics/echart'

import Timeinterval from '@/views/components/TimePicker/index4'
import muentree from './muentree'
import BMapLib from '@/components/tools/MarkerClusterer_min'
export default {
    components: { muentree, Timeinterval },
    props: {},
    data() {
        return {
            form: {},
            loading: true,
            vh: undefined,
            view: true,
            checkbox: false,
            tablename: 1,
            treenode: '',
            statisticalList: {}, //树上面的选择框
            data_info: [], //点位信息
            map: null, //存储地图
            flag: false,
            JCDname: '',
            monitors: []
        }
    },
    created() {},
    mounted() {
        // this.$store.commit('user/lineID','627f58e29cd848a5e270912fa1780f7e')

        // console.log(`============================`, this.$store.state.user.lineID);

        this.bindResize()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight')
        },
        // 树上面切换变化
        statisticalType(e) {
            this.statisticalList = e
            this.$nextTick(() => {
                // this.builmap();
            })
        },
        // 树点击节点定位
        treeClick(e) {
            if (e.level == 6) {
                this.$store.commit('user/lineID', e.id)

                this.data_info.forEach(item => {
                    if (item.lineId == e.id) {
                        let _this = this
                        var new_point = new window.BMap.Point(item.lng, item.lat)
                        // var marker =new window.BMap.Marker(new_point);  // 创建标注
                        // this.map.addOverlay(marker);              // 将标注添加到地图中
                        this.map.panTo(new_point)
                        let opts = {
                            width: 300, // 信息窗口zuixiao宽度
                            height: 280, // 信息窗口高度
                            title: '', // 信息窗口标题
                            enableMessage: true //设置允许信息窗发送短息
                        }
                        this.JCDname = item.lineName
                        this.map.openInfoWindow(
                            new window.BMap.InfoWindow(
                                ` <h3>监测点名称:${item.lineName}</h3><div class="boxDiv"><span>供电公司:</span><span>${
                                    item.gdName
                                }</span> </div><div class="boxDiv"><span>变电站:</span><span>${
                                    item.subName
                                }</span> </div><div class="boxDiv"><span>母线:</span><span>${
                                    item.voltageName
                                }</span> </div><div class="boxDiv"><span>网络参数:</span><span>${
                                    item.ip
                                }</span> </div><div class="boxDiv"><span>PT变化:</span><span>${item.pt1}/${
                                    item.pt2
                                }</span> </div><div class="boxDiv"><span> CT变化:</span><span>${item.ct1}/${
                                    item.ct2
                                }</span> </div><div class="boxDiv"><span>生产厂家:</span><span>${
                                    item.manufacturer
                                }</span> </div><div class="boxDiv"><span>终端状态:</span><span>${
                                    item.runFlag == 0 ? '投运' : item.runFlag == 1 ? '热备用' : '停运'
                                }</span> </div><div class="boxDiv"><span>通讯状态:</span><span>${
                                    item.comFlag == 0 ? '中断' : '正常'
                                }</span> </div>` +
                                    `<button class="button" id="Statistics" data-sid=${item.lineId}>事件统计</button><button class="button" id="analysis" data-sid=${item.lineId}>事件分析</button><button class="button" id="Administration" data-sid=${item.lineId}>运行情况</button>`,
                                opts
                            ),
                            new window.BMap.Point(item.lng, item.lat)
                        )
                        setTimeout(() => {
                            // 统计
                            document.getElementById('Statistics').onclick = function (e) {
                                //do something
                                _this.$store.commit('user/lineID', e.target.dataset.sid)
                                _this.$emit('Statistics', e.target.dataset.sid)
                            }
                            // 分析
                            document.getElementById('analysis').onclick = function (e) {
                                _this.$store.commit('user/lineID', e.target.dataset.sid)

                                _this.$emit('analysis', e.target.dataset.sid)
                            }
                            // 管理
                            document.getElementById('Administration').onclick = function (e) {
                                _this.$store.commit('user/lineID', e.target.dataset.sid)

                                _this.$emit('Administration', e.target.dataset.sid)
                            }
                        }, 50)

                        return
                    }
                })
            }
        },
        //显示切换
        changeview() {
            if (this.view) {
                this.view = false
                this.$nextTick(() => {
                    // this.builmap();
                })
            } else {
                this.view = true
                this.$nextTick(() => {
                    // this.builmap();
                })
            }
        },
        //地图初始化事件
        async builmap() {
            this.$emit('Loading', true)
            let showBDZ = []
            let showline = []
            let data_info = []
            let ligature = []
            let { data } = await getAreaLineInfo({
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                monitorFlag: 2,
                powerFlag: 2,
                searchBeginTime: this.$refs.Timeinterval.timeValue[0],
                searchEndTime: this.$refs.Timeinterval.timeValue[1],
                // serverName: "harmonic-boot",
                serverName: 'event-boot',
                statisticalType: this.statisticalList
            })
            let r = 0.0035
            data.forEach(item => {
                if (item.children.length > 10 && item.children.length < 100) {
                    r = 0.0055
                } else if (item.children.length >= 100) {
                    r = 0.01055
                }
                item.children.forEach((val, i) => {
                    val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
                    val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
                    ligature.push([
                        {
                            lng: item.lng,
                            lat: item.lat
                        },
                        {
                            lng: val.lng,
                            lat: val.lat
                        }
                    ])
                    // this.monitors.push([
                    // {
                    //     lng: item.lng,
                    //     lat: item.lat,
                    //   },
                    // ])
                })

                data_info.push(...item.children)
            })
            this.data_info = data_info
            this.$store.commit('user/lineID', data_info[0].lineId)

            let _this = this
            let map = new window.BMap.Map('container', {
                // maxZoom: 13,
            })

            //添加地图类型控件
            map.addControl(
                new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                })
            )

            this.map = map

            let point = new window.BMap.Point(data_info[0].lng, data_info[0].lat)
            this.monitors.push(point)
            var strictBounds = map.getBounds()

            map.addEventListener('dragend', function () {
                if (strictBounds.containsPoint(map.getCenter())) return
                var view = map.getViewport(eval(this.monitors))
                var mapZoom = view.zoom

                let tem = mapZoom
                var now = map.getZoom()

                if (now >= mapZoom) {
                    tem = now
                }
                var centerPoint = view.center
                map.centerAndZoom(centerPoint, tem)
            })
            map.addEventListener('zoomstart', function () {
                if (strictBounds.containsPoint(map.getCenter())) return
                var view = map.getViewport(eval(this.monitors))
                var mapZoom = view.zoom

                let tem = mapZoom
                var now = map.getZoom()

                if (now >= mapZoom) {
                    tem = now
                }
                var centerPoint = view.center
                map.centerAndZoom(centerPoint, tem)
            })

            var view = map.getViewport(eval(this.monitors))
            var mapZoom = view.zoom
            var centerPoint = view.center
            map.centerAndZoom(centerPoint, mapZoom)

            // map.centerAndZoom(point, 11);
            map.enableScrollWheelZoom(true)
            map.addEventListener('click', function (e) {
                // alert(e.point.lng + "," + e.point.lat);
                // console.log(e.point.lng + "," + e.point.lat);
            })
            // map.setMapType(BMAP_HYBRID_MAP); //设置卫星地图
            let opts = {
                width: 300, // 信息窗口zuixiao宽度
                height: 280, // 信息窗口高度
                title: '', // 信息窗口标题
                enableMessage: true //设置允许信息窗发送短息
            }
            // 连线
            let ligatureList = []
            ligature.forEach((item, ind) => {
                ligatureList.push([])
                item.forEach(val => {
                    ligatureList[ind].push(new BMap.Point(val.lng, val.lat))
                })
            })

            ligatureList.forEach(item => {
                var polyline = new SuperPipe(item, {
                    strokeColor: '#00CC99',
                    borderWidth: 1,
                    strokeWeight: 0.1,
                    borderColor: '#00CC99'
                }) //创建折线
                showline.push(polyline)
                // 将覆盖物（线）添加到地图上
                map.addOverlay(polyline)
                polyline.hide()
            })
            this.JCDname = data_info[0].lineName
            map.openInfoWindow(
                new window.BMap.InfoWindow(
                    ` <h3>监测点名称:${data_info[0].lineName}</h3><div class="boxDiv"><span>供电公司:</span><span>${
                        data_info[0].gdName
                    }</span> </div><div class="boxDiv"><span>变电站:</span><span>${
                        data_info[0].subName
                    }</span> </div><div class="boxDiv"><span>母线:</span><span>${
                        data_info[0].voltageName
                    }</span> </div><div class="boxDiv"><span>网络参数:</span><span>${
                        data_info[0].ip
                    }</span> </div><div class="boxDiv"><span>PT变化:</span><span>${data_info[0].pt1}/${
                        data_info[0].pt2
                    }</span> </div><div class="boxDiv"><span> CT变化:</span><span>${data_info[0].ct1}/${
                        data_info[0].ct2
                    }</span> </div><div class="boxDiv"><span>生产厂家:</span><span>${
                        data_info[0].manufacturer
                    }</span> </div><div class="boxDiv"><span>终端状态:</span><span>${
                        data_info[0].runFlag == 0 ? '投运' : data_info[0].runFlag == 1 ? '热备用' : '停运'
                    }</span> </div><div class="boxDiv"><span>通讯状态:</span><span>${
                        data_info[0].comFlag == 0 ? '中断' : '正常'
                    }</span> </div>` +
                        `<button class="button" id="Statistics" data-sid=${data_info[0].lineId}>事件统计</button><button class="button" id="analysis" data-sid=${data_info[0].lineId}>事件分析</button><button class="button" id="Administration" data-sid=${data_info[0].lineId}>运行情况</button>`,
                    opts
                ),
                new window.BMap.Point(data_info[0].lng, data_info[0].lat)
            )
            setTimeout(() => {
                // 统计
                document.getElementById('Statistics').onclick = function (e) {
                    //do something

                    _this.$store.commit('user/lineID', e.target.dataset.sid)
                    _this.$emit('Statistics')
                }
                // 分析
                document.getElementById('analysis').onclick = function (e) {
                    _this.$store.commit('user/lineID', e.target.dataset.sid)

                    _this.$emit('analysis', e.target.dataset.sid)
                }
                // 管理
                document.getElementById('Administration').onclick = function (e) {
                    _this.$store.commit('user/lineID', e.target.dataset.sid)

                    _this.$emit('Administration', e.target.dataset.sid)
                }
            }, 50)
            let polymerization = []
            // 添加变电站
            let imgs = require('@/assets/jcd.png')
            // 百度地图marker样式
            let myIcons = new BMap.Icon(imgs, new BMap.Size(24, 24))
            data.forEach(item => {
                let marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), {
                    icon: myIcons
                }) // 创建
                showBDZ.push(marker)
                marker.hide()
                map.addOverlay(marker)

                var cjdopts = {
                    width: 180, // 信息窗口宽度
                    height: 1 // 信息窗口高度
                }
                var infoWindow = new BMap.InfoWindow(
                    ` <div style="height: 20px;   margin-left: 10px; line-height: 20px;   font-size: 14px;
        }">变电站:${item.subName}</div>`,
                    cjdopts
                ) // 创建信息窗口对象
                marker.addEventListener('click', function (e) {
                    let p = e.target
                    let points = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
                    map.openInfoWindow(infoWindow, points) //开启信息窗口
                })
            })

            // 添加监测点
            for (let i = 0; i < data_info.length; i++) {
                let img = ''
                if (data_info[i].runFlag == 2) {
                    // 停运
                    img = require('@/assets/ty.png')
                } else if (data_info[i].runFlag == 0) {
                    // 投运
                    if (data_info[i].comFlag == 0) {
                        // 异常
                        if (data_info[i].noDealCount > 0) {
                            // 异常有暂降
                            img = require('@/assets/txycyzj.gif')
                        } else if (data_info[i].noDealCount == 0) {
                            // 异常无暂降
                            img = require('@/assets/txzdwzj.png')
                        }
                    } else if (data_info[i].comFlag == 1) {
                        // 正常
                        if (data_info[i].noDealCount > 0) {
                            // 正常有暂降
                            img = require('@/assets/txzcyzj.gif')
                        } else if (data_info[i].noDealCount == 0) {
                            // 正常无暂降
                            img = require('@/assets/txzcwzj.png')
                        }
                    }
                } else if (data_info[i].runFlag == 1) {
                    // 热备用
                    img = require('@/assets/rby.png')
                }

                // 百度地图marker样式
                let myIcon = new BMap.Icon(img, new BMap.Size(32, 32))

                let marker = new BMap.Marker(new BMap.Point(data_info[i].lng, data_info[i].lat), { icon: myIcon }) // 创建标注
                polymerization.push(marker)
                this.JCDname = data_info[i].lineName
                let content =
                    ` <h3>监测点名称:${data_info[i].lineName}</h3><div class="boxDiv"><span>供电公司:</span><span>${
                        data_info[i].gdName
                    }</span> </div><div class="boxDiv"><span>变电站:</span><span>${
                        data_info[i].subName
                    }</span> </div><div class="boxDiv"><span>母线:</span><span>${
                        data_info[i].voltageName
                    }</span> </div><div class="boxDiv"><span>网络参数:</span><span>${
                        data_info[i].ip
                    }</span> </div><div class="boxDiv"><span>PT变化:</span><span>${data_info[i].pt1}/${
                        data_info[i].pt2
                    }</span> </div><div class="boxDiv"><span> CT变化:</span><span>${data_info[i].ct1}/${
                        data_info[i].ct2
                    }</span> </div><div class="boxDiv"><span>生产厂家:</span><span>${
                        data_info[i].manufacturer
                    }</span> </div><div class="boxDiv"><span>终端状态:</span><span>${
                        data_info[i].runFlag == 0 ? '投运' : data_info[i].runFlag == 1 ? '热备用' : '停运'
                    }</span> </div><div class="boxDiv"><span>通讯状态:</span><span>${
                        data_info[i].comFlag == 0 ? '中断' : '正常'
                    }</span> </div>` +
                    `<button class="button" id="Statistics" data-sid=${data_info[i].lineId}>事件统计</button><button class="button" id="analysis" data-sid=${data_info[i].lineId}>事件分析</button><button class="button" id="Administration" data-sid=${data_info[i].lineId}>运行情况</button>`

                map.addOverlay(marker) // 将标注添加到地图中
                addClickHandler(content, marker, data_info[i].lineId)
            }
            map.addEventListener('zoomend', function (e) {
                // console.log(
                //   "🚀 ~ file: Navigation.vue:425 ~ map.getZoom():",
                //   map.getZoom()

                // ); // 其余操作

                if (map.getZoom() < 13) {
                    showBDZ.forEach(item => {
                        item.hide()
                    })
                    showline.forEach(item => {
                        item.hide()
                    })
                } else {
                    showBDZ.forEach(item => {
                        item.show()
                    })
                    showline.forEach(item => {
                        item.show()
                    })
                }
                // showBDZ showline
                // polyline.hide();
            })

            this.$emit('Loading', false)

            new BMapLib.BMapLib.MarkerClusterer(map, {
                markers: polymerization,
                maxZoom: 11
            })
            function addClickHandler(content, marker, id) {
                marker.addEventListener('click', function (e) {
                    _this.$refs.commonTree.mapClick(id)

                    openInfo(content, e)
                })
            }
            function openInfo(content, e) {
                let p = e.target
                let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
                let infoWindow = new BMap.InfoWindow(content, opts) // 创建信息窗口对象
                setTimeout(() => {
                    // 统计
                    document.getElementById('Statistics').onclick = function (e) {
                        //do something

                        _this.$store.commit('user/lineID', e.target.dataset.sid)

                        _this.$emit('Statistics')
                    }
                    // 分析
                    document.getElementById('analysis').onclick = function (e) {
                        _this.$store.commit('user/lineID', e.target.dataset.sid)

                        _this.$emit('analysis')
                    }
                    // 管理
                    document.getElementById('Administration').onclick = function (e) {
                        _this.$store.commit('user/lineID', e.target.dataset.sid)

                        _this.$emit('Administration')
                    }
                }, 50)
                map.openInfoWindow(infoWindow, point) //开启信息窗口
            }
            this.flag = true
            setTimeout(() => {
                if (this.$route.params.id != undefined) {
                    this.$refs.commonTree.mapClick(this.$route.params.id)
                }
            }, 500)
        },
        /**
         * 缩放条拖动进而改变左侧div宽度方法
         */
        bindResize() {
            /**开始坐标 */
            let startX
            /**开始宽度 */
            let startWidth = getScalableDivWidth()

            document.querySelector('#drag-dept').addEventListener('mousedown', startDrag)

            function startDrag(e) {
                startX = e.clientX
                startWidth = getScalableDivWidth()

                document.documentElement.addEventListener('mousemove', onDrag)
                document.documentElement.addEventListener('mouseup', stopDrag)
            }

            function onDrag(e) {
                let newWidth = startWidth + e.clientX - startX
                document.querySelector('#drag-dept-left').style.width = newWidth + 'px'
            }

            function stopDrag() {
                document.documentElement.removeEventListener('mousemove', onDrag)
                document.documentElement.removeEventListener('mouseup', stopDrag)
            }

            /**获取宽度 */
            function getScalableDivWidth() {
                return parseInt(window.getComputedStyle(document.querySelector('#drag-dept-left')).width, 10)
            }
            this.$emit('Loading', false)
        },
        //树节点触发事件
        getTreeText(menudata, treenode, nodeCom, id) {
            if (treenode.data.level == 6) {
                this.menudata = menudata
                this.treenode = treenode
                this.$emit('treenodes', treenode, this.JCDname)
                this.nodeCom = nodeCom
                this.id = id
            }
        }
    },

    computed: {},

    watch: {
        // 根据情况 $route.query 可以换成 $route.params
        '$route.params': {
            immediate: true, // 第一次的数据，也要当做是一种变化
            // 处理函数（不能修改名字） handler('新的值'，'旧的值')
            handler(new_value) {
                if (new_value.id != undefined) {
                    setTimeout(() => {
                        this.$refs.commonTree.mapClick(new_value.id)
                    }, 2000) // 执行代码部分
                }
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import url('../../../../styles/common.less');
ul {
    padding: 0;
    list-style-type: none;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
.wrap {
    display: flex;
    justify-content: space-around;
}
#container {
    width: 100%;
    height: 83vh;
    border: 1px solid rgb(0, 183, 255);
}
#container2 {
    width: 500px;
    height: 500px;
    border: 3px solid pink;
}
#drag-dept-left {
    max-width: 35%;

    min-width: 220px;
}
.overview_scroll::-webkit-scrollbar {
    width: 2px;
    height: 1px;
    background: rgba(6, 70, 122, 0.013);
}

.overview_scroll::-webkit-scrollbar-thumb {
    margin-right: 5px;
    background: #03c1cf0e;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 0 #0090b411;
}

/** 拖拽条样式 */
#drag-dept {
    position: relative;
    top: 10;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4px;
    cursor: col-resize;
    background-color: #04607c2a;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

#drag-dept i {
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 1px;
    background-color: #e9e9e9;
}

.overview_scroll::-webkit-scrollbar {
    width: 2px;
    height: 1px;
    background: rgba(6, 70, 122, 0.013);
}
::-webkit-scrollbar {
    width: 5px;
    height: 0;
}
.el-tabs--border-card > .el-tabs__header {
    margin: 0;
    background-color: #124da5;
    border-bottom: 2px solid #e4e7ed;
}
.el-tabs__header {
    position: relative;
    padding: 0;
    margin: 0 px;
}
.el-tabs--border-card > .el-tabs__content {
    padding: 0;
}
.el-tabs__content {
    position: relative;
    overflow: hidden;
}
.el-aside,
.el-main {
    margin-top: 0;
}
.el-main {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}
::v-deep .boxDiv {
    white-space: nowrap;
    height: 25px;
    margin-left: 10px;
    line-height: 25px;
    font-size: 14px;
    span:first-child {
        margin-right: 10px;
        font-weight: 600;
    }
}
::v-deep .button {
    height: 18px;
    margin-right: 5px;
    line-height: 18px;
    color: #fff;
    background-color: $themeColor;
    border: 0 solid #000;
    font-size: 14px;
    border-radius: 2px;
    &:hover {
        cursor: pointer;
    }
}
.iconBox {
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 2000;
    width: 150px;
    height: 260px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    .div {
        display: flex;
        margin-bottom: 5px;
        img {
            height: 20px;
            margin-right: 5px;
        }
        // span {
        //   line-height: 20px;
        // }
    }
}
::v-deep .BMap_shadow img {
    border: 0 none;
    display: none;
    margin: 0;
    padding: 0;
    height: 370px;
    width: 1144px;
}
</style>
<style>
.anchorBL {
    display: none !important;
}
</style>
