<template>
    <div class="container" >
        <div style="width:100%;height: 20%;text-align:center;">
            <TimeC></TimeC>
            <!--      <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>-->
            <div style="float: left;width: 25%;height: 100%;text-align:center;margin-left: 37% ">
                <div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;">
                    <label style="font-size: 30px;color: #ffffff">生产状况</label>
                </div>
                <div style="height: 40%;width: 100%;text-align: center;margin-top: 0%;">
                    <label id="resourceIdName" style="font-size: 24px;color: #fff300"></label>
                </div>
            </div>
        </div>
        <div style="width:100%;height: 79%;">
            <div style="float: left;height: 100%;width: 35%; ">
                <div style="height: 12%;width: 100%;margin-top: 1%">
                    <div
                            style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div>
                    <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">
                        <label style="font-size: 16px;color:#ffffff; ">未完工</label>
                    </div>
                    <div
                            style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div>
                    <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">
                        <label style="font-size: 16px;color:#ffffff; ">已完工</label>
                    </div>
                </div>
                <div style="height: 88%;width: 100%;">
                    <div id="pie" style="float:left;margin-left: 0px;  margin-top: 0%; width: 100%; height:80%;"></div>
                </div>
            </div>
            <div style="float: left;height: 45%;width: 58%;margin-left:3% " class="board">
                <table class="table table-bordered" style="width:100%;font-size:16px;color: #ffffff" id="table">
                </table>
              <el-table
                :height="height"
                :data="tableList"
                style="width: 100%">
                <el-table-column
                  prop="resourceDesc"
                  header-align="center"
                  align="left"
                  min-width="100"
                  label="机台名称">
                </el-table-column>
                <el-table-column
                  prop="qtyRequire"
                  header-align="center"
                  align="left"
                  min-width="100"
                  label="排产数量">
                </el-table-column>
                <el-table-column
                  prop="status"
                  header-align="center"
                  align="left"
                  min-width="100"
                  label="已入库数量">
                </el-table-column>
                <el-table-column
                  prop="area"
                  header-align="center"
                  align="left"
                  min-width="100"
                  label="未入库数量">
                </el-table-column>
              </el-table>
            </div>
            <div style="float: left;height: 49%;width: 65%; ">
                <div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div>
            </div>
        </div>
    </div>
</template>

