<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t('1132')}}：</label>
                <Cascader
                    class="searchInput"
                    :data="datalevel"
                    :value="leveldata"
                    trigger="click"
                    change-on-select
                    @on-change="handlelevelchange"
                ></Cascader>
            </div>
            <div class="filter">
                <label>{{$t('1046')}}：</label>
                <DatePicker
                    id="日期"
                    type="datetimerange"
                    v-model="daterange"
                    confirm
                    placeholder="请选择"
                    format="yyyy-MM-dd HH:mm:ss"
                    class="searchInput MaxWidth"
                    @on-change="selectdate"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="tosearch()">{{$t('1001')}}</Button>
                <!-- <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="downexcel()">{{$t('1007')}}</Button> -->
                <Button type="primary" class="fourWord" icon="ios-build-outline" @click="StandardValue()">{{$t('5500313')}}</Button>
            </div>
        </div>

        <div class="divborder newTableDiv">
            <div class="item"> 
                <div class="left">
                    <div>
                        <div class="title">设备稼动率</div>
                        <div class="echartdiv">
                            <div class="echartitem">
                                <div id="DynamicRate" style="width:100%;height:40vh;"></div>
                            </div>
                            <div class="button">
                                <Button type="primary" @click="getdynamicDetail">详情>></Button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="title">本周设备状态分布</div>
                        <div class="echartdiv">
                            <div class="echartitem">
                                <div id="StateDistribution" style="width:100%;height:40vh;"></div>
                            </div>
                            <div class="button">
                                <Button type="primary" @click="JumpPage(2)">详情>></Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <div class="m_content">
                        <div class="title"> 生产进度一览</div>
                        <div class="m_div">
                            <div class="top">
                                <div class="textcontent">
                                    <div>本月总装完成</div>
                                    <div>788</div>
                                </div>
                                <div class="textcontent">
                                    <div>今日总装完成</div>
                                    <div>88</div>
                                </div>
                                <div class="textcontent">
                                    <div>计划总装数量</div>
                                    <div>100</div>
                                </div>
                            </div>
                            <div class="down">
                                <Table
                                    highlight-row
                                    :data="tableData1"
                                    :columns="tableColumns1"
                                    class="tableClass baojunranggaide"
                                    ></Table>
                                <div class="pageDiv">
                                    <div class="pageDirection">
                                        <Page
                                        :total="total"
                                        :current="page"
                                        :page-size="pagesize"
                                        @on-change="changePage"
                                        show-elevator
                                        show-sizer
                                        show-total
                                        @on-page-size-change="handlePageSize"
                                        :page-size-opts="[10,20,30,40,100]"
                                        ></Page>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div>
                        <div class="title">质量合格率</div>
                        <div class="echartdiv">
                            <div class="echartitem">
                                <div id="QualityRate" style="width:100%;height:40vh;"></div>
                            </div>
                            <div class="button">
                                <Button type="primary" @click="JumpPage(3)">详情>></Button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="title">设备报警分析</div>
                        <div class="echartdiv">
                            <div class="echartitem">
                                <div id="AlarmAnalysis" style="width:100%;height:40vh;"></div>
                            </div>
                            <div class="button">
                                <Button type="primary" @click="JumpPage(4)">详情>></Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗 标准值设置 -->
        <Modal class="newModalClass" :title="$t('5500313')" v-model="StandardValuemodal" :styles="{width:'450px'}">
            <div class="modal_body">
                <div class="filter">
                    <label><i>*</i>{{$t('5500313')}}：</label>
                    <InputNumber class="searchInput" type="text" v-model="Standardnum" />
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="StandardValuemodal = false">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="StandardValuePost()">{{$t('1002')}}</Button>
            </div>
        </Modal>

        <!-- 设备稼动率分布 -->
        <Modal class="newModalClass" title="设备稼动率" :footer-hide="true" v-model="dynamicmodal" :styles="{width:'850px'}">
            <div class="modal_body">
                <div ref="dynamicdiv" style="width:770px;height:400px;">
                </div>
            </div>
        </Modal>

    </div>
