<template>
  <div class='mod-demo-echarts' :style="`height: ${winHeight}px`">
    <!-- <div :style="`font-size: ${60 * beilv}px`" style="margin-left:30%;color:white;margin-bottom:10px"><img :height="`${60 * beilv}px`" src="../../assets/img/title.png">&nbsp;奔一电气立体库展示屏</div> -->
      <!-- <el-card class="titleClass">
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='warning' color="#E9EAEF" effect="dark">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}}&emsp;</el-tag>
      </el-card>
    <hr /> -->
    <el-row class="mod-demo-echarts-title">
      <el-col class="mod-demo-echarts-title-logo" :offset="6" :span="1"></el-col>
      <el-col class="mod-demo-echarts-title-font" :span="10">云 洁 科 技 展示屏</el-col>
      <el-col class="mod-demo-echarts-title-icon" :span="4">
        <el-row>
          <el-col :offset="1" :span="5">
            <img style="width: 100%;" src="../../assets/img/bigLed/icon1.png" alt="">
          </el-col>
          <el-col :offset="1" :span="5">
            <img style="width: 100%;" src="../../assets/img/bigLed/icon2.png" alt="">
          </el-col>
          <el-col :offset="1" :span="5">
            <img style="width: 100%;" src="../../assets/img/bigLed/icon3.png" alt="">
          </el-col>
          <el-col :offset="1" :span="5">
            <img style="width: 100%;" src="../../assets/img/bigLed/icon4.png" alt="">
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="mod-demo-echarts-secondtitle">
      <!-- <el-card class="titleClass">
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}}&emsp;</el-tag>
      </el-card> -->
    </el-row>
    <el-row>
      <el-col :span='11' style="margin-left:2%">
        <div class="chart-box chart-box-bg1">
          <div class="chart-box-title">
            库位使用情况，共：{{firstPointList.all}}
          </div>
          <div id='J_chartPieBox' class='chart-box-pie'></div>
        </div>
        <div class="chart-br"></div>
        <div class="chart-box">
          <div class="chart-box-title">
            产品类别库位数量情况(外圈总量，内圈库存)
          </div>
          <div id='J_chartScatterBox' class='chart-box-pie'></div>
        </div>
      </el-col>
      <el-col :span='11' :offset='1'>
        <div class="chart-box chart-box-bg2">
          <div class="chart-box-title">
            产品型号库位数量情况
          </div>
          <div id='J_category' class='chart-box-bar'></div>
          <div id='J_axis' class='chart-box-bar'></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
