<!-- 危化品总量统计分析 -->
<template>
  <div class="statisticalAnalysisOfHazardousChemicals">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="statisticalAnalysisOfHazardousChemicalsPage">
      <div class="color-max-box">
        <div>
          <p class="color1"></p>
          <p>液体</p>
        </div>
        <div>
          <p class="color2"></p>
          <p>固体</p>
        </div>
      </div>
      <div class="ECharts-flex-box">
        <div class="ECharts-left-box">
          <!--管控-->
          <div id="statisticalAnalysisOfHazardousChemicalsTopECharts"></div>
          <p class="back-text-box back-text-box1">管控类危化品</p>
          <div class="position-num-box">
            <p>总数</p>
            <dv-digital-flop :config="control" class="dvDigitalFlop"/>
          </div>
        </div>
        <div class="ECharts-right-box">
          <!--非管控-->
          <div id="statisticalAnalysisOfHazardousChemicalsBottomECharts"></div>
          <p class="back-text-box back-text-box2">非管控类危化品</p>
          <div class="position-num-box">
            <p>总数</p>
            <dv-digital-flop :config="uncontrolled" class="dvDigitalFlop"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const configData = {
    content: '{nt}',
    textAlign: 'center',
    style: {
      fill: '#fff',
      fontSize: 16,
      fontWeight: 200,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff', '#5BC6FF'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 20]
    }
  }
  import { chemicalStockHazMartClassStatistics } from '@/api/index'
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'

  export default {
    name: 'index',
    components: {
      titlePageImgComponents
    },
    data() {
      return {
        control: {
          number: [0],
          content: configData.content,
          textAlign: configData.textAlign,
          style: configData.style
        },
        uncontrolled: {
          number: [0],
          content: configData.content,
          textAlign: configData.textAlign,
          style: configData.style
        },
        //组件传参
        propsData: {
          title: '实验室危化品存量'
        },
        //echarts数据
        echartsBox1: null,
        echartsBox2: null,
        // 定时器
        echartsTimer: null
      }
    },
    created() {

    },
    mounted() {
      this.getList()
      this.timeFunction()
    },
    methods: {
      getList() {
        chemicalStockHazMartClassStatistics().then(response => {
          this.$set(this, 'control', {
            number: [response.data[1].total],
            content: configData.content,
            textAlign: configData.textAlign,
            style: configData.style
          })
          this.$set(this, 'uncontrolled', {
            number: [response.data[0].total],
            content: configData.content,
            textAlign: configData.textAlign,
            style: configData.style
          })
          let payload1 = {
            id: 'left-center-1',
            toolTip: false,
            data: {
              total: '',
              data: ['0', '0'],
              x: ['固体总量（kg）', '液体总量（L）']
            }
          }
          let payload2 = {
            id: 'left-center-2',
            toolTip: false,
            data: {
              total: '',
              data: ['0', '0'],
              x: ['固体总量（kg）', '液体总量（L）']
            }
          }
          let num1 = 0;
          let num2 = 0;
          response.data[1].chemicalTotalList.forEach((item)=>{
            num1 = num2 + item.chemicalsTotal
            if(item.chemicalsUnit == 'kg'){
              payload1.data.data[0] = item.chemicalsTotal
            }
            if(item.chemicalsUnit == 'L'){
              payload1.data.data[1] = item.chemicalsTotal
            }
          })
          response.data[0].chemicalTotalList.forEach((item)=>{
            num2 = num2 + item.chemicalsTotal
            if(item.chemicalsUnit == 'kg'){
              payload2.data.data[0] = item.chemicalsTotal
            }
            if(item.chemicalsUnit == 'L'){
              payload2.data.data[1] = item.chemicalsTotal
            }
          })
          payload1.data.total = num1;
          payload2.data.total = num2;
          this.eChartsMethod1(payload1)
          this.eChartsMethod2(payload2)
        })
      },
      eChartsMethod1(payload) {
        let data = []

        const color = [
          '#00F7FF',
          '#008CFF'
        ]
        payload.data.x.forEach((item, index) => {
          data.push({ value: payload.data.data[index], name: item, label: { color: color[index] } })
        })

        const tooltip = payload.toolTip !== undefined ? payload.toolTip : true
        let option = {
          // backgroundColor: 'transparent',
          grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            containLabel: true
          },
          tooltip: {
            show: tooltip,
            backgroundColor: 'rgba(9, 30, 60, 0.6)',
            extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
            borderWidth: 0,
            confine: false,
            appendToBody: true,
            textStyle: {
              color: '#fff',
              fontSize: 30
            },
            // 轴触发提示才有效
            axisPointer: {
              type: 'shadow'
            },
            shadowStyle: {
              color: 'rgba(157, 168, 245, 0.1)'
            },
            formatter: function(parms) {
              var str =
                // parms.seriesName + "</br>" +
                parms.marker + parms.name + ' </br>' +
                '数量：' + parms.data.value + '</br>'
              // "占比：" + parms.percent + "%";
              return str
            }
          },
          legend: {
            show: false
          },
          series: [
            {
              name: payload.title,
              type: 'pie',
              radius: ['33%', '40%'],
              startAngle:45,
              minAngle: 8,
              padAngle: 2,
              itemStyle: {
                borderColor: '#01060C',
                borderWidth: 2,
                color(params) {
                  return color[params.dataIndex]
                }
              },
              labelLine: {
                // length2: 55,
                length: 20,
                length2: 80,
                lineStyle: {
                  // type: "dashed",
                  width: 2
                }
              },
              label: {
                position: 'outer',
                alignTo: 'none',
                bleedMargin: 15,
                formatter: ' {a|{c}}\n{b|{b}}',
                padding: -85,
                rich: {
                  a: {
                    padding: [-5, 0, 5, 0],
                    fontSize: 16,
                    lineHeight: 16,
                    color: '#fff',
                    align:'center'
                  },
                  b: {
                    padding: [20, 0, 5, 0],
                    fontSize: 14,
                    lineHeight: 14,
                    color: '#fff',
                    align:'center'
                  }
                }
              },
              data
            },
            //刻度
            {
              type: 'gauge',
              center: ['50%', '50%'],
              radius: '41%', // 1行3个
              splitNumber: 36,
              min: 0,
              max: 100,
              startAngle: 0,
              endAngle: 360,
              //分隔线样式
              axisTick: {
                show: false
              },
              //刻度样式
              axisLine: {
                show: false
              },
              //整数分隔线
              splitLine: {
                show: true,
                length: 6,
                lineStyle: {
                  color: 'rgba(0, 144, 255, 1)',
                  width: 2
                }
              },
              //刻度数字
              axisLabel: {
                show: false
              }
            },
            {
              type: 'pie',
              radius: ['0%', '24%'],
              center: ['50%', '50%'],
              emphasis: {
                scale: false
              },
              labelLine: {
                show: false,
                length: 30,
                length2: 55
              },
              data: [
                {
                  name: '',
                  value: 0,
                  itemStyle: {
                    color: 'rgba(0,183,255,0.1)'
                  },
                  tooltip: {
                    show: false
                  }
                }
              ]
            }
          ]
        }
        this.echartsBox1 = this.$echarts.init(document.getElementById('statisticalAnalysisOfHazardousChemicalsTopECharts'))
        this.echartsBox1.clear()
        this.echartsBox1.setOption(option)
      },
      eChartsMethod2(payload) {
        let data = []

        const color = [
          '#00F7FF',
          '#008CFF'
        ]
        payload.data.x.forEach((item, index) => {
          data.push({
            value: payload.data.data[index],
            name: item, label: {
              color: color[index]
            }
          })
        })

        const tooltip = payload.toolTip !== undefined ? payload.toolTip : true
        let option = {
          // backgroundColor: 'transparent',
          grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            containLabel: true
          },
          tooltip: {
            show: tooltip,
            backgroundColor: 'rgba(9, 30, 60, 0.6)',
            extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
            borderWidth: 0,
            confine: false,
            appendToBody: true,
            textStyle: {
              color: '#fff',
              fontSize: 30
            },
            // 轴触发提示才有效
            axisPointer: {
              type: 'shadow'
            },
            shadowStyle: {
              color: 'rgba(157, 168, 245, 0.1)'
            },
            formatter: function(parms) {
              var str =
                // parms.seriesName + "</br>" +
                parms.marker + parms.name + ' </br>' +
                '数量：' + parms.data.value + '</br>'
              // "占比：" + parms.percent + "%";
              return str
            }
          },
          legend: {
            show: false
          },
          series: [
            {
              name: payload.title,
              type: 'pie',
              radius: ['33%', '40%'],
              startAngle:45,
              minAngle: 8,
              padAngle: 2,
              itemStyle: {
                borderColor: '#01060C',
                borderWidth: 2,
                color(params) {
                  return color[params.dataIndex]
                }
              },
              labelLine: {
                // length2: 55,
                length: 20,
                length2: 80,
                lineStyle: {
                  // type: "dashed",
                  width: 2
                }
              },
              label: {
                position: 'outer',
                alignTo: 'none',
                bleedMargin: 15,
                formatter: ' {a|{c}}\n{b|{b}}',
                padding: -85,
                rich: {
                  a: {
                    padding: [-5, 0, 5, 0],
                    fontSize: 16,
                    lineHeight: 16,
                    color: '#fff',
                    align:'center'
                  },
                  b: {
                    padding: [20, 0, 5, 0],
                    fontSize: 14,
                    lineHeight: 14,
                    color: '#fff',
                    align:'center'
                  }
                }
              },
              data
            },
            //刻度
            {
              type: 'gauge',
              center: ['50%', '50%'],
              radius: '41%', // 1行3个
              splitNumber: 36,
              min: 0,
              max: 100,
              startAngle: 0,
              endAngle: 360,
              //分隔线样式
              axisTick: {
                show: false
              },
              //刻度样式
              axisLine: {
                show: false
              },
              //整数分隔线
              splitLine: {
                show: true,
                length: 6,
                lineStyle: {
                  color: 'rgba(0, 144, 255, 1)',
                  width: 2
                }
              },
              //刻度数字
              axisLabel: {
                show: false
              }
            },
            {
              type: 'pie',
              radius: ['0%', '24%'],
              center: ['50%', '50%'],
              emphasis: {
                scale: false
              },
              labelLine: {
                show: false,
                length: 30,
                length2: 55
              },
              data: [
                {
                  name: '',
                  value: 0,
                  itemStyle: {
                    color: 'rgba(0,183,255,0.1)'
                  },
                  tooltip: {
                    show: false
                  }
                }
              ]
            }
          ]
        }
        this.echartsBox2 = this.$echarts.init(document.getElementById('statisticalAnalysisOfHazardousChemicalsBottomECharts'))
        this.echartsBox2.clear()
        this.echartsBox2.setOption(option)
      },
      //时间定时器
      timeFunction() {
        let self = this
        this.echartsTimer = window.setInterval(showTime, 180000)

        function showTime() {
          self.getList()
        }
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.echartsTimer)
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.echartsTimer)
    }
  }
