ChargEco/Strides-Admin/src/views/dashboard/Dashboard.vue

<template>
  <div class="dash-container" v-loading="loading">
    <div class="filter">
      <el-select
        v-model="providerPk"
        class="filter-item"
        @change="changeProvider">
        <el-option 
          v-for="(item, index) in providerList"
          :key="index"
          :value="item.value"
          :label="item.name"/>
      </el-select>
      <el-button
        type="primary"
        style="margin-left: 10px;"
        @click="toMaps">Maps</el-button>
    </div>
    <div class="charts-card">
      <div class="chart-title">Hourly Utilization(kWH)</div>
      <LineChart :chartData="hourlyData"></LineChart>
    </div>
    <div class="card-group">
      <div class="card-view">
        <div class="card-title">Stations | Connector Status</div>
        <div class="line-horizontal"></div>
        <div class="flex">
          <div class="glance-total-view">
            <div class="total-upcase">Total</div>
            <div class="totals">{{stationsData.total ? stationsData.total : 0}}</div>
            <div class="total-bottom-title">Stations</div>
          </div>
          <div class="glance-total-list">
            <div class="total-list-item mini">
              <span>In use</span>
              <label>{{stationsData.inUse ? stationsData.inUse : 0}}</label>
            </div>
            <div class="total-list-item mini">
              <span>Reserved</span>
              <label>{{stationsData.reserved ? stationsData.reserved : 0}}</label>
            </div>
            <div class="total-list-item mini">
              <span>Faulted</span>
              <label>{{stationsData.faulted ? stationsData.faulted : 0}}</label>
            </div>
            <div class="total-list-item mini">
              <span>Available</span>
              <label>{{stationsData.available ? stationsData.available : 0}}</label>
            </div>
            <div class="total-list-item mini">
              <span>Unavailable</span>
              <label>{{stationsData.unAvailable ? stationsData.unAvailable : 0}}</label>
            </div>
            <div class="total-list-item mini">
              <span>Finishing</span>
              <label>{{stationsData.finishing ? stationsData.finishing : 0}}</label>
            </div>
          </div>
        </div>
      </div>
      <div class="card-view">
        <div class="card-title">Consumption | Today's Consumption</div>
        <div class="line-horizontal"></div>
        <div class="flex">
          <div class="glance-total-view">
            <div class="total-upcase">Total</div>
            <div class="totals total-power">{{consumptionData.total ? consumptionData.total : 0}}</div>
            <div class="total-bottom-title">kWh</div>
          </div>
          <div class="glance-total-list">
            <div class="total-list-item">
              <span>Transaction Completed</span>
              <label>{{consumptionData.transactionCompleted ? consumptionData.transactionCompleted : 0}}</label>
            </div>
            <div class="total-list-item">
              <span>Transactions Ongoing</span>
              <label>{{consumptionData.transactionsOngoing ? consumptionData.transactionsOngoing : 0}}</label>
            </div>
            <div class="total-list-item">
              <span>Highest Delivered</span>
              <label>{{consumptionData.highestDelivered ? consumptionData.highestDelivered : 0}}kWh</label>
            </div>
            <div class="total-list-item">
              <span>Lowest Delivered</span>
              <label>{{consumptionData.lowestDelivered ? consumptionData.lowestDelivered : 0}}kWh</label>
            </div>
          </div>
        </div>
      </div>
      <div class="card-view">
        <div class="card-title">Revenue | Today's Revenue</div>
        <div class="line-horizontal"></div>
        <div class="flex">
          <div class="glance-total-view">
            <div class="total-upcase">Total</div>
            <div class="totals total-amount">{{revenueData.total ? revenueData.total : 0}}</div>
            <div class="total-bottom-title">SGD</div>
          </div>
          <div class="glance-total-list">
            <div class="total-list-item">
              <span>Transaction Completed</span>
              <label>{{revenueData.transactionCompleted ? revenueData.transactionCompleted : 0}}</label>
            </div>
            <div class="total-list-item">
              <span>Transactions Ongoing</span>
              <label>{{revenueData.transactionsOngoing ? revenueData.transactionsOngoing : 0}}</label>
            </div>
            <div class="total-list-item">
              <span>Highest Transaction</span>
              <label>${{revenueData.highestTransaction ? revenueData.highestTransaction : 0}}</label>
            </div>
            <div class="total-list-item">
              <span>Lowest Transaction</span>
              <label>${{revenueData.lowestTransaction ? revenueData.lowestTransaction : 0}}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="charts-card">
      <div class="radio-group">
        <el-radio-group
          v-model="dateTabIndex"
          size="small"
          @change="changeTab">
          <el-radio-button
            v-for="(item,index) in dateRangeTab"
            :key="index"
            :label="item.value">
            {{item.name}}
          </el-radio-button>
        </el-radio-group>
      </div>
      <el-row
        class="barGroup"
        v-loading="barLoading">
        <el-col
          class="barView"
          :sm="12"
          :md="8"
          v-if="barChartData.utilization">
          <BarChart 
            :index="0"
            :chartData="barChartData.utilization"
            unit="%"
            title="Utilization Rate so far"/>
        </el-col>
        <el-col
          class="barView"
          :sm="12"
          :md="8"
          v-if="barChartData.consumption">
          <BarChart
            :index="1"
            :chartData="barChartData.consumption"
            unit="kWh"
            title="Consumption so far"/>
        </el-col>
        <el-col
          class="barView"
          :sm="12"
          :md="8"
          v-if="barChartData.revenue">
          <BarChart
            :index="2"
            :chartData="barChartData.revenue"
            unit="$"
            :leftUnit="true"
            title="Revenue so far"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import BarChart from './chart/BarChart.vue'
  import LineChart from './chart/LineChart.vue'
  import api from '../../http/api/dashboard'
  export default {
    components: {
      BarChart,
      LineChart
    },
    data() {
      return {
        loading: true,
        barLoading: true,
        providerPk: '',
        providerList: [],
        hourlyData: {
          xdata: [],
          ydata: []
        },
        stationsData: {},
        consumptionData: {},
        revenueData: {},
        dateTabIndex: 0,
        dateRangeTab: [],
        barChartData: {},
        changeLoading: false
      }
    },
    created() {
      this.getProvider()
    },
    methods: {
      changeProvider() {
        setTimeout(() => {
          if (this.changeLoading)
            this.loading = true
        }, 300)
        this.changeLoading = true
        this.getLineChart()
        this.getCardData()
        this.getBarChartData()
      },
      changeTab() {
        setTimeout(() => {
          if (this.changeLoading)
            this.barLoading = true
        }, 300)
        this.changeLoading = true
        this.getBarChartData()
      },
      async getProvider() {
        const data = await api.getProviderList()
        if (data.success && data.data) {
          this.providerList = data.data
          if (data.data.length > 0) {
            this.providerPk = data.data[0].value
            this.getLineChart()
            this.getCardData()
            this.getRangeTabList()
          } else {
            this.loading = false
          }
        }
        console.log(data.data);
      },
      async getLineChart() {
        const data = await api.getHourlyUtilization(this.providerPk)
        this.changeLoading = false
        if (data.data.xdata && data.data.ydata) {
          this.hourlyData = data.data
        } else {
          this.hourlyData = undefined
        }
        this.loading = false
      },
      async getCardData() {
        const data = await api.getCardSection(this.providerPk)
        this.changeLoading = false
        if (data.success) {
          this.stationsData = data.data.stations
          this.consumptionData = data.data.consumption
          this.revenueData = data.data.revenue
        } else {
          this.stationsData = {}
          this.consumptionData = {}
          this.revenueData = {}
        }
        this.loading = false
      },
      async getRangeTabList() {
        const data = await api.getRangeTab()
        if (data.success) {
          this.dateRangeTab = data.data
          if (data.data.length > 0) {
            this.dateTabIndex = data.data[0].value
            this.getBarChartData()
          }
        } else {
          this.dateRangeTab = [];
        }
      },
      async getBarChartData() {
        const data = await api.getBarChart({
          tabType: this.dateTabIndex,
          providerPk: this.providerPk
        })
        this.changeLoading = false
        if (data.success) {
          this.barChartData = data.data
        } else {
          this.barChartData = {}
        }
        this.barLoading = false
      },
      toMaps() {
        this.$router.push({path: '/maps'})
        /*this.$notify({
          title: 'It works!',
          type: 'success',
          message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
          duration: 5000
        })*/
      }
    }
  }
