v3-school-level-big-data-web/src/views/newSafetyOverview/pageComponent/laboratoryData.vue

<!-- 实验室实时数据 -->
<template>
  <div class="laboratoryData">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="laboratoryDataPage">
      <div class="top-bxo">
        <div id="laboratoryDataECharts"></div>
        <div class="position-max-box position-top-left">
          <p class="position-title">I 级实验室</p>
          <div class="position-big-box">
            <dv-digital-flop :config="levelOneCount" class="dvDigitalFlop"/>
            <p class="position-right-p">间</p>
          </div>
        </div>
        <div class="position-max-box position-top-right">
          <p class="position-title">II 级实验室</p>
          <div class="position-big-box">
            <dv-digital-flop :config="levelTwoCount" class="dvDigitalFlop"/>
            <p class="position-right-p">间</p>
          </div>
        </div>
        <div class="position-max-box position-bottom-left">
          <p class="position-title">III 级实验室</p>
          <div class="position-big-box">
            <dv-digital-flop :config="levelThreeCount" class="dvDigitalFlop"/>
            <p class="position-right-p">间</p>
          </div>
        </div>
        <div class="position-max-box position-bottom-right">
          <p class="position-title">IV 级实验室</p>
          <div class="position-big-box">
            <dv-digital-flop :config="levelFourCount" class="dvDigitalFlop"/>
            <p class="position-right-p">间</p>
          </div>
        </div>
        <div class="position-center-num-box">
          <p class="position-title">总计</p>
          <dv-digital-flop :config="labTotal" class="dvDigitalFlop"/>
        </div>
      </div>
      <div class="bottomBox">
        <div class="back-box back-box-1">
          <div class="back-min-box">
            <p>使用</p>
            <dv-digital-flop :config="useTotal" class="dvDigitalFlop"/>
            <p>间</p>
          </div>
        </div>
        <div class="back-box back-box-2">
          <div class="back-min-box">
            <p>异常</p>
            <dv-digital-flop :config="exceptionalTotal" class="dvDigitalFlop"/>
            <p>间</p>
          </div>
        </div>
        <div class="back-box back-box-3">
          <div class="back-min-box">
            <p>空闲</p>
            <dv-digital-flop :config="availableTotal" class="dvDigitalFlop"/>
            <p>间</p>
          </div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="bottom-min-box">
          <!--<p class="left-p">科研类：</p>-->
          <!--<p style="width:65px;color:#0183FA;text-align: right;line-height:50px;">- -</p>-->
          <p class="left-p">{{bottomDataName1}}：</p>
          <dv-digital-flop :config="bottomDataTotal1" class="dvDigitalFlop"/>
          <p class="right-p">间</p>
        </div>
        <div class="bottom-min-box">
          <!--<p class="left-p">教学类：</p>-->
          <!--<p style="width:65px;color:#25D748;text-align: right;line-height:50px;">- -</p>-->
          <p class="left-p">{{bottomDataName2}}：</p>
          <dv-digital-flop :config="bottomDataTotal2" class="dvDigitalFlop"/>
          <p class="right-p">间</p>
        </div>
        <div class="bottom-min-box">
          <!--<p class="left-p">公共平台：</p>-->
          <!--<p style="width:65px;color:#00FFFF;text-align: right;line-height:50px;">- -</p>-->
          <p class="left-p">{{bottomDataName3}}：</p>
          <dv-digital-flop :config="bottomDataTotal3" class="dvDigitalFlop"/>
          <p class="right-p">间</p>
        </div>
      </div>
    </div>
    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
  </div>
