v3-school-level-big-data-web/src/views/safetyOverview/pageComponent/dangerComponents.vue

<!-- 危险源总数排行 -->
<template>
  <div class="dangerComponents">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="danger-num">
        <div class="danger-left-box">
          <p>危险源总数：</p>
          <p>{{hazardTotal}}</p>
        </div>
        <div class="danger-right-box">
          <p>今日新增危险源：</p>
          <p>{{newHazard}}</p>
        </div>
      </div>
      <div id="dangerComponentsECharts" v-if="dataList[0]"></div>
      <div class="position-num-max-name-box" v-if="dataList[0]" v-for="(item,index) in dataList" :key="index">
        <div class="position-for-box" v-for="(item,index) in dataList" :key="index">
          {{item.deptSortName}}
        </div>
      </div>
      <div class="position-num-max-big-box" v-if="dataList[0]">
        <div class="position-for-box" v-for="(item,index) in dataList" :key="index">
          <p>总数:{{item.total}}</p>
          <p>丨</p>
          <p>危险品:{{item.chemical}}</p>
          <p>丨</p>
          <p>冷热设备:{{item.coolHotdevice}}</p>
        </div>
      </div>
      <p v-if="!dataList[0]" style="color:#dedede;font-size:18px;line-height:200px;text-align: center;">暂无数据</p>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBigDataHazardTotalSort,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'dangerComponents',
    components: {
      titlePageImgComponents
    },
    data() {
      return {
        propsData:{
          title:'危险源总数排行',
          checkType:'dangerComponents', //二级未开发-暂时注掉
        },
        //eCharts定时器
        eChartsTimer:null,
        dataList:[],
        hazardTotal:0,
        newHazard:0,
        refreshNum:0,
        maxData:[],
        maxNum:[],
        mxaText:[],
        dataIndex:0,
      }
    },
    created() {

    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.judgmentData();
        },1000*30);
      },
      //执行判断
      judgmentData(){
        this.dataIndex++
        if(this.maxData[this.dataIndex]){
          this.setData();
        }else{
          this.getData();
        }
      },
      //滚动数据
      setData(){
        this.$set(this,'dataList',this.maxData[this.dataIndex]);
        this.$nextTick(()=>{
          this.eChartsMethod();
        })
      },
      //获取数据
      getData(){
        reportReportBigDataHazardTotalSort().then( response => {
          this.$set(this,'hazardTotal',response.data.hazardTotal?response.data.hazardTotal:0);
          this.$set(this,'newHazard',response.data.newHazard?response.data.newHazard:0);
          let maxList = [];
          let list = [];
          let maxNum = [];
          let numList = [];
          let mxaText = [];
          let textList = [];
          let num = 0;
          for(let i=0;i<response.data.hazardTotalSortSubs.length;i++){
            if(num < 5){
              list.push(response.data.hazardTotalSortSubs[i])
              numList.unshift(response.data.hazardTotalSortSubs[i].ratio)
              textList.push(response.data.hazardTotalSortSubs[i].ratio+'%')
              num++
              if((i+1)==response.data.hazardTotalSortSubs.length){
                maxList.push(list);
                maxList = JSON.parse(JSON.stringify(maxList));
                maxNum.push(numList);
                maxNum = JSON.parse(JSON.stringify(maxNum));
                mxaText.push(textList);
                mxaText = JSON.parse(JSON.stringify(mxaText));
                list = [response.data.hazardTotalSortSubs[i]];
                numList = [response.data.hazardTotalSortSubs[i].ratio];
                textList = [response.data.hazardTotalSortSubs[i].ratio+'%'];
              }
            }else{
              maxList.push(list);
              maxList = JSON.parse(JSON.stringify(maxList));
              maxNum.push(numList);
              maxNum = JSON.parse(JSON.stringify(maxNum));
              mxaText.push(textList);
              mxaText = JSON.parse(JSON.stringify(mxaText));
              list = [response.data.hazardTotalSortSubs[i]];
              numList = [response.data.hazardTotalSortSubs[i].ratio];
              textList = [response.data.hazardTotalSortSubs[i].ratio+'%'];
              num = 1;
            }
          }
          this.$set(this,'maxData',maxList);
          this.$set(this,'maxNum',maxNum);
          this.$set(this,'mxaText',mxaText);
          this.$set(this,'dataIndex',0);
          this.setData();
        });
      },
      eChartsMethod(list,text) {
        let msg = {
          data: this.maxNum[this.dataIndex],
          total: 100,
          percentdata: this.mxaText[this.dataIndex],
          leftname: [
            '',
            '',
            '',
            '',
            ''
          ]
        }
        let data = []
        let data2 = []
        let totaldata = []
        let percentdata = []
        msg.data.forEach((value)=>{
          totaldata.push(100)
          data.push((55 * value) / 100)
          data2.push(100)
          percentdata.push(Math.round((value / msg.total) * 100) + '%')
        })
        let fillImg = 'data:image/png;base64,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'
        let fillImg2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAQCAYAAAAf1qhIAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADoSURBVHic7dwxisMwEEBRyQHBNql1Ft8fn0V1mgVBUJo1iDQWrAsbvVfZ419MN53jtm0/OednrfURQggppXcp5bWu62/4M9KMdhqNRnPn5kq7/LdZ+mEIIdRaHznn5/7eWotHzWin0Wg0d26utMsZzdIP+4/7c4yxHTWjnUaj0dy5udIuZzTL9xCAOTgAAJNyAAAm5QAATMoBAJiUAwAwKQcAYFIOAMCkHACASTkAAJNyAAAmtaSU3t/DftZai0fNaKfRaDR3bq60yxnNUkp59R/334Tu7zHGdtSMdhqNRnPn5kq7nNF8AE2zWuT1ZhqKAAAAAElFTkSuQmCC'
        let option = {
          grid: {
            top: '4%',
            left: '4.5%',
            bottom: '4%'
          },
          xAxis: [
            {
              show: false
            }
          ],
          yAxis: [
            {
              name: '',
              nameGap: '50',
              nameTextStyle: {
                color: '#000',
                fontSize: '16'
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: []
            }
          ],
          series: [
            {
              name: '', // blue bar
              type: 'pictorialBar',
              symbol: 'image://' + fillImg2,
              barWidth: '100%',
              symbolOffset: [0, 0],
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: '#6DE8FA'
                }
              },
              symbolSize: ['55%', 16],
              symbolBoundingData: 100,
              symbolClip: true,
              data: data2,
              label: {
                normal: {
                  show: false
                }
              },
              animationEasing: 'elasticOut'
            },
            {
              name: '', // blue bar
              type: 'pictorialBar',
              symbol: 'image://' + fillImg,
              barWidth: '100%',
              symbolOffset: [0, 0],
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: '#6DE8FA'
                }
              },
              symbolSize: ['55%', 16],
              symbolBoundingData: 100,
              symbolClip: true,
              data: data,
              label: {
                normal: {
                  show: false
                }
              },
              animationEasing: 'elasticOut'
            }
          ]
        }
        let echartsBox = this.$echarts.init(document.getElementById('dangerComponentsECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .dangerComponents {
    height: 492px;
    width: 800px;
    .eCharts-max-big-box {
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      .danger-num {
        width:731px;
        height: 80px;
        margin:20px 34px 0;
        background: no-repeat;
        background-image: url("../../../assets/ZDimages/img_bg_wxytj@1x.png");
        background-size: 100%;
        display: flex;
        .danger-left-box{
          display: flex;
          margin:22px 0 0 90px;
          height: 36px;
          p:nth-child(1){
            line-height:36px;
            font-size:24px;
            color:#fff;
          }
          p:nth-child(2){
            width:105px;
            text-align: right;
            line-height:36px;
            font-size:36px;
            background: -webkit-linear-gradient(0deg, #FFD7BA, #FF6A00); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFD7BA, #FF6A00); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
            font-family: 'alimmFonts', sans-serif;
          }
        }
        .danger-right-box{
          display: flex;
          margin:22px 0 0 0;
          height: 36px;
          p:nth-child(1){
            margin-left:80px;
            line-height:36px;
            font-size:24px;
            color:#fff;
          }
          p:nth-child(2){
            line-height:36px;
            font-size:36px;
            width:85px;
            text-align: right;
            background: -webkit-linear-gradient(0deg, #FFD7BA, #FF6A00); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFD7BA, #FF6A00); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
            font-family: 'alimmFonts', sans-serif;
          }
        }
      }
      #dangerComponentsECharts {
        width: 800px;
        height: 330px;
      }
      .position-num-max-name-box{
        z-index:5;
        position: absolute;
        top:112px;
        left:35px;
        div{
          color:#fff;
          line-height:18px;
          font-size:18px;
          margin-bottom:43px;
        }
      }
      .position-num-max-big-box{
        z-index:5;
        position: absolute;
        top:135px;
        left:450px;
        .position-for-box{
          display: flex;
          p{
            color:#fff;
            line-height:18px;
            font-size:18px;
            margin-bottom:43px;
          }
          p:nth-child(1){
          }
          p:nth-child(2){
            padding:0 8px;
          }
          p:nth-child(3){
          }
          p:nth-child(4){
            padding:0 8px;
          }
          p:nth-child(5){
          }
        }
      }
    }
  }
</style>