</script>

<style scoped="scoped">
  .dash-container {
    width: 100%;
    padding: 1px 20px 20px;
    background-color: #E5E5E5;
  }
  .filter {
    display: flex;
    align-items: center;
    padding-top: 15px;
    justify-content: space-between;
  }
  .filter-item {
    width: 100%;
    max-width: 300px;
  }
  .card-group {
    display: flex;
    flex-wrap: wrap;
    flex-flow: wrap;
    margin: 0 -5px;
    align-items: flex-start;
    align-content: flex-start;
  }
  .card-view {
    margin: 15px 5px 0;
    padding: 12px 15px;
    border-radius: 6px;
    background-color: white;
  }
  .card-title {
    color: #333;
    font-size: 14px;
    position: relative;
  }
  .card-title::before {
    top: -12px;
    left: -15px;
    right: -15px;
    bottom: -10px;
    content: " ";
    opacity: .7;
    position: absolute;
    border-radius: 6px 6px 0 0;
    background-color: rgba(0, 0, 0, .05);
  }
  .line-horizontal {
    height: 2px;
    margin: 10px -8px;
    background-color: #F0F5FC;
  }
  .glance-total-view {
    flex: 2;
    padding: 2px 15px;
  }
  .total-upcase {
    padding-top: 8px;
    font-size: 18px;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  .total-bottom-title {
    color: #333;
    font-size: 14px;
    padding-top: 6px;
  }
  .totals {
    flex: 1;
    color: #F3B901;
    cursor: pointer;
    font-size: 36px;
    padding: 16px 0;
    user-select: none;
    line-height: 36px;
    position: relative;
    transition: all .4s;
  }
  .totals:hover {
    font-size: 42px;
  }
  .totals::after {
    left: 0;
    right: 0;
    bottom: 8px;
    height: 3px;
    content: " ";
    border-radius: 10px;
    position: absolute;
    background-image: linear-gradient(to right, #F3B901, #FFFAE8);
  }
  .total-power {
    color: #3179E4;
  }
  .total-power::after {
    background-image: linear-gradient(to right, #3179E4, #E8F0FC);
  }
  .total-amount {
    color: #0BD373;
  }
  .total-amount::after {
    background-image: linear-gradient(to right, #0BD373, #E4FAEF);
  }
  .glance-total-list {
    flex: 3;
    padding: 3px 5px 3px 15px;
    border-left: 2px solid #F0F5FC;
  }
  .total-list-item {
    display: flex;
    padding: 6px;
    line-height: 22px;
    align-items: center;
    justify-content: space-between;
  }
  .total-list-item + .total-list-item {
    border-top: 2px solid #F0F5FC;;
  }
  .total-list-item span {
    color: #434343;
    font-size: 13px;
  }
  .total-list-item label {
    color: #333;
    font-size: 15px;
  }
  .total-list-item.mini {
    padding: 4px 6px;
    line-height: 14px;
  }
  .total-list-item.mini span {
    color: #434343;
    font-size: 12px;
  }
  .total-list-item.mini label {
    color: #333;
    font-size: 14px;
  }
  .charts-card {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: white;
  }
  .chart-title {
    color: #333;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 15px;
  }
  .radio-group {
    padding-top: 5px;
    text-align: center;
  }
  .barView {
    padding-bottom: 10px;
  }
  @media screen and (max-width: 520px) {
    .dash-container {
      padding: 1px 10px 15px;
    }
    .filter {
      padding-top: 10px;
    }
    .card-view {
      flex: 1;
      margin: 10px 5px 0;
    }
    .glance-total-list {
      padding: 5px;
    }
    .charts-card {
      margin: 10px 0 0;
    }
  }
  @media screen and (min-width: 520px) {
    .card-view {
      flex-grow: 1;
    }
  }
  @media screen and (min-width: 768px) {
    .barView + .barView {
      border-left: 10px solid #F0F5FC;
    }
    .barView + .barView + .barView {
      border-left: none;
    }
  }
  @media screen and (min-width: 992px) {
    .barView + .barView + .barView {
      border-left: 10px solid #F0F5FC;
    }
  }
  @media screen and (min-width: 1366px) {
    .card-view {
      flex: 1;
    }
  }
  .barGroup {
    margin-top: 15px;
    padding-top: 18px;
    border-top: 1px solid #F0F5FC;
  }
</style>