<script>
  import {getNewScheduledTableData,
    getRefreshTime,
    getScheduledData
  } from '@/api/board.js'
    import TimeC from "@/views/newTime.vue"
    export default {
        name: "newScheduledBoard",
        data() {
            return {
                myChart: null,
                number1:0,
                number2:0,
                option:null,
                chartDom:null,
                option2:null,
                tableList:null,
                pieData:null,
                barList:null,
                resourceId:'',
                height:200,
                // ip:'',
                refreshTime:5,
            }
        },
        components: {
            TimeC
        },
        methods: {
            searchData(){
                this.getRefresh();
                getScheduledData().then(({data}) => {
                  this.pieData=data.pieData;
                  this.barList=data.barList;
                  console.log(data.pieData)
                  console.log(data.barList)
                    this.number2=0;
                    this.draw();
                    this.draw2()
                    this.getTableData();
                    window.setTimeout(() => {
                      this.getTableData();
                    }, 1000* Number(this.refreshTime));
                    window.setTimeout(() => {
                      this.getTableData();
                    }, 2000*Number(this.refreshTime));
                    window.setTimeout(() => {
                      this.getTableData();
                    }, 3000*Number(this.refreshTime));

              })
            },
            draw(){
                // if (data_temp[i].percentage >= 100) {
                if (true) {
                    var color = '#90ca75';
                } else {
                    var color = '#fff300';
                }
                if (this.myChart!=null) {
                    this.myChart.clear()
                }
                // $("#resourceIdName").html("总完成情况");
                this.option = ({
                    title: [{
                        text: '总完成情况' ,
                        // text: '工序：' + data_temp[i + x].itemNo,
                        // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: 'bottom',
                        // itemGap设置主副标题纵向间隔，单位px，默认为10，
                        backgroundColor: '#EEE',
                        // 主标题文本样式设置
                        textStyle: {
                            fontSize: 20,
                            fontWeight: 'bolder',
                            color: '#fff300'
                        }
                    },
                        {
                            text: this.pieData.qtyPercent + '%',
                            // text: data_temp[i + x].percentage + '%',
                            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                            x: 'center',
                            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                            y: 'center',
                            // itemGap设置主副标题纵向间隔，单位px，默认为10，
                            backgroundColor: 'rgba(0,0,0,0)',
                            // 主标题文本样式设置
                            textStyle: {
                                fontSize: 20,
                                fontWeight: 'bolder',
                                color: color
                            },
                        }],
                    series: [
                        {
                            name: '完成数量统计',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: ['45%', '75%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data: [          // 数据数组，name 为数据项名称，value 为数据项值
                                // {value: data_temp[i + x].approveQty, name: ''},
                                // {value: data_temp[i + x].unapproveQty, name: ''}
                                {value: this.pieData.qtyReported, name: ''},
                                {value: this.pieData.qtyUnReported, name: ''}
                            ],
                            color: ['#90ca75', '#ec6566'],
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                normal: {
                                    position: 'outer',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                                    // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                                    // {a}指series.name  {b}指series.data的name
                                    // {c}指series.data的value  {d}%指这一部分占总数的百分比
                                    formatter: '{b}'
                                }
                            }
                        }
                    ]
                });
                    this.myChart = echarts.init(document.getElementById('pie'));
                this.myChart.setOption(this.option);
            },
            getTableData() {
              getNewScheduledTableData(this.number2).then(({data}) => {
                this.tableList=data.rows;
              })
            },
            draw2(){
                if (this.myChart2!=null) {
                    this.myChart2.clear()
                }
                let barData=[];
              let valueData=[];
              for (let a = 0; a <this.barList.length ; a++) {
                  let resourceData={
                    value: this.barList[a].resourceDesc,
                    textStyle: {
                      color: '#EEE'
                    }
                  }
                barData.push(resourceData);
                valueData[a]=this.barList[a].qtyPercent;
              }
                this.myChart2 = echarts.init(document.getElementById('main'));
                // document.getElementById('main').style.height="300px";
                // if(this.option2!=null){
                //     document.getElementById('main').removeAttribute('_echarts_instance_')
                //     this.option2 = null
                // }
                this.option2 = {
                    color:["#90ca75", "#00a7ff","#ec6566"],
                    legend: {
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            // fontSize: 12
                        },
                    },
                    tooltip: {},
                    xAxis:[
                        {
                            type: 'category',
                            // data: xAxisData
                            data:barData,
                              // [
                              //   {
                              //       value: this.getDate(this.barList[6].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   {
                              //       value: this.getDate(this.barList[5].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   {
                              //       value: this.getDate(this.barList[4].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   {
                              //       value: this.getDate(this.barList[3].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   {
                              //       value: this.getDate(this.barList[2].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   {
                              //       value: this.getDate(this.barList[1].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   {
                              //       value: this.getDate(this.barList[0].strDate),
                              //       textStyle: {
                              //           color: '#EEE'
                              //       }
                              //   },
                              //   ],
                            axisLine:{
                                lineStyle: {
                                    color:'#eee'
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color:'#eee'
                                }
                            },

                        },
                        ],
                    yAxis:[
                        {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisLine:{
                                lineStyle: {
                                    color:'#eee'
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color:'#eee'
                                }
                            },
                            // splitLine:{
                            //     show:false,
                            // }
                        }
                    ],

                    series: [

                        {
                            'name': '当日完成率',
                            'type': 'bar',
                            'emphasis': {
                                focus: 'series'
                            },
                            // data: seriesData1
                            'data': valueData,
                              // [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1],
                            'label':{
                                show:true,
                                position:'top',
                                textStyle: {
                                    color: '#fff300',
                                    fontSize: 11
                                }
                            },

                        },


                    ]
                };

                this.option2 && this.myChart2.setOption(this.option2);
            },
            getDate(value) {
                var date = value.substring(5, 10);
                return date;
            },
            timeDo(){
                let that=this;
              getRefreshTime('scheduledBoard').then(({data}) => {
                if (data.rows != "" && data.rows != null) {
                  that.refreshTime = Number(data.rows);
                  if(that.refreshTime ==0){
                    that.refreshTime =5;
                  }
                }else {
                  that.refreshTime =5;
                }
                window.setInterval(() => {
                  this.searchData();
                }, 4000*Number(that.refreshTime));
              })
                // $.ajax({
                //     url: "/board/getRefreshTime",
                //     type: "post",
                //     data: {"boardName": 'newScheduledBoard'},
                //     dataType: "json",
                //     success: (data) => {
                //         if (data.rows != "" && data.rows != null) {
                //             that.refreshTime = Number(data.rows);
                //             if(that.refreshTime ==0){
                //                 that.refreshTime =5;
                //             }
                //         }else {
                //             that.refreshTime =5;
                //         }
                //         window.setInterval(() => {
                //             this.searchData();
                //         }, 4000*Number(that.refreshTime));
                //     },
                // })
            },
            // getIp(){
            //     let that=this;
            //     if (localStorage.getItem("tvIP")==null||localStorage.getItem("tvIP")==""||localStorage.getItem("tvIP")=="192.168.1.130") {
            //         $.ajax({
            //             url: "/board/getIpFirst",
            //             type: "post",
            //             data: {},
            //             dataType: "json",
            //             success: (data) => {
            //                 localStorage.setItem("tvIP", data.row)
            //                 that.ip=localStorage.getItem("tvIP")
            //                 this.tableInit();
            //                 this.timeDo();
            //                 this.searchData();
            //             }
            //         }).fail(() => {
            //             localStorage.setItem("tvIP", "192.168.1.130")
            //             that.ip=localStorage.getItem("tvIP")
            //             this.tableInit();
            //             this.timeDo();
            //             this.searchData();
            //         })
            //     }else {
            //         that.ip=localStorage.getItem("tvIP")
            //         this.tableInit();
            //         this.timeDo();
            //         this.searchData();
            //     }
            //
            // },
            getRefresh(){
                getRefreshTime('scheduledBoard').then(({data}) => {
                if (data.rows != "" && data.rows != null) {
                  this.refreshTime = Number(data.rows);
                  if(this.refreshTime ==0){
                    this.refreshTime =5;
                  }
                }else {
                  this.refreshTime =5;
                }
              })
            },
        },

        created(){
            this.getRefresh();
        },
        mounted() {
          this.$nextTick(()=>{
            this.height = window.innerHeight *0.36;
          })
          this.getTableData();
          this.timeDo();
          this.searchData();
        }
    }
</script>

<<style >
    .container {
      height: 109%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: "";
      background-image: url(~@/assets/img/factory.jpg);
      background-size: cover;
    }
    .board .el-table .cell {
      line-height: 20px;
      font-size: 20px;
      height: 20px;
      padding: 0px;
      color: yellow;
    }

    /* 表格内背景颜色 */
    .board .el-table th, .el-table tr,.el-table td{
      border: 0;
      background-color: transparent;
    }
    /* 使表格背景透明 */
    .board .el-table th, .el-table tr {
      background-color: transparent;
    }
    /* 删除表格下横线 */
    .board .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
    /* 表格表头字体颜色 */
    .board .el-table, .el-table__expanded-cell {
      background-color: transparent;
    }
</style>
