|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ class="dialog-profile"
|
|
|
+ :visible="visible"
|
|
|
+ :before-close="hideDialog"
|
|
|
+ title="Clear Charging Profile">
|
|
|
+ <el-form
|
|
|
+ ref="setForm"
|
|
|
+ :model="params"
|
|
|
+ :rules="rules">
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="label">Filter Type:</div>
|
|
|
+ <el-form-item
|
|
|
+ prop="filterType"
|
|
|
+ class="form-item">
|
|
|
+ <el-select
|
|
|
+ v-model="params.filterType"
|
|
|
+ class="flex-item"
|
|
|
+ clearable
|
|
|
+ @change="changeFilterType">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in filterTypeOptions"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-row" v-if="params.filterType == 'ChargingProfileId'">
|
|
|
+ <div class="label">CURRENT CHARGING PROFILE:</div>
|
|
|
+ <div
|
|
|
+ class="underline"
|
|
|
+ v-if="item.description"
|
|
|
+ @click="viewProfiles">
|
|
|
+ {{item.description}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-else-if="params.filterType == 'OtherParameters'">
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="label">Charging Profile Purpose:</div>
|
|
|
+ <el-form-item
|
|
|
+ prop="chargingProfilePurpose"
|
|
|
+ class="form-item">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ v-model="params.chargingProfilePurpose"
|
|
|
+ class="flex-item">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in chargingPurposeOptions"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="label">Stack Level (Integer):</div>
|
|
|
+ <el-form-item
|
|
|
+ prop="filterType"
|
|
|
+ class="form-item">
|
|
|
+ <el-input
|
|
|
+ v-model="params.stackLevel"
|
|
|
+ class="flex-item"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flexcc">
|
|
|
+ <el-button
|
|
|
+ class="button"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="onClearProfiles">
|
|
|
+ CLEAR
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ocpp from '@/http/api/ocpp'
|
|
|
+import chargeProfile from '@/http/api/chargingProfile'
|
|
|
+export default {
|
|
|
+ name: "DialogClearProfiles",
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ params: {
|
|
|
+ filterType: "ChargingProfileId",
|
|
|
+ connectorId: "",
|
|
|
+ stackLevel: "",
|
|
|
+ chargingProfilePurpose: ""
|
|
|
+ },
|
|
|
+ filterTypeOptions: [],
|
|
|
+ chargingProfileOptions: [],
|
|
|
+ chargingPurposeOptions: [],
|
|
|
+ rules: {
|
|
|
+ filterType: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'change',
|
|
|
+ message: 'Please select a type'
|
|
|
+ },
|
|
|
+ chargingProfilePurpose: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'change',
|
|
|
+ message: 'Please select a profile purpose'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getFilterTypeOptions();
|
|
|
+ this.getProfileOptions();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hideDialog() {
|
|
|
+ this.$emit("hide");
|
|
|
+ this.params = {
|
|
|
+ filterType: "ChargingProfileId",
|
|
|
+ stackLevel: "",
|
|
|
+ chargingProfilePurpose: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getProfileOptions() {
|
|
|
+ ocpp.getChargingProfileList().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.chargingProfileOptions = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getFilterTypeOptions() {
|
|
|
+ ocpp.getClearChargingProfileFilterType().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.filterTypeOptions = res.data;
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.params.filterType = res.data[0].value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getPurposeOptions();
|
|
|
+ },
|
|
|
+ getPurposeOptions() {
|
|
|
+ chargeProfile.getPurposeOptionList().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.chargingPurposeOptions = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ viewProfiles() {
|
|
|
+ this.$openRoute("/charging-profiles/view/" + this.item.chargingProfilePk);
|
|
|
+ },
|
|
|
+ changeFilterType() {
|
|
|
+ //ChargingProfileId
|
|
|
+ this.params.stackLevel = "";
|
|
|
+ this.params.chargingProfilePurpose = "";
|
|
|
+ this.$refs['setForm'].clearValidate();
|
|
|
+ },
|
|
|
+ onClearProfiles() {
|
|
|
+ this.$refs['setForm'].validate(result => {
|
|
|
+ if (result) {
|
|
|
+ this.clearChargingProfile();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearChargingProfile() {
|
|
|
+ this.loading = true;
|
|
|
+ const params = {
|
|
|
+ stationIds: [this.item.chargeBoxId],
|
|
|
+ ...this.params
|
|
|
+ }
|
|
|
+ if (this.params.filterType == "ChargingProfileId") {
|
|
|
+ params.chargingProfilePk = this.item.chargingProfilePk
|
|
|
+ params.chargingProfilePurpose = undefined;
|
|
|
+ } else {
|
|
|
+ params.connectorId = this.item.connectorId
|
|
|
+ }
|
|
|
+ ocpp.sendPerform("ocppOperations/clearChargingProfile", params).then(res => {
|
|
|
+ this.hideDialog();
|
|
|
+ this.loading = 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.loading = false;
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: err
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dialog-profile >>> .el-dialog {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 500px;
|
|
|
+}
|
|
|
+.form-row {
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+.label {
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 21px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.form-text {
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+.button {
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 10px 40px;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+</style>
|
