<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item>
                <Timeinterval :interval="interval" ref="interval"></Timeinterval>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="clickFn">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-share">导出</el-button>
        <el-button type="primary" icon="el-icon-picture">保存图片</el-button> -->
            </el-form-item>
        </el-form>

        <div style="font-weight: bold">
            <span style="color: #000">
                (左柱):
                <span style="color: #0099cc">
                    <span class="smallBlock" style="background: #0099cc"></span>
                    投运
                </span>
                <span style="color: #996600">
                    <span class="smallBlock" style="background: #996600"></span>
                    热备用
                </span>
                <span style="color: #cc0000">
                    <span class="smallBlock" style="background: #cc0000"></span>
                    停运
                </span>
            </span>
            &nbsp;&nbsp;
            <span style="color: #000">
                (右柱):
                <span style="color: #2e8b57">
                    <span class="smallBlock" style="background: #2e8b57"></span>
                    在线率≥90%
                </span>
                <span style="color: #daa520">
                    <span class="smallBlock" style="background: #daa520"></span>
                    60%≤在线率<90%
                </span>
                <span style="color: #cc0000">
                    <span class="smallBlock" style="background: #cc0000"></span>
                    在线率<60%
                </span>
            </span>
        </div>
        <div id="echarts">
            <el-row :gutter="10">
                <el-col :span="16" :style="`height:${h}px;overflow: hidden;`" id="zttjzj">
                    <div class="wzhi">
                        <el-button type="text" icon="el-icon-download" title="生成图片" @click="download">
                            下载
                        </el-button>
                    </div>
                    <!-- <div :style='`width:100%;height:${h};background:red; `'></div> -->
                    <echarts1
                        @update-cover="onUpdateCover"
                        ref="child"
                        :item="item"
                        :deptIndex="deptIndex"
                        :name="name"
                    ></echarts1>
                </el-col>
                <el-col :span="8">
                    <el-table
                        stripe
                        :data="chinaData"
                        :height="h + 'px'"
                        border
                        style="width: 100%"
                        header-cell-class-name="table_header"
                        highlight-current-row
                    >
                        <el-table-column
                            prop="areaName"
                            label="区域"
                            min-width="80px"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column prop="numberOfTerminals" label="终端个数" min-width="105px"></el-table-column>
                        <el-table-column prop="normal" label="投运" min-width="74px"></el-table-column>
                        <el-table-column prop="breaks" label="热备用" min-width="87px"></el-table-column>
                        <el-table-column prop="shutdown" label="停运" min-width="74px"></el-table-column>
                        <el-table-column prop="onlineRate" label="在线率(%)" min-width="115px">
                            <template scope="scope">
                                <span>{{ scope.row.onlineRate == 3.14159 ? '/' : scope.row.onlineRate }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="mt10">
                <el-col :span="16" :style="`height:${h}px;overflow: hidden;`" id="zttjzjg">
                    <!-- <div :style='`width:100%;height:${h};background:black; `'></div> -->
                    <echarts2 ref="child1" :item="item" :deptIndex="deptIndex"></echarts2>
                </el-col>
                <el-col :span="8">
                    <el-table
                        stripe
                        :data="manufactorData"
                        :height="h + 'px'"
                        border
                        style="width: 100%"
                        header-cell-class-name="table_header"
                        highlight-current-row
                    >
                        <el-table-column prop="areaName" label="厂家" min-width="90"></el-table-column>
                        <el-table-column prop="numberOfTerminals" label="终端个数" min-width="105"></el-table-column>
                        <el-table-column prop="normal" label="投运" min-width="74"></el-table-column>
                        <el-table-column prop="breaks" label="热备用" min-width="87"></el-table-column>
                        <el-table-column prop="shutdown" label="停运" min-width="74"></el-table-column>
                        <el-table-column prop="onlineRate" label="在线率(%)" min-width="115px">
                            <template scope="scope">
                                <span>{{ scope.row.onlineRate == 3.14159 ? '/' : scope.row.onlineRate }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'

// import { getUndocumentednonlinearData } from "@/api/Interferencesource";
import Timeinterval from '@/views/components/TimePicker/index4'
import echarts1 from './Echart/echarts1.vue'
import echarts2 from './Echart/echarts2.vue'
import Area from '@/views/components/Area/Area.vue'
// import { dictypeData } from "@/api/user";
import { getStatisticsregionData, getStatisticsmanufactorData } from '@/api/monitoringpointstatistics'
import { deptTree } from '@/api/admin/dept'
export default {
    components: { Timeinterval, echarts1, echarts2, Area },
    data() {
        return {
            vh: '',
            interval: 3,
            item: ['', ''],
            searchEndTime: '',
            searchBeginTime: '',
            deptIndex: '',
            name: '',
            h: null,
            zoom: null,
            isLoading: false,
            isLoading1: false,
            isshow: false,
            chinaData: [],
            manufactorData: [],
            id: ''
        }
    },
    created() {
        // this.dictionaries();

        // this.china();
        // this.manufactor();
        this.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.name = JSON.parse(window.sessionStorage.getItem('Info')).aeraName
        // this.area();
        // this.onUpdateCover();
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        // this.height =(window.sessionStorage.getItem('appheight') - 185) / 2;
        this.$emit('Loading', true)

        this.item = this.$refs.interval.timeValue
        setTimeout(() => {
            this.$emit('Loading', false)
        }, 1500)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let heightd = window.sessionStorage.getItem('appheight') - 145
            this.h = heightd / 2
            this.zoom = 1 / document.body.style.zoom
        },

        onUpdateCover(data) {
            // console.log(data);
            let newObj = JSON.parse(JSON.stringify(data))
            this.chinaData = newObj.data.area.areaInfo
            let obj1 = {
                areaName: '总计',
                breaks: newObj.data.area.breaks,
                normal: newObj.data.area.normal,
                numberOfTerminals: newObj.data.area.numberOfTerminals,
                onlineRate: newObj.data.area.onlineRate,
                shutdown: newObj.data.area.shutdown
            }
            this.chinaData.unshift(obj1)
            this.manufactorData = newObj.data.factory.areaInfo
            let obj2 = {
                areaName: '总计',
                breaks: newObj.data.factory.breaks,
                normal: newObj.data.factory.normal,
                numberOfTerminals: newObj.data.factory.numberOfTerminals,
                onlineRate: newObj.data.factory.onlineRate,
                shutdown: newObj.data.factory.shutdown
            }
            this.manufactorData.unshift(obj2)
        },
        //查询
        clickFn() {
            this.item = this.$refs.interval.timeValue
            this.$emit('Loading', true)
            setTimeout(() => {
                this.$refs.child.getechart()
                this.$refs.child1.getechart()
            }, 100)
            setTimeout(() => {
                this.$emit('Loading', false)
            }, 1000)
        },
        // 字典表
        // dictionaries() {
        //   dictypeData().then((res) => {
        //     res.data.forEach((item) => {
        //       if (item.name == "单位树") {
        //         this.form.options = item.children;
        //         console.log(this.form.options);
        //       }
        //     });
        //   });
        // },

        //区域
        // area(){
        //   deptTree().then((res)=>{
        //     // console.log(res);
        //     if(res.code=="A0000"){
        //       this.form.options=res.data
        //     }
        //     // console.log(this.id);
        //   })
        // },

        // 切换选项
        handleNodeClick(data) {
            //  console.log(data);
            this.deptIndex = data.id
            this.name = data.name
            this.$refs['child'].form.deptIndex = data.id
        },

        cellStyle(row) {
            if (row.columnIndex == 5) {
                if (row.row.onlineRate == '3.14159') {
                    row.row.onlineRate = '暂无数据'
                }
            }
        },
        // dmo元素里的内容转换为canvas,并将canvas下载为图片
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('echarts'), {
                scale: 2
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '终端运行统计.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                // document.body.appendChild(creatIMg);
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        }
        //方法调用获取终端运行统计(区域)数据接口
        // china() {
        //        this.$emit("Loading", true);
        //   getStatisticsregionData().then((res) => {
        //          this.$emit("Loading", false);
        //     this.chinaData = res.data;
        //   });
        // },
        //方法调用获取终端运行统计(区域)数据接口
        // manufactor() {
        //   this.isLoading1 = true;
        //   getStatisticsmanufactorData().then((res) => {
        //     this.isLoading1 = false;
        //     this.manufactorData = res.data;
        //   });
        // },
    }
}
</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;
}
::v-deep .form {
    .el-form-item {
        margin-left: 50px;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 80%;
            }
            .el-input__inner {
                width: 80% !important;
            }
            .el-date-editor {
                width: 80%;
            }
        }
    }
}
.wzhi {
    z-index: 1;
    font-size: 14px;
    //font-weight: 550;
    // margin-top: 10px;

    position: absolute;
    right: 10px;
    top: -30px;
}
</style>