</template>
<script>
  const configData0 = {
    content: '{nt}',
    textAlign: 'center',
    style: {
      fill: '#fff',
      fontSize: 20,
      fontWeight: 700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientParams: [0, 0, 0, 30]
    }
  }
  const configData1 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#fff',
      fontSize: 30,
      fontWeight: 700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff', '#F38181'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 45]
    }
  }
  const configData2 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#fff',
      fontSize: 30,
      fontWeight: 700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff', '#D8A746'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 45]
    }
  }
  const configData3 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#fff',
      fontSize: 30,
      fontWeight: 700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff', '#539FFC'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 45]
    }
  }
  const configData4 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#fff',
      fontSize: 30,
      fontWeight: 700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff', '#56A757'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith: 'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 45]
    }
  }
  const configData5 = {
    content: '{nt}',
    textAlign: 'center',
    style: {
      fill: '#0586FF',
      fontSize: 16,
      fontWeight: 700,
      fontFamily: 'AlimamaShuHeiTi',
      gradientParams: [0, 0, 0, 20]
    }
  }
  const configData6 = {
    content: '{nt}',
    textAlign: 'center',
    style: {
      fill: '#FF8C00',
      fontSize: 16,
      fontWeight: 700,
      fontFamily: 'AlimamaShuHeiTi',
      gradientParams: [0, 0, 0, 20]
    }
  }
  const configData7 = {
    content: '{nt}',
    textAlign: 'center',
    style: {
      fill: '#25D748',
      fontSize: 16,
      fontWeight: 700,
      fontFamily: 'AlimamaShuHeiTi',
      gradientParams: [0, 0, 0, 20]
    }
  }
  const configData8 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#0183FA',
      fontSize: 16,
      fontFamily: 'AlimamaShuHeiTi',
      gradientParams: [0, 0, 0, 20]
    }
  }
  const configData9 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#25D748',
      fontSize: 16,
      fontFamily: 'AlimamaShuHeiTi',
      gradientParams: [0, 0, 0, 20]
    }
  }
  const configData10 = {
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#00FFFF',
      fontSize: 16,
      fontFamily: 'AlimamaShuHeiTi',
      gradientParams: [0, 0, 0, 20]
    }
  }
  import { laboratorySubRelInfoLabStateStatisticsAll,
    laboratorySubRelInfoGetLabTypeStatistics,} from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'

  export default {
    name: 'index',
    components: {
      titlePageImgComponents
    },
    data() {
      return {
        //组件传参
        propsData: {
          title: '全校实验室实时统计数量'
        },
        //echarts数据
        echartsBox:null,
        // 定时器
        echartsTimer:null,
        labTotal: {
          number: [0],
          content: configData0.content,
          textAlign: configData0.textAlign,
          style: configData0.style
        },
        levelOneCount: {
          number: [0],
          content: configData1.content,
          textAlign: configData1.textAlign,
          style: configData1.style
        },
        levelTwoCount: {
          number: [0],
          content: configData2.content,
          textAlign: configData2.textAlign,
          style: configData2.style
        },
        levelThreeCount: {
          number: [0],
          content: configData3.content,
          textAlign: configData3.textAlign,
          style: configData3.style
        },
        levelFourCount: {
          number: [0],
          content: configData4.content,
          textAlign: configData4.textAlign,
          style: configData4.style
        },
        useTotal: {
          number: [0],
          content: configData5.content,
          textAlign: configData5.textAlign,
          style: configData5.style
        },
        exceptionalTotal: {
          number: [0],
          content: configData6.content,
          textAlign: configData6.textAlign,
          style: configData6.style
        },
        availableTotal: {
          number: [0],
          content: configData7.content,
          textAlign: configData7.textAlign,
          style: configData7.style
        },
        bottomDataTotal1: {
          number: [0],
          content: configData8.content,
          textAlign: configData8.textAlign,
          style: configData8.style
        },
        bottomDataTotal2: {
          number: [0],
          content: configData9.content,
          textAlign: configData9.textAlign,
          style: configData9.style
        },
        bottomDataTotal3: {
          number: [0],
          content: configData10.content,
          textAlign: configData10.textAlign,
          style: configData10.style
        },
        bottomDataName1:'',
        bottomDataName2:'',
        bottomDataName3:'',
      }
    },
    created() {

    },
    mounted() {
      this.getList()
      this.timeFunction();
    },
    methods: {
      getList() {
        laboratorySubRelInfoLabStateStatisticsAll().then(response => {
          this.$set(this, 'labTotal', {
            number: [response.data.labTotal],
            content: configData0.content,
            textAlign: configData0.textAlign,
            style: configData0.style
          })
          this.$set(this, 'levelOneCount', {
            number: [response.data.levelOneCount],
            content: configData1.content,
            textAlign: configData1.textAlign,
            style: configData1.style
          })
          this.$set(this, 'levelTwoCount', {
            number: [response.data.levelTwoCount],
            content: configData2.content,
            textAlign: configData2.textAlign,
            style: configData2.style
          })
          this.$set(this, 'levelThreeCount', {
            number: [response.data.levelThreeCount],
            content: configData3.content,
            textAlign: configData3.textAlign,
            style: configData3.style
          })
          this.$set(this, 'levelFourCount', {
            number: [response.data.levelFourCount],
            content: configData4.content,
            textAlign: configData4.textAlign,
            style: configData4.style
          })
          this.$set(this, 'useTotal', {
            number: [response.data.useTotal],
            content: configData5.content,
            textAlign: configData5.textAlign,
            style: configData5.style
          })
          this.$set(this, 'exceptionalTotal', {
            number: [response.data.exceptionalTotal],
            content: configData6.content,
            textAlign: configData6.textAlign,
            style: configData6.style
          })
          this.$set(this, 'availableTotal', {
            number: [response.data.availableTotal],
            content: configData7.content,
            textAlign: configData7.textAlign,
            style: configData7.style
          })
          const optionsData = [
            {
              name: 'I级',
              value: response.data.levelOneCount,
              itemStyle: {
                color: '#F38181'
              }
            },

            {
              name: 'II级',
              value: response.data.levelTwoCount,
              itemStyle: {
                color: '#D8A746'
              }
            },
            {
              name: 'III级',
              value: response.data.levelThreeCount,
              itemStyle: {
                color: '#539FFC'
              }
            },
            {
              name: 'IIII级',
              value: response.data.levelFourCount,
              itemStyle: {
                color: '#56A757'
              }
            }
          ]
          this.eChartsMethod(optionsData)
        })
        laboratorySubRelInfoGetLabTypeStatistics().then(response => {
          response.data.forEach((item,index)=>{
            if(index == 0){
              this.$set(this,'bottomDataName1',item.subType);
              this.$set(this, 'bottomDataTotal1', {
                number: [item.count],
                content: configData8.content,
                textAlign: configData8.textAlign,
                style: configData8.style
              })
            }else if(index == 1){
              this.$set(this,'bottomDataName2',item.subType);
              this.$set(this, 'bottomDataTotal2', {
                number: [item.count],
                content: configData9.content,
                textAlign: configData9.textAlign,
                style: configData9.style
              })
            }else if(index == 2){
              this.$set(this,'bottomDataName3',item.subType);
              this.$set(this, 'bottomDataTotal3', {
                number: [item.count],
                content: configData10.content,
                textAlign: configData10.textAlign,
                style: configData10.style
              })
            }
          })
        })
      },
      eChartsMethod(optionsData) {
        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
        function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {

          // 计算
          let midRatio = (startRatio + endRatio) / 2

          let startRadian = startRatio * Math.PI * 2
          let endRadian = endRatio * Math.PI * 2
          let midRadian = midRatio * Math.PI * 2

          // 如果只有一个扇形，则不实现选中效果。
          if (startRatio === 0 && endRatio === 1) {
            isSelected = false
          }

          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
          k = typeof k !== 'undefined' ? k : 1 / 3

          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0

          // 计算高亮效果的放大比例（未高亮，则比例为 1）
          let hoverRate = isHovered ? 1.05 : 1

          // 返回曲面参数方程
          return {

            u: {
              min: -Math.PI,
              max: Math.PI * 3,
              step: Math.PI / 32
            },

            v: {
              min: 0,
              max: Math.PI * 2,
              step: Math.PI / 20
            },

            x: function(u, v) {
              if (u < startRadian) {
                return offsetX + Math.cos(startRadian) * (1.4 + Math.cos(v) * k) * hoverRate
              }
              if (u > endRadian) {
                return offsetX + Math.cos(endRadian) * (1.4 + Math.cos(v) * k) * hoverRate
              }
              return offsetX + Math.cos(u) * (1.4 + Math.cos(v) * k) * hoverRate
            },

            y: function(u, v) {
              if (u < startRadian) {
                return offsetY + Math.sin(startRadian) * (1.4 + Math.cos(v) * k) * hoverRate
              }
              if (u > endRadian) {
                return offsetY + Math.sin(endRadian) * (1.4 + Math.cos(v) * k) * hoverRate
              }
              return offsetY + Math.sin(u) * (1.4 + Math.cos(v) * k) * hoverRate
            },

            z: function(u, v) {
              if (u < -Math.PI * 0.5) {
                return Math.sin(u)
              }
              if (u > Math.PI * 2.5) {
                return Math.sin(u)
              }
              return Math.sin(v) > 0 ? 1 * height : -1
            }
          }
        }

        // 生成模拟 3D 饼图的配置项
        function getPie3D(pieData, internalDiameterRatio) {

          let series = []
          let sumValue = 0
          let startValue = 0
          let endValue = 0
          let legendData = []
          let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3

          // 为每一个饼图数据，生成一个 series-surface 配置
          for (let i = 0; i < pieData.length; i++) {

            sumValue += pieData[i].value

            let seriesItem = {
              name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
              type: 'surface',
              parametric: true,
              wireframe: {
                show: false
              },
              pieData: pieData[i],
              pieStatus: {
                selected: false,
                hovered: false,
                k: k
              }
            }

            if (typeof pieData[i].itemStyle != 'undefined') {

              let itemStyle = {}

              typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
              typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null

              seriesItem.itemStyle = itemStyle
            }
            series.push(seriesItem)
          }

          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
          for (let i = 0; i < series.length; i++) {
            endValue = startValue + series[i].pieData.value
            series[i].pieData.startRatio = startValue / sumValue
            series[i].pieData.endRatio = endValue / sumValue
            series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, 20)

            startValue = endValue

            legendData.push(series[i].name)
          }
          return series
        }

        // const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5)
        const series = getPie3D(optionsData, 1.4, 240, 28, 26, 0.5)

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          legend: {
            show: false
          },
          animation: false,
          tooltip: {
            show: false
          },
          title: {
            show: false
          },
          labelLine: {
            show: false
          },
          label: {
            show: false
          },
          xAxis3D: {
            min: -1,
            max: 1
          },
          yAxis3D: {
            min: -1,
            max: 1
          },
          zAxis3D: {
            min: -1,
            max: 1
          },
          grid3D: {
            show: false,
            boxHeight: 1,
            //top: '30%',
            bottom: '50%',
            viewControl: {
              distance: 180,
              alpha: 30,
              beta: 60,

              autoRotate: false // 自动旋转
            }

          },

          series: series
        }

        this.echartsBox = this.$echarts.init(document.getElementById('laboratoryDataECharts'));
        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">
  .laboratoryData {
    width: 652px;
    height: 526px;
    overflow: hidden;
    .laboratoryDataPage {
      width: 650px;
      height: 467px;
      padding:20px 46px;
      background: linear-gradient( 180deg, rgba(4,117,129,0.2) 0%, rgba(0,15,22,0) 100%);
      .top-bxo {
        width: 553px;
        height: 245px;
        background: url("../../../assets/ZDimages/img_syssjbg@1x.png");
        background-size: 100%;
        position: relative;
        #laboratoryDataECharts {
          width:320px;
          height:189px;
          left:116px;
          top:0;
        }
        .position-max-box {
          width: 256px;
          height: 101px;
          position: absolute;
          .position-title {
            color: #fff;
            font-size: 14px;
            margin: 24px 0 0 17px;
          }
          .position-big-box {
            display: flex;
            margin: 15px 0 0 0;
            .dvDigitalFlop {
              line-height: 30px;
              height: 30px;
              width: 85px;
            }
            .position-right-p {
              font-size: 14px;
              line-height: 30px;
              margin-left: 5px;
              color: #fff;
            }
          }
        }
        .position-top-left {
          top: 0;
          left: 0;
        }
        .position-top-right {
          top: 0;
          right: 0;
          .position-title {
            text-align: right;
            margin-right:25px;
          }
          .dvDigitalFlop {
            width: 220px !important;
          }
        }
        .position-bottom-left {
          bottom: 0;
          left: 0;
        }
        .position-bottom-right {
          bottom: 0;
          right: 0;
          .position-title {
            text-align: right;
            margin-right:25px;
          }
          .dvDigitalFlop {
            width: 220px !important;
          }
        }
        .position-center-num-box{
          position: absolute;
          top:75px;
          left:170px;
          .position-title {
            color: #fff;
            font-size: 14px;
            text-align: center;
          }
          .dvDigitalFlop {
            line-height: 30px;
            height: 30px;
            width: 210px;
          }
        }
      }
      .bottomBox {
        display: flex;
        .back-box{
          width:178px;
          height:110px;
          .back-min-box{
            margin-top:38px;
            margin-left:75px;
            display: flex;
            p{
              color:#fff;
              font-size:14px;
              line-height:40px;
            }
            .dvDigitalFlop{
              width:50px;
              height:45px;
              line-height:45px;
            }
          }
        }
        .back-box-1{
          background: url("../../../assets/ZDimages/img_syssjbg_sy@1x.png");
          background-size: 100%;
        }
        .back-box-2{
          margin:0 15px;
          background: url("../../../assets/ZDimages/img_syssjbg_yc@1x.png");
          background-size: 100%;
        }
        .back-box-3{
          background: url("../../../assets/ZDimages/img_syssjbg_kx@1x.png");
          background-size: 100%;
        }
      }
      .bottom-box{
        display: flex;
        .bottom-min-box:nth-child(2){
          margin:0 8px;
        }
        .bottom-min-box{
          width:182px;
          height:50px;
          background: url("../../../assets/ZDimages/img_yjczbg.png");
          background-size: 100%;
          display: flex;
          .left-p{
            margin-left:14px;
            font-size:14px;
            color:#fff;
            text-align: left;
            line-height: 50px;
            /*width:80px;*/
            flex:1;
          }
          .dvDigitalFlop {
            line-height: 50px;
            height: 50px;
            width: 50px;
          }
          .right-p{
            font-size:14px;
            color:#fff;
            line-height: 50px;
            width:24px;
            margin-left:5px;
          }
        }
      }
    }
  }
</style>