<template>
    <div class="pd10">
        <div v-show="boxing" v-loading="loading" element-loading-text="数据加载中">
            <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item>
                    <Timeinterval ref="interval" :interval="3"></Timeinterval>
                </el-form-item>
                <el-form-item label="筛选数据:">
                    <el-input v-model.trim="formData.searchValue" placeholder="请输入筛选数据" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
                </el-form-item>
            </el-form>
            <vxe-table
                stripe
                size="mini"
                :row-config="{ isCurrent: true, isHover: true }"
                border
                ref="management"
                header-cell-class-name="table_header"
                highlight-current-row
                :data="datamock"
                style="width: 100%"
                :height="vh + 'px'"
            >
                <vxe-table-column title="序号" width="70" type="seq" align="center">
                    <template v-slot="row">
                        <span>{{ (formData.pageNum - 1) * formData.pageSize + row.seq }}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="timeId" title="时间" align="center" width="200"></vxe-table-column>
                <vxe-table-column field="timeId" title="事件关联分析名称" align="center" width="200"></vxe-table-column>
                <vxe-table-column field="contentDes" title="事件关联分析描述" align="center"></vxe-table-column>
                <vxe-table-column field="userName" title="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-share" @click="eventViewing(scope.row)">
                            暂降源定位
                        </el-button>
                        <el-button type="primary" size="mini" icon="el-icon-share" @click="scopeView">
                            范围查看
                        </el-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formData.pageNum"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="formData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="mt10"
            ></el-pagination>
        </div>
        <!-- 暂降源定位 -->
        <div v-if="detailFlag" v-loading="isLoading" element-loading-text="数据加载中">
            <div class="BOX">
                暂降源定位
                <el-button
                    icon="el-icon-refresh-left"
                    style="position: absolute; right: 10px"
                    type="primary"
                    @click="back"
                >
                    返回
                </el-button>
            </div>
            <div class="mt10">
                <span style="font-size: 16px; line-height: 36px; font-weight: 600">
                    事件关联编号为：{{ AssociationNumber }}
                </span>
                <el-form :inline="true" class="demo-form-inline" style="float: right">
                    <el-form-item label="筛选数据:">
                        <el-input v-model.trim="formData.searchValue" placeholder="请输入筛选数据" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-download" @click="exportEvent1">列表导出</el-button>
                    </el-form-item>
                </el-form>
                <div style="clear: both"></div>
                <vxe-table
                    stripe
                    size="mini"
                    ref="transformer"
                    :row-config="{ isCurrent: true, isHover: true }"
                    :data="fenxiData"
                    :height="vh1 + 'px'"
                    border
                    style="width: 100%"
                    header-cell-class-name="table_header"
                    :header-cell-style="{
                        height: '25px',
                        padding: '0px'
                    }"
                    :row-style="{ height: '28px' }"
                    :cell-style="{ padding: '0px' }"
                >
                    <vxe-table-column title="序号" width="70" type="seq" align="center">
                        <template v-slot="row">
                            <span>{{ (form.pageNum - 1) * form.pageSize + row.seq }}</span>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        field="startTime"
                        title="发生时间"
                        align="center"
                        :show-overflow="true"
                    ></vxe-table-column>
                    <vxe-table-column field="gdName" title="供电公司" align="center"></vxe-table-column>
                    <vxe-table-column
                        field="subName"
                        :show-overflow="true"
                        title="变电站"
                        align="center"
                    ></vxe-table-column>
                    <vxe-table-column field="lineName" title="监测点" align="center"></vxe-table-column>
                    <vxe-table-column field="voltageId" title="电压等级(kV)" align="center"></vxe-table-column>
                    <vxe-table-column field="featureAmplitude" title="暂降幅值(%)" align="center" width="140">
                        <template slot-scope="scope">
                            <span>{{ (scope.row.featureAmplitude * 100).toFixed(2) }}</span>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column
                        field="duration"
                        title="持续时间(s)"
                        align="center"
                        width="120"
                    ></vxe-table-column>
                    <vxe-table-column
                        field="advanceType"
                        title="暂降类型"
                        align="center"
                        width="120"
                        :formatter="formFilter1"
                    ></vxe-table-column>
                    <vxe-table-column
                        field="advanceReason"
                        title="暂降原因"
                        align="center"
                        width="120"
                        :formatter="formFilter2"
                    ></vxe-table-column>
                </vxe-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="form.pageNum"
                    :page-sizes="[20, 30, 50, 100]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="bototal"
                    class="mt10"
                ></el-pagination>
            </div>
        </div>
        <!-- 范围分析 -->
        <div v-if="map" v-loading="isLoading" element-loading-text="数据加载中">
            <div class="BOX">
                范围分析结果
                <el-button
                    icon="el-icon-refresh-left"
                    style="position: absolute; right: 10px"
                    type="primary"
                    @click="mapBack"
                >
                    返回
                </el-button>
            </div>
            <baidu-map
                class="bm-view mt10"
                id="container"
                @ready="builmap"
                :style="'height:' + (vh + 34) + 'px ;'"
            ></baidu-map>
        </div>
    </div>
