<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{$t(1950496)}}：</label>
          <Select v-model="checktype" label-in-value clearable class="searchSelect" @on-change="checktypechange">
                <Option v-for="item in checktypeList" :value="item.id" :key="item.id">{{ item.name}}</Option>
            </Select>
        </div>
        <div class="filter">
          <label >{{$t('1950491')}}：</label>
          <Cascader :data="datalevel" :value="leveldata"  trigger="click" @on-change="handlelevelchange" change-on-select class="searchSelect"></Cascader>
        </div>
        <div class="filter">
          <label >{{$t('100307')}}：</label>
          <Select v-model="productid" label-in-value clearable class="searchSelect" @on-change="productchange">
              <Option v-for="item in products" :value="item.id" :key="item.id">{{ item.name+"【"+ item.code +"】" }}</Option>
          </Select>
        </div>
        <div class="filter">
              <label >{{$t(901048)}}：</label>
              <Select v-model="itemid" label-in-value clearable class="searchSelect" >
                  <Option v-for="item in items" :value="item.id" :key="item.id">{{ item.name}}</Option>
              </Select>
        </div>
        <!-- 次级搜索条件--隐藏 -->
        <div v-show="!morecondition">
        <div>
          <div class="filter">
              <label>{{$t('1046')}}：</label>
              <DatePicker
                id="日期"
                type="datetimerange"
                v-model="daterange"
                confirm
                placeholder=""
                class="searchInput MaxWidth"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="selectdate"
              ></DatePicker>
          </div>
        </div>
      </div>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
        <Button type="primary" class="fourWord" icon="ios-document" @click="downpdf()">{{$t('900741')}}</Button>
      </div>
       <!-- 更多条件 按钮 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </div>
    <div class="divborder newEchartStyle">
      <div id="demo">
      <label style="font-weight:bold;font-size:14;">{{charttitle}}</label>
      <div class="div_echarts" ref="div_out">
        <div class="left_echarts" id="Top_L" ref="Top_L"></div>
        <div class="right_echarts" id="Top_R" ref="Top_R"></div>
      </div>
      <div class="div_echarts">
        <div class="left_echarts" id="Down_L" ref="Down_L"></div>
        <div v-show="showContent" class="right_echarts_data" id="Down_R">
          <Table
          :show-header=false
          highlight-row
          :data="tableData3"
          :columns="tableColumns3">
          </Table>
          <!-- <div class="downR_title">
            <div>{{$t(800190)}}:{{SampleCount}}</div>
            <div>{{$t(800312)}}:{{SampleMean}}</div>
            <div>{{$t(800313)}}:{{sigma}}</div>
            <div>{{$t(800314)}}:{{USL}}</div>
            <div>Cp:{{cp}}</div>
            <div>Cpk:{{cpk}}</div>
          </div>
          <div class="downR_title">
            <div>{{$t(1950623)}}:{{right_foot_online}}</div>
            <div>{{$t(1950643)}}:{{parameterValue}}</div>
            <div>{{$t(1950622)}}:{{right_foot_offline}}</div>
            <div>{{$t(800316)}}:{{LSL}}</div>
            <div>Cpu:{{cpu}}</div>
            <div>Cpl:{{cpl}}</div>
          </div> -->
        </div>
        <!-- <div v-show="showContent" class="right_echarts_title" id="Down_R">
          <div class="downR_title1">
            <div style="align: center;">{{$t(1950647)}}</div>
          </div>
        </div>
        <div v-show="showContent" class="right_echarts_data" id="Down_R">
          <div class="downR_title">
            <div>Cp:{{cp_mouth}}</div>
            <div>Cpk:{{cpk_mouth}}</div>
          </div>
          <div class="downR_title">
            <div>Cpu:{{cpu_mouth}}</div>
            <div>Cpl:{{cpl_mouth}}</div>
          </div>
        </div> -->
      </div>
        <div style="display:inline-block;">
          <Table
          class="echartsTable"
          @on-current-change="handleRowChange"
          highlight-row
          :data="tableData1"
          :columns="tableColumns1"
        ></Table>
        <Table
          class="echartsTable"
          highlight-row
          :data="tableData2"
          :columns="tableColumns2"
        ></Table>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