</script>
<style scoped lang="scss">
  .statisticalAnalysisOfHazardousChemicals {
    width: 652px;
    height: 472px;
    overflow: hidden;
    .statisticalAnalysisOfHazardousChemicalsPage {
      height:409px;
      position: relative;
      overflow: hidden;
      background: linear-gradient( 180deg, rgba(4,117,129,0.2) 0%, rgba(0,15,22,0) 100%);
      .color-max-box {
        position: absolute;
        z-index: 1;
        top:30px;
        left:200px;
        display: flex;
        overflow: hidden;
        /*margin: 63px 0 62px 310px;*/
        div {
          display: flex;
          margin-left: 50px;
          p:nth-child(1) {
            width: 16px;
            height: 16px;
            margin: 0 10px 0 0;
            border-radius:4px;
          }
          p:nth-child(2) {
            color: #fff;
            font-size: 14px;
            line-height: 16px;
            height: 16px;
            font-family: SOURCEHANSANSCN;
          }
          .color1 {
            background-color: #008CFF;
          }
          .color2 {
            background-color: #00F7FF;
          }
        }
      }
      .ECharts-flex-box{
        height:409px;
        display: flex;
        .ECharts-left-box{
          width:325px;
          height:360px;
          position: relative;
          #statisticalAnalysisOfHazardousChemicalsTopECharts {
            width:325px;
            height:360px;
          }
        }
        .ECharts-right-box{
          width:325px;
          height:360px;
          position: relative;
          #statisticalAnalysisOfHazardousChemicalsBottomECharts {
            width:325px;
            height:360px;
          }
        }
      }
      .back-text-box {
        position: absolute;
        width: 154px;
        height: 117px;
        line-height: 117px;
        font-size: 14px;
        color: #fff;
        font-family: SOURCEHANSANSCN;
        background: url("../../../assets/ZDimages/img_whptjfx_bg@1x.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        /*margin: 0 391px;*/
      }
      .back-text-box1{
        top:248px;
        left:84px;
      }
      .back-text-box2{
        top:248px;
        left:84px;
      }
      .position-num-box {
        position: absolute;
        top: 168px;
        left: 62px;
        p {
          width: 200px;
          line-height: 14px;
          font-size: 14px;
          text-align: center;
          color: #fff;
          font-family: SOURCEHANSANSCN;
        }
        .dvDigitalFlop {
          height: 30px;
          line-height: 30px;
          width: 200px;
        }
      }
    }
  }
</style>