const colorOptions = ['#ec6942', '#f4b485', '#88abda']
export default {
  data () {
    return {
      chartCate: null,
      chartAxis: null,
      chartBar: null,
      chartPie: null,
      firstPointList: [],
      secondPointList: [],
      sTaskInfo: {},
      coverList: [],
      smallList: [],
      winHeight: 0,
      beilv: 1
    }
  },
  mounted () {
    this.init()
    this.winHeight = window.innerHeight
    this.beilv = window.innerWidth / 1920
    console.log(this.beilv)
    window.addEventListener('resize', () => {
      this.winHeight = window.innerHeight
      this.beilv = window.innerWidth / 1920
      this.chartCate.dispose()
      this.chartAxis.dispose()
      this.chartBar.dispose()
      this.chartPie.dispose()
      this.initChartPie()
      this.initChartScatter()
      this.initCate()
      this.initAxis()
    })
    setInterval(() => {
      this.chartCate.dispose()
      this.chartAxis.dispose()
      this.chartBar.dispose()
      this.chartPie.dispose()
      this.init()
    }, 60000)
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight }
    }
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartPie) {
      this.chartPie.resize()
    }
    if (this.chartScatter) {
      this.chartScatter.resize()
    }
  },
  methods: {
    init () {
      this.$http({
        url: this.$http.adornUrl('/generator/screen/countModel'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.secondPointList = data.data
          this.initChartScatter()
        } else {
          this.secondPointList = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/generator/screen/countPosition'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.firstPointList = data.data
          this.initChartPie()
        } else {
          this.firstPointList = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/generator/screen/coverAndBase'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.coverList = data.data
          this.initCate()
        } else {
          this.coverList = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/generator/screen/smallModel'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          let arr1 = []
          let arr2 = []
          let arr3 = []
          data.data.forEach(item => {
            arr1.push(item.categoryName)
            arr2.push(item.quantity)
            arr3.push(item.position)
          })
          let obj = {
            categoryName: arr1,
            quantity: arr2,
            position: arr3
          }
          this.smallList = obj
          this.initAxis()
        } else {
          this.smallList = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/generator/mtcctaskruninfodet/taskruninfodetlist'),
        method: 'post'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.sTaskInfo = data.list[0]
          if (!this.sTaskInfo.taskDetCode) {
            this.sTaskInfo.taskDetCode = ''
          }
        }
      })
    },
    // 饼状图
    initChartPie () {
      var option = {
        title: {
          // text: `库位使用情况:共${this.firstPointList.all}`,
          left: 'center',
          top: 20 * this.beilv,
          textStyle: {
            color: '#fff',
            fontSize: 25 * this.beilv
          }
        },
        legend: {
          orient: 'vertical',
          right: 20 * this.beilv,
          top: 40 * this.beilv,
          itemWidth: 40 * this.beilv,
          itemHeight: 40 * this.beilv,
          itemGap: 80 * this.beilv,
          icon: 'rect',
          data: [
            '已占用',
            '未占用'
          ],
          textStyle: {
            fontSize: 16 * this.beilv,
            color: '#fff',
            padding: [0, 0, 0, 10 * this.beilv]
          }
        },
        color: colorOptions,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          textStyle: {
            fontSize: 20 * this.beilv,
            lineHeight: 22 * this.beilv
          }
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '库位数',
            type: 'pie',
            radius: '55%',
            center: ['39%', '50%'],
            data: [
              { value: this.firstPointList.isOccupy, name: `已占用` },
              { value: this.firstPointList.notOccupy, name: `未占用` }
            ].sort(function (a, b) {
              return a.value - b.value
            }),
            itemStyle: {
              normal: {
                label: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
                  backgroundColor: '#ced0ff',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  borderRadius: 4,
                  // shadowBlur:3,
                  // shadowOffsetX: 2,
                  // shadowOffsetY: 2,
                  // shadowColor: '#999',
                  // padding: [0, 7],
                  rich: {
                    a: {
                      color: '#fff',
                      lineHeight: 26 * this.beilv,
                      backgroundColor: '#8e60f0',
                      align: 'center',
                      fontSize: 20 * this.beilv
                    },
                    abg: {
                      backgroundColor: '#8e60f0',
                      width: '100%',
                      align: 'right',
                      height: 26 * this.beilv,
                      borderRadius: [4, 4, 0, 0],
                      fontSize: 20 * this.beilv
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5 * this.beilv,
                      height: 0 * this.beilv,
                      fontSize: 18 * this.beilv
                    },
                    b: {
                      fontSize: 18 * this.beilv,
                      lineHeight: 33 * this.beilv,
                      color: '#8e60f0'
                    },
                    per: {
                      color: '#fff',
                      padding: [2 * this.beilv, 4 * this.beilv],
                      borderRadius: 2 * this.beilv,
                      fontSize: 18 * this.beilv
                    },
                    c: {
                      fontSize: 18 * this.beilv,
                      color: '#8e60f0'
                    }
                  }
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            }
          }
        ]
      }
      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    },
    initChartScatter () {
      var option = {
        // backgroundColor: '#0079BA',
        color: colorOptions,
        title: {
          // text: '大系列库位数量情况(外圈总量，内圈库存)',
          left: 'center',
          top: 0,
          textStyle: {
            color: '#fff',
            fontSize: 25 * this.beilv
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          textStyle: {
            fontSize: 20 * this.beilv,
            lineHeight: 22 * this.beilv
          }
        },
        legend: {
          orient: 'vertical',
          right: 20 * this.beilv,
          top: 40 * this.beilv,
          itemWidth: 40 * this.beilv,
          itemHeight: 40 * this.beilv,
          itemGap: 30 * this.beilv,
          icon: 'rect',
          data: [
            '成品',
            '半成品',
            '原材料'
          ],
          textStyle: {
            fontSize: 16 * this.beilv,
            color: '#fff',
            padding: [0, 0, 0, 10 * this.beilv]
          }
        },
        series: [
          {
            name: '库位数',
            type: 'pie',
            radius: [0, '35%'],
            center: ['39%', '50%'],
            itemStyle: {
              normal: {
                label: {
                  position: 'inner',
                  fontSize: 12 * this.beilv,
                  formatter: '{b}: {c}'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.secondPointList.countPositionFinishedProduct, name: `成品` },
              { value: this.secondPointList.countPositionSemiFinishedProduct, name: `半成品` },
              { value: this.secondPointList.countPositionRawMaterials, name: `原材料` }
            ]
          },
          {
            name: '数量',
            type: 'pie',
            radius: ['45%', '55%'],
            center: ['39%', '50%'],
            itemStyle: {
              normal: {
                label: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
                  backgroundColor: '#ced0ff',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  borderRadius: 4,
                  // shadowBlur:3,
                  // shadowOffsetX: 2,
                  // shadowOffsetY: 2,
                  // shadowColor: '#999',
                  // padding: [0, 7],
                  rich: {
                    a: {
                      color: '#fff',
                      lineHeight: 26 * this.beilv,
                      backgroundColor: '#8e60f0',
                      align: 'center',
                      fontSize: 20 * this.beilv
                    },
                    abg: {
                      backgroundColor: '#8e60f0',
                      width: '100%',
                      align: 'right',
                      height: 26 * this.beilv,
                      borderRadius: [4, 4, 0, 0],
                      fontSize: 20 * this.beilv
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5 * this.beilv,
                      height: 0 * this.beilv,
                      fontSize: 18 * this.beilv
                    },
                    b: {
                      fontSize: 18 * this.beilv,
                      lineHeight: 33 * this.beilv,
                      color: '#8e60f0'
                    },
                    per: {
                      color: '#fff',
                      padding: [2 * this.beilv, 4 * this.beilv],
                      borderRadius: 2 * this.beilv,
                      fontSize: 18 * this.beilv
                    },
                    c: {
                      fontSize: 18 * this.beilv,
                      color: '#8e60f0'
                    }
                  }
                }
              }
            },
            data: [
              { value: this.secondPointList.countQuantityFinishedProduct, name: `成品` },
              { value: this.secondPointList.countQuantitySemiFinishedProduct, name: `半成品` },
              { value: this.secondPointList.countQuantityRawMaterials, name: `原材料` }
            ]
          }
        ]
      }
      this.chartBar = echarts.init(
        document.getElementById('J_chartScatterBox')
      )
      this.chartBar.setOption(option)
      window.addEventListener('resize', () => {
        this.chartBar.resize()
      })
    },
    initCate () {
      let [max, beilv] = [0, 0]
      const kwArr = [this.coverList.basePosition, this.coverList.coverPosition]
      kwArr.map(item => {
        if (max < item) {
          beilv = Math.ceil(item / 50)
          max = beilv * 50
        }
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
            label: {
              textStyle: {
                fontSize: 16 * this.beilv
              }
            }
          },
          textStyle: {
            fontSize: 20 * this.beilv,
            lineHeight: 22 * this.beilv
          }
        },
        legend: {
          show: true,
          orient: 'vertical',
          right: 70 * this.beilv,
          top: 60 * this.beilv,
          itemWidth: 40 * this.beilv,
          itemHeight: 40 * this.beilv,
          itemGap: 80 * this.beilv,
          icon: 'rect',
          data: [
            '数量',
            '库位数量'
          ],
          textStyle: {
            fontSize: 16 * this.beilv,
            color: '#fff',
            padding: [0, 0, 0, 10 * this.beilv]
          }
        },
        color: ['#FFCD42', '#87cefa'],
        xAxis: [
          {
            type: 'category',
            data: ['成品', '半成品'],
            axisLine: {
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 18 * this.beilv,
              color: '#fff'
            },
            axisPointer: {
              type: 'shadow',
              label: {
                color: '#666'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            nameTextStyle: {
              fontSize: 20 * this.beilv,
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 18 * this.beilv,
              color: '#fff'
            },
            axisPointer: {
              label: {
                color: '#666'
              }
            }
          },
          {
            type: 'value',
            name: '库位数量',
            min: 0,
            max,
            nameTextStyle: {
              fontSize: 20 * this.beilv,
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 18 * this.beilv,
              color: '#fff'
            },
            axisPointer: {
              label: {
                color: '#666'
              }
            }
          }
        ],
        grid: {
          left: '15%',
          right: '40%'
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',
                  fontSize: 18 * this.beilv
                }
              }
            },
            data: [this.coverList.baseQuantity, this.coverList.coverQuantity]
          },
          {
            name: '库位数量',
            type: 'bar',
            data: [this.coverList.basePosition, this.coverList.coverPosition],
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',
                  fontSize: 18 * this.beilv
                }
              }
            }
          }
        ]
      }
      this.chartCate = echarts.init(document.getElementById('J_category'))
      this.chartCate.setOption(option)
      window.addEventListener('resize', () => {
        this.chartCate.resize()
      })
      this.chartCate.on('legendselectchanged', res => {
        this.chartAxis.dispatchAction({
          type: 'legendToggleSelect',
          // 图例名称
          name: res.name
        })
      })
    },
    initAxis () {
      let [max, beilv] = [0, 0]
      const kwArr = this.smallList.position
      kwArr.map(item => {
        if (max < item) {
          beilv = Math.ceil(item / 50)
          max = beilv * 50
        }
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            },
            label: {
              textStyle: {
                fontSize: 16 * this.beilv
              }
            }
          },
          textStyle: {
            fontSize: 20 * this.beilv,
            lineHeight: 22 * this.beilv
          }
        },
        legend: {
          show: false,
          data: [
            '数量',
            '库位数量'
          ],
          textStyle: {
            fontSize: 16 * this.beilv,
            color: '#fff'
          },
          top: 27 * this.beilv
        },
        title: {
          // text: '成品小系列库位数量情况',
          left: 'center',
          top: 0,
          textStyle: {
            color: '#fff',
            fontSize: 25 * this.beilv
          }
        },
        grid: {
          top: 60 * this.beilv,
          left: '15%'
        },
        color: ['#FFCD42', '#87cefa'],
        xAxis: [
          {
            type: 'category',
            data: this.smallList.categoryName,
            axisLine: {
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 18 * this.beilv,
              color: '#fff',
              interval: 0,
              // formatter:function (value,index) {
              //   debugger
              //   if (index % 2 != 0) {
              //     return '\n' + value
              //   }
              //   else {
              //     return value
              //   }
              // }
              rotate: 40
            },
            axisPointer: {
              type: 'shadow',
              label: {
                color: '#666'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            nameTextStyle: {
              fontSize: 20 * this.beilv,
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 18 * this.beilv,
              color: '#fff'
            },
            axisPointer: {
              label: {
                color: '#666'
              }
            }
          },
          {
            type: 'value',
            name: '库位数量',
            min: 0,
            max,
            nameTextStyle: {
              fontSize: 20 * this.beilv,
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 16 * this.beilv,
              color: '#fff'
            },
            axisPointer: {
              label: {
                color: '#666'
              }
            }
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 12 * this.beilv
                }
              }
            },
            data: this.smallList.quantity
          },
          {
            name: '库位数量',
            type: 'bar',
            data: this.smallList.position,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 12 * this.beilv
                }
              }
            }
          }
        ]
      }
      this.chartAxis = echarts.init(document.getElementById('J_axis'))
      this.chartAxis.setOption(option)
      window.addEventListener('resize', () => {
        this.chartAxis.resize()
      })
    }
  }
}
</script>

