iot-front-ui/src/components/life/parking/lifeParking.vue

<script>
import Query from "@/components/common/query.vue";
import Card from "@/components/common/card.vue";
import CoreData from "@/components/common/coreData.vue";
import LifeParkTrendChart from "@/components/life/parking/components/lifeParkTrendChart.vue";
import lifeParkUnNormalChart from "@/components/life/parking/components/lifeParkUnNormalChart.vue";
import LifeParkConsumeChart from "@/components/life/parking/components/lifeParkConsumeChart.vue";
import LifeParkingTopChart from "@/components/life/parking/components/lifeParkTopTable.vue";
import LifeParkDetailTable from "@/components/life/parking/components/lifeParkDetailTable.vue";
import apiLifePark from "@/api/life/apiLifePark";

export default {
  data() {
    let range = this.$util.dateUtil.getNearlyMonthRange();
    return {
      chartsHeight: 290,
      topSelect: '5',
      queryData: {
        companyId: '0',
        deptId: '0',
        timeRange: range
      },
      coreData: [
        {
          title: '车位数量(个)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '平均停车数量(辆/天)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '违停数量(辆)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '车位使用率',
          num: 0,
          unit: "%",
          historyDesc: '同比',
          historyNum: 0
        },
        {
          type: 1,
          isHighLight: false,
          title: '值得关注',
          showStar: true,
          content: ''
        },
      ],
      oriEmptyParks: [],
      emptyParks: [],
      parkDetails: [],
    }
  },
  components: {
    Query,
    Card,
    CoreData,
    LifeParkTrendChart,
    lifeParkUnNormalChart,
    LifeParkConsumeChart,
    LifeParkingTopChart,
    LifeParkDetailTable,
  },
  created() {
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$util.asyncPromise(
          this.getCoreData(),
          this.getEmptyPark(),
          this.getParkDetail()
      )
    },
    reset() {
    },
    search(data) {
      this.$util.asyncPromise(
          this.getCoreData(),
          this.getEmptyPark(),
          this.getParkDetail(),
          this.$refs.LifeParkConsumeChart.getData(),
          this.$refs.LifeParkTrendChart.getData(),
          this.$refs.LifeParkUnNormalChart.getData(),
      )
    },
    getCoreData() {
      return apiLifePark.getCoreData(this.queryData).then(res => {
        this.coreData[0].num = res.list[0].value
        this.coreData[0].historyNum = res.list[0].compare
        this.coreData[1].num = res.list[1].value
        this.coreData[1].historyNum = res.list[1].compare
        this.coreData[2].num = res.list[2].value
        this.coreData[2].historyNum = res.list[2].compare
        this.coreData[3].num = res.list[3].value
        this.coreData[3].historyNum = res.list[3].compare
        this.coreData[4].content = res.worthAttention
      })
    },
    getEmptyPark() {
      return apiLifePark.getVacantParkingSpace(this.queryData).then(res=>{
        this.oriEmptyParks = res
        this.handleTopChange();
      })
    },
    handleTopChange() {
      this.emptyParks = this.oriEmptyParks.slice(0, this.topSelect)
    },
    getParkDetail() {
      return apiLifePark.getParkingSpaceDetails(this.queryData).then(res=>{
        this.parkDetails = res
      })
    },
  }
}
</script>

<template>
  <div class="lifeParking">
    <div class="page-query-core">
      <a-row>
        <a-col>
          <div class="lifeParking-query">
            <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset"
                   :search="search"></Query>
          </div>
        </a-col>
        <a-col>
          <div class="lifeParking-core">
            <Card title="核心指标">
              <CoreData :data-list="coreData"></CoreData>
            </Card>
          </div>
        </a-col>
      </a-row>
    </div>
    <div style="margin-top: 12px">
      <a-row :gutter="[12,12]" >
        <a-col :span="18">
          <div class="lifeParking-trend ioc-card-content">
            <Card title="车流态势">
              <LifeParkTrendChart ref="LifeParkTrendChart" :queryData="queryData" :height="320"></LifeParkTrendChart>
            </Card>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="lifeParking-top ioc-card-content">
            <Card title="空置车位">
              <div style="height: 340px;overflow-y: auto">
                <LifeParkingTopChart :tableData="emptyParks"></LifeParkingTopChart>
              </div>
              <template #title-extra>
                <a-select v-model="topSelect" default-value="5" style="width: 100px;" size="small" @change="handleTopChange">
                  <a-select-option value="5">TOP5</a-select-option>
                  <a-select-option value="10">TOP10</a-select-option>
                  <a-select-option value="15">TOP15</a-select-option>
                </a-select>
              </template>
            </Card>
          </div>
        </a-col>
        <a-col :span="9">
          <div class="lifeParking-unNormal  ioc-card-content">
            <Card title="违停情况">
              <LifeParkUnNormalChart ref="LifeParkUnNormalChart" :queryData="queryData" :height="390"></LifeParkUnNormalChart>
            </Card>
          </div>
        </a-col>
        <a-col :span="9">
          <div class="lifeParking-consume  ioc-card-content">
            <Card title="占用车位数量">
              <LifeParkConsumeChart ref="LifeParkConsumeChart" :queryData="queryData" :height="390"></LifeParkConsumeChart>
            </Card>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="lifeParking-detail ioc-card-content">
            <Card title="车位详情">
              <div style="height: 340px;overflow-y: auto">
                <LifeParkDetailTable :data="parkDetails"></LifeParkDetailTable>
              </div>
            </Card>
          </div>
        </a-col>


      </a-row>
    </div>


  </div>
</template>

<style lang="less" scoped>
.lifeParking {
  width: 100%;
  height: auto;
  padding-bottom: 12px;
  display: inline-block;
  vertical-align: top;

  .lifeParking-query {
    width: 100%;
  }

  .lifeParking-core {
    width: 100%;
  }

  .lifeParking-trend {
    background-color: #ffffff;
    height: 390px;
    overflow: hidden;
  }

  .lifeParking-unNormal {
    height: 390px;
    overflow: hidden;
  }

  .lifeParking-consume {
    height: 390px;
    overflow: hidden;
  }

  .lifeParking-top {
    height: 390px;
    overflow-y: hidden;
  }

  .lifeParking-detail {
    height: 390px;
    overflow-y: hidden;
  }

}

/deep/ .lifeParking-top .ant-select-selection {
  background-color: #f8fafb;
  border: none;
  border-radius: 6px;
  padding: 0px 12px;
  color: #B2B2B2;
}
</style>