refactor

ZhangXianQiang

2024-03-19 2bd38f3c07fa4ec63c5b5fd99bca19d2b1b4ee2d

refactor

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

@@ -1,19 +1,130 @@
<template>
  <div class="car-container">
    <wrapper-title :title="'人脸数据趋势'"></wrapper-title>
    <wrapper-title :title="'车辆设备数据'"></wrapper-title>

    <div class="car-content">
      <div class="data-plane">
        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
            </div>
          </div>
        </dv-border-box-13>

        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
            </div>
          </div>
        </dv-border-box-13>

        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
            </div>
          </div>
        </dv-border-box-13>
      </div>

    </div>
  </div>

</template>

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

export default {
  name: 'ScreenCar',
  components: {
    WrapperTitle
  },
  data() {
    return {
      dataList: {
        state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
        state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
      },
    }
  },

  methods: {
    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },

  mounted() {
  },
  beforeDestroy() {
  },
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.car-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

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

  .plane {
    margin-bottom: 10px;
  }

  .data-plane {
    .data-item {
      width: 100%;
      padding: 10px 20px;
      display: flex;
      align-items: center;

      .data-icon {
        width: 40px;
        margin: 0 20px;
      }

      .data-info {
        flex: 1;
        color: #5b83bd;
        font-size: 16px;

        .data-num {
          margin-top: 5px;
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }

  #faceChart {
    width: 100%;
    height: 300px;
  }
}

.width-img {
  width: 100%;
}
</style>

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

@@ -1,6 +1,6 @@
<template>
  <div class="face-container">
    <wrapper-title :title="'人脸数据趋势'"></wrapper-title>
    <wrapper-title :title="'人脸设备数据'"></wrapper-title>

    <div class="face-content">
      <div class="data-plane">
@@ -10,8 +10,8 @@
              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日人脸采集设备总数</div>
              <div class="data-num">{{formatNumber(1123)}}</div>
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -22,7 +22,7 @@
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日抓拍数据量</div>
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
            </div>
          </div>
@@ -34,13 +34,12 @@
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">历史抓拍数据量</div>
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
      <div id="faceChart" ref="faceChart"></div>
    </div>
  </div>

@@ -48,8 +47,6 @@

<script>
import WrapperTitle from '../wrapper-title/index';
import * as echarts from 'echarts';
let lineChart = null;
export default {
  name: 'ScreenFace',
  components: {
@@ -65,62 +62,6 @@
  },

  methods: {
    initChart() {
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          orient: "vertical",
          icon: 'rect',
          data: [
            {
              name: '正常数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '异常数',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
          ],
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.dataList.state),
        },
        yAxis: {},
        series: [
          {
            name: '今日',
            data: Object.entries(this.dataList.state).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '昨日',
            data: Object.entries(this.dataList.state2).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
    },

    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
@@ -128,19 +69,21 @@
  },

  mounted() {
    lineChart = echarts.init(this.$refs.faceChart);
    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
    }

  },
}
</script>

<style lang="scss" scoped>
.face-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

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

@@ -151,7 +94,7 @@
  .data-plane {
    .data-item {
      width: 100%;
      padding: 20px 20px;
      padding: 10px 20px;
      display: flex;
      align-items: center;


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

@@ -1,149 +1,129 @@
<template>
  <div class="video-container">
    <wrapper-title :title="'视频设备'"></wrapper-title>
    <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 class="data-plane">
        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
            </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 class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
            </div>


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

        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
            </div>
          </div>
        </dv-border-box-13>

        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
    </div>
  </div>

</template>

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

export default {
  name: 'ScreenVideo',
  name: 'ScreenFace',
  components: {
    WrapperTitle
  }
  },
  data() {
    return {
      dataList: {
        state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
        state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
      },
    }
  },

  methods: {

    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },

  mounted() {

  },
}
</script>

<style lang="scss" scoped>
.video-container {
  flex: 1;
  width: 100%;
  height: fit-content;
  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;
    }

  .plane {
    margin-bottom: 10px;
  }

  .data-plane {
    .data-item {
      width: 100%;
      padding: 10px 20px;
      display: flex;
      align-items: center;

      .data-icon {
        width: 40px;
        margin: 0 20px;
      }

      .data-info {
        flex: 1;
        color: #5b83bd;
        font-size: 16px;

        .data-num {
          margin-top: 5px;
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }

  #faceChart {
    width: 100%;
    height: 300px;
  }
}

.width-img {
  width: 100%;
}
</style>

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

@@ -4,10 +4,11 @@
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
        <screen-car></screen-car>
        <screen-video></screen-video>
      </div>
      <div class="center-container wrapper">
        <screen-detection></screen-detection>
        <screen-video></screen-video>

      </div>
      <div class="right-container wrapper">
@@ -22,13 +23,15 @@
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
export default {
  name: 'ScreenWrapper',
  components: {
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
    ScreenVideo
    ScreenVideo,
    ScreenCar
  },
}
</script>
@@ -72,5 +75,4 @@
    padding-right: 0;
  }
}

</style>