Merge remote-tracking branch 'origin/master'

fuliqi

2024-03-20 27e8d88ed3fb019de4b46a9257d6ab71daa2638e

Merge remote-tracking branch 'origin/master'

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

@@ -26,7 +26,7 @@
        {id: 4,name: '点位在线率', value: 40},
        {id: 5,name: '录像可用率', value: 80},
        {id: 6,name: '重点点位录像可用率', value: 20},
        {id: 7,name: '一机一档合格率', value: 60},
        {id: 7,name: '信息采集准确率', value: 60},
        {id: 8,name: '卡门过车数据一致性', value: 40},
        
      ]

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

@@ -5,7 +5,7 @@
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡运维考核可视化大屏
        自贡市运维考核可视化大屏
      </div>
    </div>
  </div>

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

@@ -1,6 +1,9 @@
<template>
  <div class="wrapper-container">

    <select-item></select-item>
    <div class="return-button">
      <el-button type="primary">返回</el-button>
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
@@ -20,6 +23,7 @@
</template>

<script>
import SelectItem from '../select-item/index';
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
@@ -29,6 +33,7 @@
export default {
  name: 'ScreenWrapper',
  components: {
    SelectItem,
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
@@ -40,6 +45,11 @@
</script>

<style lang="scss" scoped>
.return-button {
  position: absolute;
  right: 20px;
  top: 30px;
}
.wrapper-container {
  width: 100%;
  height: 100%;

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

@@ -1,15 +1,78 @@
<template>
  <div class="select-container">
    <div class="type-select">
      <div class="select-label">数据源</div>
      <el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig">
        <el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.value" />
      </el-select>
    </div>

    <div class="date-select">
      <div class="select-label">日期</div>
      <el-date-picker
        v-model="dateValue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="setConfig"
      />
    </div>
    
  </div>
</template>

<script>
  export default {
  data() {
    return {
      typeValue: 1,
      dateValue: new Date(),
      testData1: [
        {
          name: '省厅',
          value: 1
        },
        {
          name: '市厅',
          value: 2
        },
        {
          name: '公安部',
          value: 3
        }
      ]
    }
  },
  methods: {
    setConfig() {
    
    }
  }
  }
</script>

<style lang="scss" scoped>

.select-container {
  position: absolute;
  top: 30px;
  left: 20px;
  display: flex;
  align-items: center;
  .select-label {
    font-size: 20px;
    margin-right: 10px;
    color: #2375f0;
  }
  .type-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  .date-select {
    display: flex;
    align-items: center;
  }
}
</style>

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

@@ -2,7 +2,7 @@
  <div class="title-container">
    <span class="title">{{ title }}</span>

    <div class="more-button">
    <div class="more-button" v-if="path" @click="toPath">
      <dv-border-box-12>
        <div class="button-text">
          详情
@@ -22,6 +22,12 @@
    },
    path: {
      type: String,
      default: ''
    }
  },
  methods: {
    toPath () {
      this.$router.push(this.path);
    }
  }
}

 src/views/screen/index.vue

@@ -1,5 +1,6 @@
<template>
  <div class="screen-container">
    
    <screen-title></screen-title>
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <screen-wrapper></screen-wrapper>
@@ -35,4 +36,5 @@
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

</style>