Merge remote-tracking branch 'origin/master'

xiangpei

2024-03-18 987027d23b3a1b5935d36de691a19749b4778432

 src/views/screen/components/screen-detection/index.vue

New file
@@ -0,0 +1,91 @@
<template>
  <div class="detection-container">
    <wrapper-title :title="'运行监控数据'"></wrapper-title>

    <div class="detection-content">
      <div class="water-item">
        <dv-water-level-pond :config="config1" style="width:100px;height:100px" />
        <div class="water-num water-text">6250/0</div>
        <div class="water-label water-text">接入率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config2" style="width:100px;height:100px" />
        <div class="water-num water-text">6236/6250</div>
        <div class="water-label water-text">GIS率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config3" style="width:100px;height:100px" />
        <div class="water-num water-text">5962/6250</div>
        <div class="water-label water-text">在线率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config4" style="width:100px;height:100px" />
        <div class="water-num water-text">5255/5962</div>
        <div class="water-label water-text">完好率</div>
      </div>
    </div>
  </div>
</template>

<script>
import WrapperTitle from '../wrapper-title/index';
export default {
  components: {
    WrapperTitle
  },
  data() {
    return {
      config1: {
        data: [0],
        shape: 'round',
        waveHeight: 5
      },
      config2: {
        data: [99.77],
        shape: 'round',
        waveHeight: 5
      },
      config3: {
        data: [95.39],
        shape: 'round',
        waveHeight: 5
      },
      config4: {
        data: [88.14],
        shape: 'round',
        waveHeight: 5
      },
    }
  }
}
</script>

<style lang="scss" scoped>

.detection-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  padding: 20px 20px;
}

.water-item {
  font-size: 16px;
  color: #fff;

  .water-text {
    text-align: center;
  }

  .water-num {
    margin-top: 20px;
  }

  .water-label {
    font-size: 20px;
  }
}
</style>