import echarts from 'echarts'
import moment from 'moment'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default{
    data () {
        return {
            morecondition: false, // 条件
            projectname: '', // 检验项目
            items: [], // 检验项目列表
            checktype: '', // 检验类型
            showContent: false,
            checktypeList: [
                /*{ id: 5, name: this.$t(930033) },
                { id: 2, name: this.$t(930034) },
                { id: 3, name: this.$t(930035) },
                { id: 6, name: this.$t(930036) },
                { id: 1, name: this.$t(950367) },
                { id: 4, name: this.$t(930037) },
                { id: 7, name: this.$t(600233) }*/
            ],
            sectionid: 0,
            leveldata: [],
            datalevel: [],
            productid: 0,
            products: [],
            morecondition: false,

            SampleCount: '',
            SampleMean: '',
            sigma: '',
            cp: '',
            cpk: '',
            cp_mouth: '',
            cpk_mouth: '',
            right_foot_online: '',
            parameterValue: '',
            right_foot_offline: '',
            cpu: '',
            cpl: '',
            cpu_mouth: '',
            cpl_mouth: '',
            USL: '',
            LSL: '',

            tableData1: [],
            tableColumns1: [],
            loading: false,
            tableData2: [],
            tableColumns2: [
                {
                    title: 'ID', // this.$t(5500026),
                    key: 'id',
                    align: 'center',
                    width: 100
                },
                {
                    title: this.$t(920168),
                    key: 'content',
                    align: 'center',
                    width: 120
                },
                {
                    title: this.$t(5500027),
                    key: 'description',
                    align: 'center'
                },
                {
                    title: this.$t(5500028),
                    key: 'time',
                    align: 'center',
                    width: 150
                }
            ],
            timeSET: 0,
            itemid: 0,
            valueValue: this.$t(920168),
            charttitle: '',
            daterange: [],
            dtStart: '',
            dtEnd: '',
            tableColumns3: [
                {
                    title: '',
                    key: 'title1',
                    render: (h, params) => {
                        let bgcolor = ''
                        let color = ''
                        if (params.index === 0 || params.index === 7) {
                            bgcolor = '#2b85e4'
                            color = '#fff'
                        }
                        return h('p', [
                            h('span', {
                                style: {
                                    background: bgcolor,
                                    color: color,
                                    padding: '10px',
                                    fontWeight: 'bold'
                                }
                            }, params.row.title1)
                        ]);
                    }
                },
                {
                    title: '',
                    key: 'data1'
                },
                {
                    title: '',
                    key: 'title2',
                    render: (h, params) => {
                        return h('p', [
                            h('span', {
                                style: {
                                    fontWeight: 'bold'
                                }
                            }, params.row.title2)
                        ]);
                    }
                },
                {
                    title: '',
                    key: 'data2'
                }
            ],
            tableData3: [

            ]
        }
    },
    created () {
        this.initchecktypeList()
    },
    mounted () {
        var that = this
        this.$nextTick(function () {
            var fWidthValue = this.$refs.div_out.clientWidth;
            that.$refs.Down_L.style.width = fWidthValue * 0.6 + 'px'
            that.$refs.Top_L.style.width = fWidthValue * 0.6 + 'px'
            that.$refs.Top_R.style.width = fWidthValue * 0.4 + 'px'
            that.search()
        })

        // 10秒刷新一次数据
        if (this.timeSET) {
            clearInterval(this.timeSET)
        } else {
            this.timeSET = setInterval(function () {
                that.search()
            }, 10000)
        }
    },
    methods: {
        initchecktypeList () {
            axios.request({
                url: '/qms/TypeCount/GetTypeCounts?page=1&pagesize=10000',
                method: 'get'
            }).then(res => {
                res.data.data.forEach(ele => {
                    this.checktypeList.push({id:ele.type_code, name:ele.type_name})
                });          
            })      
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
            let last_str = this.dtEnd.split(' ')[1]
            if (last_str === '00:00:00') {
                this.dtEnd = moment(this.dtEnd).format('YYYY-MM-DD') + ' 23:59:59'
                this.daterange = [this.dtStart, this.dtEnd]
            }
        },
        downpdf () {
            var target = document.querySelector('#demo')
            html2canvas(target, { allowTaint: true, dpi: 172, background: '#fff' }).then(function (canvas) {
                var contentWidth = canvas.width
                var contentHeight = canvas.height

                // 一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89
                // 未生成pdf的html页面高度
                var leftHeight = contentHeight
                // pdf页面偏移
                var position = 0
                // html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                var imgWidth = 595.28
                var imgHeight = 592.28 / contentWidth * contentHeight

                var pageData = canvas.toDataURL('image/jpeg', 1.0)
                var pdf = new JsPDF('', 'pt', 'a4')

                // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                // 当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        // 避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage()
                        }
                    }
                }
                pdf.save('content.pdf')
            })
        },
        checktypechange () {
            this.initlevel()
        },
        productchange () {
            this.itemid = 0
            this.items = []
            axios.request({
                url: '/qms/TypeCount/GetItemsByCheckType?sectionid=' + this.sectionid + '&checktype=' + this.checktype + '&productid=' + this.productid,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1 && res.data.data.length > 0) {
                    this.items = res.data.data
                }
            })
        },
        handlelevelchange (data) {
            this.leveldata = data
            if (data && data.length > 0) {
                this.sectionid = data[data.length - 1]
                this.initproducts()
            }
        },
        initlevel () {
            this.sectionid = 0
            this.itemid = 0
            this.items = []
            this.productid = 0
            this.products = []
            axios.request({
                url: '/qms/TypeCount/GetSectionTreeByCheckType?checktype=' + this.checktype,
                method: 'get'
            }).then(res => {
                var arr = []
                this.datalevel = res.data.data
                arr.push(res.data.data[0].value)
                this.leveldata = arr
            })
        },
        initproducts () {
            this.productid = 0
            this.products = []
            this.itemid = 0
            this.items = []
            axios.request({
                url: '/qms/TypeCount/GetProductsByCheckType?sectionid=' + this.sectionid + '&checktype=' + this.checktype,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1 && res.data.data.length > 0) {
                    this.products = res.data.data
                }
            })
        },
        search () {
            if (!(this.productid > 0 && this.sectionid > 0 && this.itemid > 0 && this.checktype > 0)) {
                return;
            }
            var params = {
                productid: this.productid,
                sectionid: this.sectionid,
                itemid: this.itemid,
                checktype: this.checktype,
                starttime: this.dtStart,
                endtime: this.dtEnd
            }

            axios.request({
                url: '/qms/Statistical/GetSPCMonitor',
                data: params,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.showContent = true
                    var data = res.data.data

                    this.charttitle = data.checktype_count > 1 ? 'XBar-R' : 'I-MR'

                    // 画图x-bar
                    this.getXbarEcharts(data, data.checktype_count > 1 ? 'Xbar-bar' : 'X-bar')
                    // 画图M-bar
                    this.getMbarEcharts(data, data.checktype_count > 1 ? 'R-bar' : 'MR-bar')

                    // 样本数据分布图
                    this.getSampleEcharts(data)

                    // 异常图
                    let arr1 = []
                    if (data.spcdata.length > 0) {
                        let arr = { id: this.valueValue }
                        let excepArr = []
                        let column_name = [
                            {
                                title: 'ID',
                                key: 'id',
                                align: 'center',
                                render: (h, params) => {
                                    return h(
                                        'div',
                                        {
                                            style: {
                                                color: 'white',
                                                backgroundColor: '#2D8CF0',
                                                margin: '0px -18px',
                                                textAlign: 'center',
                                                height: '36px',
                                                paddingTop: '9px',
                                                cursor: 'pointer'
                                            }
                                        },
                                        this.valueValue
                                    )
                                }
                            }
                        ]
                        data.spcdata.forEach(function (item, index) {
                            excepArr.push(item.isexception)
                        })
                        data.spcdata.forEach(function (item, index) {
                            // arr.id = this.valueValue
                            let exception = parseInt(index) + 1
                            arr['exception' + exception] = item.value
                            let columns = {
                                title: exception,
                                key: 'exception' + exception,
                                align: 'center',
                                render: (h, params) => {
                                    let rowobj = params.row
                                    let columnobj = params.column
                                    let value_num = rowobj[columnobj.key] // 值
                                    let index = columnobj._index - 1
                                    let isexception = excepArr[index]
                                    let bgColor = ''
                                    let fontColor = 'black'
                                    if (isexception === 1) {
                                        bgColor = 'red'
                                        fontColor = '#fff'
                                    }
                                    return h(
                                        'div',
                                        {
                                            style: {
                                                color: fontColor,
                                                backgroundColor: bgColor,
                                                margin: '0px -18px',
                                                textAlign: 'center',
                                                height: '36px',
                                                paddingTop: '9px',
                                                cursor: 'pointer'
                                            }
                                        },
                                        value_num
                                    )
                                }
                            }
                            column_name.push(columns)
                        })
                        arr1.push(arr)
                        this.tableColumns1 = column_name
                    }
                    this.tableData1 = arr1
                    let arr2 = []
                    if (data.abnormalDatas.length > 0) {
                        data.abnormalDatas.forEach(function (item, index) {
                            let arr3 = {}
                            arr3.id = index + 1
                            arr3.content = item.value
                            arr3.description = item.rule
                            arr3.time = item.time
                            arr2.push(arr3)
                        })
                    }
                    this.tableData2 = arr2

                    // 数据
                    this.SampleCount = data.sampleSize
                    this.SampleMean = data.sampleMean
                    this.sigma = data.sampleStd
                    this.cp = data.cp
                    this.cpk = data.cpk
                    this.right_foot_online = data.upperLimit
                    this.right_foot_offline = data.lowerLimit
                    this.parameterValue = data.midLine
                    this.cpu = data.cpu
                    this.cpl = data.cpl
                    this.USL = data.usl
                    this.LSL = data.lsl

                    this.cp_mouth = data.cp_mouth
                    this.cpk_mouth = data.cpk_mouth
                    this.cpu_mouth = data.cpu_mouth
                    this.cpl_mouth = data.cpl_mouth

                    this.tableData3 = [
                        {
                            title1: '当前数据',
                            data1: '',
                            title2: '',
                            data2: ''
                        },
                        {
                            title1: this.$t(800190),
                            data1: this.SampleCount,
                            title2: this.$t(1950623),
                            data2: this.right_foot_online
                        },
                        {
                            title1: this.$t(800312),
                            data1: this.SampleMean,
                            title2: this.$t(1950643),
                            data2: this.parameterValue
                        },
                        {
                            title1: this.$t(800313),
                            data1: this.sigma,
                            title2: this.$t(1950622),
                            data2: this.right_foot_offline
                        },
                        {
                            title1: this.$t(800314),
                            data1: this.USL,
                            title2: this.$t(800316),
                            data2: this.LSL
                        },
                        {
                            title1: 'Cp',
                            data1: this.cp,
                            title2: 'Cpu',
                            data2: this.cpu
                        },
                        {
                            title1: 'Cpk',
                            data1: this.cpk,
                            title2: 'Cpl',
                            data2: this.cpl
                        },
                        {
                            title1: '本月数据',
                            data1: '',
                            title2: '',
                            data2: ''
                        },
                        {
                            title1: 'Cp',
                            data1: this.cp_mouth,
                            title2: 'Cpu',
                            data2: this.cpu_mouth
                        },
                        {
                            title1: 'Cpk',
                            data1: this.cpk_mouth,
                            title2: 'Cpl',
                            data2: this.cpl_mouth
                        }
                    ]
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        getSampleEcharts (data) {
            //  var dataArr = [
            //     [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 4.0, 8.0, 9.0, 20.0, 28.0, 12.0, 8.0, 7.0, 1.0, 0.0, 0.0],
			  //     [0.0, 40.0114, 40.0139, 40.01645, 40.019, 40.02155, 40.0241, 40.02665, 40.029199999999996, 40.031749999999995, 40.034299999999995, 40.036849999999994, 40.039399999999993, 40.041949999999993, 40.044499999999992, 40.047049999999992, 40.049599999999991, 40.05214999999999, 40.05469999999999, 40.057249999999989, 40.0572]
            //  ]

            var myChart = echarts.init(document.getElementById('Top_R'))
            var option = {
                title: {
                    text: this.$t(5500029),
                    textStyle: { // 设置主标题风格
                        color: 'black', // 设置主标题字体颜色
                        fontStyle: 'normal', // 主标题文字风格
                        fontFamily: 'sans-serif',
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    },
                    left: 'center',
                    top: 'top'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                // legend: {
                //     data:[],
                //
                // },
                grid: {
                    left: '5%',
                    right: '2%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        offset: 0,
                        nameLocation: '',
                        data: data.sample_x,
                        axisLabel: {
                            interval: 0,
                            rotate: 35,
                            margin: 10
                        },
                        axisTick: {
                            alignWithLabel: false
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '',
                        type: 'value',
                        data: ''
                    },
                    {
                        name: '',
                        axisLabel: {
                            interval: 'auto'
                            // formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        name: '++',
                        type: 'bar',
                        barMaxWidth: 70,
                        barCategoryGap: 0,
                        data: data.sample_y,
                        itemStyle: {
                            normal: {
                                color: '#4F81BD'
                            }
                        }

                    },
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    fontWeight: 'bold',
                                    color: '#000000'
                                },
                                lineStyle: {
                                    width: 4
                                }
                            }
                        },
                        yAxisIndex: 1,
                        type: 'line'
                    }

                ]
            }
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        getXbarEcharts (data, echart_name) {
            // var dataMbarArr = {
            //     "Range": [0.002, 0.0015, 0.0001, 0.0008, 0.0019, 0.0309, 0.027, 0.012, 0.0057, 0.0011, 0.0001, 0.0003, 0.0003, 0.0006, 0.0029, 0.0021, 0.0068, 0.0091, 0.0032, 0.0028, 0.0005, 0.0078, 0.0008, 0.0006, 0.0007, 0.0058, 0.0027, 0.0022, 0.0059, 0.0016, 0.0023, 0.0085, 0.0192, 0.0036, 0.0026, 0.0064, 0.0031, 0.0023, 0.0002, 0.0013, 0.0019, 0.0013, 0.0091, 0.0043, 0.0085, 0.0088, 0.0043, 0.003, 0.0013, 0.0044, 0.0012, 0.0018, 0.0012, 0.0052, 0.0022, 0.0022, 0.0024, 0.003, 0.0014, 0.0018, 0.0, 0.0074, 0.0004, 0.0077, 0.0004, 0.0049, 0.0042, 0.0101, 0.003, 0.0007, 0.0046, 0.0031, 0.0068, 0.001, 0.0028, 0.0359, 0.0377, 0.0004, 0.0031, 0.0156, 0.0114, 0.0027, 0.0018, 0.0019, 0.0019, 0.0022, 0.0016, 0.0016, 0.0089, 0.0126, 0.0047, 0.0015, 0.0013, 0.0006, 0.0028, 0.005, 0.0048, 0.0036, 0.0084],
            //     "RangeLCLArray": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
            //     "RangeMeanArray": [0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049, 0.0049],
            //     "RangeUCLArray": [0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016, 0.016],
            //     "xAxis": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]
            // }

            let lengthnum = data.x.length;
            let RangeLCLArray = []
            let RangeMeanArray = []
            let RangeUCLArray = []
            for (var i = 0; i < lengthnum; i++) {
                RangeLCLArray.push(data.lcl)
                RangeMeanArray.push(data.sl)
                RangeUCLArray.push(data.ucl)
            }
            var dataMbarArr = {
                'Range': data.y,
                'RangeLCLArray': RangeLCLArray,
                'RangeMeanArray': RangeMeanArray,
                'RangeUCLArray': RangeUCLArray,
                'xAxis': data.x
            }
            var min_y = Math.min.apply(null, data.y);
            var minY = '';
            if (min_y >= data.lcl) {
                minY = data.lcl
            } else {
                minY = min_y;
            }
            if (data.std6.length > 0) {
                if (minY >= data.std6[0]) {
                    minY = data.std6[0]
                }
            }
            var max_y = Math.max.apply(null, data.y);
            var maxY = '';
            if (max_y <= data.ucl) {
                maxY = data.ucl
            } else {
                maxY = max_y;
            }
            if (data.std3.length > 0) {
                if (maxY <= data.std3[0]) {
                    maxY = data.std3[0]
                }
            }

            var myChart = echarts.init(document.getElementById('Top_L'))
            var option = {
                title: {
                    text: '', // '移\n动\n极\n差\n图',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    },
                    left: 'left',
                    top: 'middle'
                    // subtext: '纯属虚构'
                },

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['UCL', 'Sample', echart_name, 'LCL']
                },
                toolbox: {
                    show: true,
                    feature: {}
                },
                color: ['red', '#61A0A8', 'black', 'red'], // 线的颜色
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dataMbarArr.xAxis,
                    // data: ['1','2','3','4','5','6','7'],
                    axisLabel: {
                        // color:'white',
                        // formatter: '{value} °C'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: minY,
                        max: maxY,
                        interval: data.std,
                        boundaryGap: false,
                        axisLabel: {
                            // color:'white',
                            formatter: function (value, index) {
                                var fixedValue = value.toFixed(4)
                                if (fixedValue - data.ucl === 0) {
                                    return data.ucl
                                } else if (fixedValue - data.lcl === 0) {
                                    return data.lcl
                                } else {
                                    return fixedValue
                                }
                            }
                        }

                    },
                    {
                        type: 'value',
                        min: minY,
                        axisLabel: {
                            // color:'white',
                            // formatter: '{value} °C'
                        }
                    }
                ],

                series: [
                    {
                        name: 'UCL',
                        type: 'line',
                        data: [dataMbarArr.RangeUCLArray[0]],
                        markLine: {
                            name: 'UCL',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        // type: 'solid',
                                        color: 'red',
                                        width: 2
                                    },
                                    label: {
                                        show: true,
                                        formatter: 'UCL=' + dataMbarArr.RangeUCLArray[0]
                                    }
                                }
                            },
                            data: [[
                                { coord: [0, dataMbarArr.RangeUCLArray[0]], label: { normal: { show: true } } },
                                { coord: [dataMbarArr.RangeUCLArray.length - 1, dataMbarArr.RangeUCLArray[0]], label: { normal: { show: true } } }
                            ]]
                        }
                    },
                    {
                        name: 'Sample',
                        type: 'line',
                        data: dataMbarArr.Range
                    },
                    {
                        name: echart_name,
                        type: 'line',
                        data: [dataMbarArr.RangeMeanArray[0]],
                        markLine: {
                            name: echart_name,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        // type: 'solid',
                                        color: 'black',
                                        width: 2
                                    },
                                    label: {
                                        show: true,
                                        formatter: echart_name + '=' + dataMbarArr.RangeMeanArray[0]

                                    }
                                }
                            },
                            data: [[
                                { coord: [0, dataMbarArr.RangeMeanArray[0]], label: { normal: { show: true } } },
                                { coord: [dataMbarArr.RangeMeanArray.length - 1, dataMbarArr.RangeMeanArray[0]], label: { normal: { show: true } } }
                            ]]
                        }
                    },
                    {
                        name: 'LCL',
                        type: 'line',
                        data: [dataMbarArr.RangeLCLArray[0]],
                        markLine: {
                            name: 'LCL',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        // type: 'solid',
                                        color: 'red',
                                        width: 2
                                    },
                                    label: {
                                        show: true,
                                        formatter: 'LCL=' + dataMbarArr.RangeLCLArray[0]

                                    }
                                }
                            },
                            data: [[
                                { coord: [0, dataMbarArr.RangeLCLArray[0]], label: { normal: { show: true } } },
                                { coord: [dataMbarArr.RangeLCLArray.length - 1, dataMbarArr.RangeLCLArray[0]], label: { normal: { show: true } } }
                            ]]
                        }
                    }
                ]
            }
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        getMbarEcharts (data, echart_name) {
            //  var dataArr = {
            //    "LCLArray": [40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313, 40.0313],
            //     "Sample": [40.0455, 40.0435, 40.042, 40.0421, 40.0429, 40.0448, 40.0139, 40.0409, 40.0529, 40.0472, 40.0461, 40.046, 40.0457, 40.046, 40.0466, 40.0495, 40.0516, 40.0448, 40.0539, 40.0507, 40.0535, 40.054, 40.0462, 40.047, 40.0464, 40.0457, 40.0399, 40.0426, 40.0404, 40.0463, 40.0479, 40.0456, 40.0541, 40.0349, 40.0385, 40.0359, 40.0423, 40.0454, 40.0477, 40.0475, 40.0462, 40.0481, 40.0468, 40.0377, 40.042, 40.0505, 40.0417, 40.046, 40.043, 40.0417, 40.0461, 40.0449, 40.0431, 40.0443, 40.0391, 40.0369, 40.0391, 40.0415, 40.0385, 40.0371, 40.0353, 40.0353, 40.0427, 40.0423, 40.05, 40.0504, 40.0455, 40.0413, 40.0514, 40.0484, 40.0477, 40.0431, 40.04, 40.0468, 40.0478, 40.0506, 40.0147, 40.0524, 40.0528, 40.0497, 40.0341, 40.0455, 40.0428, 40.041, 40.0429, 40.0448, 40.0426, 40.0442, 40.0458, 40.0547, 40.0421, 40.0468, 40.0483, 40.047, 40.0464, 40.0436, 40.0486, 40.0438, 40.0474, 40.039],
            //     "SampleMeanArray": [40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443, 40.0443],
            //     "UCLArray": [40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573, 40.0573],
            //     "xAxis": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
            //  }

            let lengthnum = data.xr.length;
            let LCLArray = []
            let SampleMeanArray = []
            let UCLArray = []
            for (var i = 0; i < lengthnum; i++) {
                LCLArray.push(data.lclr)
                SampleMeanArray.push(data.slr)
                UCLArray.push(data.uclr)
            }
            var dataMbarArr = {
                'LCLArray': LCLArray,
                'Sample': data.yr,
                'SampleMeanArray': SampleMeanArray,
                'UCLArray': UCLArray,
                'xAxis': data.xr
            }
            var min_y = Math.min.apply(null, data.yr);
            var minY = '';
            if (min_y >= data.lclr) {
                minY = data.lclr
            } else {
                minY = min_y;
            }
            if (data.stdr6.length > 0) {
                if (minY >= data.stdr6[0]) {
                    minY = data.stdr6[0]
                }
            }
            var max_y = Math.max.apply(null, data.yr);
            var maxY = '';
            if (max_y <= data.uclr) {
                maxY = data.uclr
            } else {
                maxY = max_y;
            }
            if (data.stdr3.length > 0) {
                if (maxY <= data.stdr3[0]) {
                    maxY = data.stdr3[0]
                }
            }

            var myChart = echarts.init(document.getElementById('Down_L'))
            var option = {
                // backgroundColor: 'white',
                title: {
                    text: '', // '单\n值\n图',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    },
                    left: 'left',
                    top: 'middle'
                    // subtext: '纯属虚构'
                },

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['UCL', 'Sample', echart_name, 'LCL']
                },
                toolbox: {
                    show: true,
                    feature: {

                    }
                },
                color: ['red', '#61A0A8', 'black', 'red'], // 线的颜色    // 线的颜色
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dataMbarArr.xAxis,
                    // data: ['1','2','3','4','5','6','7'],
                    axisLabel: {
                        // color:'white',
                        // formatter: '{value} °C'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: minY,
                        max: maxY,
                        interval: data.stdr,
                        boundaryGap: false,
                        axisLabel: {
                            // color:'white',
                            formatter: function (value, index) {
                                var fixedValue = value.toFixed(4)
                                if (fixedValue - data.uclr === 0) {
                                    return data.uclr
                                } else if (fixedValue - data.lclr === 0) {
                                    return data.lclr
                                } else {
                                    return fixedValue
                                }
                            }
                        }

                    },
                    {
                        type: 'value',
                        axisLabel: {
                            // color:'white',
                            // formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: 'UCL',
                        type: 'line',
                        data: [dataMbarArr.UCLArray[0]],
                        markLine: {
                            name: 'UCL',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        // type: 'solid',
                                        color: 'red',
                                        width: 2
                                    },
                                    label: {
                                        show: true,
                                        formatter: 'UCL=' + dataMbarArr.UCLArray[0]

                                    }
                                }
                            },
                            data: [[
                                { coord: [0, dataMbarArr.UCLArray[0]], label: { normal: { show: true } } },
                                { coord: [dataMbarArr.UCLArray.length - 1, dataMbarArr.UCLArray[0]], label: { normal: { show: true } } }
                            ]]
                        }
                    },

                    {
                        name: 'Sample',
                        type: 'line',
                        data: dataMbarArr.Sample
                    },
                    {
                        name: echart_name,
                        type: 'line',
                        data: [dataMbarArr.SampleMeanArray[0]],
                        markLine: {
                            name: 'Sample',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        // type: 'solid',
                                        color: 'black',
                                        width: 2
                                    },
                                    label: {
                                        show: true,
                                        formatter: echart_name + '=' + dataMbarArr.SampleMeanArray[0]

                                    }

                                }
                            },
                            data: [[
                                { coord: [0, dataMbarArr.SampleMeanArray[0]], label: { normal: { show: true } } },
                                { coord: [dataMbarArr.SampleMeanArray.length - 1, dataMbarArr.SampleMeanArray[0]], label: { normal: { show: true } } }
                            ]]
                        }
                    },
                    {
                        name: 'LCL',
                        type: 'line',
                        data: [dataMbarArr.LCLArray[0]],
                        markLine: {
                            name: 'LCL',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        // type: 'solid',
                                        color: 'red',
                                        width: 2
                                    },
                                    label: {
                                        show: true,
                                        formatter: 'LCL=' + dataMbarArr.LCLArray[0]

                                    }
                                }
                            },
                            data: [[
                                { coord: [0, dataMbarArr.LCLArray[0]], label: { normal: { show: true } } },
                                { coord: [dataMbarArr.LCLArray.length - 1, dataMbarArr.LCLArray[0]], label: { normal: { show: true } } }
                            ]]
                        }
                    }
                ]
            };
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        handleRowChange (currentRow, oldCurrentRow) {

        }
    },
    destroyed () {
        clearInterval(this.timeSET)
    }
}

</script>
<style lang="less" scoped>

.div_echarts{
  width:100%;
  height:400px;
}
.left_echarts{
  width:60%;
  height:400px;
  float:left;
}
.right_echarts{
  width:40%;
  height:400px;
  float:left;
}
.right_echarts_data{
  width:40%;
  height:400px;
  float:left;
}
// .right_echarts_title{
//   width:40%;
//   height:15px;
//   .ivu-table td.spc-table-info-column{
//       background-color: #2b85e4!important;
//       color: #fff;
//   }
// }
.downR_title{
  width:50%;
  height:100%;
  float: left;
  font-size: 15px;
  font-weight: bold;
  padding:50px;
}
.downR_title1{
  width:80%;
  height:100%;
  float: left;
  font-size: 15px;
  font-weight: bold;
  padding:50px;
  text-align: center;
}

</style>
