<template>
  <div class="n_container">
      <div class="n_header">
          <div class="n_header_h1">
              <h1>超威贝特瑞可视化看板</h1>
          </div>
          <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
      </div>
      <div class="n_body_container">
          <div class="n_wraper">
            <div class="l_wraper">
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>当日生产统计</p>
                </div>
                <div class="content_wraper">
                  <div class="w_wraper">
                      <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>设备运行统计</p>
                </div>
                <div class="content_wraper content_wraper_2">
                  <div class="pie_wraper">
                    <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
                  </div>
                  <div class="pie_legend">
                    <div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
                      <div class="pie_legend_txt_wraper">
                        <p class="pie_legend_txt_2">{{ e.status }}</p>
                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="relative r_wraper">
              <div class="absolute status_wrap">
                <div class="status_item">
                    <div class="status_tip green"></div>
                    <div class="status_name">运行中</div>
                </div>
                <div class="status_item">
                    <div class="status_tip yellow"></div>
                    <div class="status_name">待机</div>
                </div>
                <div class="status_item">
                    <div class="status_tip gray"></div>
                    <div class="status_name">关机</div>
                </div>
                <div class="status_item">
                    <div class="status_tip red"></div>
                    <div class="status_name">故障</div>
                </div>
              </div>
              <div class="area_t_a">1#车间监控</div>
              <div class="relative area_a">
                <div class="absolute hw_wrap">
                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
                </div>
                <div class="absolute hw_wrap hw_wrap_1">
                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
                </div>
                <div class="absolute hw_wrap hw_wrap_2">
                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
                </div>
                <div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData" :key="i"></div>
              </div>
            </div>
          </div>
          <div class="n_wraper">
            <div class="l_wraper">
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>当日生产统计</p>
                </div>
                <div class="content_wraper">
                  <div class="w_wraper">
                      <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>设备运行统计</p>
                </div>
                <div class="content_wraper content_wraper_2">
                  <div class="pie_wraper">
                    <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
                  </div>
                  <div class="pie_legend">
                    <div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
                      <div class="pie_legend_txt_wraper">
                        <p class="pie_legend_txt_2">{{ e.status }}</p>
                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="relative r_wraper">
              <div class="absolute status_wrap">
                <div class="status_item">
                    <div class="status_tip green"></div>
                    <div class="status_name">运行中</div>
                </div>
                <div class="status_item">
                    <div class="status_tip yellow"></div>
                    <div class="status_name">待机</div>
                </div>
                <div class="status_item">
                    <div class="status_tip gray"></div>
                    <div class="status_name">关机</div>
                </div>
                <div class="status_item">
                    <div class="status_tip red"></div>
                    <div class="status_name">故障</div>
                </div>
              </div>
              <div class="area_t_a area_t_b">2#车间监控</div>
              <div class="relative area_b">
                <div class="absolute hw_wrap hw_wrap_3">
                  <div class="hw_item green" v-for="(e, i) in dataList1" :key="i"></div>
                </div>
                <div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData1" :key="i"></div>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { getAllBigScreen } from '@js/mork2.js'
