mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-07-08 16:08:23 +08:00
421 lines
20 KiB
Vue
421 lines
20 KiB
Vue
<template>
|
||
<div class="app-container Input">
|
||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="密钥配置" name="secret">
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="230px">
|
||
<!-- 上 -->
|
||
<el-col :span="24">
|
||
<el-form-item label="对接平台名称" prop="platformName">
|
||
<el-input v-model="form.platformName" placeholder="请输入对接平台名称" style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="接口地址前缀" prop="urlPrefix">
|
||
<el-input v-model="form.urlPrefix" placeholder="请输入接口地址前缀" style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="对接平台标识(OperatorId)" prop="theirOperatorId">
|
||
<el-input v-model="form.theirOperatorId" placeholder="请输入对接平台标识(OperatorId)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 左侧 -->
|
||
<el-col :span="12">
|
||
<el-card class="box-card" style="margin-right: 50px;">
|
||
<div slot="header" class="clearfix">对接平台密钥信息</div>
|
||
<el-form-item label="唯一识别密钥(OperatorSecret)" prop="theirOperatorSecret"
|
||
style="margin-top: 20px;">
|
||
<el-input v-model="form.theirOperatorSecret"
|
||
placeholder="请输入对接平台生成的唯一识别密钥(OperatorSecret)" style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="消息密钥(DataSecret)" prop="theirDataSecret">
|
||
<el-input v-model="form.theirDataSecret" placeholder="请输入对接平台生成的消息密钥(DataSecret)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="初始化向量(DataSecretIv)" prop="theirDataSecretIv">
|
||
<el-input v-model="form.theirDataSecretIv" placeholder="请输入对接平台生成的初始化向量(DataSecretIv)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="签名密钥(SigSecret)" prop="theirSigSecret">
|
||
<el-input v-model="form.theirSigSecret" placeholder="请输入对接平台生成的签名密钥(SigSecret)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
</el-card>
|
||
</el-col>
|
||
<!-- 右侧 -->
|
||
<el-col :span="12">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>我方生成密钥信息</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickGenerateSecret">生成密钥
|
||
</el-button>
|
||
</div>
|
||
<el-form-item label="唯一识别密钥(OperatorSecret)" prop="ourOperatorSecret"
|
||
style="margin-top: 20px;">
|
||
<el-input v-model="form.ourOperatorSecret" placeholder="请输入我方生成的唯一识别密钥(OperatorSecret)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="消息密钥(DataSecret)" prop="ourDataSecret">
|
||
<el-input v-model="form.ourDataSecret" placeholder="请输入我方生成的消息密钥(DataSecret)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="初始化向量(DataSecretIv)" prop="ourDataSecretIv">
|
||
<el-input v-model="form.ourDataSecretIv" placeholder="请输入我方生成的初始化向量(DataSecretIv)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
<el-form-item label="签名密钥(SigSecret)" prop="ourSigSecret">
|
||
<el-input v-model="form.ourSigSecret" placeholder="请输入我方生成的签名密钥(SigSecret)"
|
||
style="width: 90%" />
|
||
</el-form-item>
|
||
</el-card>
|
||
</el-col>
|
||
</el-form>
|
||
<div class="save">
|
||
<el-button type="primary" @click="submitForm" style="margin-top: 20px;">保存</el-button>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="同步数据" name="notification">
|
||
<template v-if="stationList.length > 0">
|
||
<el-row :gutter="20">
|
||
<div v-for="item in stationList" class="text item">
|
||
<el-col :span="8">
|
||
<el-card class="box-card" shadow="hover" style="margin-bottom: 20px;">
|
||
<div slot="header" class="clearfix">
|
||
<span>站点信息</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickDrawer(item.stationId, item.stationName)">打开推送菜单</el-button>
|
||
</div>
|
||
<el-descriptions class="margin-top" :column="1" border>
|
||
<el-descriptions-item label="站点Id" :labelStyle="{'min-width': '110px'}">
|
||
{{ item.stationId }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="站点名称" :labelStyle="{'min-width': '110px'}">
|
||
{{ item.stationName }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</el-col>
|
||
</div>
|
||
</el-row>
|
||
</template>
|
||
<el-empty description="暂无数据" v-else></el-empty>
|
||
|
||
<el-drawer :title="drawerTitle" :visible.sync="drawer" :direction="direction">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card class="box-card" style="margin: 0 20px;" shadow="hover">
|
||
<div slot="header" class="clearfix">
|
||
<span>推送充电站信息变化</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickNotificationStationInfo">推送</el-button>
|
||
</div>
|
||
<div class="text item">
|
||
推送站点最新信息到第三方平台
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
|
||
<div slot="header" class="clearfix">
|
||
<span>推送设备状态</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickNotificationStationStatus">推送</el-button>
|
||
</div>
|
||
<el-form ref="notificationForm" :model="notificationForm" label-width="20%">
|
||
<el-form-item label="充电桩枪口号" class="getCard">
|
||
<el-input v-model="notificationForm.pileConnectorCode"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="枪口状态" class="getCard">
|
||
<el-input v-model="notificationForm.connectorStatus"></el-input>
|
||
</el-form-item>
|
||
<!--<el-form-item>
|
||
<el-button type="primary" @click="clickNotificationStationStatus">推送设备状态</el-button>
|
||
</el-form-item>-->
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
|
||
<div slot="header" class="clearfix">
|
||
<span>推送设备充电中状态</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickNotificationConnectorChargeStatus">推送</el-button>
|
||
</div>
|
||
<el-form ref="notificationForm" :model="notificationForm" label-width="20%">
|
||
<el-form-item label="订单编号" class="getCard">
|
||
<el-input v-model="notificationForm.orderCode1"></el-input>
|
||
</el-form-item>
|
||
<!--<el-form-item>
|
||
<el-button type="primary" @click="clickNotificationConnectorChargeStatus">推送设备充电中状态</el-button>
|
||
</el-form-item>-->
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
|
||
<div slot="header" class="clearfix">
|
||
<span>推送充电订单信息</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickNotificationChargeOrderInfo">推送</el-button>
|
||
</div>
|
||
<el-form ref="notificationForm" :model="notificationForm" label-width="20%">
|
||
<el-form-item label="订单编号" class="getCard">
|
||
<el-input v-model="notificationForm.orderCode"></el-input>
|
||
</el-form-item>
|
||
<!--<el-form-item>
|
||
<el-button type="primary" @click="clickNotificationChargeOrderInfo">推送充电订单信息</el-button>
|
||
</el-form-item>-->
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
|
||
<div slot="header" class="clearfix">
|
||
<span>推送站点费率</span>
|
||
<el-button style="float: right; padding: 3px 0" type="text"
|
||
@click="clickNotificationStationFee">推送</el-button>
|
||
</div>
|
||
<div class="text item">
|
||
推送站点最新计费模板到第三方平台
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-drawer>
|
||
</el-tab-pane>
|
||
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
import { addSecret, getSecret, selectStationList, updateSecret } from "@/api/thirdParty/secret";
|
||
import { generateRandomID, isEmptyString } from "@/utils/common";
|
||
import Template from "@/views/billing/template";
|
||
import {
|
||
notificationChargeOrderInfo,
|
||
notificationConnectorChargeStatus, notificationStationFee,
|
||
notificationStationInfo,
|
||
notificationStationStatus
|
||
} from "@/api/thirdParty/notification";
|
||
|
||
export default {
|
||
dicts: ["third_party_type"],
|
||
components: { Template },
|
||
data() {
|
||
return {
|
||
activeName: "secret",
|
||
id: this.$route.params.id,
|
||
platformName: this.$route.params.platformName,
|
||
// 表单参数
|
||
form: {},
|
||
notificationStationId: null,
|
||
notificationForm: {},
|
||
// 表单校验
|
||
rules: {},
|
||
stationList: [],
|
||
platformType: null,
|
||
connectorStatus: null,
|
||
drawer: false,
|
||
direction: 'rtl',
|
||
drawerTitle: null,
|
||
};
|
||
},
|
||
created() {
|
||
this.updateTitle();
|
||
},
|
||
methods: {
|
||
// 提交
|
||
onSubmit() {
|
||
this.notificationForm.stationId = this.notificationStationId;
|
||
this.notificationForm.platformType = this.platformType;
|
||
console.log(this.notificationForm);
|
||
},
|
||
// 点击推送站点信息
|
||
clickNotificationStationInfo() {
|
||
this.notificationForm.stationId = this.notificationStationId;
|
||
this.notificationForm.platformType = this.platformType;
|
||
notificationStationInfo(this.notificationForm).then(response => {
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
},
|
||
// 点出推送设备状态
|
||
clickNotificationStationStatus() {
|
||
// this.notificationForm.stationId = this.notificationStationId;
|
||
// this.notificationForm.platformType = this.platformType;
|
||
const params = {
|
||
stationId: this.notificationStationId,
|
||
platformType: this.platformType,
|
||
pileConnectorCode: this.notificationForm.pileConnectorCode,
|
||
status: this.notificationForm.connectorStatus
|
||
}
|
||
notificationStationStatus(params).then(response => {
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
},
|
||
// 点击推送设备充电中状态
|
||
clickNotificationConnectorChargeStatus() {
|
||
// this.notificationForm.stationId = this.notificationStationId;
|
||
// this.notificationForm.platformType = this.platformType;
|
||
const params = {
|
||
stationId: this.notificationStationId,
|
||
platformType: this.platformType,
|
||
orderCode: this.notificationForm.orderCode1
|
||
}
|
||
notificationConnectorChargeStatus(params).then(response => {
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
},
|
||
// 点击推送订单信息
|
||
clickNotificationChargeOrderInfo() {
|
||
this.notificationForm.stationId = this.notificationStationId;
|
||
this.notificationForm.platformType = this.platformType;
|
||
notificationChargeOrderInfo(this.notificationForm).then(response => {
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
},
|
||
// 点击推送站点费率
|
||
clickNotificationStationFee() {
|
||
this.notificationForm.stationId = this.notificationStationId;
|
||
this.notificationForm.platformType = this.platformType;
|
||
notificationStationFee(this.notificationForm).then(response => {
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
},
|
||
// 点击打开 通知菜单
|
||
clickDrawer(stationId, stationName) {
|
||
// console.log("站点id：", stationId);
|
||
this.drawerTitle = "同步【" + stationName + "】站点的数据到【" + this.platformName + "】";
|
||
this.drawer = true;
|
||
this.notificationStationId = stationId;
|
||
},
|
||
// Drawer :before-close="handleClose"
|
||
handleClose(done) {
|
||
this.$confirm('确认关闭？')
|
||
.then(_ => {
|
||
done();
|
||
})
|
||
.catch(_ => { });
|
||
},
|
||
// 查询站点列表
|
||
queryStationList() {
|
||
const param = {
|
||
platformType: this.platformType
|
||
};
|
||
selectStationList(param).then(response => {
|
||
this.stationList = response.data;
|
||
console.log(this.stationList);
|
||
});
|
||
},
|
||
// 生成密钥
|
||
clickGenerateSecret() {
|
||
// 是否有值，默认false
|
||
let hasValue = false;
|
||
if (!isEmptyString(this.form.ourOperatorSecret) || !isEmptyString(this.form.ourDataSecret)
|
||
|| !isEmptyString(this.form.ourDataSecretIv) || !isEmptyString(this.form.ourSigSecret)) {
|
||
// 任一字段不为空，hasValue为true
|
||
hasValue = true;
|
||
}
|
||
if (hasValue) {
|
||
// 有值时弹出提示框
|
||
this.$confirm('当前已经有值, 此操作将覆盖原值, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
// 点击确定生成密钥
|
||
this.generateSecret();
|
||
});
|
||
} else {
|
||
// 没有值，直接生成密钥
|
||
this.generateSecret();
|
||
}
|
||
},
|
||
// 生成密钥方法
|
||
generateSecret() {
|
||
this.form.ourOperatorSecret = generateRandomID(16);
|
||
this.form.ourDataSecret = generateRandomID(16);
|
||
this.form.ourDataSecretIv = generateRandomID(16);
|
||
this.form.ourSigSecret = generateRandomID(16);
|
||
},
|
||
handleClick(tab, event) {
|
||
// console.log("handleClick", tab, event);
|
||
this.initializeData(tab.name);
|
||
},
|
||
initializeData(name) {
|
||
if (name === "secret") {
|
||
this.querySecretDetail();
|
||
} else if (name === "notification") {
|
||
this.queryStationList();
|
||
}
|
||
},
|
||
querySecretDetail() {
|
||
getSecret(this.id).then(response => {
|
||
this.form = response.data;
|
||
this.platformType = response.data.platformType;
|
||
});
|
||
},
|
||
// 更新页面title显示
|
||
updateTitle() {
|
||
const platformName = this.platformName;
|
||
const title = "【" + platformName + "】平台配置";
|
||
const route = Object.assign({}, this.$route, { title: `${title}` });
|
||
this.$store.dispatch("tagsView/updateVisitedView", route);
|
||
},
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
if (this.form.id != null) {
|
||
updateSecret(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
} else {
|
||
addSecret(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initializeData(this.activeName);
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.save {
|
||
text-align: right;
|
||
}
|
||
|
||
::v-deep .el-card__body {
|
||
padding: 20px !important;
|
||
}
|
||
|
||
.getCard {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.el-descriptions-item_label {
|
||
width: 100px;
|
||
}
|
||
</style>
|