feat:运行监控模块

ZhangXianQiang

2024-03-18 a4cbbcb82bf6b5f09df1455f6436e4dd8047704a

feat:运行监控模块

 src/permission.js

@@ -8,7 +8,7 @@

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/register']
const whiteList = ['/login', '/register', '/screen']

router.beforeEach((to, from, next) => {
  NProgress.start()

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

New file
@@ -0,0 +1,108 @@
<template>
  <div class="detection-container">
    <div class="title-container">
      <span class="title">运行监控数据</span>
    </div>
    <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>
export default {
  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>
.title-container {
  background-image: url("../../../../assets/images/screen/title_bg.png");
  background-size: 231px 100%;
  background-repeat: no-repeat;
  height: 38px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .title {
    margin-left: 20px;
    margin-top: -2px;
    color: #fff;
    letter-spacing: 2px;
    font-size: 20px;
    font-style: italic;
  }
}

.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: 18px;
  color: #fff;

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

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

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

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

@@ -5,7 +5,7 @@
        <screen-face></screen-face>
      </div>
      <div class="center-container wrapper">

        <screen-detection></screen-detection>
      </div>
      <div class="right-container wrapper">

@@ -16,10 +16,12 @@

<script>
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
export default {
  name: 'ScreenWrapper',
  components: {
    ScreenFace
    ScreenFace,
    ScreenDetection
  },
}
</script>

 src/views/screen/components/select-item/index.vue