ChargEco/Strides-Admin/src/views/charge/Connectors.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-view">
        <div
          v-if="sitePk"
          class="back-icon"
          @click="goBack">
          <i class="el-icon el-icon-back"></i>
        </div>
        <el-select
          v-model="filter.pageVo.errorCode"
          placeholder="Error Code"
          @change="handleFilter"
          class="filter-view-item"
          clearable>
          <el-option
            v-for="(item,index) in errCodeOptions"
            :key="index"
            :label="item.name"
            :value="item.value"/>
        </el-select>
        <el-select
          v-model="filter.pageVo.status"
          placeholder="Status"
          @change="handleFilter"
          class="filter-view-item"
          clearable>
          <el-option
            v-for="(item,index) in statusOptions"
            :key="index"
            :label="item.name"
            :value="item.value"/>
        </el-select>
        <div class="flex1" style="max-width: 500px;">
          <el-input
            class="filter-view-item"
            v-model="filter.pageVo.criteria"
            prefix-icon="el-icon-search"
            placeholder="Search by Station ID, Site Name, Carpark Code, Vendor Error Code"
            @keyup.enter.native="handleFilter"
            @change="handleFilter"
            clearable/>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleFilter">
          Search
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="connectorList"
      class="no-border"
      style="width: 100%;min-height: 65vh;">
      <el-table-column
        label="Station ID"
        prop="sitePk"
        align="center"
        min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.chargeBoxId }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Site Name"
        prop="sitePk"
        align="center"
        min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.siteName }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Carpark Code"
        prop="carParkCode"
        align="center"
        min-width="120"/>
      <!--el-table-column
        label="Service Provider"
        prop="sitePk"
        align="center"
        width="180">
          <template slot-scope="{row}">
            <span>{{ row.providerName }}</span>
          </template>
      </el-table-column-->
      <el-table-column
        label="Connector ID"
        prop="sitePk"
        align="center"
        min-width="120">
          <template slot-scope="{row}">
            <span>{{ row.connectorId }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Last Status Update"
        prop="sitePk"
        align="center"
        min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.dateTime }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Status"
        prop="sitePk"
        align="center"
        min-width="80">
          <template slot-scope="{row}">
            <span>{{ row.status }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Error Code"
        prop="sitePk"
        align="center"
        min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.errorCode }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Vendor Error Code"
        prop="sitePk"
        align="center"
        min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.vendorErrorCode }}</span>
          </template>
      </el-table-column>
      <el-table-column
        label="Action"
        prop="sitePk"
        align="center"
        width="70">
        <template slot-scope="{row}">
          <!-- <TableAction /> -->
          <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="showConnectorQR">
                QRCode
              </el-dropdown-item>
              <el-dropdown-item
                command="showWebPosQR"
                v-if="enableWebPos">
                WebPosQR
              </el-dropdown-item>
              <el-dropdown-item
                command="changeToAvailable"
                v-if='row.status == "Unavailable"'>
                Change Availability to Available
              </el-dropdown-item>
              <el-dropdown-item
                command="changeToUnavailable"
                v-else>
                Change Availability to Unavailable
              </el-dropdown-item>
              <el-dropdown-item
                command="unlockConnector">
                Unlock Connector
              </el-dropdown-item>
              <el-dropdown-item
                command="remoteStart"
                v-if='row.status == "Preparing"'>
                Remote Start Transaction
              </el-dropdown-item>
              <el-dropdown-item
                command="remoteStop"
                v-if='row.status == "Charging"'>
                Remote Stop Transaction
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="filter.pageNo"
        :limit.sync="filter.pageSize"
        @pagination="getConnectorList" />
    </div>
    <ConnectorTags
      :visible="printConnector.visible"
      :qrCode="printConnector.qrCode"
      @hide="hideConnectorQR"/>
    <DialogRemoteOcpp
      v-bind="actionDialog"
      @hide="hideActionDialog"/>
    <WebPosQR 
      v-bind="webPosDialog"
      @hide="hideConnectorQR"/>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' 