// import { getAllBigScreen } from '@js/getData2.js'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      curList: [], // 当日出入
      stateStatistics: {}, // 设备运行统计
      dataList: [],
      dataList1: [],
      machineData: [{x: '10%', y: '10%'}, {x: '10%', y: '32%'}, {x: '10%', y: '53%'}, {x: '10%', y: '79%'}, {x: '75%', y: '71%'}, {x: '80%', y: '71%'}, {x: '85.4%', y: '71%'}, {x: '90.4%', y: '71%'}, {x: '95.6%', y: '71%'}],
      machineData1: [{x: '10%', y: '19%'}, {x: '10%', y: '36%'}, {x: '10%', y: '63%'}, {x: '10%', y: '81%'}],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null
    }
  },
  created () {
    this.refresh()
    this.dataList = new Array(50)
    this.dataList1 = new Array(140)
  },
  mounted () {
    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
    this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
    this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
  },
  destroyed () {
    if (this.myChart1 !== null) {
      this.myChart1.dispose()
      this.myChart1 = null
    }
    if (this.myChart2 !== null) {
      this.myChart2.dispose()
      this.myChart2 = null
    }
    if (this.myChart3 !== null) {
      this.myChart3.dispose()
      this.myChart3 = null
    }
    if (this.myChart4 !== null) {
      this.myChart4.dispose()
      this.myChart4 = null
    }
    if (this.timer !== null) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    back () {
      let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
      if (flag) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
      this.$router.push('/setup')
    },
    refresh () {
      this._getAllBigScreen()
      this.timer = setInterval(() => {
        this._getAllBigScreen()
      }, this.interTime)
    },
    async _getAllBigScreen () {
      let res = await getAllBigScreen()
      this.curList = [...res.inventoryIOAnalysis]
      res.stateStatistics.fourState.map(el => {
        let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
        rate = rate.toFixed(2) + '%'
        this.$set(el, 'rate', rate)
      })
      this.stateStatistics = res.stateStatistics
      this.setEchart1()
      this.setEchart2()
      this.setEchart3()
      this.setEchart4()
    },
    setEchart1 () {
      let barName = []
      let barData1 = []
      let barData2 = []
      this.curList.map(el => {
        barName.push(el.material_name)
        barData1.push(el.total_instorage_qty)
        barData2.push(el.total_outstorage_qty)
      })
      let option = {
        grid: {
          top: 20,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 8,
            lineHeight: 8
          },
          itemGap: 15,
          itemWidth: 4,
          itemHeight: 4,
          data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#7591B2',
            fontSize: 8,
            lineHeight: 6,
            margin: 5
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          // name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 6
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [2, 1],
              color: '#455C86'
            }
          }
        },
        series: [
          {
            name: '生产中',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(103,212,112,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(103,212,112,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData1
          },
          {
            name: '已完成',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(25,128,234,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(25,128,234,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData2
          }
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3 // 展示到第几个。
          }
        ]
      }
      this.myChart1.setOption(option, true)
      // this.chart2Timer = setInterval(() => {
      //   if (option.dataZoom[0].endValue >= barData1.length - 1) {
      //     option.dataZoom[0].endValue = 3
      //     option.dataZoom[0].startValue = 0
      //   } else {
      //     option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      //     option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
      //   }
      //   this.myChart1.setOption(option, true)
      // }, 2000)
    },
    setEchart2 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
      let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
      let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
      let seriesData = this.stateStatistics.fourState
      seriesData.map((el, i) => {
        el.value = el.status
        el.name = el.stateName
      })
      let total = this.stateStatistics.count
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          left: '50%',
          top: '50%',
          text: `{a|总数/台}\n{b|${total}}`,
          textAlign: 'center',
          textVerticalAlign: 'middle',
          padding: 0,
          textStyle: {
            rich: {
              a: {
                fontSize: 8,
                lineHeight: 10,
                color: '#A8C3E6'
              },
              b: {
                fontSize: 14,
                lineHeight: 16,
                color: '#DBE7F6'
              }
            }
          }
        },
        // legend: {
        //   show: true,
        //   // type: 'scroll',
        //   orient: 'vertical',
        //   right: 0,
        //   bottom: 0,
        //   itemGap: 6,
        //   icon: 'rect',
        //   itemWidth: 4,
        //   itemHeight: 4,
        //   itemStyle: {
        //     color: (params) => {
        //       return colors[params.dataIndex]
        //     }
        //   },
        //   data: seriesData,
        //   formatter: (name) => {
        //     const item = seriesData.filter((item) => item.name === name)[0]
        //     return `{a|${name}}\n{b| ${item.value + '}'}`
        //   },
        //   textStyle: {
        //     rich: {
        //       a: {
        //         fontSize: 8,
        //         lineHeight: 10,
        //         padding: [0, 0, 0, 0],
        //         wordWrap: 'break-word',
        //         color: '#9BB9DD',
        //         align: 'left'
        //       },
        //       b: {
        //         fontSize: 8,
        //         lineHeight: 10,
        //         padding: [0, 0, 0, 0],
        //         color: '#DFECFB',
        //         align: 'left'
        //       }
        //     }
        //   }
        // },
        series: [
          {
            name: '内层实心圆',
            type: 'pie',
            hoverOffset: 0,
            radius: '51%',
            center: ['50%', '50%'],
            startAngle: 270,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#2C4E6E',
              borderWidth: 3,
              color: '#132942'
            },
            data: [{ value: 0 }]
          },
          {
            name: '外层空心圆',
            type: 'pie',
            hoverOffset: 0,
            radius: ['90%', '90%'],
            center: ['50%', '50%'],
            startAngle: 270,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#4677B8',
              borderWidth: 1
            },
            data: [{ value: 0 }]
          },
          {
            name: '设备运行统计内圈',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            startAngle: 270,
            labelLine: {
              show: false
            },
            tooltip: {
              show: false
            },
            itemStyle: {
              borderColor: '#15347b',
              borderWidth: 1,
              color: (params) => {
                return colorListIn[params.dataIndex]
              }
            },
            label: {
              show: false
            },
            data: seriesData
          },
          {
            name: '设备运行统计外圈',
            type: 'pie',
            radius: ['70%', '80%'],
            center: ['50%', '50%'],
            startAngle: 270,
            labelLine: {
              show: false
            },
            tooltip: {
              show: false
            },
            itemStyle: {
              borderColor: '#15347b',
              borderWidth: 1,
              color: (params) => {
                return colorListOut[params.dataIndex]
              }
            },
            label: {
              show: false
            },
            data: seriesData
          }
        ]
      }
      this.myChart2.setOption(option, true)
    },
    setEchart3 () {
      let barName = []
      let barData1 = []
      let barData2 = []
      this.curList.map(el => {
        barName.push(el.material_name)
        barData1.push(el.total_instorage_qty)
        barData2.push(el.total_outstorage_qty)
      })
      let option = {
        grid: {
          top: 20,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 8,
            lineHeight: 8
          },
          itemGap: 15,
          itemWidth: 4,
          itemHeight: 4,
          data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#7591B2',
            fontSize: 8,
            lineHeight: 6,
            margin: 5
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          // name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 6
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [2, 1],
              color: '#455C86'
            }
          }
        },
        series: [
          {
            name: '生产中',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(103,212,112,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(103,212,112,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData1
          },
          {
            name: '已完成',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(25,128,234,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(25,128,234,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData2
          }
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3 // 展示到第几个。
          }
        ]
      }
      this.myChart3.setOption(option, true)
    },
    setEchart4 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
      let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
      let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
      let seriesData = this.stateStatistics.fourState
      seriesData.map((el, i) => {
        el.value = el.status
        el.name = el.stateName
      })
      let total = this.stateStatistics.count
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          left: '50%',
          top: '50%',
          text: `{a|总数/台}\n{b|${total}}`,
          textAlign: 'center',
          textVerticalAlign: 'middle',
          padding: 0,
          textStyle: {
            rich: {
              a: {
                fontSize: 8,
                lineHeight: 10,
                color: '#A8C3E6'
              },
              b: {
                fontSize: 14,
                lineHeight: 16,
                color: '#DBE7F6'
              }
            }
          }
        },
        // legend: {
        //   show: true,
        //   // type: 'scroll',
        //   orient: 'vertical',
        //   right: 0,
        //   bottom: 0,
        //   itemGap: 6,
        //   icon: 'rect',
        //   itemWidth: 4,
        //   itemHeight: 4,
        //   itemStyle: {
        //     color: (params) => {
        //       return colors[params.dataIndex]
        //     }
        //   },
        //   data: seriesData,
        //   formatter: (name) => {
        //     const item = seriesData.filter((item) => item.name === name)[0]
        //     return `{a|${name}}\n{b| ${item.value + '}'}`
        //   },
        //   textStyle: {
        //     rich: {
        //       a: {
        //         fontSize: 8,
        //         lineHeight: 10,
        //         padding: [0, 0, 0, 0],
        //         wordWrap: 'break-word',
        //         color: '#9BB9DD',
        //         align: 'left'
        //       },
        //       b: {
        //         fontSize: 8,
        //         lineHeight: 10,
        //         padding: [0, 0, 0, 0],
        //         color: '#DFECFB',
        //         align: 'left'
        //       }
        //     }
        //   }
        // },
        series: [
          {
            name: '内层实心圆',
            type: 'pie',
            hoverOffset: 0,
            radius: '51%',
            center: ['50%', '50%'],
            startAngle: 270,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#2C4E6E',
              borderWidth: 3,
              color: '#132942'
            },
            data: [{ value: 0 }]
          },
          {
            name: '外层空心圆',
            type: 'pie',
            hoverOffset: 0,
            radius: ['90%', '90%'],
            center: ['50%', '50%'],
            startAngle: 270,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#4677B8',
              borderWidth: 1
            },
            data: [{ value: 0 }]
          },
          {
            name: '设备运行统计内圈',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            startAngle: 270,
            labelLine: {
              show: false
            },
            tooltip: {
              show: false
            },
            itemStyle: {
              borderColor: '#15347b',
              borderWidth: 1,
              color: (params) => {
                return colorListIn[params.dataIndex]
              }
            },
            label: {
              show: false
            },
            data: seriesData
          },
          {
            name: '设备运行统计外圈',
            type: 'pie',
            radius: ['70%', '80%'],
            center: ['50%', '50%'],
            startAngle: 270,
            labelLine: {
              show: false
            },
            tooltip: {
              show: false
            },
            itemStyle: {
              borderColor: '#15347b',
              borderWidth: 1,
              color: (params) => {
                return colorListOut[params.dataIndex]
              }
            },
            label: {
              show: false
            },
            data: seriesData
          }
        ]
      }
      this.myChart4.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './style.stylus'
</style>