</template>
<script>
import axios from "@/libs/api.request";
import echarts from "echarts";
import moment from "moment";
import { initRouter } from "@/libs/router-util"; // 新增  引入动态菜单渲染
import { localSave } from "@/libs/util";
export default {
    data() {
        return {
            leveldata: [],
            datalevel: [],
            sectionid: 0,
            daterange: "",
            StandardValuemodal:false,
            Standardnum:0,
            dynamicmodal:false,
            dynamicDataArr:[],//稼动率

            page:1,
            pagesize:10,
            total:0,
            tableData1:[
                {
                    title1:'条线一',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线二',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线三',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线四',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线五',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线六',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线七',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线八',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },
                {
                    title1:'条线九',
                    title2:'2000',
                    title3:'456',
                    title4:'120',
                    title5:'98',
                    title6:'81.67%',
                    title7:'查看',
                },

            ],
            tableColumns1:[
                // {
                //     type: 'index2',
                //     title: this.$t('1008'),
                //     key: 'xuhao',
                //     render: (h, params) => {
                //         return h(
                //             'span',
                //             params.index + (this.page - 1) * this.pagesize + 1
                //         );
                //     },
                //     width:60
                // },
                {
                    title:'产线',
                    key:'title1'
                },
                {
                    title:'本月计划数量',
                    key:'title2'
                },
                {
                    title:'本月已完成',
                    key:'title3'
                },
                {
                    title:'今日计划数量',
                    key:'title4'
                },
                {
                    title:'今日完成数量',
                    key:'title5'
                },
                {
                    title:'完成进度',
                    key:'title6'
                },
                {
                    title:'操作',
                    key:'title7'
                }
            ],
            DynamicRate_echart:'',
            QualityRate_echart:'',
            State_echart:'',
            Alarm_echart:'',
        }
    },
    created(){
        //获取标准值
        let num = localStorage.getItem("Standardnum");
        if(num){
            this.Standardnum = parseInt(num);
        }
        
        this.initTime();
        this.initlevel();
    },
    mounted(){
        let that = this;
        that.baseEcharts();
        
        window.onresize = ()=>{
            that.DynamicRate_echart.resize();
            that.QualityRate_echart.resize();
            that.State_echart.resize();
            that.Alarm_echart.resize();
        };
    },
    methods:{
        baseEcharts(){
            //初始化图表
            this.baseEacherts_Dynamic('DynamicRate','时间稼动率');//时间稼动率
            this.dynamicDetailEcharts();//稼动率详情
            this.baseEacherts_Quality('QualityRate','质量合格率');//质量合格率
            this.baseEacherts_State('StateDistribution'); //设备状态分布
            this.baseEacherts_Alarm('AlarmAnalysis'); //设备报警分析
        },
        JumpPage(e){
            //跳转页面
            let routeUrl;
            let pathurl = '';
            let menuname = '';
            switch(e)
            {
                case 1:
                    //设备稼动率跳转
                    menuname = 'cncs'
                    pathurl = "/cncs/dynamic_rate";
                    break;
                case 2:
                    //设备状态分布--切片跳转
                    menuname = 'cncs'
                    pathurl = "/cncs/sliceanalysis";
                    break;
                case 3:
                    //质量合格率跳转
                    menuname = 'pmss'
                    pathurl = "/pmss/qualityReport";
                    break;
                case 4:
                    //设备报警跳转
                    menuname = 'cncs'
                    pathurl = "/cncs/alarm_monitorings";
                    break;
            }
            
            let dataTime = ['',''];
            if(this.daterange[0]){
                dataTime = [
                    moment(this.daterange[0]).format('YYYY-MM-DD HH:mm:ss'),
                    moment(this.daterange[1]).format('YYYY-MM-DD HH:mm:ss')];
            }
            let data = {
                sectionid: this.sectionid,
                datetime: dataTime
            }
            localStorage.setItem('queryInfo',JSON.stringify(data));
            if(menuname!=''&&pathurl!=''){
                this.changemenu(menuname).then((val) => {
                    routeUrl = this.$router.resolve({
                        path: pathurl,
                    });
                    window.open(routeUrl.href, "_blank");
                });
            }
        },
        changemenu: function (value) {
            this.$store.commit("setmenuitem", value);
            var data = {
                block: this.$store.state.user.blockitem,
            };
            initRouter(this.$store.state.user.blockitem, false); // 新增 调用方法,动态生成路由,
            localSave("sigerdatablockitem", JSON.stringify(data));
            return Promise.resolve("success");
        },
        StandardValue(){
            //设置标准值
            this.StandardValuemodal = true
        },
        StandardValuePost(){
            if(!this.Standardnum){
                this.$Message.error('请输入标准值');
                return false;
            }
            localStorage.setItem(
                "Standardnum",
                this.Standardnum
            );
            this.Standardnum = parseInt(localStorage.getItem("Standardnum"))
            this.StandardValuemodal = false
        },
        getdynamicDetail(){
            //获取稼动率详情
            this.dynamicDetailEcharts()
            this.dynamicmodal = true
            var data = {
                startTime: moment(this.daterange[0]).format("YYYY-MM-DD HH:mm:ss"),
                endTime: moment(this.daterange[1]).format("YYYY-MM-DD HH:mm:ss"),
                sectionID: this.sectionid,
                toexcel:0
            }
            axios.request({
                url: "/cnc/ProductSum/EfficiencyAnalysisInfoThree",
                data,
                method: "post",
            })
            .then((res) => {
                let info = res.data.data;
                let nameArr = [];
                let dataArr = [];
                this.dynamicDataArr = []
                if(res.data.ret ===1 && info!=null && info!=undefined && info.length > 0){
                    this.dynamicDataArr = info
                    info.forEach((item,index) => {
                        nameArr.push(item.title);
                        dataArr.push(item.productivity);
                    });
                    //稼动率详情
                    var main_test = echarts.init(document.getElementById('dynamicDetail'));
                    main_test.setOption({
                        color:['#3398DB','red'],
                        xAxis: {
                            data: nameArr,
                        },
                        
                        series: [
                            {
                                data: dataArr
                            }
                        ]
                    });
                }
            });
            
        },
        initTime(){
            //时间默认一周
            var time = this.$time.changetime(3).split(' - ')
            this.daterange = [time[0], time[1]]
        },
        initlevel() {
            axios
            .request({
            url: "config/ProjectLevelSection/GetSectionTree",
            method: "get",
            })
            .then((res) => {
                const arr = [];
                this.datalevel = res.data.data;
                if(Array.isArray(res.data.data) && res.data.data.length > 0){
                    arr.push(res.data.data[0].value);
                    this.sectionid = res.data.data[0].value;
                    this.leveldata = arr;
                }
                //查询
                this.tosearch();
            });
        },
        handlelevelchange(value, selectedData) {
            this.leveldata = value;
            var sectionid = value[value.length - 1];
            this.sectionid = sectionid;
        },
        selectdate(e) {
            let dtStart = e[0];
            let dtEnd = e[1];
            let last_str = dtEnd.split(" ")[1];
            if (last_str === "00:00:00") {
                dtEnd = moment(dtEnd).format("YYYY-MM-DD") + " 23:59:59";
                this.daterange = [dtStart, dtEnd];
            }
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search();
        },
        tosearch(){
            
            this.search();
        },
        search(){
            if(this.daterange===''||this.daterange[0]===''){
                this.$Message.error(this.$t('200099'))
                return false;
            }
            this.getDynamicRate();//设备稼动率
            this.getQualityRate();//质量合格率
            this.getStateDistribution();//本周设备状态分布
            this.getAlarmAnalysis();//设备报警分析
        },
        //设备稼动率
        getDynamicRate(){
            var data = {
                startTime: moment(this.daterange[0]).format("YYYY-MM-DD HH:mm:ss"),
                endTime: moment(this.daterange[1]).format("YYYY-MM-DD HH:mm:ss"),
                sectionID: this.sectionid,
                toexcel:0
            }
            axios.request({
                url: "/cnc/ProductSum/EfficiencyAnalysisInfoFive",
                data,
                method: "post",
            })
            .then((res) => {
                let number = 0;
                if(res.data.ret ===1){
                    number = res.data.data.productivity;
                }
                let data = [{value: number, name: '时间稼动率'}];
                var main_test = echarts.init(document.getElementById('DynamicRate'));
                main_test.setOption({
                    series: [
                        {
                            name:'时间稼动率',
                            data: data
                        }
                    ]
                });
            });
            
        },
        //质量合格率
        getQualityRate(){
            var params = {
                begin: moment(this.daterange[0]).format("YYYY-MM-DD HH:mm:ss"),
                end: moment(this.daterange[1]).format("YYYY-MM-DD HH:mm:ss"),
                section: this.sectionid,
            }
            axios.request({
                url: "cnc/ProductReport/GetPassRate",
                params,
                method: "get",
            })
            .then((res) => {
                let number = 0;
                if(res.data.ret ===1){
                    number = res.data.data;
                }
                let data = [{value: number, name: '质量合格率'}];
                var main_test = echarts.init(document.getElementById('QualityRate'));
                main_test.setOption({
                    series: [
                        {
                            name:'时间稼动率',
                            data: data
                        }
                    ]
                });
            });
        },
        //本周设备状态分布
        getStateDistribution(){
            var data = {
                startTime: moment(this.daterange[0]).format('YYYY-MM-DD HH:mm:ss'),
                endTime: moment(this.daterange[1]).format('YYYY-MM-DD HH:mm:ss'),
                xtype: 0,
                x_id: 0,
                sectionId: this.sectionid,
                sectionIdStr: '',
                toexcel: 0
            }
            axios.request({
                url: "/cnc/ProjectSectionMachine/machineCanvasDataInfo",
                data,
                method: "post",
            })
            .then((res) => {
                let info = res.data.data;
                let dataname = []
                let datanum = []
                let datanumber = []
                if(res.data.ret ===1 && info.length > 0){
                    let datanumber1 = []
                    let datanumber2 = []
                    let datanumber3 = []
                    let datanumber4 = []
                    let datanumber5 = []
                    info.forEach(value => {
                        dataname.push(value.datetime)
                        datanum.push(value.data)
                    })
                    if (datanum) {
                        datanum.forEach(v => {
                            datanumber1.push(v.num1)
                            datanumber2.push(v.num2)
                            datanumber3.push(v.num3)
                            datanumber4.push(v.num4)
                            datanumber5.push(v.num5)
                        })
                        datanumber.push(datanumber1)
                        datanumber.push(datanumber2)
                        datanumber.push(datanumber3)
                        datanumber.push(datanumber4)
                        datanumber.push(datanumber5)
                    }
                }
                var main_test = echarts.init(document.getElementById('StateDistribution'));
                    main_test.setOption({
                        xAxis: [
                            {
                                data: dataname,
                            }
                        ],
                        series: [
                            {
                                name: this.$t('500041'),
                                type: 'bar',
                                barMaxWidth: 70,
                                stack: this.$t('500067'),
                                data: datanumber.length > 0?datanumber[1]:[],
                                itemStyle: {
                                    normal: {
                                        color: '#5cb85c'
                                    }
                                }
                            },
                            {
                                name: this.$t('500043'),
                                type: 'bar',
                                barMaxWidth: 70,
                                stack: this.$t('500067'),
                                data: datanumber.length > 0?datanumber[3]:[],
                                itemStyle: {
                                    normal: {
                                        color: '#f0ad4e'
                                    }
                                }
                            },
                            {
                                name: this.$t('500042'),
                                type: 'bar',
                                barMaxWidth: 70,
                                stack: this.$t('500067'),
                                data: datanumber.length > 0?datanumber[2]:[],
                                itemStyle: {
                                    normal: {
                                        color: '#337ab7'
                                    }
                                }
                            },
                            {
                                name: this.$t('500044'),
                                type: 'bar',
                                barMaxWidth: 70,
                                stack: this.$t('500067'),
                                data: datanumber.length > 0?datanumber[4]:[],
                                itemStyle: {
                                    normal: {
                                        color: '#d9534f'
                                    }
                                }
                            },
                            {
                                name: this.$t('500040'),
                                type: 'bar',
                                barMaxWidth: 70,
                                stack: this.$t('500067'),
                                data: datanumber.length > 0?datanumber[0]:[],
                                itemStyle: {
                                    normal: {
                                        color: '#585858'
                                    }
                                }

                            }
                        ]
                    });
            });
        },
        getAlarmAnalysis(){
            //设备报警分析
            var data = {
                startTime: moment(this.daterange[0]).format("YYYY-MM-DD HH:mm:ss"),
                endTime: moment(this.daterange[1]).format("YYYY-MM-DD HH:mm:ss"),
                sectionID: this.sectionid,
            }
            axios.request({
                url: "/cnc/MachineAlarm/GetAlarmDataForAnalysisCl",
                data,
                method: "post",
            })
            .then((res) => {
                let info = res.data.data;
                let xname = [];
                let ydata1 = [];
                let ydata2 = [];
                if(res.data.ret ===1 && info!=null&& info!=undefined && info.length >0){
                    
                    info.forEach((item,index)=>{
                        xname.push(item.abscissa);
                        ydata1.push(item.ordinate);
                        ydata2.push(Math.round(item.ordinatecl/3600*100)/100);
                    })
                }
                var main_test = echarts.init(document.getElementById('AlarmAnalysis'));
                    main_test.setOption({
                        xAxis:[{
                            data:xname
                        }],
                        series: [
                            {
                                name: '报警次数',
                                type: 'bar',
                                data: ydata1
                            },
                            {
                                name: '报警时长',
                                type: 'line',
                                yAxisIndex: 1,
                                data: ydata2
                            }
                        ]
                    });
            });
        },
        baseEacherts_Dynamic(id,title){
            if (this.DynamicRate_echart !== null && this.DynamicRate_echart !== '' && this.DynamicRate_echart !== undefined) {
                this.DynamicRate_echart.dispose()
            }
            this.DynamicRate_echart = echarts.init(document.getElementById(id))
            let option = {
                tooltip: {
                    formatter: "{a} <br/>{c}%"
                },
                toolbox: {
                    show: true,
                    // feature: {
                    //     restore: {show: true},
                    //     saveAsImage: {show: true}
                    // }
                },
                series : [
                    {
                        name: title,
                        type: 'gauge',
                        z: 3,
                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        radius: '95%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 20,
                                color: [[0.2, '#d9534f'], [0.8, '#337ab7'], [1, '#5cb85c']],
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 30,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 35,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                    
                        title: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic'
                        },
                        detail: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            formatter: function (value) {
                                if(!value){
                                    value = 0
                                }
                                // value = (value + '').split('.');
                                // value.length < 2 && (value.push('00'));
                                // return ('00' + value[0]).slice(-2)
                                //     + '.' + (value[1] + '00').slice(0, 2) + '%';
                                let num = Math.round(value*100)/100;
                                return num + '%';
                            },
                            fontWeight: 'bolder',
                            borderRadius: 3,
                            backgroundColor: '#444',
                            borderColor: '#aaa',
                            shadowBlur: 5,
                            shadowColor: '#333',
                            shadowOffsetX: 0,
                            shadowOffsetY: 3,
                            borderWidth: 2,
                            textBorderColor: '#000',
                            textBorderWidth: 2,
                            textShadowBlur: 2,
                            textShadowColor: '#fff',
                            textShadowOffsetX: 0,
                            textShadowOffsetY: 0,
                            fontFamily: 'Arial',
                            width: 100,
                            color: '#eee',
                            rich: {}
                        },
                        data: []
                    },
                ]
            };
             
            this.DynamicRate_echart.setOption(option);
            setTimeout(() => {
                this.DynamicRate_echart.resize();  // 精髓之所在
            },1);
        },
        baseEacherts_Quality(id,title){
            if (this.QualityRate_echart !== null && this.QualityRate_echart !== '' && this.QualityRate_echart !== undefined) {
                this.QualityRate_echart.dispose()
            }
            this.QualityRate_echart = echarts.init(document.getElementById(id))
            let option = {
                tooltip: {
                    formatter: "{a} <br/>{c}%"
                },
                toolbox: {
                    show: true,
                    // feature: {
                    //     restore: {show: true},
                    //     saveAsImage: {show: true}
                    // }
                },
                series : [
                    {
                        name: title,
                        type: 'gauge',
                        z: 3,
                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        radius: '95%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 20,
                                color: [[0.2, '#d9534f'], [0.8, '#337ab7'], [1, '#5cb85c']],
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 30,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 35,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                    
                        title: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic'
                        },
                        detail: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            formatter: function (value) {
                                if(!value){
                                    value = 0
                                }
                                // value = (value + '').split('.');
                                // value.length < 2 && (value.push('00'));
                                // return ('00' + value[0]).slice(-2)
                                //     + '.' + (value[1] + '00').slice(0, 2) + '%';
                                let num = Math.round(value*100)/100;
                                return num + '%';
                            },
                            fontWeight: 'bolder',
                            borderRadius: 3,
                            backgroundColor: '#444',
                            borderColor: '#aaa',
                            shadowBlur: 5,
                            shadowColor: '#333',
                            shadowOffsetX: 0,
                            shadowOffsetY: 3,
                            borderWidth: 2,
                            textBorderColor: '#000',
                            textBorderWidth: 2,
                            textShadowBlur: 2,
                            textShadowColor: '#fff',
                            textShadowOffsetX: 0,
                            textShadowOffsetY: 0,
                            fontFamily: 'Arial',
                            width: 100,
                            color: '#eee',
                            rich: {}
                        },
                        data: []
                    },
                ]
            };
            this.QualityRate_echart.setOption(option);
            setTimeout(() => {
                this.QualityRate_echart.resize();  // 精髓之所在
            },1);
        },
        baseEacherts_State(id){
            if (this.State_echart !== null && this.State_echart !== '' && this.State_echart !== undefined) {
                this.State_echart.dispose()
            }
            this.State_echart = echarts.init(document.getElementById(id))
            var option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: [this.$t('500041'), this.$t('500043'), this.$t('500042'), this.$t('500044'), this.$t('500040')]// 关机排在最后
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            // interval: 0,
                            rotate: 35
                        },
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '%',
                        max: 100,
                        min: 0
                    }
                ],
                series: [
                    {
                        name: this.$t('500041'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: this.$t('500067'),
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#5cb85c'
                            }
                        }
                    },
                    {
                        name: this.$t('500043'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: this.$t('500067'),
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#f0ad4e'
                            }
                        }
                    },
                    {
                        name: this.$t('500042'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: this.$t('500067'),
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#337ab7'
                            }
                        }
                    },
                    {
                        name: this.$t('500044'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: this.$t('500067'),
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#d9534f'
                            }
                        }
                    },
                    {
                        name: this.$t('500040'),
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: this.$t('500067'),
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#585858'
                            }
                        }

                    }
                ]
            }
            this.State_echart.setOption(option)
            setTimeout(() => {
                this.State_echart.resize();  // 精髓之所在
            },1);
        },
        baseEacherts_Alarm(id){
            if (this.Alarm_echart !== null && this.Alarm_echart !== '' && this.Alarm_echart !== undefined) {
                this.Alarm_echart.dispose()
            }
            this.Alarm_echart = echarts.init(document.getElementById(id))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    // feature: {
                    //     dataView: {show: true, readOnly: false},
                    //     magicType: {show: true, type: ['line', 'bar']},
                    //     restore: {show: true},
                    //     saveAsImage: {show: true}
                    // }
                },
                color:['rgba(97, 165, 232, 1)','rgba(126,207,81,1)'],
                legend: {
                    data: ['报警次数', '报警时长']
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            // interval: 0,
                            rotate: 35
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '报警次数',
                        min: 0,
                        minInterval:1,
                        max:function(value) {
                            return value.max;
                        },
                        // interval: 50,
                        axisLabel: {
                            formatter: '{value} '
                        },
                        splitLine:{
                    　　　　show:false
                    　　 }
                    },
                    {
                        type: 'value',
                        name: '报警时长',
                        min: 0,
                        max: function(value) {
                            return value.max;
                        },
                        // interval: 5,
                        axisLabel: {
                            formatter: '{value} h'
                        },
                        splitLine:{
                    　　　　show:false
                    　　 }
                    }
                ],
                series: [
                    {
                        name: '报警次数',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '报警时长',
                        type: 'line',
                        yAxisIndex: 1,
                        data: []
                    }
                ]
            };
            this.Alarm_echart.setOption(option)
            setTimeout(() => {
                this.Alarm_echart.resize();  // 精髓之所在
            },1);
        },
        //稼动率详情图表
        dynamicDetailEcharts(){
            let _this = this;
            let html = '<div id="dynamicDetail" style="width:770px;height:400px;"></div>';
            _this.$refs.dynamicdiv.innerHTML = html;
            let dynamicDetail = echarts.init(document.getElementById('dynamicDetail'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[0];
                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + '%';
                    }
                },
                grid: {
                    bottom: 100
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {  
                        interval:0,  
                        rotate:30  
                    }  
                },
                yAxis: {
                    name:'%',
                    type: 'value'
                },
                series: [{
                    name:'设备稼动率',
                    data:[],
                    type: 'bar',
                    // showBackground: true,
                    // backgroundStyle: {
                    //     color: 'rgba(220, 220, 220, 0.8)'
                    // },
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                // 给出颜色组
                                // var colorList = [
                                //     "#01B13A",
                                //     "#4CD624",
                                //     "#A8DF15",
                                //     "#F2D418",
                                //     "#FFB539",
                                //     "#FF9C32",
                                //     "#FF5E31",
                                //     "#F05621",
                                //     "#DF2F1F",
                                //     "#F06292",
                                //     "#01CDD1",
                                //     "#A9DBFF",
                                //     "#1AA0FF",
                                //     "#7986CB",
                                // ];
                                let colorstr = '#5cb85c';
                                if(params.value < _this.Standardnum){
                                    colorstr = '#d9534f';
                                }
                                return colorstr;//colorList[params.dataIndex];
                            },
                        },
                    },
                    // 柱状图宽度
                    barMaxWidth: "70",
                    markLine: {
                        label:{
                            position:"start",          //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                        },
                        data : [{
                            label:{
                            position:'end',
                            formatter:function(params){
                                let str = params.value + ' '+'警戒线';
                                return str;
                            }
                            },
                            silent:false,             //鼠标悬停事件  true没有，false有
                            lineStyle:{               //警戒线的样式  ，虚实  颜色
                                type:"dashed",
                                color:"#FA3934",
                            },
                            yAxis: _this.Standardnum          
                        }]
                    }
                }]
            };
            dynamicDetail.setOption(option)
            setTimeout(() => {
                dynamicDetail.resize();  // 精髓之所在
            },1);

            dynamicDetail.getZr().on('click', params => {
                let pointInPixel = [params.offsetX, params.offsetY]
                if (dynamicDetail.containPixel('grid', pointInPixel)) {
                    //点击的是哪个柱子
                    let xIndex = dynamicDetail.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
                    if(xIndex === xIndex){
                        _this.sectionid = _this.dynamicDataArr[xIndex].sectionid
                        _this.JumpPage(1)
                    }
                    else{

                    }
                }
            })
        }
    }
}
</script>
<style lang="less">
    .item{
        .middle{
            .baojunranggaide{
                tr,td{
                    height:50px!important;
                }
            }
        }
    }
