lg_frontend/components/WarningStatistics.vue

<!--智能预警统计-->
<template>
  <div class="warning-statistics">
    <secondary-title :title="title"/>
    <div class="warning-statistics-info">
      <div class="warning-total-info">
        <div class="warning-data">
          <div class="warning-icon"></div>
          <div class="_title">报警总数</div>
          <div class="_value">234</div>
        </div>
      </div>

      <third-level-label :title="warningTypeTitle"/>

      <div class="warning-type-pie">
        <div class="_bg"></div>
        <warning-type-chart :data-source="warningTypeDataSource"/>
      </div>
    </div>
  </div>
</template>

<script>
import WarningTypeChart from "@/components/charts/WarningTypeChart";

export default {
  name: "WarningStatistics",
  components: {WarningTypeChart},
  data() {
    return {
      title: '智能预警统计',
      warningTypeTitle: '报警类型分布',
      warningTypeDataSource: [
        {
          name: '断电掉线',
          value: 214,
          rate: '38%'
        },
        {
          name: '区域入侵',
          value: 342,
          rate: '32%'
        },
        {
          name: '污染超标',
          value: 12,
          rate: '30%'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.warning-statistics {
  margin-top: 43px;
  height: 784px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
  .flex-column;

  .warning-statistics-info {
    flex: 1;
    height: 0;
    padding: 0 50px;
    .flex-column;

    .warning-total-info {
      height: 238px;
      .flex-row;

      .warning-data {
        width: 100%;
        height: 152px;
        background: rgba(1, 120, 198, 0.30);
        .flex-row;
        justify-content: space-around;

        .warning-icon {
          width: 194px;
          height: 114px;
          .bg("~/assets/peakCoalImages/right/warning-icon.png");
        }

        ._title {
          font-family: MicrosoftYaHei;
          font-size: 34.3px;
          color: #6AC4FF;
          letter-spacing: 2.26px;
          font-weight: 400;
        }

        ._value {
          font-family: YouSheBiaoTiHei;
          font-size: 85.76px;
          color: #FFFFFF;
          letter-spacing: 5.64px;
          font-weight: 400;
        }
      }
    }

    .warning-type-pie {
      flex: 1;
      height: 0;
      position: relative;
      ._bg{
        position: absolute;
        width: 314px;
        height: 313px;
        background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat 16px 48px;
        background-size: 100% 100%;
      }
    }
  }
}
</style>