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

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-form-item label="行政区">
        <el-select v-model="formInline.regionCode" placeholder="请选择" popper-class="cur-select">
          <el-option v-for="item in options"  :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="重点区域">
        <el-select v-model="formInline.keyAreas" placeholder="请选择" popper-class="cur-select">
          <el-option  v-for="item in options1"  :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="具体道路">
        <el-input v-model="formInline.streetName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <br>
    <br>
    <br>
    <div style="width: 100%;">
      <div style="width: 100%;height: 400px;">
        <h4 style="color: white">按小时统计</h4>
        <br>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(辆)"
          :dataset="linedata"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
              { x: 'mouth', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
              { x: 'mouth', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
            ]"
          id="axstj"
        />
      </div>
      <br>
      <br>
      <br>
      <div style="width: 100%;height: 400px;">
        <h4 style="color: white">按日统计</h4>
        <br>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(辆)"
          :dataset="linedata2"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
               { x: 'mouth', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
              { x: 'mouth', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
            ]"
          id="artj"
        />
      </div>
      <br>
      <br>
      <br>
      <div style="width: 100%;height: 400px;">
        <h4 style="color: white">按周统计</h4>
        <br>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(辆)"
          :dataset="linedata3"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
               { x: 'mouth', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
              { x: 'mouth', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
            ]"
          id="aztj"
        />
      </div>
      <br>
      <br>
      <br>
      <div style="width: 100%;height: 400px;">
        <h4 style="color: white">按月统计</h4>
        <br>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(辆)"
          :dataset="linedata4"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
               { x: 'mouth', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
              { x: 'mouth', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
            ]"
          id="aytj"
        />
      </div>
      <br>
      <br>
      <br>
      <div style="width: 100%;height: 400px;">
        <h4 style="color: white">按年统计</h4>
        <br>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(辆)"
          :dataset="linedata5"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
               { x: 'mouth', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
              { x: 'mouth', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
            ]"
          id="antj"
        />
      </div>


      <br>
    </div>

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

export default {
  components: {
    linechart
  },
  data() {
    return {
      options: [{
        value: '411102',
        label: '源汇区'
      }, {
        value: '411103',
        label: '郾城区'
      },{
        value: '411104',
        label: '召陵区'
      }, {
        value: '411121',
        label: '舞阳县'
      }, {
        value: '411122',
        label: '临颍县'
      }],
      options1: [{
        value: '商圈',
        label: '商圈'
      }, {
        value: '学校',
        label: '学校'
      }, {
        value: '医院',
        label: '医院'
      }, {
        value: '旅游景点',
        label: '旅游景点'
      }],
      linedata: [],
      linedata2: [],
      linedata3: [],
      linedata4: [],
      linedata5: [],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
      formInline: {
        regionCode: '',
        keyAreas: '',
        streetName: ''
      }
    }
  },
  mounted() {
    this.dashBerthsUsageStat1()
    this.dashBerthsUsageStat2()
    this.dashBerthsUsageStat3()
    this.dashBerthsUsageStat4()
    this.dashBerthsUsageStat5()
  },
  watch: {
  },
  methods: {
    onSubmit() {
      this.dashBerthsUsageStat1()
      this.dashBerthsUsageStat2()
      this.dashBerthsUsageStat3()
      this.dashBerthsUsageStat4()
      this.dashBerthsUsageStat5()
    },
    dashBerthsUsageStat1(){
      api.dashBerthsUsageStat1({...this.formInline}).then(res =>{
        this.linedata = res.data
      })
    },
    dashBerthsUsageStat2(){
      api.dashBerthsUsageStat2({...this.formInline}).then(res =>{
        this.linedata2 = res.data
      })
    },
    dashBerthsUsageStat3(){
      api.dashBerthsUsageStat3({...this.formInline}).then(res =>{
        this.linedata3 = res.data
      })
    },
    dashBerthsUsageStat4(){
      api.dashBerthsUsageStat4({...this.formInline}).then(res =>{
        this.linedata4 = res.data
      })
    },
    dashBerthsUsageStat5(){
      api.dashBerthsUsageStat5({...this.formInline}).then(res =>{
        this.linedata5 = res.data
      })
    },
  }
}
</script>
<style  lang="scss" scoped>
.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .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;
  height: 40px;
}
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background: #2a2a2a;
  color: #fff;
}
</style>