<style lang='scss'>
.mod-demo-echarts {
  background-color: #0079ba;
  background: url('../../assets/img/bigLed/background.png') no-repeat;
  background-size: 100% 100%;
  overflow:hidden;
  padding: 0 5%;
  > .el-alert {
    margin-bottom: 10px;
  }
  .mod-demo-echarts-title{
    position: relative;
    top: 2vh;
    width: 100%;
    height: 13vh;
    line-height: 13vh;
    .mod-demo-echarts-title-logo{
      min-width: 80px;
      margin-top: 3vh;
      height: 7vh;
      background: url('../../assets/img/logo.png') no-repeat;
      background-size: auto 100%;
    }
    .mod-demo-echarts-title-font{
      font-weight: bold;
      color: #fff;
      font-size: 7vh;
    }
  }
  .mod-demo-echarts-secondtitle{
    margin-bottom: 1vh;
    width: 100%;
    height: 12vh;
    .titleClass{
      width: 100%;
      line-height: 12vh;
      background: transparent;
      text-align: center;
      box-shadow: 0 0 0 0 rgba(0,0,0,0);
      border: 0;
      .el-card__body{
        padding: 0;
      }
      .tagClass{
        height: 7vh;
        line-height: 7vh;
        background-color: rgba(255, 255, 255, .3) !important;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
        border: 1px dashed #fff;
        color: #fff;
      }
    }
  }
  .chart-box{
    border-radius: 5px;
    padding: 20px 5px 10px 5px;
    border: 2px dashed #fff;
    position: relative;
    text-align: center;
    .chart-box-pie {
      min-height: 27vh;
    }
    .chart-box-bar {
      min-height: 32vh;
    }
    .chart-box-title{
      display: inline-block;
      position: relative;
      top: -4vh;
      width: auto;
      height: 4vh;
      line-height: 4vh;
      padding: 0 2.5vh;
      margin: 0 auto;
      border-radius: 5px;
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
      font-size: 2.5vh;
      color: #fff;
      font-weight: bold;
      background-color: #8e60f0;
    }
  }
  // .chart-box-bg1{
  //   background:  url('../../assets/img/bigLed/round.png') no-repeat;
  //   background-size: 31px 31px;
  //   background-position: 98% 4%;
  // }
  // .chart-box-bg2{
  //   background:  url('../../assets/img/bigLed/line-round.png') no-repeat;
  //   background-size: 35px 35px;
  //   background-position: 98% 2%;
  // }
  .chart-br{
    width: 100%;
    height: calc(6vh - 35px);
  }
}
</style>
