<!-- 危化品存量排行 -->
<template>
  <div class="hazardousComponents">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="hazardous-num">
        <div class="hazardous-num-left">
          <p>总数：</p>
          <p>{{totalNumber}}</p>
        </div>
        <div class="hazardous-num-right">
          <p>总量：</p>
          <p>{{totalAmount}}</p>
          <p>KG</p>
        </div>
      </div>
      <div id="hazardousComponentsECharts" v-if="dataList[0]"></div>
      <div class="position-max-box" v-if="dataList[0]"
           :class="index == 0 ?'border-box-type-1':(index == 1 ?'border-box-type-2':(index == 2 ?'border-box-type-3':(index == 3 ?'border-box-type-4':(index == 4 ?'border-box-type-5':''))))"
           v-for="(item,index) in dataList" :key="index">
        <div class="border-box">
          <p></p>
        </div>
        <p></p>
        <p>{{index+1}}</p>
        <p>{{item.deptSortName}}</p>
        <p>总数:{{item.totalNumber}}</p>
        <p v-if="item.newTotal>0">丨</p>
        <p v-if="item.newTotal>0">今日新增 {{item.newTotal}} </p>
        <img v-if="item.newTotal>0" src="@/assets/ZDimages/icom_whpclph_sz@1x.png">
        <p v-if="item.newTotal>0">{{item.totalAmount}}KG</p>
      </div>
      <p v-if="!dataList[0]" style="color:#dedede;font-size:18px;line-height:200px;text-align: center;">暂无数据</p>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBigDataChemicalStockSort,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'hazardousComponents',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'危化品存量排行',
          checkType:'hazardousComponents',
        },
        totalNumber:0,
        totalAmount:0,
        dataList:[],
      }
    },
    created () {

    },
    mounted () {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBigDataChemicalStockSort().then( response => {
          const base64_1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAVCAYAAACt4nWrAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAI8SURBVDiNrZS/TxRREMc/M2+XQCIxgoIeIAiFghaaHKIJFhq1014rKzspiVYaO0vvn7HUiIkNsTCRgsIQYxCJCTEWlz3YNxb7dtk7D1iIm2w279d3PvOd2QcVn9VR5tbHqFfdDxBV3Xjc8XQ1YR1YPkyAAx+b4tbGBMnSafzbU1yuek4PFAYHNFomESoSORr/TZxJngAXE0FRMJEbS8M8qCIu+y3aFEPACjD4xStbKZAa5vmu2zYz/4s/Ryc3nmMMYpCo7KCACgijFrN4ZHIb54o5PuUbPmqUem/OUoMU8Nbc8TZzc4O1w5M7GrnwNuAVhwiikp1S+hTZt7hdxW2ShxjzGGCQBFHJREMAQR333tW4U1ncztOP8ao81xLxhd85uWRjhzSWIa5G3mIRGC1PJSqW2yEhSMmeC80RFrqJtxXUJpgga72+8vxaX8SPWLGiFQ1CYc0beNuKWzZ9bZOf+5G/7hQGaDkJtLR5HshB5MR2rC/3tMXOchu43y29JFJESnZIF3vEHn84035rKoBBhO59ZySxprvkUpB3jnHtrZmRj7OAMZ23XvlNgdThQvq7Vuz+rcXYRK6/H+FRLi52jmE8K8BAN+pmrHwe6s0KmRp4wjeM86KGdfGs98Z+pv6V30rKi72EIRQz+N1RxMLvcj1MqTVb+iwjH+MuylWMWaAO1Aplgc1jsV8b6NGMrp2yyKLIhDyjZMf7S/9cXFZjLFXqTpkFZr+d7Jnb6I/7zRN6O+/zDntKgQLAm78S9PPvloMANQAAAABJRU5ErkJggg==";
          const base64_2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAh9SURBVGiBvZprjFVXFcd/a5/7mAcwAzNDxwH6SLBJbYU0xKAtWoo8fCSaSDB+0VQiorZSq4GYagzxg6RJm/j61KrlgzHGGvWTSZO2kBasmkhiTC2liYF7YGqH6cA8mGHm3nuWH+49957HPmfOuXNxJZesOXvtfc/+r//6r7PPReiuyQEw934Ah3kMQ5j5uWGnWlgqlpdk0DOsq4sOGVhnhHWemiGBIWAIo8No04dhVb1ijPzYeN7vT5yfnQK0y/eavpGVLvDLu/u3vl0oblNP7wEdVpFBhUGBQcD31wCmw6+oqMhJ1Pv1xTdn/vMC1Fd6z1lsRcDoTgpM8q8FpPgPLU6+6vUUppF7gL4u3V/QrgJ/Av1Vn8ycO/5vlm7Bd7RsZcBs5ZsoP/VXUqhOYC6cqZfnz9VL62twR1fuMmyzKnraePrctZnZl58dZ/4WfEfnwOgHWYvhPLC+tUpgtTpcf8MrXjlTLxcu1Z27gNKK7rRhSwpzBuYKIjM9Rs5tKBV/c/DcxItdWDtknQNzPyeA78ZWsfg3VC79pVYu/LVW6l9UUygavVEUs1g01EsiOEacopGygZ6SwSuJzJeMWSwYUysJ6iDGQUoi9IGsUqVX/S9QFrSmW/f+7fLbne7FZh0Bo9u4HeU8Qq91pQR/vNR/7VJ51VoA1caAqt9uBG32HW3WpTbHQRox1lgAObvnjLujk70kWWedQngKQy/SXMFAyE/4VB1ZJdIIFVEQEP+DRvzA36LNObZYAH3wpR0bH18hFpEt5jTdzofxeD0LQ6Lac6Fn4N1rpnxbbkaoBGLDjGrFCtPqeVv2nB2v5N2TzTphzNNZGRJl000pVGMZz8KIFsva16KxKAPGmOdWBkfbcgGj29mP8GCsfCTi28pLoOaYEs1NNfNOsLTCQDT5ECktmrH+fALjwN5Xdmw62CEWIctcSvpJykxzHrgzVxk1fQXOlUeqHhT90oBwKbVKxRfm5j/qK4lGy8gSK0xWtbDlE69deifr3myWnTEzHEG4Mw9Dgn7VmAWEYiPLGmJEY7vpjMAvL589JMQqw2Wp/aRDPFqWiTH6UUaAN4GhTkQXYM4UJt5yBtcnCSs0sp9JhFsxKexB9u969fIfsuzPZtkYIzyJMJSHIVFmLYkTyjj4ehLOvq1th2OD2qSx+YHC+9lLH98wdMuA0Y/xfgyP2rpMnu5UM6a/RXe/E4WEN9iZgmUUjaUNVsq4wJip6YlbBgwFnsZQzMuQmMaI9Isl4zZG4G82xIhwrI1dMfYph07tHNvddWB0Dw8hfKYThkRjF8WZy86IgB+7FoklnT0ov/jz9nVrugoM8EynDIn6NWNuxvWkvWm/6zTwame/DWTgOSfInsh4bD7csaqn93jXgNF9fAlhW6cMic6rYYrxjEYACJ6RYrE0YhPYQ1C3IuOKPnH6oQ0fyQOM2C7qXvqb71o2WiMt7TjNV+ANb62nKia5VTeCNan9pp6Xwqd1fzzyXRc8KW19+PTFm7Y9R83OmAJPIGxcCUOCn6oxHmCiZ6Co3+5YKdoSENukcezjdxdY/F4WUMDCGP0Uo8B5hIFYxHJ+wvgNLcxcrK1eAwlHAEv2szzo+eulPegFmShItSq1D+06NfFPOxxtizPG8AMMAyvtQkG/JsYLZ9T+IBc8EoQZY2GHj3/CeLvjtccRLRbUef53B3ByAaOf5j4MhzN3oYwdqS7SF+wmLbEMnIEal4IPer6v9lgJdyb/vNUCJLRWaP79o5PvO5YLGAo8g2A6esJNAaeKKdkynqY3YUYsz5608bB2KUb4/qmdI5szAaOfZR+GvZkAWYYhsVJCauHTckAsAetpO9rWE0/bPjjZ2IMAqn1FcZ5fFhgFg9N8M9eFLhTrSuosxB7UJHzDSW/yQtlOY8cy4z5o/jjCjrMP33YkFRj2cxjDfXl0I1V7ohqDOKkZDTEinH3x39Vgi42zJ+1dT+ts1mbPD1/bPXa7FRg9wECzE3VWMsvMUwFP6bNnlAgjgnoSiY12miR2ZBlvASwDjnrP2hljOIphNK9uZGVWDWPRE5oZzXPaDpSetOfb3v3m0S5V3Xd21+iX48AIIxiWVqIhafNqKkvBQ2JLLJO0pTVuz34Dg4zsSNQewkw1PPX3nSOjIWDktxxeUDYj/BzDQicaksamuphalBH+ctH3L4QYYWePTbgT2UMS+8K6hepI3ZjQe2IJ/qFfYIwiRxEOAf2xiOV8y7Xpm6X61ELJCf8k2/bxt6Pd+gEucKQIrpflSKH6uQdemfhjDJgWQI8wCnwb+BqwOhc4QV/gvbkyM4vF1g23b856As5x2o4AmjS/FRsBMJYgQWHcaGHL9pevvBd+8vX3c5L/ykmOUWczwgkM051qTx2xagt+7Qfq3qoty4yz3HwC40Ffwn6zKYyp1H4UzXOi6aMMscjjCI8Ba4nOTCml8anexWrdlNMYASnssWWbztlj/1EvHGtEdmcCxjf9Omup8xjCEYThGDAW373aV1WVYpp22KkdAWs57VlOu4IAJGvXVYWKomdyAdMC6KsM4PANhG8B65PA8VS4crU3k1j6N5dLLC3zk7QLmFNwPcUVxPWUiohWpI5b9cStz/e4D7x+eSGyhc5MD7KaPg4D34HmQ2Jg1WrN8O5kT3hDwc23NpJQGtjBjM0XqqiMo1T8zStU8HAdRytS9dx7X5yZyrO3FQHjm36RfgY5hHAUYcy/vrjkeJNTJZOPEXG6AxMoroe4qLoeUhGhojXPXaoX3bdWTb3z+Re6+99cuwKMb3qcHq7xFQzHgE3z84Wl69eLpTgj2kCgMqeqrie4BqnUFVdVKuJ57pIYt2dgtnLXSTK9wO6mdRUY3/Q4JWZ5ZHq69OT8rKMKrgcuiqsiFQMVEFc9x930Qj6K/7/sf2Jhen85Fj9ZAAAAAElFTkSuQmCC";
          const base64_3 = "data:image/png;base64,[encoded data, 5468 characters]";
          const base64_4 = "data:image/png;base64,[encoded data, 6768 characters]";
          const base64_5 = "data:image/png;base64,[encoded data, 8616 characters]";
          this.$set(this,'totalNumber',response.data.totalNumber);
          this.$set(this,'totalAmount',response.data.totalAmount);
          this.$set(this,'dataList',response.data.chemicalStockSubs);
          let nameList = [];
          let dataList = [];
          let imgList = [];
          for(let i=0;i<response.data.chemicalStockSubs.length;i++){
            nameList.push(response.data.chemicalStockSubs[i].deptSortName)
            dataList.push(response.data.chemicalStockSubs[i].totalNumber)
            if(i == 0){
              imgList.push({
                name: response.data.chemicalStockSubs[i].deptSortName,
                z: 100,
                value: 120,
                symbolSize: [23, 21],
                symbolPosition: 'center',
                symbolOffset: [10, -115],
                symbol: 'image://' + base64_1
              })
            }else if(i == 1){
              imgList.push({
                name: response.data.chemicalStockSubs[i].deptSortName,
                z: 90,
                value: 57,
                symbolSize: [70, 43],
                symbolPosition: 'center',
                symbolOffset: [-115, -128],
                symbol: 'image://' + base64_2
              })
            }else if(i == 2){
              imgList.push({
                name: response.data.chemicalStockSubs[i].deptSortName,
                z: 80,
                value: 42,
                symbolSize: [122, 61],
                symbolPosition: 'center',
                symbolOffset: [-240, -98],
                symbol: 'image://' + base64_3
              })
            }else if(i == 3){
              imgList.push({
                name: response.data.chemicalStockSubs[i].deptSortName,
                z: 70,
                value: 27,
                symbolSize: [176, 77],
                symbolPosition: 'center',
                symbolOffset: [-365, -65],
                symbol: 'image://' + base64_4
              })
            }else if(i == 4){
              imgList.push({
                name: response.data.chemicalStockSubs[i].deptSortName,
                z: 60,
                value: 10,
                symbolSize: [227, 98],
                symbolPosition: 'center',
                symbolOffset: [-490, -35],
                symbol: 'image://' + base64_5
              })
            }
          }
          this.$nextTick(()=>{
            this.eChartsMethod(nameList,dataList,imgList);
          })
        });
      },
      eChartsMethod(nameList,dataList,imgList){
        const chartData = [0, 0, 86, 825, 2672];
        const xAxisData = ['', '', '', '', ''];
        let option = {
          tooltip: {
            show: false,
            textStyle: {
              fontSize: 18
            },
            formatter: function (params) {
              return `${params.name}:${chartData[params.dataIndex]}`;
            }
          },
          grid: {
            // containLabel: true,
            left: '10%',
            top: '19%',
            bottom: '15%'
          },
          xAxis: {
            show: false,
            data: xAxisData,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#5EA2ED',
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#1B5BBA'
              }
            }
          },
          yAxis: {
            show: false,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#1B5BBA'
              }
            },
            axisLabel: {
              color: '#5EA2ED',
              interval: 0
            }
          },
          series: [
            {
              type: 'pictorialBar',
              data: imgList
            }
          ]
        };
        let echartsBox = this.$echarts.init(document.getElementById('hazardousComponentsECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .hazardousComponents{
    height:415px;
    width:800px;
    .eCharts-max-big-box{
      background: linear-gradient( 180deg, rgba(4,117,129,0.2) 0%, rgba(0,15,22,0) 100%);
      position: relative;
      .hazardous-num{
        height:76px;
        display: flex;
        .hazardous-num-left{
          display: flex;
          margin:18px 0 0 54px;
          width:305px;
          height:57px;
          background: no-repeat;
          background-image: url("../../../assets/ZDimages/img_bg_whpzs@1x.png");
          background-size: 100%;
          p:nth-child(1){
            color:#fff;
            margin:13px 0 0 24px;
            line-height:35px;
            height:35px;
            font-size:24px;
          }
          p:nth-child(2){
            flex:1;
            text-align: right;
            line-height:34px;
            height:34px;
            margin:18px 18px 0 0;
            font-size:28px;
            color:#fff;
            font-weight:700;
            font-family: 'alimmFonts', sans-serif;
          }
        }
        .hazardous-num-right{
          display: flex;
          margin:18px 0 0 90px;
          width:305px;
          height:57px;
          background: no-repeat;
          background-image: url("../../../assets/ZDimages/img_bg_whpzs@1x.png");
          background-size: 100%;
          p:nth-child(1){
            color:#fff;
            margin:13px 0 0 24px;
            line-height:35px;
            height:35px;
            font-size:24px;
          }
          p:nth-child(2){
            flex:1;
            text-align: right;
            line-height:34px;
            height:34px;
            margin:18px 0 0 0;
            font-size:28px;
            color:#fff;
            font-weight:700;
            font-family: 'alimmFonts', sans-serif;
          }
          p:nth-child(3){
            width:40px;
            line-height:34px;
            height:34px;
            margin:22px 15px 0 5px;
            font-size:26px;
            color:#fff;
          }
        }
      }
      #hazardousComponentsECharts{
        width:800px;
        height:277px;
      }
      .border-box-type-1{
        top:92px;
        left:165px;
        .border-box{
          border: 1px solid rgba(195,16,0,0.4);
          p{
            background: rgba(195,16,0,0.4);
          }
        }
        p:nth-child(2){
          width:186px;
          border-bottom:2px dashed rgba(195,16,0,0.4);
        }
        p:nth-child(3){
          color: #FF0000;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_a@1x.png");
        }
      }
      .border-box-type-2{
        top:133px;
        left:184px;
        .border-box{
          border: 1px solid rgba(194,38,0,0.4);
          p{
            background: rgba(194,38,0,0.4);
          }
        }
        p:nth-child(2){
          width:167px;
          border-bottom:2px dashed rgba(194,38,0,0.4);
        }
        p:nth-child(3){
          color: #FF5900;
          background-image: url("../../../assets/ZDimages/img_whp_b@1x.png");
        }
      }
      .border-box-type-3{
        top:173px;
        left:210px;
        .border-box{
          border: 1px solid rgba(192,72,0,0.4);
          p{
            background: rgba(192,72,0,0.4);
          }
        }
        p:nth-child(2){
          width:141px;
          border-bottom:2px dashed rgba(192,72,0,0.4);
        }
        p:nth-child(3){
          color: #FFB31A;
          background-image: url("../../../assets/ZDimages/img_whp_c@1x.png");
        }
      }
      .border-box-type-4{
        top:214px;
        left:240px;
        .border-box{
          border: 1px solid rgba(191,100,0,0.4);
          p{
            background: rgba(191,100,0,0.4);
          }
        }
        p:nth-child(2){
          width:111px;
          border-bottom:2px dashed rgba(191,100,0,0.4);
        }
        p:nth-child(3){
          color: #0586FF;
          background-image: url("../../../assets/ZDimages/img_whp_d@1x.png");
        }
      }
      .border-box-type-5{
        top:255px;
        left:268px;
        .border-box{
          border: 1px solid rgba(190,121,0,0.4);
          p{
            background: rgba(190,121,0,0.4);
          }
        }
        p:nth-child(2){
          width:83px;
          border-bottom:2px dashed rgba(190,121,0,0.4);
        }
        p:nth-child(3){
          color: #0586FF;
          background-image: url("../../../assets/ZDimages/img_whp_d@1x.png");
        }
      }
      .position-max-box{
        display: flex;
        z-index:5;
        position: absolute;
        .border-box{
          border-radius:50%;
          width:10px;
          height:10px;
          margin:8px;
          overflow: hidden;
          p{
            overflow: hidden;
            width:4px;
            height:4px;
            margin:2px;
          }
        }
        p:nth-child(2){
          height:1px;
          margin-top:12px;
        }
        p:nth-child(3){
          width:24px;
          height:28px;
          font-size:24px;
          text-align: center;
          line-height:28px;
          margin:0 17px 0 10px;
        }
        p:nth-child(4){
          width:100px;
          font-size:18px;
          line-height:28px;
          color:#fff;
        }
        p:nth-child(5){
          width:80px;
          font-size:18px;
          line-height:28px;
          color:#fff;
        }
        p:nth-child(6){
          padding:0 10px;
          font-size:18px;
          line-height:28px;
          color:#fff;
        }
        p:nth-child(7){
          font-size:18px;
          line-height:28px;
          color:#fff;
        }
        img{
          width:11px;
          height:14px;
          margin:7px 6px;
        }
        p:nth-child(9){
          position:absolute;
          left:25px;
          top:-10px;
          font-size:18px;
          line-height:18px;
          color:#fff;
        }
      }
    }
  }
</style>
