mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-06-11 18:59:51 +08:00
557 lines
18 KiB
Vue
557 lines
18 KiB
Vue
<template>
|
||
<div class="app-container Input">
|
||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="订单" name="order">
|
||
<stationOrderList ref="order" :stationId="stationId" />
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="设备" name="pile">
|
||
<pileList ref="pile" :stationId="stationId" />
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="充电接口" name="connector">
|
||
<connectorList ref="connector" :stationId="stationId" />
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="基本资料" name="stationInfo">
|
||
<div class="over">
|
||
<div id="map_wrap">
|
||
<MapContainer ref="map" :stationLat="stationLat" :stationLng="stationLng" />
|
||
</div>
|
||
<div class="menu">
|
||
<site-info ref="stationInfo" />
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="计费模块" name="billing">
|
||
<!-- billing 文件到时引入 -->
|
||
<billing ref="billing" :stationId="stationId" />
|
||
</el-tab-pane>
|
||
<el-tab-pane label="运营管理" name="operation">
|
||
<el-card style="margin-bottom: 10px">
|
||
<h2>二维码配置</h2>
|
||
<el-form label-position="right" label-width="200px" style="margin-top: 10px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="当前配置二维码规则:">
|
||
<el-input
|
||
v-model="stationDetail.qrcodePrefix"
|
||
maxlength="100px"
|
||
:disabled="true"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<el-button
|
||
icon="el-icon-setting"
|
||
size="big"
|
||
@click="handleCreate"
|
||
v-has-permi="['pile:station:edit']"
|
||
>配置参数
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card style="margin-bottom: 10px">
|
||
<h2>互联互通配置</h2>
|
||
<!-- <el-button icon="el-icon-edit" size="big" @click="openEdit" v-has-permi="['pile:station:edit']">编辑参数-->
|
||
<!-- </el-button>-->
|
||
<el-form
|
||
ref="stationSettingForm"
|
||
:model="stationSettingInfo"
|
||
label-position="right"
|
||
label-width="200px"
|
||
style="margin-top: 10px"
|
||
>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="对接平台名称:" prop="type">
|
||
<el-checkbox-group v-model="checkList">
|
||
<el-checkbox
|
||
v-for="dict in dict.type.third_party_type"
|
||
:label="dict.label"
|
||
:key="dict.value"
|
||
:value="dict.value"
|
||
:disabled="firstList.includes(dict.label)"
|
||
@change="getPlatform(dict.raw.dictValue)"
|
||
/>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<!--<el-button size="big" @click="pushStation" v-has-permi="['pile:station:edit']">-->
|
||
<!-- 推送站点信息-->
|
||
<!--</el-button>-->
|
||
<el-button
|
||
size="big"
|
||
@click="saveStationThirdParty"
|
||
v-has-permi="['pile:station:edit']"
|
||
>
|
||
保存对接平台关系
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card style="margin-bottom: 10px">
|
||
<h2>绑定停车平台(配置完成后，订单完成将自动下发优惠券)</h2>
|
||
<el-button
|
||
icon="el-icon-edit"
|
||
size="big"
|
||
@click="parkingOpenEdit"
|
||
v-has-permi="['pile:station:edit']"
|
||
>编辑参数
|
||
</el-button>
|
||
<el-form
|
||
ref="parkingForm"
|
||
:model="parkingInfo"
|
||
label-position="right"
|
||
label-width="200px"
|
||
style="margin-top: 10px"
|
||
>
|
||
<el-row>
|
||
<el-col :span="5">
|
||
<el-form-item label="停车平台名称:" prop="type">
|
||
<el-select
|
||
v-model="parkingInfo.parkingName"
|
||
placeholder="请选择停车平台名称"
|
||
clearable
|
||
filterable
|
||
style="width: 220px"
|
||
:disabled="parkingDisableFlag"
|
||
@change="getParkingInfo($event)"
|
||
>
|
||
<el-option
|
||
v-for="item in parkingInfoList"
|
||
:key="item.id"
|
||
:label="item.parkingName"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<el-button
|
||
size="big"
|
||
@click="saveParkingSetting(parkingInfo.id)"
|
||
v-has-permi="['pile:station:edit']"
|
||
>
|
||
保存
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="停车场库secretKey:" prop="secretKey">
|
||
<el-input
|
||
placeholder="请输入"
|
||
v-model="parkingInfo.secretKey"
|
||
:disabled="true"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item label="停车场库appId:" prop="appId">
|
||
<el-input
|
||
placeholder="请输入"
|
||
v-model="parkingInfo.appId"
|
||
:disabled="true"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="票券id:" prop="couponId">
|
||
<el-input
|
||
placeholder="请输入"
|
||
v-model="parkingInfo.couponId"
|
||
:disabled="false"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="停车场库商户id:" prop="parkingMerchantId">
|
||
<el-input
|
||
placeholder="请输入"
|
||
v-model="parkingInfo.parkingMerchantId"
|
||
:disabled="false"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card style="margin-top: 10px">
|
||
<h2>地锁二维码</h2>
|
||
<el-form label-position="right" label-width="200px" style="margin-top: 10px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="查询地锁列表二维码:" />
|
||
<div>
|
||
<vue-qr
|
||
ref="Qrcode"
|
||
:text="queryGroundLockQrCode"
|
||
qid="lockListQrCode"
|
||
:width="150"
|
||
style="margin-left: 190px; margin-top: -10px"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="站点白名单" name="whitelist">
|
||
<whitelist ref="whitelist" :stationId="stationId" />
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="订单日报" name="orderReport">
|
||
<order-report ref="orderReport"></order-report>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="分润配置" name="Config">
|
||
<Config ref="Config" :stationId="stationId" :merchantId="merchantId"></Config>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
|
||
<el-form ref="form" :model="form" @submit.native.prevent>
|
||
<el-form-item label="二维码前缀:" prop="prefix" label-width="100px">
|
||
<el-input
|
||
v-model="form.prefix"
|
||
placeholder="请输入二维码前缀"
|
||
style="width: 300px"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer" align="center">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VueQr from "vue-qr";
|
||
import Billing from "./components/billing.vue";
|
||
import SiteInfo from "./components/SiteInfo.vue";
|
||
import connectorList from "./connectorList.vue";
|
||
import pileList from "./pileList.vue";
|
||
import MapContainer from "../../../components/MapContainer/MapContainer.vue";
|
||
import stationOrderList from "@/views/pile/station/stationOrderList";
|
||
import stationWhiteList from "@/views/pile/station/stationWhiteList";
|
||
import {
|
||
getStationInfo,
|
||
updateStationQRCodePrefix,
|
||
updateSettingByStationId,
|
||
getParkingInfoList,
|
||
bindParkingPlatform,
|
||
getRelationByStationId,
|
||
updateThirdPartyStationRelation,
|
||
} from "@/api/pile/station";
|
||
import Whitelist from "@/views/pile/station/stationWhiteList";
|
||
import OrderReport from "./orderReport.vue";
|
||
import Config from "@/views/pile/station/splitConfig.vue";
|
||
|
||
export default {
|
||
dicts: ["third_party_type"],
|
||
components: {
|
||
VueQr,
|
||
Whitelist,
|
||
SiteInfo,
|
||
pileList,
|
||
connectorList,
|
||
Billing,
|
||
MapContainer,
|
||
stationOrderList,
|
||
stationWhiteList,
|
||
OrderReport,
|
||
Config,
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: "pile",
|
||
form: {
|
||
prefix: "",
|
||
},
|
||
parkingInfo: {},
|
||
parkingInfoList: [],
|
||
queryGroundLockQrCode: "",
|
||
dialogTitle: "",
|
||
qrcodePrefix: "",
|
||
dialogFormVisible: false,
|
||
checkList: [],
|
||
stationId: this.$route.params.id,
|
||
stationName: this.$route.params.stationName,
|
||
stationDetail: {},
|
||
stationLat: null,
|
||
stationLng: null,
|
||
stationSettingInfo: {},
|
||
disableFlag: true,
|
||
parkingDisableFlag: true,
|
||
exchange: [],
|
||
firstList: [], //第一次复选框的默认值
|
||
merchantId: "", //运营商id
|
||
};
|
||
},
|
||
created() {
|
||
// console.log(this.stationId, "充电桩详情 create");
|
||
// const stationId = this.stationId;
|
||
this.queryGroundLockQrCode =
|
||
"https://api.jsowellcloud.com/app-xcx-h5/getGroundLockInfo/" + this.stationId;
|
||
this.updateTitle();
|
||
this.getRelationByStationId();
|
||
this.getParkingList();
|
||
this.queryStationInfo();
|
||
},
|
||
mounted() {
|
||
this.initializeData(this.activeName);
|
||
},
|
||
methods: {
|
||
// 更新页面title显示
|
||
updateTitle() {
|
||
const stationName = this.stationName;
|
||
const title = "【" + stationName + "】站点详情";
|
||
const route = Object.assign({}, this.$route, { title: `${title}` });
|
||
this.$store.dispatch("tagsView/updateVisitedView", route);
|
||
},
|
||
handleClick(tab, event) {
|
||
// console.log(tab, event);
|
||
this.initializeData(tab.name);
|
||
},
|
||
// 执行对应页面的查询数据方法
|
||
initializeData(name) {
|
||
console.log("执行对应页面的查询数据方法", name);
|
||
if (name === "pile") {
|
||
this.$refs.pile.getPileList();
|
||
} else if (name === "connector") {
|
||
this.$refs.connector.getList();
|
||
} else if (name === "billing") {
|
||
this.$refs.billing.getStationBillingTemplateList();
|
||
} else if (name === "stationInfo") {
|
||
this.$refs.map.initMap();
|
||
this.$refs.stationInfo.queryStationInfo();
|
||
} else if (name === "order") {
|
||
this.$refs.order.dataLoading();
|
||
} else if (name === "orderReport") {
|
||
this.$refs.orderReport.getList();
|
||
} else if (name === "Config") {
|
||
this.queryStationInfo();
|
||
this.$refs.Config.getList();
|
||
}
|
||
},
|
||
async queryStationInfo() {
|
||
console.log("stationId", this.stationId);
|
||
await getStationInfo(this.stationId).then((res) => {
|
||
this.stationDetail = res.data;
|
||
this.stationLat = res.data.stationLat;
|
||
this.stationLng = res.data.stationLng;
|
||
this.merchantId = res.data.merchantId;
|
||
console.log(this.merchantId, "父组件里面的运营商id");
|
||
console.log("res.data", res.data);
|
||
if (res.data.parkingId != null) {
|
||
this.getParkingInfo(parseInt(res.data.parkingId));
|
||
}
|
||
});
|
||
console.log("queryStationInfo==", this.stationDetail);
|
||
},
|
||
// 查询站点互联互通配置信息
|
||
getRelationByStationId() {
|
||
getRelationByStationId(this.stationId).then((res) => {
|
||
console.log("stationId:", this.stationId);
|
||
console.log("res", res);
|
||
console.log("res.rows", res.rows);
|
||
res.rows.forEach((item, index) => {
|
||
this.checkList.push(item.thirdPartyType);
|
||
this.firstList.push(item.thirdPartyType);
|
||
});
|
||
console.log("this.checkList", this.checkList, this.firstList);
|
||
// if (res.data === undefined) {
|
||
// this.stationSettingInfo.thirdPartyType = "0";
|
||
// } else {
|
||
// this.stationSettingInfo = res.data;
|
||
// }
|
||
});
|
||
},
|
||
|
||
// 根据对接平台类型查询配置信息
|
||
// getSettingParams() {
|
||
// const param = {
|
||
// // stationId: this.stationId,
|
||
// type: this.stationSettingInfo.type,
|
||
// };
|
||
// console.log("param", param);
|
||
// getSettingInfo(param).then((res) => {
|
||
// console.log("getSettingInfo", res);
|
||
// if (res.data === undefined) {
|
||
// this.stationSettingInfo = [];
|
||
// } else {
|
||
// this.stationSettingInfo = res.data;
|
||
// }
|
||
// });
|
||
// },
|
||
|
||
// 获取停车平台列表
|
||
getParkingList() {
|
||
getParkingInfoList().then((response) => {
|
||
console.info("response", response);
|
||
this.parkingInfoList = response.obj;
|
||
});
|
||
},
|
||
// 通过id获取停车平台信息
|
||
getParkingInfo(parkingId) {
|
||
console.log("parkingId", parkingId);
|
||
this.parkingInfoList.forEach((item) => {
|
||
if (parkingId === item.id) {
|
||
console.log("item", item);
|
||
this.parkingInfo = item;
|
||
console.log("this.parkingInfo", this.parkingInfo);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 开放编辑按钮
|
||
openEdit() {
|
||
this.disableFlag = this.disableFlag === false;
|
||
},
|
||
parkingOpenEdit() {
|
||
this.parkingDisableFlag = !this.parkingDisableFlag;
|
||
},
|
||
|
||
// 提交配置设置
|
||
submitConfigForm() {
|
||
const param = {
|
||
stationId: this.stationId,
|
||
urlAddress: this.stationSettingInfo.urlAddress,
|
||
operatorId: this.stationSettingInfo.operatorId,
|
||
operatorSecret: this.stationSettingInfo.operatorSecret,
|
||
dataSecret: this.stationSettingInfo.dataSecret,
|
||
signSecret: this.stationSettingInfo.signSecret,
|
||
dataSecretIv: this.stationSettingInfo.dataSecretIv,
|
||
};
|
||
console.log("param:", param);
|
||
this.$refs.stationSettingForm.validate((valid) => {
|
||
if (valid) {
|
||
updateSettingByStationId(param).then((response) => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.disableFlag = true;
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
// 推送站点
|
||
// pushStation() {
|
||
// let exchange = "";
|
||
// const param = {
|
||
// stationId: this.stationId,
|
||
// thirdPartyTypes: this.exchange,
|
||
// };
|
||
// console.log("param", param);
|
||
// pushStationInfo(param).then((response) => {
|
||
// console.log("response", response);
|
||
// this.$modal.msg(response.obj);
|
||
// this.disableFlag = true;
|
||
// });
|
||
// },
|
||
|
||
// 保存站点与第三方平台关系
|
||
saveStationThirdParty() {
|
||
const param = {
|
||
stationId: this.stationId,
|
||
thirdPartyTypes: this.exchange,
|
||
};
|
||
console.log("param", param);
|
||
updateThirdPartyStationRelation(param).then((response) => {
|
||
this.$message.success(response.msg);
|
||
});
|
||
},
|
||
|
||
// 绑定站点与停车平台配置
|
||
saveParkingSetting(parkingId) {
|
||
console.log("parkingId", parkingId, this.stationId);
|
||
const params = {
|
||
stationId: this.stationId,
|
||
parkingId: parkingId,
|
||
};
|
||
bindParkingPlatform(params).then((response) => {
|
||
console.log("绑定站点与停车平台配置 response", response);
|
||
});
|
||
},
|
||
// 配置参数按钮
|
||
handleCreate() {
|
||
this.dialogTitle = "配置参数";
|
||
this.form = {
|
||
prefix: "",
|
||
};
|
||
this.dialogFormVisible = true;
|
||
},
|
||
// 配置参数提交按钮
|
||
submitForm(form) {
|
||
const param = {
|
||
stationId: this.stationId,
|
||
qrcodePrefix: this.form.prefix,
|
||
};
|
||
console.log("form:", this.form);
|
||
console.log("param:", param);
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
updateStationQRCodePrefix(param).then((response) => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.dialogFormVisible = false;
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.dialogFormVisible = false;
|
||
},
|
||
// 复选框状态
|
||
getPlatform(id) {
|
||
this.exchange.push(id);
|
||
},
|
||
},
|
||
//监听复选框状态
|
||
watch: {
|
||
checkList: {
|
||
handler(newVal) {
|
||
this.exchange = newVal.map(
|
||
(item) =>
|
||
this.dict.type.third_party_type.find((dict) => dict.label === item)?.raw
|
||
?.dictValue
|
||
);
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
#container {
|
||
width: 800px;
|
||
height: 400px;
|
||
// margin-left: 50%; transform: translate(-50%,0);
|
||
}
|
||
|
||
::v-deep .Input .el-input--medium {
|
||
width: 400px;
|
||
}
|
||
</style>
|