v3-school-widescreen-web/src/views/cengterMaxBox/secondaryCollegeUnitLaboratoryStatistics/index.vue

<!-- 二级学院单位实验室统计 -->
<template>
  <div class="secondaryCollegeUnitLaboratoryStatistics">
    <div class="secondaryCollegeUnitLaboratoryStatistics-title">
      <p>二级学院单位实验室统计</p>
    </div>
    <div class="secondaryCollegeUnitLaboratoryStatisticsPage" id="secondaryCollegeUnitLaboratoryStatisticsECharts">
    </div>
  </div>
</template>
<script>
  import { laboratorySubRelInfoLabStateStatisticsAll } from "@/api/index";
  export default {
    name: 'index',
    data () {
      return {
        //echarts数据
        echartsBox:null,
        // 定时器
        echartsTimer:null,
        minTimer:null,
        //数据
        dataList:[],
        numIndex:0,
        maxNum: 0,
      }
    },
    created () {

    },
    mounted () {
      this.getList();
      this.timeFunction();
    },
    methods: {
      getList(){
        laboratorySubRelInfoLabStateStatisticsAll().then(response => {
          this.$set(this,'numIndex',0);
          this.$set(this,'maxNum',response.data.labLevelVOList.length-1);
          response.data.labLevelVOList.forEach((item)=>{
            item.num = item.levelOneCount + item.levelTwoCount + item.levelThreeCount + item.levelFourCount;
          })
          response.data.labLevelVOList = response.data.labLevelVOList.slice().sort((a, b) => b.num - a.num);
          this.$set(this,'dataList',response.data.labLevelVOList);
          this.minTimeFunction();
          // let obj = {
          //   nameList:[],
          //   dataListA : [],
          //   dataListB : [],
          //   dataListC : [],
          //   dataListD : [],
          //   dataListE : [],
          // };
          // const maxNum = response.data.labLevelVOList[0].levelOneCount + response.data.labLevelVOList[0].levelTwoCount + response.data.labLevelVOList[0].levelThreeCount + response.data.labLevelVOList[0].levelFourCount
          // response.data.labLevelVOList.forEach((item)=>{
          //   let num = item.levelOneCount+item.levelTwoCount+item.levelThreeCount+item.levelFourCount
          //   obj.nameList.push(item.deptName)
          //   obj.dataListA.push(item.levelOneCount)
          //   obj.dataListB.push(item.levelTwoCount)
          //   obj.dataListC.push(item.levelThreeCount)
          //   obj.dataListD.push(item.levelFourCount)
          //   obj.dataListE.push({
          //     name:num,
          //     value:maxNum-num
          //   })
          // })
          // this.eChartsMethod(obj);
        })
      },
      minTimeFunction(){
        let self = this;
        showTime();
        if(!this.minTimer){
          this.minTimer = window.setInterval(showTime, 10000);
        }
        function showTime() {
          if(self.dataList[0]){
            let newList = [];
            for(let i=0;i<5;i++){
              if(self.dataList[self.numIndex]){
                newList.push(self.dataList[self.numIndex])
                if(self.numIndex<self.maxNum){
                  self.numIndex++;
                }else{
                  self.numIndex=0;
                  break
                }
              }
            }
            let obj = {
              nameList:[],
              dataListA : [],
              dataListB : [],
              dataListC : [],
              dataListD : [],
              dataListE : [],
            };
            if(newList[0]){
              const maxNum = newList[0].levelOneCount + newList[0].levelTwoCount + newList[0].levelThreeCount + newList[0].levelFourCount
              newList.forEach((item)=>{
                let num = item.levelOneCount+item.levelTwoCount+item.levelThreeCount+item.levelFourCount
                obj.nameList.push(item.deptName)
                obj.dataListA.push(item.levelOneCount)
                obj.dataListB.push(item.levelTwoCount)
                obj.dataListC.push(item.levelThreeCount)
                obj.dataListD.push(item.levelFourCount)
                obj.dataListE.push({
                  name:num,
                  value:maxNum-num
                })
              })
              self.eChartsMethod(obj);
            }
          }
        }
      },
      eChartsMethod(obj){
        let option = {
          title: {
            show:false,
          },
          tooltip: {
            show:false,
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              textStyle: {
                color: "#fff",
              },
            },
            textStyle: {
              color: "#fff",
            },
            backgroundColor: "background: rgba(255,255,255,0.1);", //设置背景颜色
            borderColor: "rgba(255,255,255,0.1)",
            formatter:function (data) {
              return (data.name )
            },
          },
          legend: {
            icon:'rect',
            left: 'center',
            top:'15',
            itemGap:55,
            itemWidth:30,
            itemHeight:10,
            show: true,
            textStyle:{
              fontSize:34,
              color:'#fff',
            },
            data: [
              { name: 'I 级', itemStyle: { color: '#F38181' } }, // 设置系列1图例的文字颜色为红色
              { name: 'II 级', itemStyle: { color: '#D8A746' } }, // 设置系列1图例的文字颜色为红色
              { name: 'III 级', itemStyle: { color: '#3876E1' } }, // 设置系列1图例的文字颜色为红色
              { name: 'IV 级', itemStyle: { color: '#56A757' } }  // 设置系列2图例的文字颜色为绿色
              // 可以继续添加更多系列及其图例颜色配置
            ],
          },
          grid: {
            left: "10%",
            right: "10%",
            bottom: "10%",
            top: "20%",
          },
          xAxis: {
            type: 'category',
            data: obj.nameList,
            axisLabel:{
              color:'#fff',
              fontSize:'30',
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'#41A4FF',
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLabel:{
              color:'#fff',
              fontSize:'30',
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'#41A4FF',
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: 'I 级',
              type: 'bar',
              barWidth: 30,
              stack: '数量',
              data: obj.dataListA,
              itemStyle: {
                normal: {
                  color: {//渐变色
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#D8D8D8',
                      },
                      {
                        offset: 1,
                        color: '#F38181',
                      },
                    ],
                  },
                }
              }
            },
            {
              name: 'II 级',
              type: 'bar',
              barWidth:30,
              stack: '数量',
              data:  obj.dataListB,
              itemStyle: {
                normal: {
                  color: {//渐变色
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#D8D8D8',
                      },
                      {
                        offset: 1,
                        color: '#D8A746',
                      },
                    ],
                  },
                }
              }
            },
            {
              name: 'III 级',
              type: 'bar',
              barWidth: 30,
              stack: '数量',
              data:  obj.dataListC,
              itemStyle: {
                normal: {
                  color: {//渐变色
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#D8D8D8',
                      },
                      {
                        offset: 1,
                        color: '#3876E1',
                      },
                    ],
                  },
                }
              }
            },
            {
              name: 'IV 级',
              type: 'bar',
              barWidth: 30,
              stack: '数量',
              data:  obj.dataListD,
              itemStyle: {
                normal: {
                  color: {//渐变色
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#D8D8D8',
                      },
                      {
                        offset: 1,
                        color: '#56A757',
                      },
                    ],
                  },
                }
              }
            },
            {
              name: '',
              type: 'bar',
              barWidth: 30,
              stack: '数量',
              data:  obj.dataListE,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff', //更改坐标轴文字颜色
                  fontSize: '34',
                },
                formatter: function (data) {
                  return (data.name )
                },
              },
              itemStyle: {
                normal: {
                  color: {//渐变色
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(216,216,216,0.1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(216,216,216,0.1)',
                      },
                    ],
                  },
                }
              }
            },

          ]
        };
        this.echartsBox = this.$echarts.init(document.getElementById('secondaryCollegeUnitLaboratoryStatisticsECharts'));
        this.echartsBox.clear();
        this.echartsBox.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">
  .secondaryCollegeUnitLaboratoryStatistics{
    margin: 16px 0 0 88px;
    .secondaryCollegeUnitLaboratoryStatistics-title{
      width:796px;
      height:84px;
      background: url("../../../assets/ZDimages/img_sy_fbt@1x.png");
      background-size: 100%;
      overflow: hidden;
      p{
        font-size:40px;
        line-height:40px;
        margin:18px 0 0 85px;
        font-weight:700;
        background: -webkit-linear-gradient(0deg, #0591F3, #FFFFFF); /* Chrome, Safari */
        background: linear-gradient(0deg, #0591F3, #FFFFFF); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 其他浏览器 */

      }
    }
    .secondaryCollegeUnitLaboratoryStatisticsPage{
      height:665px;
      width:1167px;
    }
  }
</style>