<template>
  <div class="app-container">
    <div class="headTitle">京源智能仓储监控平台</div>
    <div class="img"></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="chart1">
      <HighChart key="chart1" ref="chart1"></HighChart>
    </div>
    <div class="chart2">
      <HighChart key="chart2" ref="chart2"></HighChart>
    </div>
    <div class="chart3">
      <HighChart key="chart3" ref="chart3"></HighChart>
    </div>
    <div class="chart4">
      <HighChart key="chart4" ref="chart4"></HighChart>
    </div>

    <div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">{{ topData.rawInStock[0] }}</div>
    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">{{ topData.rawInStock[1] }}</div>
    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">{{ topData.rawInStock[2] }}</div>
    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">{{ topData.rawInStock[3] }}</div>

    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">{{ topData.productInStock[0] }}</div>
    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">{{ topData.productInStock[1] }}</div>
    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">{{ topData.productInStock[2] }}</div>
    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.productInStock[3] }}</div>

    <div class="num1 num1_9" style="top: 11.9%;left:51.1%;color:#f60008">{{ topData.productOutStock[0] }}</div>
    <div class="num1 num1_10" style="top: 11.9%;left:53.4%;color:#f60008">{{ topData.productOutStock[1] }}</div>
    <div class="num1 num1_11" style="top: 11.9%;left:55.7%;color:#f60008">{{ topData.productOutStock[2] }}</div>
    <div class="num1 num1_12" style="top: 11.9%;left:58.1%;color:#f60008">{{ topData.productOutStock[3] }}</div>

    <div class="num1 num1_13" style="top: 11.9%;left:69.9%;color:#59ee7b">{{ topData.furawInStock[0] }}</div>
    <div class="num1 num1_14" style="top: 11.9%;left:72.3%;color:#59ee7b">{{ topData.furawInStock[1] }}</div>
    <div class="num1 num1_15" style="top: 11.9%;left:74.6%;color:#59ee7b">{{ topData.furawInStock[2] }}</div>
    <div class="num1 num1_16" style="top: 11.9%;left:76.9%;color:#59ee7b">{{ topData.furawInStock[3] }}</div>

    <div class="num1 num1_17" style="top: 11.9%;left:88.7%;color:#f60008">{{ topData.rawOutStock[0] }}</div>
    <div class="num1 num1_18" style="top: 11.9%;left:91%;color:#f60008">{{ topData.rawOutStock[1] }}</div>
    <div class="num1 num1_19" style="top: 11.9%;left:93.4%;color:#f60008">{{ topData.rawOutStock[2] }}</div>
    <div class="num1 num1_20" style="top: 11.9%;left:95.7%;color:#f60008">{{ topData.rawOutStock[3] }}</div>

  </div>
</template>

