<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <!--查询条件-->
        <el-form :inline="true" :model="formData">
            <el-form-item label="终端等级:">
                <el-select v-model="formData.lineGrade" placeholder="终端等级" clearable>
                    <el-option
                        v-for="item in terminalClass"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <Timeinterval ref="interval" :interval="3"></Timeinterval>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <!--内容区-->
        <el-row>
            <el-col :span="24" :style="'height:' + vh + 'px'">
                <div id="ranking">
                    <div id="tubiao" ref="fg" style="width: 100%"></div>
                </div>
            </el-col>
            <el-col :span="24">
                <el-table
                    stripe
                    header-cell-class-name="table_header"
                    :data="tableData"
                    border
                    highlight-current-row
                    default-expand-all
                    :height="vhh"
                >
                    <el-table-column show-overflow-tooltip label="序号" width="80" align="center">
                        <template scope="scope">
                            <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="终端名称"></el-table-column>
                    <el-table-column
                        align="center"
                        prop="substation"
                        label="变电站"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column align="center" prop="runFlag" label="终端状态">
                        <template slot-scope="scope">
                            <span type="primary" v-if="scope.row.runFlag === 0">投运</span>
                            <span type="primary" v-if="scope.row.runFlag === 1">热备用</span>
                            <span type="primary" v-if="scope.row.runFlag === 2">停运</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="comFlag" label="通讯状态">
                        <template slot-scope="scope">
                            <el-tag
                                type="primary"
                                v-if="scope.row.comFlag === 0"
                                style="color: #fff; background: #cc0000"
                                size="small"
                            >
                                中断
                            </el-tag>
                            <el-tag
                                type="primary"
                                v-if="scope.row.comFlag === 1"
                                style="color: #fff; background: #2e8b57"
                                size="small"
                            >
                                正常
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="updateTime" label="最新数据时间" sortable></el-table-column>
                    <el-table-column align="center" prop="flowMeal" label="套餐流量(MB)" sortable></el-table-column>
                    <el-table-column align="center" prop="statisValue" sortable label="已用流量(MB)"></el-table-column>
                    <el-table-column align="center" prop="flowProportion" sortable label="流量使用占比(%)">
                        <template slot-scope="scope">
                            <span>{{ (scope.row.flowProportion * 100).toFixed() }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formData.pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="formData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="mt10"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Timeinterval from '@/views/components/TimePicker/index4'
import { dicData } from '@/assets/commjs/dictypeData'
import yan from '@/assets/commjs/color'
import { getNewDeviceRunStatistics } from '@/api/BusinessAdministrator/OperationStatistics'
export default {
    name: 'operatingstatistic',
    components: {
        Timeinterval
    },
    data() {
        return {
            zoom: '', //图表焦点校验
            vh: null,
            vhh: null,
            isLoading: false,
            myChartes: '',
            formData: {
                lineGrade: '', //终端等级
                searchBeginTime: '', //开始
                searchEndTime: '', //结束
                pageNum: 1,
                pageSize: 20
            },
            item: ['', ''],
            vh: undefined,
            terminalClass: [], //终端等级
            teriminal: '',
            teriminaloption: [],
            tableData: [],
            total: undefined // 总条数
        }
    },
    created() {
        this.getclassificationData()
    },

    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.resizeEchart()

        // this.vh =window.sessionStorage.getItem('appheight') - 125 + "px";
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = (window.sessionStorage.getItem('appheight') - 95) / 2
            this.vhh = (window.sessionStorage.getItem('appheight') - 95) / 2
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        //获取类型
        getclassificationData() {
            //监测点等级
            this.terminalClass = dicData('Dev_Level', [])
            this.formData.lineGrade = this.terminalClass[0].id
        },
        //查询
        onSubmit() {
            if (this.formData.formData !== '') {
                this.formData.pageNum = 1
            }
            this.tableData = []
            this.isLoading = true
            this.$refs.interval.timeOptions = [
                // { label: "年份", value: 1 },
                // { label: "季度", value: 2 },
                { label: '月份', value: 3 }
                // { label: "周", value: 4 },
                // // { label: "自定义", value: 5 },
            ]
            this.item = this.$refs.interval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            getNewDeviceRunStatistics(this.formData).then(res => {
                this.isLoading = false
                if (res.code == 'A0000') {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.$nextTick(() => {
                        this.initData()
                    })
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    })
                }
            })
            // this.initData();
        },
        //分页查询用
        onSubmit1() {
            this.isLoading = true
            this.item = this.$refs.interval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            getNewDeviceRunStatistics(this.formData).then(res => {
                this.isLoading = false
                if (res.code == 'A0000') {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.$nextTick(() => {
                        this.initData()
                    })
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    })
                }
            })
            // this.initData();
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit1()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit1()
        },
        initData() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('tubiao')
            this.myChartes = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('ranking') - 40 + 'px'
                domID1.style.height = (window.sessionStorage.getItem('appheight') - 95) / 2 + 'px'
            }, 0)
            let name = []
            let flowMeal = []
            let statisValue = []
            let echartsData = JSON.parse(JSON.stringify(this.tableData))
            echartsData.forEach(item => {
                name.push(item.name)
                flowMeal.push(item.flowMeal)
                statisValue.push(item.statisValue)
            })
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            this.myChartes.clear()
            var option = {
                xAxis: {
                    type: 'category',
                    name: '终端\n名称',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    data: name.slice(0, 20),
                    axisLine: { show: true },
                    axisLabel: {
                        // padding: [0, 10, 0, 10],
                        // interval: 0,
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        }
                    }
                },
                yAxis: {
                    name: '单位:MB',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.xNamefontSize
                    }
                },
                grid: yan.EchartObject.gridd,
                dataZoom: yan.EchartObject.dataZoom,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    formatter: function (params) {
                        // console.log(params);
                        var tips = ''
                        for (var i = 0; i < echartsData.length; i++) {
                            if (echartsData[i].name == params[0].name) {
                                tips += echartsData[i].substation + '_' + params[0].name + '</br/>'
                                break
                            }
                        }
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + '&nbsp' + '&nbsp' + '&nbsp' + params[i].value + '<br/>'
                        }
                        return tips
                    }
                },
                legend: {
                    right: 40,
                    top: 5,
                    data: ['套餐总量', '流量使用量'],
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },
                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                title: {
                    text: '流量使用占比排名',
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                // colors: echartsColor.FigureColor,
                series: [
                    {
                        name: '套餐总量',
                        data: flowMeal.slice(0, 20),
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        z: '-1',
                        barGap: '-100%',
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[0] }
                        }
                    },
                    {
                        name: '流量使用量',
                        data: statisValue.slice(0, 20),
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        },
                        itemStyle: {
                            normal: { show: true, color: echartsColor.FigureColor[5] }
                        }
                    }
                ]
            }
            this.myChartes.setOption(option)
            window.echartsArr.push(this.myChartes)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('ranking').offsetWidth - 0 + 'px'),
                        _this.myChartes.resize()
                })
            })
        },
        resizeEchart() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('ranking'), element => {
                let domeId = document.getElementById('ranking')
                let domeId2 = document.getElementById('tubiao')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes !== '') {
                    this.myChartes.resize()
                }
                // });
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
</style>
