update pages

Strides-Admin/src/views/Reports.vue

@@ -1,476 +0,0 @@
-<template>
-  <div class="app-container">
-    <div
-      class="filter-container"
-      v-loading="loading">
-      <el-form
-        label-width="130px"
-        :model="reportFilter">
-        <div class="row">
-          <el-form-item
-            label="Report Type:"
-            class="row-item">
-            <el-select
-              v-model="reportFilter.reportType"
-              @change="changeReportType"
-              clearable>
-              <el-option
-                v-for="reportType in reportTypeOptions"
-                :label="reportType.name"
-                :value="reportType.value"
-                :key="reportType.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label="Service Provider:"
-            v-if="reportFilter.reportType !== 'MTU' && reportFilter.reportType !== 'MAF'"
-            class="row-item">
-            <el-select
-              v-model="reportFilter.providerPk"
-              clearable>
-              <el-option
-                v-for="serviceProvider in serviceProviderOptions"
-                :label="serviceProvider.name"
-                :value="serviceProvider.value"
-                :key="serviceProvider.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label="Site:"
-            class="row-item"
-            v-if="reportFilter.reportType == 'MAF' || reportFilter.reportType == 'MSS'">
-            <el-select
-              clearable
-              filterable
-              remote
-              v-model="reportFilter.sitePk"
-              :remote-method="(s) => getSiteOptions(s)"
-              placeholder="Select with search">
-              <el-option
-                v-for="(item, index) in siteOptions"
-                :key="index"
-                :label="item.siteName"
-                :value="item.sitePk"/>
-            </el-select>
-          </el-form-item>
-        </div>
-
-        <div class="row">
-          <el-form-item
-            label="Year:"
-            class="row-item"
-            v-if="reportFilter.reportType != 'MAF'">
-            <el-date-picker
-              v-model="reportFilter.year"
-              format="yyyy"
-              value-format="yyyy"
-              type="year"
-              :clearable="false"/>
-          </el-form-item>
-          <el-form-item
-            label="Month:"
-            class="row-item"
-            v-if="reportFilter.reportType != 'MAF'">
-            <el-select
-              v-model="reportFilter.month"
-              clearable>
-              <el-option
-                v-for="month in monthOptions"
-                :label="month.name"
-                :value="month.value"
-                :key="month.value"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label="Date Range:"
-            class="row-item"
-            v-if="reportFilter.reportType == 'MAF'">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              value-format="yyyy-MM-dd"
-              start-placeholder="Start Date"
-              end-placeholder="End Date"
-              :picker-options="pickerOptions"
-              clearable/>
-          </el-form-item>
-          <el-button
-            class="filter-item generate-button"
-            v-waves
-            type="primary"
-            @click="handleGenerateReport">
-            Search
-          </el-button>
-          <el-button
-            class="filter-item generate-button"
-            v-waves
-            type="primary"
-            :disabled="regenbtn"
-            @click="reGenerateReport">
-            Generate
-          </el-button>
-        </div>
-      </el-form>
-    </div>
-    <el-table
-      :data="reports"
-      fit
-      style="width: 100%;">
-      <el-table-column
-        label="File Name"
-        prop="fileName"
-        align="center"
-        min-width="400"
-        >
-        <template slot-scope="{row}">
-          <span>{{ row.fileName }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="Month"
-        prop="monthStr"
-        align="center"
-        min-width="90"
-      >
-          <template slot-scope="{row}">
-            <span>{{ row.monthStr }}</span>
-          </template>
-      </el-table-column>
-      <el-table-column
-        label="Service Provider"
-        prop="providerName"
-        align="center"
-        min-width="160">
-          <template slot-scope="{row}">
-            <span>{{ row.providerName }}</span>
-          </template>
-      </el-table-column>
-      <el-table-column
-        label="Creation Date/Time"
-        prop="createDateTime"
-        align="center"
-        min-width="180"
-      >
-          <template slot-scope="{row}">
-            <span>{{ row.createDateTime }}</span>
-          </template>
-      </el-table-column>
-      <el-table-column
-        v-if="!$route.meta.onlyView"
-        label="Action"
-        align="center"
-        min-width="160"
-      >
-          <template slot-scope="{row}">
-            <el-button
-              :loading="row.loading"
-              icon="el-icon-download"
-              class="export-button"
-              @click="handleExportExcel(row)"
-            >
-              Export
-            </el-button>
-          </template>
-      </el-table-column>
-    </el-table>
-    <div class="right">
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="pagination.page"
-        :limit.sync="pagination.limit"
-        @pagination="handlePageChange" />
-    </div>
-  </div>
-</template>
-
-<script>
-import api from '@/http/api/dashboard'
-import site from '@/http/api/site'
-import reports from '@/http/api/reports'
-
-// waves directive
-import waves from '@/directive/waves'
-// secondary package based on el-pagination
-import Pagination from '@/components/Pagination'
-import TableAction from '@/components/TableAction.vue'
-
-const { getProviderList } = api
-const {
-  getReportTypeList,
-  getMonthList,
-  getReportsPages,
-  downloadFile,
-  generateMonthlyExcel
-} = reports
-
-export default {
-  name: 'Reports',
-  components: { Pagination, TableAction },
-  directives: { waves },
-  setup() {
-    
-  },
-  created() {
-    this.getData()
-    this.getReportsPages()
-  },
-  data() {
-    return {
-      loading: false,
-      regenbtn: false,
-      dateRange: [],
-      siteOptions: [],
-      reportTypeOptions: [],
-      serviceProviderOptions: [],
-      monthOptions: [],
-      yearOptions: [],
-      reportFilter: {
-        sitePk: "",
-        reportType: '',
-        providerPk: '',
-        year: ''+new Date().getFullYear(),
-        month: '',
-      },
-      reports: [],
-      total: 0,
-      pagination: {
-        limit: 10,
-        page: 1,
-      },
-      pickerOptions: {
-        shortcuts: [{
-          text: 'Nearest Week',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
-      },
-    }
-  },
-  methods: {
-    getData() {
-      this.loading = true
-      Promise.all([
-        this.getServiceProviderTypeOptions(),
-        this.getMonthOptions(),
-        this.getReportTypeOptions(),
-        this.getSiteOptions()
-      ]).then(() => {
-        this.loading = false
-      })
-    },
-    changeReportType() {
-      this.getSiteOptions("")
-    },
-    validate(isGen) {
-      var valid = true;
-      if (this.reportFilter.reportType == 'MAF') {
-        if (this.dateRange.length == 2) {
-          this.reportFilter.dateStart = this.dateRange[0]
-          this.reportFilter.dateEnd = this.dateRange[1]
-        } else if (isGen) {
-          this.$message({
-            type: 'error',
-            message: "Please select date range"
-          });
-          valid = false;
-        }
-      }
-      if (/*this.reportFilter.reportType == 'MSUR' || */this.reportFilter.reportType == 'MAF') {
-        if (!this.reportFilter.sitePk && isGen) {
-          this.$message({
-            type: 'error',
-            message: "Please select a site"
-          });
-          valid = false;
-        }
-      }
-      return valid;
-    },
-    handleGenerateReport() {
-      if (!this.validate()) {
-        return;
-      }
-      this.loading = true
-      this.getReportsPages()
-    },
-    async reGenerateReport() {
-      if (!this.validate(true)) {
-        return;
-      }
-      this.regenbtn = true;
-      this.loading = true;
-      generateMonthlyExcel(this.reportFilter).then(res => {
-        this.loading = false;
-        this.$message({
-          type: res.success?'success':'error',
-          message: res.msg
-        })
-      }).catch(err => {
-        this.loading = false;
-        this.$message({
-          type: 'error',
-          message: err
-        })
-      })
-      
-      setTimeout(() => {
-        this.regenbtn = false;
-      }, 5000);
-    },
-    getServiceProviderTypeOptions() {
-      return getProviderList().then(({ data }) => {
-        this.serviceProviderOptions = data
-        this.reportFilter.providerPk = data[0].value
-      })
-    },
-    getMonthOptions() {
-      return getMonthList().then(({ success, data }) => {
-        if (success) {
-          this.monthOptions = data
-          this.reportFilter.month = data[0].value
-        }
-      })
-    },
-    getReportTypeOptions() {
-      return getReportTypeList()
-        .then(({ success, data }) => {
-          if (success) {
-            this.reportTypeOptions = data
-            this.reportFilter.reportType = data[0].value
-          }
-        })
-    },
-    getSiteOptions(search) {
-      site.getAllSiteList({siteName: search ?? ""}).then(res => {
-        if (res.data && res.data.length > 0) {
-          this.siteOptions = res.data
-        }
-      });
-    },
-    handlePageChange(value) {
-      this.loading = true
-      const { limit, page } = value
-      this.pagination.limit = limit
-      this.pagination.page = page
-      this.getReportsPages()
-    },
-    getReportsPages() {
-      const {
-        limit,
-        page,
-      } = this.pagination
-      const params = {
-        pageSize: limit,
-        pageNo: page,
-        pageVo: this.reportFilter,
-      }
-      return getReportsPages(params)
-        .then(({ success, data, total }) => {
-          if (success) {
-            this.reports = data.map((report) => {
-              report.loading = false
-              return report
-            })
-            this.total = total
-          }
-        }).finally(() => {
-          this.loading = false
-        })
-    },
-    handleExportExcel(row) {
-      row.loading = true
-      downloadFile({ filePk: row.filePk }).then((res) => {
-        this.downloadExcel(res, row.fileName)
-      }).finally(() => {
-        row.loading = false
-      })
-    },
-    downloadExcel(res, fileName) {
-      const blob = new Blob([res], {
-        type: 'application/vnd.ms-excel;charset=utf-8'
-      })
-      // let href = window.URL.createObjectURL(blob)
-      if ('download' in document.createElement('a')) {
-        // 非IE下载
-        const elink = document.createElement('a')
-        elink.download = fileName
-        elink.style.display = 'none'
-        elink.href = URL.createObjectURL(blob)
-        document.body.appendChild(elink)
-        elink.click()
-        URL.revokeObjectURL(elink.href) // 释放URL 对象
-        document.body.removeChild(elink)
-      } else {
-        // IE10+下载
-        navigator.msSaveBlob(blob, fileName)
-      }
-      this.excelLoad = false
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-  @import '../styles/variables.scss';
-
-  .view-container {
-    width: 100%;
-    padding: 20px 60px;
-    background-color: #F0F5FC;
-  }
-
-  .view-content {
-    padding: 15px 45px;
-    border-radius: 6px;
-    min-height: calc(#{$mainAppMinHeight} - (2 * 20px));
-    background-color: white;
-  }
-
-  .section-title {
-    color: #333;
-    padding-left: 30px;
-    margin-top: 20px;
-    margin-bottom: 30px;
-    font-size: 15px;
-    user-select: none;
-    line-height: 24px;
-    font-weight: 700;
-    font-family: sans-serif;
-    text-transform: uppercase;
-  }
-
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .row-item {
-    position: relative;
-    margin-right: 20px;
-  }
-  
-  .row-item > * {
-    width: 100%;
-  }
-
-  .generate-button {
-    width: 107.9px;
-    height: 40px;
-  }
-
-  .export-button {
-    background-color: #fff;
-  }
-  @media screen and (max-width: 500px) {
-    .view-content {
-      padding: 15px 30px;
-    }
-  }
-</style>

Strides-Admin/src/views/access/DialogDetail.vue

@@ -333,7 +333,7 @@ export default {
     onFormSave() {
       this.$refs['acsForm'].validate((valid) => {
         if (valid) {
-          this.isEdit ?this.updateUser() : this.addUser();
+          this.isEdit ? this.updateUser() : this.addUser();
         }
       })
     },

Strides-Admin/src/views/rate-base/detail.vue

@@ -248,7 +248,7 @@ export default {
     onBack() {
       this.$nextTick(() => {
         this.$router.replace({
-          path: "/site-management/dynamic-rate-configuration"
+          path: "/site-management/rate-configuration"
         })
       })
     },

Strides-Admin/src/views/redirect/404.vue

@@ -26,7 +26,10 @@
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
         <div class="bullshit__headline">{{ message }}</div>
-        <div class="link-type" style="display: inline-block;" @click="backHome">Back to Home</div>
+        <div class="flexc">
+          <div class="link-type" @click="backHome">Back to Home</div>
+          <div class="link-type" @click="switchAccount">Switch Account</div>
+        </div>
       </div>
     </div>
   </div>
@@ -45,6 +48,12 @@ export default {
       this.$router.replace({
         path: "/redirect"
       })
+    },
+    switchAccount() {
+      this.$store.dispatch("user/logout").then(res => {
+        this.$store.commit('permission/SET_ROUTES', []);
+        this.$router.push({ path: "/login" });
+      })
     }
   }
 };
@@ -220,7 +229,7 @@ export default {
       color: #222;
       font-weight: bold;
       opacity: 0;
-      margin-bottom: 10px;
+      margin-bottom: 20px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.1s;
@@ -273,4 +282,7 @@ export default {
     padding: 10vh 0;
   }
 }
+.link-type + .link-type {
+  margin-left: 20px;
+}
 </style>

Strides-Admin/src/views/site/SiteManagement.vue

@@ -102,7 +102,9 @@
         <template slot-scope="{row}" v-if="row.dynamicRates">
           <div
             v-for="(item,index) in row.dynamicRates"
-            :key="index">
+            :key="index"
+            style="cursor: alias;"
+            @click="viewRateDialog(row)">
             {{item}}
           </div>
         </template>
@@ -147,12 +149,31 @@
         v-if="visible.actions"
         label="Action"
         align="center"
-        min-width="120">
+        min-width="70">
           <template slot-scope="{row, $index}">
-            <TableAction
+            <!-- <TableAction
               :showDel="visible.actionDelete"
               @edit="handleUpdateSite(row, $index)"
-              @delete="handleDeleteSite(row, $index)"/>
+              @delete="handleDeleteSite(row, $index)"/> -->
+            <el-dropdown
+              class="action-dropdown"
+              @command="(v) => handleCommand(v, row)">
+              <i class="el-icon-more icon-action"></i>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  command="handleUpdateSite">
+                  Edit
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleDeleteSite">
+                  Delete
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="viewRateDialog">
+                  View Rate
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </template>
       </el-table-column>
     </el-table>
@@ -164,6 +185,10 @@
         :limit.sync="filter.pageSize"
         @pagination="getList" />
     </div>
+    <history-rate
+      v-bind="actionRate"
+      @hide="hideRateDialog"
+    />
   </div>
 </template>
 
@@ -177,10 +202,11 @@ import TableAction from '@/components/TableAction.vue'
 import site from '../../http/api/site'
 import provider from '../../http/api/provider'
 import { getRoleName } from '@/utils/auth'
+import historyRate from './historyRate.vue'
 
 export default {
   name: 'SiteManagement',
-  components: { Pagination, TableAction },
+  components: { Pagination, TableAction, historyRate },
   directives: { waves },
   data() {
     return {
@@ -202,6 +228,10 @@ export default {
         actionDelete: true,
         addButton: true,
       },
+      actionRate: {
+        id: 0,
+        visible: false
+      }
     }
   },
   created() {
@@ -229,14 +259,21 @@ export default {
     },
     getList() {
       this.listLoading = true
-      site.getSiteList(this.filter).then((response) => {
-        this.list = response.data
-        this.total = response.total
+      site.getSiteList(this.filter).then(res => {
+        if (res.data && res.total) {
+          this.list = res.data
+          this.total = res.total
+        } else {
+          this.list = []
+          this.total = 0
+        }
       }).catch(err => {
         this.$message({
           message: err,
           type: 'error'
         })
+        this.list = []
+        this.total = 0
       }).finally(() => {
         this.listLoading = false
       })
@@ -249,12 +286,12 @@ export default {
       //this.$router.push({ path: '/site-management/add-site' })
       this.$router.push({ path: '/site-management/add' })
     },
-    handleUpdateSite(row, index) {
+    handleUpdateSite(row) {
       /*this.$store.commit('site/SET_SELECTED_SITE', row)
       this.$router.push({ path: '/site-management/update-site' })*/
       this.$router.push({ path: '/site-management/edit/' + row.sitePk })
     },
-    handleDeleteSite(row, index) {
+    handleDeleteSite(row) {
       this.$confirm(
         'Are you sure you want to delete this site ?',
         'Delete', {
@@ -278,6 +315,16 @@ export default {
         })
       })
     },
+    handleCommand(cb, item) {
+      this[cb](item)
+    },
+    viewRateDialog(row) {
+      this.actionRate.visible = true;
+      this.actionRate.id = row.sitePk;
+    },
+    hideRateDialog() {
+      this.actionRate.visible = false;
+    }
   }
 }
 </script>

Strides-Admin/src/views/site/components/Balancing.vue

@@ -1,84 +1,79 @@
 <template>
   <div class="vbe-balancing">
-    <el-row :gutter="20">
-      <el-col :sm="24">
-        <el-form-item
-          label="Load Balancing Type:"
-          label-width="160px">
-          <el-select
-            style="max-width: 150px;"
-            v-model="balancingForm.loadBalancing"
-            @change="changeBalance">
-            <el-option
-              v-for="(item,index) in balancingTypes"
-              :key="index"
-              :label="item"
-              :value="item"/>
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20" v-if="balancingForm.loadBalancing == 'static'">
-      <el-col :sm="24">
-        <el-form-item
-          label="Max Current At Site:"
-          label-width="160px">
-          <el-input
-            style="max-width: 100px;"
-            v-model.number="balancingForm.staticMaxAmpere"
-            maxlength="5"
-            @change="changeAmpere"/>
-          <span class="text-unit">A</span>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row
-      :gutter="30"
+    <div class="flexcr">
+      <el-form-item
+        label="Load Balancing Type:"
+        label-width="160px"
+        class="vbe-form-item">
+        <el-select
+          v-model="balancingForm.loadBalancing"
+          @change="changeBalance">
+          <el-option
+            v-for="(item,index) in balancingTypes"
+            :key="index"
+            :label="item"
+            :value="item"/>
+        </el-select>
+      </el-form-item>
+    </div>
+    <div class="flexcr" v-if="balancingForm.loadBalancing == 'static'">
+      <el-form-item
+        label="Max Current At Site:"
+        label-width="160px"
+        class="vbe-form-item">
+        <el-input
+          style="max-width: 100px;"
+          v-model.number="balancingForm.staticMaxAmpere"
+          maxlength="5"
+          @change="changeAmpere"/>
+        <span class="text-unit">A</span>
+      </el-form-item>
+    </div>
+    <div
+      class="flexcr"
       v-for="(item, index) in balancingForm.siteChargingProfiles"
       :key="index">
-      <el-col :sm="8" :md="7" :lg="6">
-        <el-form-item
-          label="Chargers In-Use:"
-          label-width="130px">
-          <el-select
-            v-model="item.boxInUse"
-            @change="changeInUse(index)">
-            <el-option
-              v-for="(item, idx) in boxUseOptions"
-              :key="idx"
-              :label="item"
-              :value="item"/>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :sm="10" :md="9" :lg="8">
-        <el-form-item
-          label="Charging Profile:"
-          label-width="130px">
-          <el-select 
-            v-model="item.chargingProfilePk"
-            v-if="balancingForm.loadBalancing == 'static' && balancingPrifileList[index]"
-            filterable
-            v-loading="balancingPrifileList[index].loading">
-            <el-option
-              v-for="(item,idx) in balancingPrifileList[index].options"
-              :key="idx"
-              :label="item.description"
-              :value="item.chargingProfilePk"/>
-          </el-select>
-          <el-select
-            v-model="item.chargingProfilePk"
-            v-else
-            filterable>
-            <el-option
-              v-for="(item,idx) in chargingProfileOptions"
-              :key="idx"
-              :label="item.description"
-              :value="item.chargingProfilePk"/>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :sm="6" :md="5" :lg="4">
+      <el-form-item
+        label="Chargers In-Use:"
+        label-width="130px"
+        class="vbe-form-item">
+        <el-select
+          v-model="item.boxInUse"
+          @change="changeInUse(index)">
+          <el-option
+            v-for="(item, idx) in boxUseOptions"
+            :key="idx"
+            :label="item"
+            :value="item"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="Charging Profile:"
+        label-width="130px"
+        class="vbe-form-item">
+        <el-select 
+          v-model="item.chargingProfilePk"
+          v-if="balancingForm.loadBalancing == 'static' && balancingPrifileList[index]"
+          filterable
+          v-loading="balancingPrifileList[index].loading">
+          <el-option
+            v-for="(item,idx) in balancingPrifileList[index].options"
+            :key="idx"
+            :label="item.description"
+            :value="item.chargingProfilePk"/>
+        </el-select>
+        <el-select
+          v-model="item.chargingProfilePk"
+          v-else
+          filterable>
+          <el-option
+            v-for="(item,idx) in chargingProfileOptions"
+            :key="idx"
+            :label="item.description"
+            :value="item.chargingProfilePk"/>
+        </el-select>
+      </el-form-item>
+      <div class="flexcc">
         <img
           class="list-item-icon"
           @click="handelSubSiteChargingProfiles(index)"
@@ -88,8 +83,8 @@
           class="list-item-icon"
           @click="handleAddSiteChargingProfiles"
           src="../../../assets/form-list-add.png"/>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -323,15 +318,22 @@ export default {
 
 <style lang="scss">
   .vbe-balancing {
+    .vbe-form-item + .vbe-form-item {
+      margin-left: 10px;
+    }
     .list-item-icon {
       width: 30px;
       height: 30px;
       cursor: pointer;
-      margin: 5px 10px 22px;
+      margin-left: 15px;
+      margin-bottom: 22px;
     }
     .el-input {
       min-width: 60px;
     }
+    .el-select {
+      max-width: 150px;
+    }
     .text-unit {
       font-size: 14px;
       margin-left: 10px;

Strides-Admin/src/views/site/components/Reservations.vue

@@ -68,6 +68,9 @@ export default {
     },
     enable(n, o) {
       this.$emit('update:enabled', n)
+      if (n && !this.limit) {
+        this.$emit('update:limit', 15)
+      }
     },
     limit(n, o) {
       this.timeLimit = n || 15;

Strides-Admin/src/views/site/detail.vue

@@ -231,9 +231,13 @@
           :enabled.sync="siteForm.enableReservation"
           :limit.sync="siteForm.timeLimit"
         />
-        <div class="sparator"></div>
-        <div class="section-title">LOAD BALANCING</div>
-        <Balancing v-model="balancingForm"/>
+        <div class="sparator" v-if="isEdit"></div>
+        <div class="section-title" v-if="isEdit">LOAD BALANCING</div>
+        <!-- <Balancing v-model="balancingForm"/> -->
+        <div class="new-load-balance" v-if="isEdit" style="padding-bottom: 20px;">
+          <span class="new-text">NEW!</span>
+          <span class="link-type" @click="configLoadBalance">Configure load balancing in a new window</span>
+        </div>
         <template v-if="enableWhitelistFleet">
           <div class="sparator"></div>
           <div class="section-title">WHITELIST GROUP</div>
@@ -682,7 +686,7 @@ export default {
           if (!this.siteForm.enableReservation) {
             this.siteForm.timeLimit = "";
           }
-          const chargeProfiles = []
+          /*const chargeProfiles = []
           this.balancingForm.siteChargingProfiles.forEach(item => {
             if (item.boxInUse && item.chargingProfilePk)
               chargeProfiles.push(item)
@@ -693,7 +697,7 @@ export default {
           } else {
             this.siteForm.staticMaxAmpere = this.balancingForm.staticMaxAmpere
           }
-          this.siteForm.loadBalancing = this.balancingForm.loadBalancing
+          this.siteForm.loadBalancing = this.balancingForm.loadBalancing*/
           if (!this.enablePublic && !this.enableWhitelistFleet && !this.enableWhitelistUser) {
             this.$message({
               message: "Please set time configuration",
@@ -819,6 +823,9 @@ export default {
       }).finally(() => {
         this.pageLoading = false;
       })
+    },
+    configLoadBalance() {
+      this.$openRoute("/smart-energy-management/site-load-balancing/" + this.siteForm.sitePk);
     }
   }
 }
@@ -965,4 +972,17 @@ export default {
     font-weight: 500;
     font-style: normal;
   }
+  .new-load-balance {
+    position: relative;
+    padding-left: 15px;
+    padding-bottom: 20px;
+  }
+  .new-text {
+    top: -10px;
+    left: 0px;
+    color: #FF1122;
+    font-size: 12px;
+    position: absolute;
+    transform: scale(0.8);
+  }
 </style>

Strides-Admin/src/views/zetting/ChargeType.vue

@@ -11,10 +11,26 @@
         <div class="view-content flex1">
           <div class="section-title">CHARGER TYPE SETTINGS</div>
           <div class="rate-list-view" v-for="(item, index) in settingsForm.chargeTypes" :key="index">
+            <el-form-item
+              label="Plug Type:"
+              :prop="'chargeTypes.'+index+'.plugType'"
+              :rules="rules.chargeTypes.plugType"
+              label-width="93px">
+              <el-select
+                v-model="item.plugType"
+                class="rate-text">
+                <el-option
+                  v-for="i in plugTypeOptions"
+                  :key="i"
+                  :label="i"
+                  :value="i" />
+              </el-select>
+            </el-form-item>
             <el-form-item
               label="Type:"
               :prop="'chargeTypes.'+index+'.chargeType'"
-              :rules="rules.chargeTypes.chargeType">
+              :rules="rules.chargeTypes.chargeType"
+              label-width="59px">
               <el-select
                 v-model="item.chargeType"
                 class="rate-text">
@@ -51,21 +67,27 @@
           <div style="width: 100%; overflow-x: auto;">
             <el-table
               class="table-types no-border"
-              :data="settingsForm.summaries"
-              :fit="true">
+              :data="settingsForm.summaries">
+              <el-table-column
+                label="Plug Type"
+                prop="plugType"
+                align="center"
+                min-width="100"/>
               <el-table-column
                 label="Type"
                 prop="chargeType"
-                align="center"/>
+                align="center"
+                min-width="100"/>
               <el-table-column
                 label="Wattage"
                 prop="wattage"
-                align="center"/>
+                align="center"
+                min-width="100"/>
               <el-table-column
                 label="Number of Connectors"
                 prop="countConnector"
                 align="center"
-                width="200"/>
+                min-width="200"/>
             </el-table>
           </div>
         </div>
@@ -112,12 +134,18 @@ export default {
         summaryData: []
       },
       chargeType: {
+        plugType: '',
         chargeType: '',
         chargeTypePk: '',
         wattage: ''
       },
       rules: {
         chargeTypes: {
+          plugType: {
+            required: true,
+            trigger: 'change',
+            message: 'Plug Type is required',
+          },
           chargeType: {
             required: true,
             trigger: 'change',
@@ -134,10 +162,12 @@ export default {
           }]
         }
       },
+      plugTypeOptions: [],
       chargeTypeOptions: []
     }
   },
   created() {
+    this.getPlugTypeOptions();
     this.getChargeTypeOptions();
   },
   methods: {
@@ -161,6 +191,21 @@ export default {
         })
       });
     },
+    getPlugTypeOptions() {
+      site.getPlugTypes().then(res => {
+        if (res.data) {
+          this.plugTypeOptions = res.data
+          this.chargeType.plugType = res.data[0]
+        }
+      }).catch(err => {
+        this.loading = false;
+        this.$message({
+          message: error,
+          type: "error",
+          duration: 5000,
+        })
+      });
+    },
     getChargeTypeList() {
       api.getAllChargeTypes().then(res => {
         if (res.data) {
@@ -238,7 +283,7 @@ export default {
   
   .view-container {
     width: 100%;
-    padding: 20px 60px;
+    padding: 20px 50px;
     min-height: $mainAppMinHeight;
     background-color: #F0F5FC;
   }
@@ -246,7 +291,7 @@ export default {
   .view-content {
     min-width: 35vw;
     margin: 0 8px 16px;
-    padding: 15px 50px;
+    padding: 15px 40px;
     border-radius: 6px;
     background-color: white;
   }
@@ -326,7 +371,7 @@ export default {
     }
     .view-content {
       min-width: 90vw;
-      padding: 15px 40px;
+      padding: 15px 30px;
     }
   }
   
@@ -335,7 +380,7 @@ export default {
       padding: 10px 20px;
     }
     .view-content {
-      padding: 15px 30px;
+      padding: 15px 20px;
     }
   }