luohe_fronted/src/pages/index/components/berths_revenue.vue

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper"  :inline="true" :model="formInline">
      <el-form-item label="行政区">
        <el-select clearable v-model="formInline.regionCode" placeholder="请选择" popper-class="cur-select">
          <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item clearable label="重点区域">
        <el-select clearable v-model="formInline.keyAreas" placeholder="请选择" popper-class="cur-select">
          <el-option  v-for="item in keyAreaOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item clearable label="具体道路">
        <el-input v-model="formInline.streetName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="停车场">
        <el-select clearable filterable v-model="formInline.parkId" placeholder="请选择" popper-class="cur-select">
          <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询日期">
        <el-date-picker
          clearable
          v-model="formInline.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd"
          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAll">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="width: 100%; display: flex; flex-wrap: wrap;">
      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">按小时统计</h5>
        <div style="width: 100%;height: 200px;">
          <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(元)"
          :dataset="linedata"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
            ]"
          id="axstj"
          />
        </div>
      </div>
        <div style="width: 50%;height: 220px;">
          <h5 style="color: white">按日统计</h5>
          <div style="width: 100%;height: 200px;">
            <linechart
              :autoStop="false"
              :top="30"
              :bottom="30"
              :left="40"
              :legendTop="0"
              yAxisName="(元)"
              :dataset="linedata2"
              :tooltipFormat="lineTooltipFormat"
              :encode="[
               { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
            ]"
              id="artj"
            />
          </div>
      </div>
      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">按周统计</h5>
        <div style="width: 100%;height: 200px;">
          <linechart
            :autoStop="false"
            :top="30"
            :bottom="30"
            :left="40"
            :legendTop="0"
            yAxisName="(元)"
            :dataset="linedata3"
            :tooltipFormat="lineTooltipFormat"
            :encode="[
              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
            ]"
            id="aztj"
          />
        </div>
      </div>
      <div style="width: 50%;height: 220px;">
        <h5 style="color: white">按月统计</h5>
        <div style="width: 100%;height: 200px;">
          <linechart
            :autoStop="false"
            :top="30"
            :bottom="30"
            :left="40"
            :legendTop="0"
            yAxisName="(元)"
            :dataset="linedata4"
            :tooltipFormat="lineTooltipFormat"
            :encode="[
              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
            ]"
            id="aytj"
          />
        </div>
      </div>
      <br>
      <div style="width: 100%;height: 220px;">
        <h5 style="color: white">按年统计</h5>
        <div style="width: 100%;height: 220px;">
          <linechart
            :autoStop="false"
            :top="30"
            :bottom="30"
            :left="40"
            :legendTop="0"
            yAxisName="(元)"
            :dataset="linedata5"
            :tooltipFormat="lineTooltipFormat"
            :encode="[
              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
            ]"
            id="antj"
          />
        </div>
      </div>


      <br>
    </div>

  </div>
</template>
<script>
import api from "@/api/article_liao";
import linechart from "@/components/lineChart";
import options from '@/util/options'

export default {
  components: {
    linechart
  },
  data() {
    return {
      districtOptions: options.districtOptions,
      keyAreaOptions: options.keyAreaOptions,
      carOptions: [],
      linedata: [],
      linedata2: [],
      linedata3: [],
      linedata4: [],
      linedata5: [],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
      formInline: {
        regionCode: '',
        keyAreas: '',
        streetName: '',
        parkId: '',
        time: [],
      }
    }
  },
  mounted() {
    this.getParkDic()
    this.queryAll()
  },
  watch: {
  },
  methods: {
    getParkDic() {
      api.parkDic().then(res => {
        this.carOptions = res.data || [];
      })
    },
    queryAll() {
      let params = {...this.formInline}
      if (
        this.formInline.time && this.formInline.time.length === 2 &&
        this.formInline.time[1] !== ""
      ) {
        this.formInline.time[0] = this.formInline.time[0].substring(0, 10) + " 00:00:00";
        this.formInline.time[1] = this.formInline.time[1].substring(0, 10) + " 23:59:59";
        params.begin= this.formInline.time[0]
        params.end = this.formInline.time[1]
      }
      delete params.time
      this.dashBerthsRevenueStat1(params)
      this.dashBerthsRevenueStat2(params)
      this.dashBerthsRevenueStat3(params)
      this.dashBerthsRevenueStat4(params)
      this.dashBerthsRevenueStat5(params)
    },
    lineTooltipFormat(params) {
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].data.mouth} : ${
        params[0].data.lastAmount  || "--"
      }元</div>`;
    },
    dashBerthsRevenueStat1(params){
      api.dashBerthsRevenueStat1(params).then(res =>{
        this.linedata = res.data
      })
    },
    dashBerthsRevenueStat2(params){
      api.dashBerthsRevenueStat2(params).then(res =>{
        this.linedata2 = res.data
      })
    },
    dashBerthsRevenueStat3(params){
      api.dashBerthsRevenueStat3(params).then(res =>{
        this.linedata3 = res.data
      })
    },
    dashBerthsRevenueStat4(params){
      api.dashBerthsRevenueStat4(params).then(res =>{
        this.linedata4 = res.data
      })
    },
    dashBerthsRevenueStat5(params){
      api.dashBerthsRevenueStat5(params).then(res =>{
        this.linedata5 = res.data
      })
    },
  }
}
</script>
<style  lang="scss" scoped>
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
}
.body-wrapper {
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background: #2a2a2a;
  color: #fff;
}
</style>