<template>
  <div class="app-container">
    <div class="headTitle">京源生产监控平台</div>
    <div v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
         class="title"
    >
      {{ i }}
    </div>
    <div class="table1">
      <div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 10%">
          编号
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 20%">
          生产任务
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 22%">
          成品名称
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
          计划数量
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
          实际数量
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
          差异值
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
          完成率
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: calc(100% - 50px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
            <div
              class="scrollTableItem" style="width: 10%"
            >
              {{ item.no }}
            </div>
            <div
              class="scrollTableItem" style="width: 20%"
            >
              {{ item.orderCode }}
            </div>
            <div
              class="scrollTableItem" style="width: 22%"
            >
              {{ item.materialName }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.planAmount }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.completeAmount }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.quantityAmount }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.finishingRate }}%
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="table2">
      <div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
          编号
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 25%">
          订单号
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 15%">
          工序名称
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 18%">
          开始时间
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 18%">
          结束时间
        </div>
        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
          生产用时
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData1"
        class="case-item"
        style="height: calc(100% - 50px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData1"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.processId }}
            </div>
            <div
              class="scrollTableItem" style="width: 25%"
            >
              {{ item.planCode }}
            </div>
            <div
              class="scrollTableItem" style="width: 15%"
            >
              {{ item.processName }}
            </div>
            <div
              class="scrollTableItem" style="width: 18%"
            >
              {{
                parseTime(item.realBeginTime,'{m}-{d} {h}:{i}:{s}')
              }}
            </div>
            <div
              class="scrollTableItem" style="width: 18%"
            >
              {{
                parseTime(item.realEndTime,'{m}-{d} {h}:{i}:{s}')
              }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ (Math.abs(new Date(item.realEndTime) - new Date(item.realBeginTime))/(1000*60*60)).toFixed(2) }}时
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="chart1">
      <Chart key="chart1" ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <Chart key="chart2" ref="chart2"></Chart>
    </div>
    <div class="num1 num1_1" style="top: 11.9%;left: 11.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
    <div class="num1 num1_2" style="top: 11.9%;left:14.6%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
    <div class="num1 num1_3" style="top: 11.9%;left:18.1%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
    <div class="num1 num1_4" style="top: 11.9%;left:21.8%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
    <div class="num1 num1_5" style="top: 11.9%;left:35.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
    <div class="num1 num1_6" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
    <div class="num1 num1_7" style="top: 11.9%;left:42.8%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
    <div class="num1 num1_8" style="top: 11.9%;left:46.4%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
    <div class="num1 num1_9" style="top: 11.9%;left:60.3%;color:#f60008">{{ topData.diff[0] }}</div>
    <div class="num1 num1_10" style="top: 11.9%;left:63.9%;color:#f60008">{{ topData.diff[1] }}</div>
    <div class="num1 num1_11" style="top: 11.9%;left:67.4%;color:#f60008">{{ topData.diff[2] }}</div>
    <div class="num1 num1_12" style="top: 11.9%;left:71%;color:#f60008">{{ topData.diff[3] }}</div>
    <div class="num1 num1_13" style="top: 11.9%;left:84.8%;color:#f60008">{{ topData.rate[0] }}</div>
    <div class="num1 num1_14" style="top: 11.9%;left:88.4%;color:#f60008">{{ topData.rate[1] }}</div>
    <div class="num1 num1_15" style="top: 11.9%;left:92%;color:#f60008">{{ topData.rate[2] }}</div>
    <div class="num1 num1_16" style="top: 11.9%;left:95.6%;color:#f60008">%</div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
