<template>
  <div class="resourceReservationComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="resourceReservationComponentECharts-box">
        <div style="display: flex;">
          <div class="equipmentDangerComponentECharts-1" v-show="data1">
            <div>
              <p class="title-p">{{dataName1}}</p>
              <div id="equipmentDangerComponentECharts1"></div>
            </div>
            <div>
              <div class="bottom-num-box">
                <div class="top-text-num-box">
                  <p>总数</p>
                  <p>{{data1.equNumber}}</p>
                </div>
                <div class="bottom-text-num-box">
                  <div class="bottom-left-text-num-box">
                    <div>
                      <p></p>
                      <p>已使用</p>
                    </div>
                    <p class="num-p">{{data1.usedNumber}}</p>
                  </div>
                  <div class="bottom-right-text-num-box">
                    <div>
                      <p></p>
                      <p>未使用</p>
                    </div>
                    <p class="num-p">{{data1.noUseNumber}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="equipmentDangerComponentECharts-2" v-show="data2">
            <div>
              <p class="title-p">{{dataName2}}</p>
              <div id="equipmentDangerComponentECharts2"></div>
            </div>
            <div>
              <div class="bottom-num-box">
                <div class="top-text-num-box">
                  <p>总数</p>
                  <p>{{data2.equNumber}}</p>
                </div>
                <div class="bottom-text-num-box">
                  <div class="bottom-left-text-num-box">
                    <div>
                      <p></p>
                      <p>已使用</p>
                    </div>
                    <p class="num-p">{{data2.usedNumber}}</p>
                  </div>
                  <div class="bottom-right-text-num-box">
                    <div>
                      <p></p>
                      <p>未使用</p>
                    </div>
                    <p class="num-p">{{data2.noUseNumber}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <div class="equipmentDangerComponentECharts-3" v-show="data3">
            <div>
              <p class="title-p">{{dataName3}}</p>
              <div id="equipmentDangerComponentECharts3"></div>
            </div>
            <div>
              <div class="bottom-num-box">
                <div class="top-text-num-box">
                  <p>总数</p>
                  <p>{{data3.equNumber}}</p>
                </div>
                <div class="bottom-text-num-box">
                  <div class="bottom-left-text-num-box">
                    <div>
                      <p></p>
                      <p>已使用</p>
                    </div>
                    <p class="num-p">{{data3.usedNumber}}</p>
                  </div>
                  <div class="bottom-right-text-num-box">
                    <div>
                      <p></p>
                      <p>未使用</p>
                    </div>
                    <p class="num-p">{{data3.noUseNumber}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="equipmentDangerComponentECharts-4" v-show="data4">
            <div>
              <p class="title-p">{{dataName4}}</p>
              <div id="equipmentDangerComponentECharts4"></div>
            </div>
            <div>
              <div class="bottom-num-box">
                <div class="top-text-num-box">
                  <p>总数</p>
                  <p>{{data4.equNumber}}</p>
                </div>
                <div class="bottom-text-num-box">
                  <div class="bottom-left-text-num-box">
                    <div>
                      <p></p>
                      <p>已使用</p>
                    </div>
                    <p class="num-p">{{data4.usedNumber}}</p>
                  </div>
                  <div class="bottom-right-text-num-box">
                    <div>
                      <p></p>
                      <p>未使用</p>
                    </div>
                    <p class="num-p">{{data4.noUseNumber}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reportReportBsResourceRateRresourceList,
} from "@/api/index";
  import "echarts-liquidfill/src/liquidFill.js"
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'resourceReservationComponent',
    components: {
      titlePageImgComponents
    },
    data() {
      return {
        propsData: {
          title: '资源预约情况概览'
        },
        dataName1:null,
        dataName2:null,
        dataName3:null,
        dataName4:null,
        data1:false,
        data2:false,
        data3:false,
        data4:false,
        eChartsTimer:null,
      }
    },
    created() {

    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsResourceRateRresourceList().then(response => {
          if(response.data[0]){
            this.$set(this,'dataName1',response.data[0].equType);
            this.$set(this,'data1',response.data[0]);
            let num = response.data[0].useRate/100;
            let text = response.data[0].useRate+'%'
            this.eChartsMethod1(num,text);
          }else{
            this.$set(this,'data1',false);
          }
          if(response.data[1]){
            this.$set(this,'dataName2',response.data[1].equType);
            this.$set(this,'data2',response.data[1]);
            let num = response.data[1].useRate/100;
            let text = response.data[1].useRate+'%'
            this.eChartsMethod2(num,text);
          }else{
            this.$set(this,'data2',false);
          }
          if(response.data[2]){
            this.$set(this,'dataName3',response.data[2].equType);
            this.$set(this,'data3',response.data[2]);
            let num = response.data[2].useRate/100;
            let text = response.data[2].useRate+'%'
            this.eChartsMethod3(num,text);
          }else{
            this.$set(this,'data3',false);
          }
          if(response.data[3]){
            this.$set(this,'dataName4',response.data[3].equType);
            this.$set(this,'data4',response.data[3]);
            let num = response.data[3].useRate/100;
            let text = response.data[3].useRate+'%'
            this.eChartsMethod4(num,text);
          }else{
            this.$set(this,'data4',false);
          }

        })
      },
      eChartsMethod1(num,text) {
        //水球中心
        let color1 = 'rgba(255,161,0,0)'
        let color2 = 'rgba(255,161,0,0)'
        let color3 = 'rgba(255,161,0,0.1)'
        //波浪1
        let color4 = 'rgba(255,161,0,0.5)'
        let color5 = 'rgba(255,161,0,1)'
        //波浪2
        let color6 = 'rgba(255,161,0,0.5)'
        let color7 = 'rgba(255,161,0,1)'
        //边框
        let color8 = "rgba(255,161,0, 1)"
        let color9 = "rgba(255,161,0, 0)"
        // 水球内部数据--蓝色
        let value = num
        // 水球颞部数据--灰色
        let option = {
          // 圆环内部文字
          title: [
            {
              text: '使用率',
              left: '46%',
              top: '20%',
              textAlign: 'center',
              textStyle: {
                fontSize: 20,
                fontWeight: '400',
                color: '#fff',
                textAlign: 'center'
              }
            },
            {
              text: text,
              left: '50%',
              top: '50%',
              textAlign: 'center',
              textStyle: {
                fontSize: 30,
                fontWeight: '400',
                color: '#fff'
              }
            }
          ],
          series: [{
            type: 'liquidFill',
            radius: '90%',
            z: 6,
            center: ['50%', '50%'],
            amplitude: 20,
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: color1
                  },
                  {
                    offset: 0.8,
                    color: color2
                  },
                  {
                    offset: 1,
                    color: color3
                  }
                ],
                globalCoord: false
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color6
                  },
                  {
                    offset: 0,
                    color: color7
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value + 0.02,
              {
                value: value - 0.01,
                direction: 'left'
              },
              value - 0.01
            ],
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
            {
              //外发光
              type: 'pie',
              z: 1,
              zlevel: -1,
              radius: ['98%', '100%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                normal: {
                  borderWidth: 20,
                  // color: color8

                  color: {//渐变色
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: color8,
                      },
                      {
                        offset: 1,
                        color: color9,
                      },
                    ],
                  },
                }
              },
              label: {
                show: false
              },
              data: [100]
            }
          ]
        }
        let echartsBox = this.$echarts.init(document.getElementById('equipmentDangerComponentECharts1'))
        echartsBox.clear()
        echartsBox.setOption(option)
      },
      eChartsMethod2(num,text) {
        //水球中心
        let color1 = 'rgba(0,161,53,0)'
        let color2 = 'rgba(0,161,53,0)'
        let color3 = 'rgba(0,161,53,0.1)'
        //波浪1
        let color4 = 'rgba(0,161,53,0.5)'
        let color5 = 'rgba(0,161,53,1)'
        //波浪2
        let color6 = 'rgba(0,161,53,0.5)'
        let color7 = 'rgba(0,161,53,1)'
        //边框
        let color8 = "rgba(0,161,53, 1)"
        let color9 = "rgba(0,161,53, 0)"
        // 水球内部数据--蓝色
        let value = num
        let option = {
          // 圆环内部文字
          title: [
            {
              text: '使用率',
              left: '46%',
              top: '20%',
              textAlign: 'center',
              textStyle: {
                fontSize: 20,
                fontWeight: '400',
                color: '#fff',
                textAlign: 'center'
              }
            },
            {
              text: text,
              left: '50%',
              top: '50%',
              textAlign: 'center',
              textStyle: {
                fontSize: 30,
                fontWeight: '400',
                color: '#fff'
              }
            }
          ],
          series: [{
            type: 'liquidFill',
            radius: '90%',
            z: 6,
            center: ['50%', '50%'],
            amplitude: 20,
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: color1
                  },
                  {
                    offset: 0.8,
                    color: color2
                  },
                  {
                    offset: 1,
                    color: color3
                  }
                ],
                globalCoord: false
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color6
                  },
                  {
                    offset: 0,
                    color: color7
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value + 0.02,
              {
                value: value - 0.01,
                direction: 'left'
              },
              value - 0.01
            ],
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
            {
              //外发光
              type: 'pie',
              z: 1,
              zlevel: -1,
              radius: ['98%', '100%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                normal: {
                  borderWidth: 20,
                  // color: color8

                  color: {//渐变色
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: color8,
                      },
                      {
                        offset: 1,
                        color: color9,
                      },
                    ],
                  },
                }
              },
              label: {
                show: false
              },
              data: [100]
            }
          ]
        }
        let echartsBox = this.$echarts.init(document.getElementById('equipmentDangerComponentECharts2'))
        echartsBox.clear()
        echartsBox.setOption(option)
      },
      eChartsMethod3(num,text) {
        //水球中心
        let color1 = 'rgba(0,230,255,0)'
        let color2 = 'rgba(0,230,255,0)'
        let color3 = 'rgba(0,230,255,0.1)'
        //波浪1
        let color4 = 'rgba(0,230,255,0.5)'
        let color5 = 'rgba(0,230,255,1)'
        //波浪2
        let color6 = 'rgba(0,230,255,0.5)'
        let color7 = 'rgba(0,230,255,1)'
        //边框
        let color8 = "rgba(0,230,255, 1)"
        let color9 = "rgba(0,230,255, 0)"
        // 水球内部数据--蓝色
        let value = num
        let option = {
          // 圆环内部文字
          title: [
            {
              text: '使用率',
              left: '46%',
              top: '20%',
              textAlign: 'center',
              textStyle: {
                fontSize: 20,
                fontWeight: '400',
                color: '#fff',
                textAlign: 'center'
              }
            },
            {
              text: text,
              left: '50%',
              top: '50%',
              textAlign: 'center',
              textStyle: {
                fontSize: 30,
                fontWeight: '400',
                color: '#fff'
              }
            }
          ],
          series: [{
            type: 'liquidFill',
            radius: '90%',
            z: 6,
            center: ['50%', '50%'],
            amplitude: 20,
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: color1
                  },
                  {
                    offset: 0.8,
                    color: color2
                  },
                  {
                    offset: 1,
                    color: color3
                  }
                ],
                globalCoord: false
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color6
                  },
                  {
                    offset: 0,
                    color: color7
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value + 0.02,
              {
                value: value - 0.01,
                direction: 'left'
              },
              value - 0.01
            ],
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
            {
              //外发光
              type: 'pie',
              z: 1,
              zlevel: -1,
              radius: ['98%', '100%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                normal: {
                  borderWidth: 20,
                  // color: color8

                  color: {//渐变色
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: color8,
                      },
                      {
                        offset: 1,
                        color: color9,
                      },
                    ],
                  },
                }
              },
              label: {
                show: false
              },
              data: [100]
            }
          ]
        }
        let echartsBox = this.$echarts.init(document.getElementById('equipmentDangerComponentECharts3'))
        echartsBox.clear()
        echartsBox.setOption(option)
      },
      eChartsMethod4(num,text) {
        //水球中心
        let color1 = 'rgba(1,131,250,0)'
        let color2 = 'rgba(1,131,250,0)'
        let color3 = 'rgba(1,131,250,0.1)'
        //波浪1
        let color4 = 'rgba(1,131,250,0.5)'
        let color5 = 'rgba(1,131,250,1)'
        //波浪2
        let color6 = 'rgba(1,131,250,0.5)'
        let color7 = 'rgba(1,131,250,1)'
        //边框
        let color8 = "rgba(1,131,250, 1)"
        let color9 = "rgba(1,131,250, 0)"
        // 水球内部数据--蓝色
        let value = num
        let option = {
          // 圆环内部文字
          title: [
            {
              text: '使用率',
              left: '46%',
              top: '20%',
              textAlign: 'center',
              textStyle: {
                fontSize: 20,
                fontWeight: '400',
                color: '#fff',
                textAlign: 'center'
              }
            },
            {
              text: text,
              left: '50%',
              top: '50%',
              textAlign: 'center',
              textStyle: {
                fontSize: 30,
                fontWeight: '400',
                color: '#fff'
              }
            }
          ],
          series: [{
            type: 'liquidFill',
            radius: '90%',
            z: 6,
            center: ['50%', '50%'],
            amplitude: 20,
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: color1
                  },
                  {
                    offset: 0.8,
                    color: color2
                  },
                  {
                    offset: 1,
                    color: color3
                  }
                ],
                globalCoord: false
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color4
                  },
                  {
                    offset: 0,
                    color: color5
                  }
                ],
                globalCoord: false
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: color6
                  },
                  {
                    offset: 0,
                    color: color7
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value + 0.02,
              {
                value: value - 0.01,
                direction: 'left'
              },
              value - 0.01
            ],
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
            {
              //外发光
              type: 'pie',
              z: 1,
              zlevel: -1,
              radius: ['98%', '100%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                normal: {
                  borderWidth: 20,
                  // color: color8

                  color: {//渐变色
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: color8,
                      },
                      {
                        offset: 1,
                        color: color9,
                      },
                    ],
                  },
                }
              },
              label: {
                show: false
              },
              data: [100]
            }
          ]
        }
        let echartsBox = this.$echarts.init(document.getElementById('equipmentDangerComponentECharts4'))
        echartsBox.clear()
        echartsBox.setOption(option)
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer)
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer)
    }
  }
