ChargEco/Strides-Admin/src/views/charging/LoadBalanceView.vue

<template>
  <div class="view-container" v-loading="loading">
    <div class="flexr">
      <div class="view-content card">
        <div class="section-title">Connector Utilization Rate Today</div>
        <CircleChart
          v-if="detailData.connectorUtilization"
          :chartData="detailData.connectorUtilization"/>
      </div>
      <div class="view-content form">
        <div class="section-title">Hourly Utilization(kWh)</div>
        <LineChart :chartData="detailData.hourlyUsage"/>
      </div>
    </div>
    <div class="flexr">
      <div class="view-content card">
        <div class="section-title">Power Delivery Summary</div>
        <div class="flexcw">
          <div class="summary-text">Highest Delivered (kWh)</div>
          <div class="summary-text">{{detailData.highestDelivered}}</div>
        </div>
        <div class="flexcw">
          <div class="summary-text">Lowest Delivered (kWh)</div>
          <div class="summary-text">{{detailData.lowestDelivered}}</div>
        </div>
        <div class="flexcw">
          <div class="summary-text">Total Connectors</div>
          <div class="summary-text">{{detailData.connectorUtilization.allConnectorCount || "0"}}</div>
        </div>
        <div class="flexcw">
          <div class="summary-text">Max Connectors Used</div>
          <div class="summary-text">{{detailData.staticMaxAmpere || "0"}}</div>
        </div>
      </div>
      <el-form class="view-content form">
        <div class="section-title flexcr">
          LOAD BALANCING Settings
          <div class="section-sub-title" v-if="detailData.siteName">(<b>Site Name:</b> {{detailData.siteName}})</div>
        </div>
        <Balancing v-model="balancingForm" :isEdit="true"/>
      </el-form>
    </div>
    <div class="view-content flexcr">
      <div class="buttons">
        <el-button
          class="cancel-button"
          type="primary"
          @click="onBack">
          Cancel
        </el-button>
        <el-button
          type="primary"
          @click="onClickSave">
          Save
        </el-button>
      </div>
      <div class="update-by">
        <span
          class="add-text"
          :title='"CREATED BY " + detailData.createdBy + " ON " + detailData.createdOn'>
          LAST UPDATED BY {{detailData.updatedBy}} TIMESTAMP: {{detailData.updatedOn}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/http/api/apiBalancing.js';
import Balancing from '../site/components/Balancing';
import LineChart from '../dashboard/chart/LineChart.vue';
import CircleChart from '../dashboard/chart/CircleChart.vue';
export default {
  data() {
    return {
      loading: false,
      detailData: {
        sitePk: "",
        siteName: "",
        hourlyUsage: {
          xdata: [],
          ydata: []
        },
        highestDelivered: "",
        lowestDelivered: "",
        connectorUtilization: {}
      },
      balancingForm: {
        sitePk: "",
        loadBalancing: 'dynamic',
        staticMaxAmpere: 0,
        siteChargingProfiles: [{
          boxInUse: '',
          chargingProfilePk: ''
        }]
      },
    };
  },
  components: {Balancing,CircleChart,LineChart},
  created() {
    if (this.$route.params.id) {
      this.getBalanceDetail();
    }
  },
  methods: {
    onBack() {
      this.$router.push({
        path: "/smart-energy-management/site-load-balancing"
      });
    },
    getBalanceDetail() {
      this.loading = true;
      api.viewBalancing({
        sitePk: this.$route.params.id,
      }).then(res => {
        if (res.data) {
          this.detailData = res.data;
          this.balancingForm = {
            sitePk: this.detailData.sitePk,
            loadBalancing: this.detailData.loadBalancing || 'dynamic',
            staticMaxAmpere: this.detailData.staticMaxAmpere || 0,
            siteChargingProfiles: this.detailData.siteChargingProfiles || [{
              boxInUse: '',
              chargingProfilePk: ''
            }]
          }
        }
        this.loading = false;
      }).catch(() => {
        this.$message({
          message: err,
          type: 'error',
          duration: 3000,
        })
        this.loading = false;
      })
    },
    onClickSave() {
      if (this.balancingForm.loadBalancing == 'dynamic') {
        this.balancingForm.staticMaxAmpere = ""
      }
      const chargeProfiles = []
      this.balancingForm.siteChargingProfiles.forEach(item => {
        if (item.boxInUse && item.chargingProfilePk)
          chargeProfiles.push(item)
      })
      if (chargeProfiles.length > 0) {
        this.balancingForm.siteChargingProfiles = chargeProfiles;
      } else {
        this.$message({
          message: "Please add at least one charging profile",
          type: 'error'
        })
        return;
      }
      this.loading = true;
      api.updateBalancing(this.balancingForm).then(res => {
        this.$message({
          message: "Saved successfully",
          type: 'success',
          duration: 3000
        })
        this.onBack();
      }).catch(() => {
        this.$message({
          message: err,
          type: 'error',
          duration: 3000,
        })
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '../../styles/variables.scss';
  
  .view-container {
    width: 100%;
    padding: 20px 40px;
    min-height: $mainAppMinHeight;
    background-color: #F0F5FC;
  }
  
  .view-content {
    margin: 0 8px 16px;
    padding: 15px 40px;
    border-radius: 6px;
    background-color: white;
    &.card {
      flex: 1;
      min-width: 200px;
      max-width: 320px;
      padding-bottom: 30px;
    }
    &.form {
      flex: 1;
      min-width: 300px;
    }
  }
  
  .section-title {
    color: #333333;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 700;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  
  .section-sub-title {
    color: #333333;
    font-size: 15px;
    line-height: 24px;
    padding-left: 10px;
    font-weight: normal;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  
  .summary-text {
    color: #333;
    padding: 5px 0;
    font-size: 14px;
    + .summary-text {
      white-space: nowrap;
      padding-left: 10px;
    }
  }
  
  @media screen and (max-width: 800px) {
    .view-container {
      padding: 10px 20px;
    }
    .view-content {
      padding: 15px 20px;
    }
  }
  
  @media screen and (max-width: 620px) {
    .view-content {
      max-width: unset !important;
      margin: 0 8px 10px;
    }
  }
  
  @media screen and (max-width: 500px) {
    .view-container {
      padding: 0px;
    }
    .view-content {
      padding: 15px 20px;
    }
  }
</style>