import {
  orderEfficiency,
  orderTime,
  productionQualified,
  productProgress,
  workOrderProgress
} from '@/api/board/fifthFloorProduction'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart
  },
  data() {
    return {
      topData: {
        planAmount: [0, 0, 0, 0],
        completeAmount: [0, 0, 0, 0],
        diff: [0, 0, 0, 0],
        rate: [0, 0, 0]
      },
      title: [
        '生产任务信息',
        '工位生产效率TOP',
        ' ',
        '计划数量:',
        '完成数量:',
        '差异值:',
        '完成进度:'
      ],
      titlePosition: [
        {
          top: 41.6,
          left: 5.5
        },
        {
          top: 41.6,
          left: 69
        },
        {
          top: 70.5,
          left: 69
        },
        {
          top: 11.9,
          left: 4
        },
        {
          top: 11.9,
          left: 29
        },
        {
          top: 11.9,
          left: 54
        },
        {
          top: 11.9,
          left: 78
        }
      ],
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0
      },
      scrollTableData: [],
      scrollTableData1: []
    }
  },
  mounted() {
    this.getData()

    window.onresize = () => {
      this.$refs.chart1.chart.resize()
      this.$refs.chart2.chart.resize()
    }
  },
  methods: {
    getData() {
      workOrderProgress().then(e => {
        this.scrollTableData = e.data.map((v, k) => {
          return {
            no: k + 1,
            orderCode: v.orderCode,
            planAmount: v.planAmount,
            completeAmount: v.completeAmount,
            materialName:v.materialName,
            quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
            finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
          }
        })
      })
      productProgress().then(e => {
        this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
        this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
        this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
        this.topData.rate = parseFloat(e.data.planAmount) === 0 ? [0, 0, 0] : [...[0, 0, 0], ...(((parseFloat(e.data.completeAmount) / parseFloat(e.data.planAmount)) || 0)*100).toFixed(0).split('')].slice(-3)
      })
      productionQualified().then(e => {
        // console.log(e)
        this.$refs.chart1.setData({
          color: ['#3398DB'],
          title: {
            text: '组员生产合格率',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{b} <br> 合格率: {c}%'
          },
          /*legend: {
                data: [date]
            },*/
          grid: {
            top: '30',
            left: '4%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%',
              textStyle: {
                color: '#fff',
                fontWeight: '80'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: e.data.map(v => v.name),
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 0,
              margin: 10,
              inside: false,
              textStyle: {
                color: '#fff',
                fontWeight: '50'
              }
            }
          },
          series: [
            {
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  // formatter: '{c}',
                  formatter: function(v) {
                    var val = v.data
                    if (val === 0) {
                      return ''
                    }
                    return val
                  },
                  color: '#fff'
                }
              },
              data: e.data.map(v => parseFloat(v.passRate))
            }
          ]
        })
      })
      orderTime().then(e => {

        // this.$refs.chart2.setData({
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       type: 'shadow'
        //     }
        //   },
        //   grid: {
        //     top: '5%',
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        //   },
        //   yAxis: [
        //     {
        //       type: 'value',
        //       name: '次数',
        //       position: 'left'
        //     },
        //     {
        //       show: false
        //     }
        //   ],
        //   xAxis: {
        //     type: 'category',
        //     data: [
        //       '员工1',
        //       '员工2',
        //       '员工3',
        //       '员工4',
        //       '员工5',
        //       '员工6',
        //       '员工7',
        //       '员工8',
        //       '员工9',
        //       '员工10',
        //       '员工11',
        //       '员工12'
        //     ]
        //   },
        //   series: [
        //     {
        //       name: '流程1',
        //       type: 'bar',
        //       stack: '次数',
        //       label: {
        //         normal: {
        //           show: true
        //         }
        //       },
        //       itemStyle: {
        //         normal: {
        //           color: 'rgb(249,18,243)'
        //         }
        //       },
        //       data: [197, 134, 138, 167, 160, 174, 164, 0, 0, 0, 0, 0]
        //     },
        //     {
        //       name: '流程2',
        //       type: 'bar',
        //       stack: '次数',
        //       label: {
        //         normal: {
        //           show: true
        //         }
        //       },
        //       itemStyle: {
        //         normal: {
        //           color: 'rgb(249,205,30)'
        //         }
        //       },
        //       data: [325, 191, 315, 400, 407, 448, 417, 0, 0, 0, 0, 0]
        //     },
        //     {
        //       name: '流程3',
        //       type: 'bar',
        //       stack: '次数',
        //       label: {
        //         normal: {
        //           show: true
        //         }
        //       },
        //       itemStyle: {
        //         normal: {
        //           color: 'rgb(0, 137, 239)'
        //         }
        //       },
        //       data: [138, 111, 156, 139, 116, 151, 154, 0, 0, 0, 0, 0]
        //     }
        //   ]
        // })
        this.$refs.chart2.setData({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: [
            {
              type: 'value',
              name: '时长(分钟）',
              position: 'left'
            },
            {
              show: false
            }
          ],
          xAxis: {
            type: 'category',
            data: e.data.map(v => v.processName)
          },
          series: [
            {
              name: '时长(分钟）',
              type: 'bar',
              barMaxWidth: '100px',
              stack: '次数',
              label: {
                normal: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(249,18,243)'
                }
              },
              data: e.data.map(v => (parseFloat(v.produceTime) / 60).toFixed(2))
            }
          ]
        })
      })
      orderEfficiency().then(e => {
        console.log(e)
        this.scrollTableData1 = e.data
      })
    }
  }
}
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/productionBg3.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}

.num1 {
  position: absolute;
  font-size: 1.5vw;
  transform: translate(-50%, -50%);
}

.table1 {
  position: absolute;
  top: 44.5%;
  left: 3.3%;
  width: 62.5%;
  height: 48.5%;
  color: #fff;
}

.table2 {
  position: absolute;
  top: 44.5%;
  left: 67.3%;
  width: 29.5%;
  height: 50.5%;
  font-size: 0.7vw;
  color: #fff;
}

.table3 {
  position: absolute;
  top: 73.5%;
  left: 67.3%;
  width: 29.5%;
  height: 19.5%;
  color: #fff;
}

.scrollTableItem {
  display: inline-block;
  width: calc(100% / 6);
  text-align: center;
  padding: 14px 0;
  color: #4e99c5
}

.chart1 {
  position: absolute;
  top: 16%;
  left: 3.4%;
  width: 46%;
  height: 21.5%;
}

.chart2 {
  position: absolute;
  top: 16.2%;
  left: 50.7%;
  width: 45.9%;
  height: 21%;
}


</style>