</template>
<script>
import { queryEventsAssPage, queryEventDetailByAssId } from '@/api/administratione'
import { getAreaLineInfo } from '@/api/monitoringpointStatistics/echart'
import Timeinterval from '@/views/components/Timeinterval.vue'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    components: {
        Timeinterval
    },
    props: {},
    data() {
        return {
            loading: false,
            isLoading: false,
            boxing: true,
            detailFlag: false,
            map: false,
            AssId: '',
            AssociationNumber: '',
            statisticalType: '',
            zoom: '', //图表焦点校验
            vh: undefined,
            vh1: undefined,
            vh2: undefined,
            formData: {
                searchValue: '',
                pageNum: 1,
                pageSize: 20
            },
            form: {
                searchValue: '',
                pageNum: 1,
                pageSize: 20
            },
            item: ['', ''],
            datamock: [],
            fenxiData: [],
            reason: [],
            type: [],
            monitors: [],
            total: undefined,
            bototal: undefined
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.item = this.$refs.interval.timeValue
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight') - 95
            this.vh1 = window.sessionStorage.getItem('appheight') - 148
            this.vh2 = window.sessionStorage.getItem('appheight')
        },
        scopeView() {
            this.boxing = false
            this.map = true
            // 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.interval.timeValue[0],
                searchEndTime:  this.$refs.interval.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)
        },
        //范围分析返回
        mapBack() {
            this.boxing = true
            this.map = false
        },
        //获取类型
        getclassificationData() {
            //电压等级
            this.voltageLevelList = dicData('Dev_Voltage_Stand', [])
            //暂降原因
            this.reason = dicData('Event_Reason', [])
            //暂降类型
            this.type = dicData('Event_Type', [])
            let data = dicData('Statistical_Type', ['Report_Type'])
            this.statisticalList = data[0]
        },
        //查询
        onSubmit() {
            this.loading = true

            this.formData.searchBeginTime = this.$refs.interval.timeValue[0]
          
            this.formData.searchEndTime = this.$refs.interval.timeValue[1]
            queryEventsAssPage(this.formData).then(res => {
                this.datamock = res.data.records
                this.total = res.data.total
                this.loading = false
            })
        },
        // 数据过滤
        formFilter1(row, column) {
            if (row.column.property == 'advanceType') {
                let title = ''
                this.type.forEach(item => {
                    if (item.id == row.row.advanceType) {
                        title = item.name
                    } else if (row.row.advanceType == null || row.row.advanceType == '') {
                        title = '/'
                    }
                })
                return title
            } else {
                return row.row[row.column.property]
            }
        },
        formFilter2(row, column) {
            if (row.column.property == 'advanceReason') {
                let title = ''
                this.reason.forEach(item => {
                    if (item.id == row.row.advanceReason) {
                        title = item.name
                    } else if (row.row.advanceReason == null || row.row.advanceReason == '') {
                        title = '/'
                    }
                })
                return title
            } else {
                return row.row[row.column.property]
            }
        },
        //暂降源定位
        eventViewing(val) {
            this.isLoading = true
            this.detailFlag = true
            this.boxing = false
            this.AssociationNumber = val.timeId
            this.AssId = val.eventAssId
            queryEventDetailByAssId({
                id: val.eventAssId,
                pageNum: 1,
                pageSize: 20
            }).then(res => {
                this.fenxiData = res.data.records
                this.bototal = res.data.total
                this.isLoading = false
            })
        },
        //返回主页面
        back() {
            this.detailFlag = false
            this.boxing = true
            this.onSubmit()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange1(val) {
            this.form.pageSize = val
            this.eventViewing()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange1(val) {
            this.form.pageNum = val
            this.eventViewing()
        },

        //导出
        exportEvent() {
            queryEventsAssPage({
                searchBeginTime: this.formData.searchBeginTime,
                searchEndTime: this.formData.searchEndTime,
                searchValue: this.formData.searchValue,
                pageNum: 1,
                pageSize: this.total
            }).then(res => {
                this.$refs.management.exportData({
                    filename: 'export', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        },
        exportEvent1() {
            queryEventDetailByAssId({
                id: this.AssId,
                pageNum: 1,
                pageSize: this.bototal
            }).then(res => {
                this.$refs.transformer.exportData({
                    filename: 'export', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
::v-deep .vxe-table .cell {
    text-align: center;
}
.BOX {
    height: 42px;
    padding: 0 40px 0 20px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 36px;
    color: #003078;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    border-radius: 2px 2px 0 0;
}
</style>
