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

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper" :inline="true" :model="formInline1">
      <el-form-item label="行政区">
        <el-select clearable  v-model="formInline1.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 label="街道">
        <el-input  v-model="formInline1.streetName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="停车场">
        <el-select clearable filterable v-model="formInline1.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="formInline1.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>
    <br>
    <div style="display: flex; justify-content: space-between;">
      <div style="width: 50%; height: 300px">
        <div align="center" style="color: white">停车饱和度</div>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat"
          :top="60"
          yAxisName="(个)"
          :tooltip="tooltipFormat"
          :dataset="bardata"
          :encode="[
            {x: 'month', y: 'hs', seriesName: '占用'},
            {x: 'month', y: 'cs', seriesName: '空闲'}]"
          :labelSize="15"
          id="fxdqhszzt"
        />
      </div>
      <div style="width: 50%; height: 300px">
        <div align="center" style="color: white">停车场周转率分析</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata1"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '停车场周转率',bool:'true' },
            ]"
          id="sxcyfzqk1"
        />
      </div>
    </div>
    <div style="display: flex; justify-content: space-between;margin-top: 5%">
      <div style="width: 50%; height: 300px;">
        <div align="center" style="color: white">停车场营收分析</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(元)"
          :dataset="linedata"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '泊位收入',bool:'true' }
            ]"
          id="sxcyfzqk"
        />
      </div>
      <div style="width: 50%; height: 300px">
        <div align="center" style="color: white">车辆类型进场占比</div>
        <piechart
          class="model-pie-body"
          id="chart1"
          :roseType="false"
          :radiusArr="['30%', '70%']"
          :colorArr="modelPieColor"
          :labelFormat="['{name|{b}}', '{sub|{d}%}', '{hr|}']"
          :dataset="modelData.list"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
    </div>
    <div style="display: flex; justify-content: space-between;margin-top: 5%">
      <div style="width: 50%; height: 300px;padding-left: 25px">
        <div align="center" style="color: white">车辆进出场趋势</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata2"
          :tooltipFormat="lineTooltipFormat2"
          :encode="[
              { x: 'month', y: 'lastYearAmount', seriesName: '进流率',bool:'true' },
              { x: 'month', y: 'thisYearAmount', seriesName: '出流率',bool:'true' },
            ]"
          id="sxcyfzqk2"
        />
      </div>
      <div style="width: 50%; height: 300px;">
        <div align="center" style="color: white">停车场营收对比分析</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(元)"
          :dataset="linedata3"
          :tooltipFormat="lineTooltipFormat3"
          :encode="[
              { x: 'month', y: 'lastYearAmount', seriesName: '建材市场南侧停车场',bool:'true' },
              { x: 'month', y: 'thisYearAmount', seriesName: '市民之家东侧停车场',bool:'true' },
            ]"
          id="sxcyfzqk3"
        />
      </div>
    </div>
  </div>
</template>
<script>
import piechart from "@/components/pieChart";
import linechart from "@/components/lineChart";
import barchart from "@/components/barChart";
import vtable from "@/components/vtableNew";
import api from "@/api/article_z";
import options from '@/util/options'


export default {
  components: {
    piechart,
    linechart,
    barchart,
    vtable
  },
  data() {
    return {
      districtOptions: options.districtOptions,
      carOptions: [],
      formInline1: {
        parkId: '',
        time: [],
        regionCode: '',
        streetName: ''
      },
      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800"],
      modelData: {
        list: []
      },
      linedata: [],
      linedata1: [],
      linedata2: [],
      linedata3: [],
      bardata: [],
    }
  },
  mounted() {
    this.getParkDic()
    this.queryAll()
  },
  watch: {

  },
  methods: {
    getParkDic() {
      api.parkDic().then(res => {
        this.carOptions = res.data || [];
      })
    },
    queryAll() {
      let params = {...this.formInline1}
      if (
        this.formInline1.time && this.formInline1.time.length === 2 &&
        this.formInline1.time[1] !== ""
      ) {
        this.formInline1.time[0] = this.formInline1.time[0].substring(0, 10) + " 00:00:00";
        this.formInline1.time[1] = this.formInline1.time[1].substring(0, 10) + " 23:59:59";
        params.begin= this.formInline1.time[0]
        params.end = this.formInline1.time[1]
      }
      delete params.time
      this.getBardataData(params)
      this.getLinedata1Data(params)
      this.getLinedataData(params)
      this.getModelDataData(params)
      this.getLinedata2Data(params)
      this.getLinedata3Data(params)
    },
    //初始化
    getBardataData(params){
      api.queryParkingOperate_Tcbhd(params).then(res=>{
        this.bardata=res.data;
      })
    },
    getLinedata1Data(params){
      api.queryParkingOperate_Tczzlfx(params).then(res=>{
        this.linedata1=res.data;
      })
    },
    getLinedataData(params){
      api.queryParkingOperate_Tccysfx(params).then(res=>{
        this.linedata=res.data;
      })
    },
    getModelDataData(params){
      api.queryParkingOperate_Tscljczb(params).then(res=>{
        this.modelData.list=res.data;
      })
    },
    getLinedata2Data(params){
      api.queryParkingOperate_Cljccqs(params).then(res=>{
        this.linedata2=res.data;
      })
    },
    getLinedata3Data(params){
      api.queryParkingOperate_Tccysdbfx(params).then(res=>{
        this.linedata3=res.data;
      })
    },
    lineTooltipFormat1(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastAmount || "--"
      }(%)</div>`;
    },
    lineTooltipFormat(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastAmount || "--"
      }(元)</div>`;
    },
    lineTooltipFormat2(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.thisYearAmount || "--"
      }(%)</div>
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastYearAmount || "--"
      }(%)</div>
      </div>`;
    },
    lineTooltipFormat3(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastYearAmount || "--"
      }(元)</div>
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.thisYearAmount || "--"
      }(元)</div>
      </div>`;
    },
    xLabelFormat(name) {
      const nameArr = []
      for(let i=0; i<name.length; i+=7) {
        nameArr.push(name.substring(i, i+7))
      }
      return nameArr.join('\n');
    },
    tooltipFormat(params) {
      const type = params[0].seriesType;
      const data = params[0].data;
      // ${params[0].name || "--"}月：
      return `<div class="line-tooltip">
<div>${params[0].seriesName}: ${
        params[0].data.hs || "--"}个</div>
<div>${params[1].seriesName}: ${
        params[0].data.cs || "--"}个</div>
</div>`;
    },
  }
}
</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;
  }
  .search-card{
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;
    .input-wrapper{
      width: 36%;
    }
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}

.charts_all {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 400px;
}

.charts {
  width: 30%;
  height: 300px;
}

.btn_save {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  height: 40px;
}

.sel {
  height: 200px;
  margin-right: 10px;
}

.input-search {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: #2a2a2a;
  border: 1px solid #333;
  color: #ffffff;
}

.audit-dialog {
  .mg-bt {
    margin-bottom: 24px;
  }

  .label {
    text-align: right;
  }

  .form-div {
    /deep/ .el-input__inner {
      height: 35px;
      width: 100%;
      border: 1px solid #a6a5a5;
      color: #fff;
      background: #2d3744;
    }

    /deep/ .el-input__icon {
      //line-height: 35px;
    }
  }
}


</style>