feat:视频设备

ZhangXianQiang

2024-03-19 16928e832ba2779e238653721633c5efbbd7daf3

feat:视频设备

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

@@ -3,8 +3,8 @@
    <wrapper-title :title="'考核成绩数据'"></wrapper-title>
    <div class="examine-content">
      <div class="examine-wrapper">
        <examine-chart class="wrapper-item"></examine-chart>
        <examine-table class="wrapper-item"></examine-table>
        <examine-chart class="wrapper-item"></examine-chart>
      </div>
    </div>
  </div>

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

New file
@@ -0,0 +1,149 @@
<template>
  <div class="video-container">
    <wrapper-title :title="'视频设备'"></wrapper-title>
    <div class="video-content">
      <div class="video-plane">
        <dv-border-box-13 class="panel">
          <div class="panel-container">
            <div class="top-container">
              <div class="data-item">
                <dv-decoration-9 style="width:120px;height:120px;">
                  <div class="data-num type1">1156</div>
                </dv-decoration-9>
                <div class="data-label">设备总数</div>
              </div>
              <div class="data-item">
                <dv-decoration-9 style="width:120px;height:120px;">
                  <div class="data-num type2">1000</div>
                </dv-decoration-9>
                <div class="data-label">正常数</div>
              </div>
            </div>
            <div class="bottom-container">
              <div class="data-item">
                <dv-decoration-9 style="width:120px;height:120px;">
                  <div class="data-num type3">156</div>
                </dv-decoration-9>
                <div class="data-label">异常数</div>
              </div>
              <div class="data-item">
                <dv-decoration-9 style="width:120px;height:120px;">
                  <div class="data-num type4">75</div>
                </dv-decoration-9>
                <div class="data-label">生成异常工单数</div>
              </div>
              <div class="data-item">
                <dv-decoration-9 style="width:120px;height:120px;">
                  <div class="data-num type5">91.36%</div>
                </dv-decoration-9>
                <div class="data-label">设备运行率</div>
              </div>
            </div>


          </div>

        </dv-border-box-13>
      </div>
    </div>
  </div>
</template>

<script>
import WrapperTitle from '../wrapper-title/index';

export default {
  name: 'ScreenVideo',
  components: {
    WrapperTitle
  }
}
</script>

<style lang="scss" scoped>
.video-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.video-content {
  flex: 1;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
}

.panel {
  width: 100%;
  height: 100%;
}

.video-plane {
  width: 100%;

  .panel-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border;
    padding: 20px;

    .top-container,
    .bottom-container {
      width: 100%;
      display: flex;

    }

    .top-container {
      justify-content: center;

      .data-item {
        margin: 0 30px;
      }
    }

    .bottom-container {
      justify-content: space-around;
    }

    .data-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px;
      color: #fff;
      .data-num {
        font-weight: bold;
        font-size: 22px;
      }
    }

    .type1 {
      color: #0883d4;
    }

    .type2 {
      color: #08b108;
    }

    .type3 {
      color: #ff0000;
    }

    .type4 {
      color: #d82a64;
    }

    .type5 {
      color: #08b108;
    }

  }

}
</style>

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

@@ -1,11 +1,14 @@
<template>
  <div class="wrapper-container">

    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
      </div>
      <div class="center-container wrapper">
        <screen-detection></screen-detection>
        <screen-video></screen-video>

      </div>
      <div class="right-container wrapper">
        <screen-examine></screen-examine>
@@ -18,12 +21,14 @@
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
export default {
  name: 'ScreenWrapper',
  components: {
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
    ScreenVideo
  },
}
</script>
@@ -36,16 +41,17 @@
  top: 0;
  left: 0;
  z-index: 1;

  .wrapper-content {
    width: 100%;
    height: calc(100% - 100px);
    margin-top: 100px;
    border: 1px solid red;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@@ -54,15 +60,17 @@
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &:first-of-type {
    padding-left: 0;
  }

  &:last-of-type {
    padding-right: 0;
  }
}

</style>