门前三包和趋势分析

“dzb”

2022-11-03 41dabb0db9619b8dbb8a311966e0b9920f67f7c8

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -1,13 +1,148 @@
<template>
  <div>趋势分析</div>
  <div class="trend-analysis">
    <!-- 侧边栏 -->
    <div class="trend-side">
      <!-- 输入区域 -->
      <div class="trend-input-area">
        <span class="trend-title">趋势分析</span>
        <el-form ref="form" :model="search" label-width="6vw">
          <el-form-item label="类型查询">
            <el-input v-model="search.type" placeholder="内容信息"></el-input>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-input v-model="search.timeRange" suffix-icon="el-icon-date" placeholder="选择时间范围"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示 -->
      <div class="trend-data-show">
        <!-- 点位切换 -->
        <div class="trend-data-header">
          <el-button type="text">高发点位</el-button>
          <el-button type="text">首次违规点位</el-button>
        </div>
        <!-- 对应数据 -->
        <div class="trend-data-main">
          <div class="high-point">
            <div class="point-item" v-for="item in highList" :key="item.id">
              <span>{{ item.pointName }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="trend-main"></div>
    <div class="trend-footer" v-if="timeRangeFlag">
      <!-- 选择时间范围 -->
      <div class="time-area">
        <el-date-picker v-model="search.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      search: {
        type: '',
        timeRange: ''
      },
      timeRangeFlag: false,
      highList: [
        {
          id: 1,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 2,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 3,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 4,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 5,
          pointName: '后庆路200号-球',
          count: '100次',
        },
      ]
    }
  }
}
</script>

<style>
<style lang="scss" scoped>
.trend-analysis {
  height: 100%;
  padding: 10vh 10vw;
  color: #4b9bb7;
  display: flex;
  .trend-side {
    width: 20vw;
    text-align: left;
    height: 100%;
    border: 1px solid #09152f;
    .trend-input-area {
      display: flex;
      flex-direction: column;
      padding: 0 2vw;
      &>span {
        line-height: 40px;
      }

      ::v-deep .el-form {
        .el-form-item__label {
          color: #4b9bb7;
        }
      }
    }

    .trend-data-show {
      width: 100%;
      line-height: 40px;
      .trend-data-header{
        display: flex;
        .el-button{
          flex: 1;
          border: 2px solid #09152f;
        }
        .el-button+.el-button{
          margin: 0;
        }
      }
      .trend-data-main {
        .high-point {
          .point-item {
            display: flex;
            padding: 0 2vw;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .trend-main{
    flex: 1;
    border: 1px solid #09152f;
  }
  .trend-footer {
    ::v-deep .el-range-input {
      background-color: #09152f;
    }
  }
}
</style>