<template>
    <div class="container" >
        <div style="width:100%;height: 19%;text-align:center;">
          <div style="float: left;width: 25%;height: 100%;text-align:left; ">
            <div style="height: 60%;width: 100%;text-align: left;margin-top: 1%">
              <label style="font-size: 40px;color: #9c0202;margin-left: 2%">Liftech</label>
            </div>
          </div>
            <TimeC></TimeC>
            <!--      <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>-->
            <div style="float: left;width: 35%;height: 100%;text-align:center;margin-left: 7% ">
                <div style="height: 45%;width: 100%;text-align: center;margin-top: 3%;">
                    <label style="font-size: 30px;color: #ffffff">生产情况看板<br>Production Board</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: 100%;width: 38%; ">
            <div style="height: 28%;width: 100%;margin-top: 0.5%" class="board2">
              <el-table
                height="150"
                :data="tableList2"
                :cell-style="board2Function"
                style="width: 100%">
                <el-table-column
                  prop="qty1"
                  header-align="center"
                  align="center"
                  min-width="40"
                  label="排产数/PlanQty"
                  :render-header="renderHeader"
                >
                </el-table-column>
                <el-table-column
                  prop="qty2"
                  header-align="center"
                  align="center"
                  min-width="63"
                  label="已入库/WarehouseQty"
                  :render-header="renderHeader">
                </el-table-column>
                <el-table-column
                  prop="qty3"
                  header-align="center"
                  align="center"
                  min-width="60"
                  label="未入库已生产/InProgressQty"
                  :render-header="renderHeader">
                </el-table-column>
                <el-table-column
                  prop="qty4"
                  header-align="center"
                  align="center"
                  min-width="62"
                  label="未生产/UnapproveQty"
                  :render-header="renderHeader">
                </el-table-column>
              </el-table>
            </div>
            <div style="height: 72%;width: 100%;">
              <div id="pie" style="float:left;margin-left: 0px;  margin-top: -3%; width: 100%; height:100%;"></div>
            </div>
          </div>
            <div style="float: left;height: 53%;width: 53%;margin-left:3% " class="board">
              <el-table
                height="250"
                :data="tableList"
                style="width: 100%">
                <el-table-column
                  prop="resourceId"
                  header-align="center"
                  align="center"
                  min-width="72"
                  label="机台名称/Machine"
                  :render-header="renderHeader"
                >
                </el-table-column>
                <el-table-column
                  prop="qtyRequired"
                  header-align="center"
                  align="center"
                  min-width="75"
                  label="排产数量/PlanQty"
                  :render-header="renderHeader">
                </el-table-column>
                <el-table-column
                  prop="qtyApprove"
                  header-align="center"
                  align="center"
                  min-width="90"
                  label="完成数量/ApproveQty"
                  :render-header="renderHeader">
                </el-table-column>
                <el-table-column
                  prop="qtyReported"
                  header-align="center"
                  align="center"
                  min-width="108"
                  label="已入库数量/WarehouseQty"
                  :render-header="renderHeader">
                </el-table-column>
                <el-table-column
                  prop="qtyUnReported"
                  header-align="center"
                  align="center"
                  min-width="125"
                  label="未入库数量/UnwarehouseQty"
                  :render-header="renderHeader">>
                </el-table-column>
              </el-table>
            </div>
            <div style="float: left;height: 47%;width: 62%; ">
                <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,
                tableList2:[],
            }
        },
        components: {
            TimeC
        },
        methods: {
            searchData(){
                this.getRefresh();
                getScheduledData().then(({data}) => {
                  this.pieData=data.pieData;
                  this.barList=data.barList;
                  this.tableList2=[],
                  this.tableList2.push(this.pieData);
                  let pieData2={
                    qty1: '-',
                    qty2: this.pieData.per2 +'%',
                    qty3: this.pieData.per3 +'%',
                    qty4: this.pieData.per4 +'%',
                  }
                  this.tableList2.push(pieData2)
                  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()
                }

                this.option = ({
                    title: [{
                        text: '总生产情况\nProduction State' ,
                        // text: '工序：' + data_temp[i + x].itemNo,
                        // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: '264px',
                        // itemGap设置主副标题纵向间隔，单位px，默认为10，
                        backgroundColor: '#EEE',
                        // 主标题文本样式设置
                        textStyle: {
                            fontSize: 18,
                            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
                        //     },
                        // }
                        ],
                  // legend: {
                  //   orient: 'vertical',
                  //   left: 10,
                  //   data: ['直接访问', '邮件营销'],
                  //   color: ['#90ca75', '#ec6566'],
                  // },
                    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.qty2, name: ''},
                                {value: this.pieData.qty3, name: ''},
                                {value: this.pieData.qty4, name: ''}
                            ],
                            color: ['#90ca75','#dbd81a', '#ec6566'],
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                normal: {
                                    position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                                    // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                                    // {a}指series.name  {b}指series.data的name
                                    // {c}指series.data的value  {d}%指这一部分占总数的百分比
                                    // formatter: '{d}'+'%',
                                  formatter:function(data){
                                    return data.percent.toFixed(1)+"%";
                                  }
                                }
                            },

                        }
                    ]
                });
                    this.myChart = echarts.init(document.getElementById('pie'));
                this.myChart.setOption(this.option);
            },
            getTableData() {
              getNewScheduledTableData(this.number2).then(({data}) => {
                this.tableList=data.rows;
                if(data.total<5){
                  this.number2=0;
                }else {
                  this.number2=Number(this.number2)+ Number(1);
                }
              })
            },
            draw2(){
                if (this.myChart2!=null) {
                    this.myChart2.clear()
                }
                let barData=[];
              let valueData=[];
              let valueApproveData=[];
              for (let a = 0; a <this.barList.length ; a++) {
                  let resourceData={
                    value: this.barList[a].resourceId,
                    textStyle: {
                      color: '#EEE'
                    }
                  }
                barData.push(resourceData);
                valueData[a]=this.barList[a].qtyPercent;
                valueApproveData[a]=this.barList[a].approvePercent;
              }
                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"],
                    legend: {
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            // fontSize: 12
                        },
                    },
                    tooltip: {},
                    xAxis:[
                        {
                            type: 'category',
                            // data: xAxisData
                            data:barData,

                            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': valueApproveData,
                        // [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
                          }
                        },

                      },

                        {
                            '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;
                }
              })
            },
            renderHeader(h, { column, $index }) {
              return h("span", {}, [
                h("span", {}, column.label.split("/")[0]),
                h("br"),
                h("span", {}, column.label.split("/")[1])
              ]);
            },
          board2Function({row, column, rowIndex, columnIndex}){
            if(columnIndex==1){
              return 'background-color: #90ca75;'
            }
            if(columnIndex==2){
              return 'background-color: #dbd81a;'
            }
              if(columnIndex==3){
                return 'background-color: #ec6566;'
              }
          }
        },

        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;
    }
    .el-table thead {
      background-color: transparent;
    }

    .board .el-table th .cell {
      line-height: 20px;
      font-size: 15px;
      height: 40px;
      padding: 0px;
      color: yellow;
    }
    .board2 .el-table .cell {
      line-height: 18px;
      font-size: 18px;
      height: 18px;
      padding: 0px;
      color: white;
    }

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


    .board2 .el-table th .cell {
      line-height: 18px;
      font-size: 13px;
      height: 36px;
      padding: 0px;
      color: white;
    }
</style>
