Merge branch 'master' into dev-threejs

ZhangXianQiang

2024-04-16 549240a042edad52f9642721e7b1f51b90ddaf34

 src/views/system/result/index.vue

@@ -1,6 +1,23 @@
<template>
  <div id="warp">
    <el-row>
    <div class="data-chart-container">
      <el-card class="data-card" :body-style="{ height: '100%' }">
        <div class="card-content">
          <div class="title-container">
            <h1>考核成绩</h1>
            <div class="select-container">
            <el-date-picker v-model="date" type="date"  placeholder="选择日期">
            </el-date-picker>
          </div>
          </div>

          <div class="echart-container">
            <div id="barChart" ref="barChart"></div>
          </div>
        </div>
      </el-card>
    </div>
    <el-row :gutter="100">
      <el-col :span="6">
        <div class="city-warp">
          <div class="city">
@@ -8,6 +25,9 @@
              自流井
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
@@ -17,7 +37,7 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>
            </div>
@@ -36,6 +56,9 @@
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
              </div>
@@ -44,9 +67,10 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>

            </div>
            <div class="bottom-publish">
              <el-button size="medium" type="success">发布</el-button>
@@ -63,6 +87,9 @@
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
              </div>
@@ -71,9 +98,10 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>

            </div>
            <div class="bottom-publish">
              <el-button size="medium" type="success">发布</el-button>
@@ -90,6 +118,9 @@
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
              </div>
@@ -98,9 +129,10 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>

            </div>
            <div class="bottom-publish">
              <el-button size="medium" type="success">发布</el-button>
@@ -113,7 +145,7 @@

    </el-row>

    <el-row style="margin-top: 30px">
    <el-row style="margin-top: 30px" :gutter="100">
      <el-col :span="6">
        <div class="city-warp">
          <div class="city">
@@ -121,6 +153,9 @@
              高新区
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
@@ -130,7 +165,7 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>
            </div>
@@ -149,6 +184,9 @@
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
              </div>
@@ -157,7 +195,7 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>
            </div>
@@ -176,6 +214,9 @@
            </div>
            <div class="score-warp">
              <div class="score-item">
                <div style="font-size: 15px;margin-bottom: 15px">2024年4月12日</div>
              </div>
              <div class="score-item">
                <div>视频：</div>
                <div class="score">99.5</div>
              </div>
@@ -184,9 +225,10 @@
                <div class="score">87</div>
              </div>
              <div class="score-item">
                <div>监控：</div>
                <div>车辆：</div>
                <div class="score">94</div>
              </div>

            </div>
            <div class="bottom-publish">
              <el-button size="medium" type="success">发布</el-button>
@@ -201,22 +243,93 @@
</template>

<script>
import * as echarts from 'echarts';
let observer = null;
let chart = null;
export default {
  name: 'index',
  data() {
    return {

      activeIndex: '1',
      activeIndex2: '1',
      date: '',
      company: '',
      dataList: {
        name: ['富顺县', '荣县', '高新区', '自流井区', '贡井区', '大安区', '沿滩区'],
        data1: [95, 96, 97, 95, 94.5, 93.6, 94.5],
        data2: [93.7, 93.5, 94.3, 96.5, 95.3, 94.2, 93.3],
        data3: [98.3, 94.3, 93.3, 95.5, 96.8, 96.1, 95.8],
      },
    }
  },
  methods: {
    jumpDetail() {
      this.$router.push("/examine/detail")
    },
    initEchart() {
      const option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: '20%',
          containLabel: true
        },
        legend: {
          right: 'right',
          top: 'top',
          icon: 'rect',
          orient: "vertical",
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          axisLabel: {
          },
          data: this.dataList.name
        },
        yAxis: {
          min: 90,
        },
        series: [
          {
            type: 'bar',
            name: '视频考核',
            data: this.dataList.data1,
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
            }
          },
          {
            type: 'bar',
            name: '人脸考核',
            data: this.dataList.data2,
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          },
          {
            type: 'bar',
            name: '车辆考核',
            data: this.dataList.data3,
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
        ]
      }
      chart.setOption(option, true);

    }
  },
  mounted() {
    chart = echarts.init(this.$refs.barChart);
    this.initEchart();
  }
}
</script>

<style scoped>
<style lang = "scss" scoped>
.score-warp {
  display: flex;
  flex-direction: column;
@@ -227,6 +340,7 @@
.score-item {
  display: flex;
  flex-direction: row;

}
.score {
  width: 60px;
@@ -258,6 +372,48 @@
}
.title {
  font-size: larger;
  margin-bottom: 25px;
  margin-bottom: 5px;
}
.data-chart-container {
  height: 400px;
  margin-bottom: 20px;

  .data-card {
    height: 100%;

    .card-content {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}
.title-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;


  .more-button {
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
  }
}

.echart-container {
  width: 100%;
  height: 100%;

  #barChart {
    width: 100%;
    height: 100%;
  }
}
.select-container {
  margin: 0 20px;
  width: 180px;
}
</style>