</style>
<style lang="less" scoped>
    .item{
        width:100%;
        .left{
            width:25%;
            height:100%;
            float: left;
        }
        .middle{
            width:50%;
            height:calc(~"80vh + 70px");
            padding:0px 10px;
            float: left;
            .m_content{
                width:100%;
                height:100%;
                .m_div{
                    width:100%;
                    height:calc(~"100% - 30px");
                    border:1px solid #ddd;
                    .textcontent{
                        width:33.3%;
                        height:100px;
                        float: left;
                        div{
                            width:100%;
                            height:50px;
                            line-height: 50px;
                            text-align: center;
                            font-size: 35px;
                            font-weight: bold;
                        }
                        div:first-child{
                            font-size: 20px;
                        }
                    }
                    .down{
                        padding:10px;
                        overflow: auto;
                    }
                }

            }
        }
        .right{
            width:25%;
            height:100%;
            float: left;
        }
        .title{
            width:100%;
            height:30px;
            font-size: 15px;
            line-height:30px;
            background:rgba(170, 170, 170, 1);
            color:#fff;
            padding-left:10px;
        }
        .echartdiv{
            width:100%;
            height:40vh;
            border:1px solid #ddd;
            margin-bottom: 10px;
            position: relative;
            .echartitem{
                position: relative;
                width:100%;
                height:40vh;
            }
            .button{
                position: absolute;
                right:10px;
                bottom: 10px;;
            }
        }
    }
</style>