l
<template>
    <div style="padding: 10px">
        <el-row>
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="监测点报告" name="first" :style="'height:' + vh + ';'">
                        <div style="display: flex">
                            <div class="treediv">
                                <el-aside v-show="view" width="315px" id="drag-dept-left">
                                    <muentree
                                        @eleMenuData="getTreeText"
                                        :checkbox="checkbox"
                                        :tablename="tablename"
                                        ref="commonTree"
                                        @statisticalType="statisticalType"
                                        @treeClick="treeClick"
                                    ></muentree>
                                </el-aside>
                            </div>
                            <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: -22px;
                                            width: 30px;
                                            height: 30px;
                                            background: rgba(6, 70, 122, 0);
                                        "
                                    ></i>
                                </el-tooltip>

                                <!-- <i
                  @click="changeview"
                  :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                  style="
                    width: 50px;
                    height: 50px;
                    margin-right: 2%;
                    font-size: 18px;
                    cursor: pointer;
                    background: rgba(6, 70, 122, 0);
                  "
                ></i
                > -->
                            </div>

                            <Regionalreports :famsg="msg" :lineName="lineName" :level="level"></Regionalreports>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// import * as echarts from "echarts";
import Regionalreports from './regional.vue'
import muentree from './muentree'
export default {
    name: 'monitoringpointreport',
    components: { muentree, Regionalreports },
    data() {
        return {
            msg: '',
            tablename: 1,
            checkbox: false,
            view: true,
            vh: '',
            lineName: '',
            level: '',
            zoom: '',
            activeName: 'first',
            form: {
                checkbox: ''
            },
            device: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.bindResize()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 70 + 'px'
        },
        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.loading = false
        },
        changeview() {
            if (this.view) {
                this.view = false
                this.$nextTick(() => {})
            } else {
                this.view = true
                this.$nextTick(() => {})
            }
        },
        treeClick(e) {
            if (e.level == 6) {
                this.$store.commit('user/lineID', e.id)
            }
        },
        statisticalType(e) {
            this.statisticalList = e
            this.$nextTick(() => {})
        },
        changeFn() {},

        handleClick(tab, event) {
            // console.log(tab, event);
        },
        getTreeText(treenode) {
            this.msg = treenode.id
            this.level = treenode.level
            this.lineName = treenode.name
            // this.id = id;
        }
    }
}
</script>
<style lang="less" scoped>
// @import url("../../../styles/comStyle.less");
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

.treediv {
    position: relative;
}

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 {
    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 -12px;
    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 {
    height: 25px;
    margin-left: 10px;
    line-height: 25px;
    span:first-child {
        margin-right: 10px;
        font-weight: 600;
    }
}
::v-deep .button {
    height: 18px;
    margin-right: 5px;
    line-height: 18px;
    color: #fff;
    border: 0 solid #000;
    border-radius: 2px;
    &:hover {
        cursor: pointer;
    }
}
.iconBox {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2000;
    width: 110px;
    height: 200px;
    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;
        align-items: center;
        margin-bottom: 5px;
        // img {

        //   height: 20px;
        //   margin-right: 5px;
        // }
        // span {
        //   line-height: 20px;
        // }
    }
}
</style>