</script>
<style scoped lang="scss">
  .resourceReservationComponent {
    height: 472px;
    width: 680px;
    .eCharts-max-big-box {
      height: 410px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      .resourceReservationComponentECharts-box {
        width: 680px;
        height: 410px;
        .equipmentDangerComponentECharts-1 {
          width: 340px;
          height: 205px;
          display: flex;
          .title-p {
            width: 106px;
            height: 36px;
            background: no-repeat;
            color: #fff;
            text-align: center;
            line-height: 36px;
            background-image: url("../../../assets/ZDimages/img_bg_ws@1x.png");
            background-size: 100%;
            margin: 20px 0 0 30px;
          }
          #equipmentDangerComponentECharts1 {
            width: 129px;
            height: 129px;
            margin:11px 0 0 20px;
          }
          .bottom-num-box {
            width:170px;
            .top-text-num-box{
              display: flex;
              margin-top: 70px;
              margin-left: 20px;
              p{
                line-height:40px;
              }
              p:nth-child(1){
                color:#fff;
                font-size:18px;
              }
              p:nth-child(2){
                color:#0183FA;
                font-size:20px;
                margin-left:10px;
              }
            }
            .bottom-text-num-box{
              display: flex;
              .bottom-left-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #FF6A00;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#FF6A00;
                  font-size:18px;
                  text-align: right;
                }
              }
              .bottom-right-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #06CA47;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#06CA47;
                  font-size:18px;
                  text-align: right;
                }
              }
            }
          }
        }
        .equipmentDangerComponentECharts-2 {
          width: 340px;
          height: 205px;
          display: flex;
          .title-p {
            width: 106px;
            height: 36px;
            background: no-repeat;
            color: #fff;
            text-align: center;
            line-height: 36px;
            background-image: url("../../../assets/ZDimages/img_bg_ws@1x.png");
            background-size: 100%;
            margin: 20px 0 0 20px;
          }
          #equipmentDangerComponentECharts2 {
            width: 129px;
            height: 129px;
            margin:11px 0 0 10px;
          }
          .bottom-num-box {
            width:170px;
            .top-text-num-box{
              display: flex;
              margin-top: 70px;
              margin-left: 20px;
              p{
                line-height:40px;
              }
              p:nth-child(1){
                color:#fff;
                font-size:18px;
              }
              p:nth-child(2){
                color:#0183FA;
                font-size:20px;
                margin-left:10px;
              }
            }
            .bottom-text-num-box{
              display: flex;
              .bottom-left-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #FF6A00;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#FF6A00;
                  font-size:18px;
                  text-align: right;
                }
              }
              .bottom-right-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #06CA47;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#06CA47;
                  font-size:18px;
                  text-align: right;
                }
              }
            }
          }
        }
        .equipmentDangerComponentECharts-3 {
          width: 340px;
          height: 205px;
          display: flex;
          .title-p {
            width: 106px;
            height: 36px;
            background: no-repeat;
            color: #fff;
            text-align: center;
            line-height: 36px;
            background-image: url("../../../assets/ZDimages/img_bg_ws@1x.png");
            background-size: 100%;
            margin: 10px 0 0 30px;
          }
          #equipmentDangerComponentECharts3 {
            width: 129px;
            height: 129px;
            margin:11px 0 0 20px;
          }
          .bottom-num-box {
            width:170px;
            .top-text-num-box{
              display: flex;
              margin-top: 70px;
              margin-left: 20px;
              p{
                line-height:40px;
              }
              p:nth-child(1){
                color:#fff;
                font-size:18px;
              }
              p:nth-child(2){
                color:#0183FA;
                font-size:20px;
                margin-left:10px;
              }
            }
            .bottom-text-num-box{
              display: flex;
              .bottom-left-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #FF6A00;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#FF6A00;
                  font-size:18px;
                  text-align: right;
                }
              }
              .bottom-right-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #06CA47;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#06CA47;
                  font-size:18px;
                  text-align: right;
                }
              }
            }
          }
        }
        .equipmentDangerComponentECharts-4 {
          width: 340px;
          height: 205px;
          display: flex;
          .title-p {
            width: 106px;
            height: 36px;
            background: no-repeat;
            color: #fff;
            text-align: center;
            line-height: 36px;
            background-image: url("../../../assets/ZDimages/img_bg_ws@1x.png");
            background-size: 100%;
            margin: 10px 0 0 20px;
          }
          #equipmentDangerComponentECharts4 {
            width: 129px;
            height: 129px;
            margin:11px 0 0 10px;
          }
          .bottom-num-box {
            width:170px;
            .top-text-num-box{
              display: flex;
              margin-top: 70px;
              margin-left: 20px;
              p{
                line-height:40px;
              }
              p:nth-child(1){
                color:#fff;
                font-size:18px;
              }
              p:nth-child(2){
                color:#0183FA;
                font-size:20px;
                margin-left:10px;
              }
            }
            .bottom-text-num-box{
              display: flex;
              .bottom-left-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #FF6A00;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#FF6A00;
                  font-size:18px;
                  text-align: right;
                }
              }
              .bottom-right-text-num-box{
                width:85px;
                div{
                  display: flex;
                  margin-left:15px;
                  width:70px;
                  p:nth-child(1){
                    width:10px;
                    height:10px;
                    background-color: #06CA47;
                    border-radius:50%;
                    margin-top:10px;
                  }
                  p:nth-child(2){
                    line-height:30px;
                    color:#fff;
                    font-size:16px;
                    margin-left:6px;
                    flex:1;
                    text-align: right;
                  }
                }
                .num-p{
                  line-height:40px;
                  color:#06CA47;
                  font-size:18px;
                  text-align: right;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
