趋势分析

luobisheng

2022-11-28 667e1a5b49ffc2f7af9237b4542b1c2e4d00731f

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -7,10 +7,13 @@
        <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-select v-model="search.type" placeholder="内容信息">
              <el-option v-for="option in categoryOptions" :key="option.value" :value="option.value" :label="option.label" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-input v-model="search.timeRange" suffix-icon="el-icon-date" placeholder="选择时间范围"></el-input>
          <el-form-item class="time-area" label="时间范围">
            <el-date-picker v-model="search.timeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
@@ -18,39 +21,21 @@
      <div class="trend-data-show">
        <!-- 点位切换 -->
        <div class="trend-data-header">
          <el-button type="text" @click="highFlag = true">高发点位</el-button>
          <el-button type="text" @click="highFlag = false">首次违规点位</el-button>
          <el-button type="text" @click="tabChange(1)">高发点位</el-button>
          <el-button type="text" @click="tabChange(2)">首次违规点位</el-button>
        </div>
        <!-- 对应数据 -->
        <div class="trend-data-main">
          <!--  -->
          <div class="high-point" v-if="highFlag">
            <div class="point-item" v-for="item in highList" :key="item.id">
              <span>{{ item.pointName }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div>
          <!-- 首次违规 -->
          <div class="first-point" v-else>
            <div class="point-item" v-for="item in fisrtList" :key="item.id">
              <span>{{ item.pointName }}</span>
              <span>{{ item.count }}</span>
            </div>
          <div class="point-item" v-for="item in trendAnalysisList" :key="item.id" @click="pointClick(item)">
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="trend-main">
      <div class="trend-main-echarts" id="myRef">
      <div class="trend-main-echarts" id="echarts">

      </div>
    </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>
@@ -58,78 +43,44 @@

<script>
import * as echarts from 'echarts'
import { transform } from 'echarts-stat';
import basecase from "@/api/operate/basecase";
import { CATEGOTY } from "@/utils/helper";

export default {
  created() {
    this.searchList()
  },

  mounted() {
    this.renderEchart();
  },

  computed: {
    categoryOptions() {
      return CATEGOTY;
    }
  },

  data() {
    return {
      search: {
        type: '',
        timeRange: ''
        type: null,
        timeRange: null
      },
      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次',
        },
      ],
      fisrtList: [
        {
          id: 1,
          pointName: '后庆路205号-球',
          count: '1次',
        },
        {
          id: 2,
          pointName: '后庆路204号-球',
          count: '1次',
        },
        {
          id: 3,
          pointName: '后庆路203号-球',
          count: '1次',
        },
        {
          id: 4,
          pointName: '后庆路202号-球',
          count: '1次',
        },
        {
          id: 5,
          pointName: '后庆路201号-球',
          count: '1次',
        },
      ],
      trendAnalysisList: [],
      highFlag: true,
      echarts: null,
      pointName: null
    }
  },
  methods: {
    renderEchart() {
      // echarts.registerTransform(transform.regression);
      const myChart = echarts.init(document.getElementById('myRef'));
    renderEchart(dataList) {
      if (!this.echarts) {
        this.echarts = echarts.init(document.getElementById('echarts'));
      }
      // 绘制图表
      myChart.setOption({
      this.echarts.setOption({
        xAxis: {
          name: '日/周',
        },
@@ -138,17 +89,38 @@
        },
        series: [
          {
            data: [10, 22, 28, 23, 19],
            data: dataList,
            type: 'line',
            smooth: true
          }
        ]
      });
    },
    async searchList() {
      const [startTime, endTime] = this.search.timeRange ?? [null, null];
      const trendAnalysisParam = {
        startTime,
        endTime,
        type: this.search.type
      }
      this.trendAnalysisList = this.highFlag ? await basecase.getTrendAnalysisData(trendAnalysisParam)
          : await basecase.getFirstTrendAnalysisData(trendAnalysisParam);
    },
    tabChange(params) {
      this.highFlag = params === 1;
      this.searchList();
    },

    pointClick(data) {
      this.pointName = data.name;
      basecase.getPointTrendAnalysisData({ id: data.id })
          .then(res => {
            const countList = res.map(item => +item.count);
            this.renderEchart(countList);
          })
          .catch(err => this.$message.error(err))
    }
  },
  mounted() {
    this.renderEchart()
  }
}
</script>

@@ -160,7 +132,7 @@
  display: flex;

  .trend-side {
    width: 20vw;
    width: 30vw;
    text-align: left;
    height: 100%;
    border: 1px solid #09152f;
@@ -199,14 +171,10 @@
      }

      .trend-data-main {

        .high-point,
        .first-point {
          .point-item {
            display: flex;
            padding: 0 2vw;
            justify-content: space-between;
          }
        .point-item {
          display: flex;
          padding: 0 2vw;
          justify-content: space-between;
        }
      }
    }