<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
<!--  质量接口 柱状图 +折线图 合格率和数量   -->

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import HighChart from '@/components/board/HighChart'
import * as echarts from 'echarts'
import { fifthPanake, locationCount } from '@/api/board/fifthFloorWarehouse'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart,
    HighChart
  },
  data() {
    return {
      topData: {
        furawInStock: [0, 0, 0, 0],
        productInStock: [0, 0, 0, 0],
        productOutStock: [0, 0, 0, 0],
        rawInStock: [0, 0, 0, 0],
        rawOutStock: [0, 0, 0, 0]
      },
      title: [
        '原料库入库数量:',
        '成品入库数量:',
        '成品出库数量:',
        '辅料入库数量:',
        '辅料出库数量:',
        '库存占比'
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 3.5
        },
        {
          top: 11.5,
          left: 22.5
        },
        {
          top: 11.5,
          left: 41.3
        },
        {
          top: 11.5,
          left: 60.3
        },
        {
          top: 11.5,
          left: 79.1
        },
        {
          top: 19.4,
          left: 5.5
        }
      ]
    }
  },
  mounted() {
    this.getData()

    window.onresize = () => {
      this.$refs.chart1.resize()
      this.$refs.chart2.resize()
      this.$refs.chart3.resize()
      this.$refs.chart4.resize()
    }
  },
  methods: {
    getData() {
      locationCount().then(e => {
        this.topData.furawInStock = [...[0, 0, 0, 0], ...(e.data.furawInStock || 0).toString().split('')].slice(-4)
        this.topData.productInStock = [...[0, 0, 0, 0], ...(e.data.productInStock || 0).toString().split('')].slice(-4)
        this.topData.productOutStock = [...[0, 0, 0, 0], ...(e.data.productOutStock || 0).toString().split('')].slice(-4)
        this.topData.rawInStock = [...[0, 0, 0, 0], ...(e.data.rawInStock || 0).toString().split('')].slice(-4)
        this.topData.rawOutStock = [...[0, 0, 0, 0], ...(e.data.rawOutStock || 0).toString().split('')].slice(-4)
      })
      fifthPanake().then(e => {
        this.$refs.chart1.setData({
          title: {
            text: '辅料空料箱占比',
            style: {
              color: '#fff'
            }
          },
          tooltip:{
            pointFormatter: function() {
              return '占比：'+ this.options.y + '%'
            }
          },
          credits: {
            enabled: false
          },
          chart: {
            type: 'pie',
            animation: false,
            backgroundColor: null,
            events: {
              load: function() {
                let each = Highcharts.each,
                  points = this.series[0].points
                each(points, function(p, i) {
                  p.graphic.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side1.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side2.attr({
                    translateY: -p.shapeArgs.ran
                  })
                })
              }
            },
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0
            }
          },
          legend: {
            reversed: true,
            itemStyle: {
              color: '#fff'
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              depth: 15,
              startAngle: 45,
              size: 150,
              dataLabels: {
                enabled: true,
                softConnector: true,
                distance: 1,
                formatter: function() {
                  return this.point.options.name + '<br>' + this.point.options.y + '%'
                }
              },
              showInLegend: false,
              point: {
                events: {
                  legendItemClick: function(e) {
                    return false // 直接 return false 即可禁用图例点击事件
                  }
                }
              }
            }
          },
          series: [
            {
              type: 'pie',
              name: '占比',
              data: [
                {
                  'name': '空料箱',
                  y: parseFloat((e.data.emptyLocationPercentage * 100).toFixed(2)),
                  h: Math.min(parseFloat((e.data.emptyLocationPercentage * 100).toFixed(2)),50)
                },
                {
                  name: '非空料箱',
                  y: parseFloat(((1 - e.data.emptyLocationPercentage) * 100).toFixed(2)),
                  h: Math.min(parseFloat(((1 - e.data.emptyLocationPercentage) * 100).toFixed(2)),50)
                }
              ].sort((a, b) => a.y - b.y)
            }]
        })
        this.$refs.chart2.setData({
          title: {
            text: '辅料库位使用率占比',
            style: {
              color: '#fff'
            }
          },
          tooltip:{
            pointFormatter: function() {
              return '占比：'+ this.options.y + '%'
            }
          },
          credits: {
            enabled: false
          },
          chart: {
            type: 'pie',
            startAngle: Math.PI / 6,
            animation: false,
            backgroundColor: null,
            events: {
              load: function() {
                let each = Highcharts.each,
                  points = this.series[0].points
                each(points, function(p, i) {
                  p.graphic.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side1.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side2.attr({
                    translateY: -p.shapeArgs.ran
                  })
                })
              }
            },
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0
            }
          },
          legend: {
            reversed: true,
            itemStyle: {
              color: '#fff'
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              depth: 15,
              startAngle: 45,
              size: 150,
              dataLabels: {
                enabled: true,
                softConnector: true,
                distance: 1,
                formatter: function() {
                  return this.point.options.name + '<br>' + this.point.options.y + '%'
                }
              },
              showInLegend: false,
              point: {
                events: {
                  legendItemClick: function(e) {
                    return false // 直接 return false 即可禁用图例点击事件
                  }
                }
              }
            }
          },
          series: [
            {
              type: 'pie',
              name: '占比',
              data: [
                {
                  'name': '已使用',
                  y: parseFloat((e.data.opplyLocationPercentage * 100).toFixed(2)),
                  h: Math.min(parseFloat((e.data.opplyLocationPercentage * 100).toFixed(2)),50)
                },
                {
                  name: '未使用',
                  y: parseFloat(((1 - e.data.opplyLocationPercentage) * 100).toFixed(2)),
                  h: Math.min(parseFloat(((1 - e.data.opplyLocationPercentage) * 100).toFixed(2)),50)
                }
              ].sort((a, b) => a.y - b.y)
            }]
        })

        let total = e.data.wmsRawStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
        this.$refs.chart3.setData({
          title: {
            text: '原材料库存占比',
            style: {
              color: '#fff'
            }
          },
          tooltip:{
            pointFormatter: function() {
              return '占比：'+ this.options.y + '%'
            }
          },
          credits: {
            enabled: false
          },
          chart: {
            type: 'pie',
            startAngle: Math.PI / 6,
            animation: false,
            backgroundColor: null,
            events: {
              load: function() {
                let each = Highcharts.each,
                  points = this.series[0].points
                each(points, function(p, i) {
                  p.graphic.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side1.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side2.attr({
                    translateY: -p.shapeArgs.ran
                  })
                })
              }
            },
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0
            }
          },
          legend: {
            reversed: true,
            itemStyle: {
              color: '#fff'
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              depth: 15,
              startAngle: 45,
              size: 150,
              dataLabels: {
                enabled: true,
                softConnector: true,
                distance: 1,
                formatter: function() {
                  return this.point.options.name + '<br>' + this.point.options.y + '%'
                }
              },
              showInLegend: false,
              point: {
                events: {
                  legendItemClick: function(e) {
                    return false // 直接 return false 即可禁用图例点击事件
                  }
                }
              }
            }
          },
          series: [
            {
              type: 'pie',
              name: '占比',
              data: e.data.wmsRawStocks.map(v => {
                return {
                  name: v.materialName,
                  y: v.totalAmount,
                  h:  Math.min(parseFloat(((v.totalAmount / total) * 100).toFixed(2)),50)
                }
              })
            }]
        })
        let total1 = e.data.productStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
        this.$refs.chart4.setData({
          title: {
            text: '成品库存占比',
            style: {
              color: '#fff'
            }
          },
          tooltip:{
            pointFormatter: function() {
              return '占比：'+ this.options.y + '%'
            }
          },
          credits: {
            enabled: false
          },
          chart: {
            type: 'pie',
            startAngle: Math.PI / 6,
            animation: false,
            backgroundColor: null,
            events: {
              load: function() {
                let each = Highcharts.each,
                  points = this.series[0].points
                each(points, function(p, i) {
                  p.graphic.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side1.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side2.attr({
                    translateY: -p.shapeArgs.ran
                  })
                })
              }
            },
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0
            }
          },
          legend: {
            reversed: true,
            itemStyle: {
              color: '#fff'
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              depth: 15,
              startAngle: 45,
              size: 150,
              dataLabels: {
                enabled: true,
                softConnector: true,
                distance: 1,
                formatter: function() {
                  return this.point.options.name + '<br>' + this.point.options.y + '%'
                }
              },
              showInLegend: false,
              point: {
                events: {
                  legendItemClick: function(e) {
                    return false // 直接 return false 即可禁用图例点击事件
                  }
                }
              }
            }
          },
          series: [
            {
              type: 'pie',
              name: '占比',
              data: e.data.productStocks.map(v => {
                return {
                  name: v.materialName,
                  y: v.totalAmount,
                  h:  Math.min(parseFloat(((v.totalAmount / total1) * 100).toFixed(2)),50)
                }
              })
            }]
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>

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

.warehouse {
  background-image: url("../../../assets/board/warehouse1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 18%;
  height: 27.8%;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
}

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

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

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


.chart1 {
  position: absolute;
  top: 22.5%;
  left: 3.4%;
  width: 23%;
  height: 32%;
}

.chart2 {
  position: absolute;
  top: 22.5%;
  left: 26.5%;
  width: 23%;
  height: 32%;
}

.chart3 {
  position: absolute;
  top: 62.5%;
  left: 3.4%;
  width: 23%;
  height: 32%;
}

.chart4 {
  position: absolute;
  top: 62.5%;
  left: 26.5%;
  width: 23%;
  height: 32%;
}

.span {
  position: absolute;
  transform: translateY(-50%);
}

.span1 {
  position: absolute;
  transform: translate(-50%, -50%);
}
.img{
  background-image: url("../../../assets/board/warehouse.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 59%;
  left: 73.5%;
  width: 33%;
  height: 24.63vw;
  transform: translate(-50%,-50%);
}
</style>