import TableAction from '@/components/TableAction.vue'
import ConnectorTags from './components/ConnectorTags.vue'
import WebPosQR from './components/WebPosQR.vue'
import DialogRemoteOcpp from './components/DialogRemoteOcpp.vue'
import api from '../../http/api/charge'
import ocpp from '../../http/api/ocpp'
import settings from '../../settings.js'
export default {
  components: { Pagination, TableAction, ConnectorTags, DialogRemoteOcpp,WebPosQR },
  data() {
    return {
      filter: {
        pageNo: 1,
        pageSize: 10,
        pageVo: {
          criteria: '',
          status: '',
          errorCode: ''
        }
      },
      listLoading: true,
      connectorList: [],
      total: 0,
      statusOptions: [],
      errCodeOptions: [],
      printConnector: {
        qrCode: "",
        visible: false
      },
      sitePk: "",
      actionDialog: {
        visible: false,
        isStart: true,
        item: {}
      },
      webPosDialog: {
        visible: false,
        item: {}
      },
      enableWebPos: settings.enableWebPos
    }
  },
  created() {
    if (this.$route.params.id) {
      this.filter.sitePk = this.sitePk = this.$route.params.id;
    }
    this.getStatusOption();
    this.getErrorCodeOptions();
  },
  methods: {
    goBack() {
      this.$router.push({
        path: "/site-management/edit/" + this.sitePk
      })
    },
    handleFilter() {
      this.filter.pageNo = 1;
      this.getConnectorList();
    },
    getStatusOption() {
      api.getStatusList().then(res => {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.statusOptions.push({
              name: item,
              value: item
            })
          })
        }
        this.getConnectorList();
      }).catch(err => {
        this.$message.error(err)
      })
    },
    getErrorCodeOptions() {
      api.getErrorCodeOption().then(res => {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.errCodeOptions.push({
              name: item,
              value: item
            })
          })
        }
        this.getConnectorList();
      }).catch(err => {
        this.$message.error(err)
      })
    },
    getConnectorList() {
      this.listLoading = true;
      api.getConnectorList(this.filter).then(res => {
        this.listLoading = false;
        this.total = res.total;
        this.connectorList = res.data;
      }).catch(err => {
        this.$message.error(err)
        this.listLoading = false;
      })
    },
    handleCommand(cb, item) {
      this[cb](item)
    },
    showConnectorQR(row) {
      this.printConnector.visible = true;
      this.printConnector.qrCode = row.chargeBoxId + "::" + row.connectorId
    },
    showWebPosQR(row) {
      this.webPosDialog.item = row;
      this.webPosDialog.visible = true;
    },
    unlockConnector(row) {
      this.$confirm("Confirm unlock this connector?", "Unlock Connector",  {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(res => {
        const params = {
          connectorId: row.connectorId,
          stationIds: [row.chargeBoxId]
        }
        this.sendPerform("ocppOperations/unlockConnector", params);
      })
    },
    changeToAvailable(row) {
      this.$confirm("Confirm change to available?", "Change Availability",  {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(res => {
        const params = {
          availType: "OPERATIVE",
          connectorId: row.connectorId,
          stationIds: [row.chargeBoxId]
        }
        this.sendPerform("ocppOperations/changeAvailability", params);
      })
    },
    changeToUnavailable(row) {
      this.$confirm("Confirm change to unavailable?", "Change Availability",  {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(res => {
        const params = {
          availType: "INOPERATIVE",
          connectorId: row.connectorId,
          stationIds: [row.chargeBoxId]
        }
        this.sendPerform("ocppOperations/changeAvailability", params);
      })
    },
    sendPerform(api, params) {
      this.listLoading = true;
      ocpp.sendPerform(api, params).then(res => {
        this.listLoading = false;
        if (res.data.taskId) {
          this.$openRoute("/ocpp-operations/result/" + res.data.taskId);
          //this.$router.push({path: '/ocpp-operations/result/' + res.data.taskId});
        }
      }).catch(err => {
        this.listLoading = false;
        this.$message({
          type: 'error',
          message: err
        })
      });
    },
    remoteStart(row) {
      this.actionDialog.visible = true;
      this.actionDialog.item = row;
      this.actionDialog.isStart = true;
      /*this.$confirm("Confirm remote start?", "Remote",  {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(res => {
        const params = {
          connectorId: row.connectorId,
          stationIds: [row.chargeBoxId],
          //mobileNumber: ""
        }
        //this.sendPerform("ocppOperations/remoteStartTransaction", params);
      })*/
    },
    remoteStop(row) {
      this.actionDialog.visible = true;
      this.actionDialog.item = row;
      this.actionDialog.isStart = false;
      /*this.$confirm("Confirm remote stop?", "Remote",  {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(res => {
        const params = {
          availType: "INOPERATIVE",
          connectorId: row.connectorId,
          stationIds: [row.chargeBoxId]
        }
        //this.sendPerform("ocppOperations/remoteStopTransaction", params);
      })*/
    },
    hideConnectorQR() {
      this.printConnector.visible = false;
      this.webPosDialog.visible = false;
    },
    hideActionDialog() {
      this.actionDialog.visible = false;
    }
  }
}
</script>

<style lang="scss">
  .filter-item {
    &.el-input {
      width: 100%;
      .el-input__inner {
        width: 100%;
        min-width: 300px;
        max-width: 500px;
        border-radius: 2px;
      }
    }
  }
  .back-icon {
    width: 30px;
    height: 30px;
    padding: 10px;
    display: flex;
    cursor: pointer;
    font-size: 18px;
    align-items: center;
  }
</style>