Files
jsowell-charger-web/jsowell-ui/src/views/pile/station/components/SiteInfo.vue

544 lines
20 KiB
Vue
Raw Normal View History

2023-03-04 16:29:55 +08:00
<template>
2023-07-18 10:59:28 +08:00
<div class="app-container">
<div>上传图片</div>
<el-upload
:action="actionUrl"
:headers="headers"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
style="margin: 10px 0"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<el-form
:label-position="labelPosition"
label-width="120px"
:model="station"
:rules="rules"
ref="stationRef"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="站点名称" prop="stationName">
<el-input v-model="station.stationName"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="area" label="站点区域">
<!--<el-input v-model="station.areaCode"> </el-input>-->
<el-cascader
size="large"
:options="options"
v-model="areaCodeList"
@change="handleChange"
disabled
>
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="address" label="地址">
<el-input v-model="station.address" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stationTel" label="联系电话">
<el-input v-model="station.stationTel"></el-input>
</el-form-item>
</el-col>
</el-row>
2023-03-04 16:29:55 +08:00
2023-07-18 10:59:28 +08:00
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="matchCars" label="适配车辆类型">
<el-select
v-model="station.selectMatchCars"
multiple
placeholder="请选择"
>
<el-option
v-for="item in dict.type.match_cars"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="publicFlag" label="是否对外开放">
<el-select
v-model="station.publicFlag"
placeholder="请选择"
>
<el-option
v-for="item in publicFlagOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="openFlag" label="是否营业中">
<el-select
v-model="station.openFlag"
placeholder="请选择"
>
<el-option
v-for="item in openFlagOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="merchantAdminName" label="管理员">
<el-input
:value="
station.merchantAdminName === null
? '无'
: station.merchantAdminName
"
></el-input>
</el-form-item>
</el-col>
</el-row>
2023-03-04 16:29:55 +08:00
2023-07-18 10:59:28 +08:00
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="stationLng" label="经度">
<el-input
v-model="station.stationLng"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stationLat" label="纬度">
<el-input
v-model="station.stationLat"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="merchantName" label="运营商">
<el-input
:value="
station.merchantName === null
? '无'
: station.merchantName
"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stationType" label="站点类型">
<el-select
v-model="station.stationType"
placeholder="请选择"
>
<el-option
v-for="item in dict.type.station_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
2023-03-04 16:29:55 +08:00
2023-07-18 10:59:28 +08:00
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="construction" label="建设场所">
<el-select
v-model="station.construction"
placeholder="请选择"
>
<el-option
v-for="item in dict.type.construction_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="electricityPrice" label="充电费率">
<el-input
:value="
station.electricityPrice === null
? 0
: station.electricityPrice
"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="servicePrice" label="服务费率">
<el-input
:value="
station.servicePrice === null
? 0
: station.servicePrice
"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="businessHours" label="营业时间">
<el-input v-model="station.businessHours"></el-input>
</el-form-item>
</el-col>
2023-08-09 15:16:18 +08:00
<el-col :span="6">
<el-form-item prop="parkingNumber" label="停车场库编号">
<el-input
v-model="station.parkingNumber"
required="true"
></el-input>
</el-form-item>
</el-col>
2023-07-18 10:59:28 +08:00
</el-row>
</el-form>
<el-button
type="primary"
style="margin-left: 94%"
@click="present"
v-has-permi="['pile:station:edit']"
>提交</el-button
>
</div>
2023-03-04 16:29:55 +08:00
</template>
<script>
2023-07-18 10:59:28 +08:00
import { getStationInfo, updateStation } from "@/api/pile/station.js";
2023-03-04 16:29:55 +08:00
import bus from "@/bus/bus";
2023-07-18 10:59:28 +08:00
import { regionData } from "element-china-area-data";
import { getToken } from "@/utils/auth";
2023-03-04 16:29:55 +08:00
export default {
2023-07-18 10:59:28 +08:00
dicts: ["station_type", "match_cars", "construction_type"],
data() {
return {
actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
dialogVisible: false,
headers: {
Authorization: "Bearer " + getToken(),
},
imageUrl: null,
dialogImageUrl: "",
options: regionData,
labelPosition: "right",
station: {
stationName: "",
areaCode: "",
address: "",
stationTel: "",
matchCars: "",
parkingNumber: "",
2023-07-18 10:59:28 +08:00
selectMatchCars: [],
publicFlag: "",
openFlag: "",
aMapFlag: "",
merchantAdminName: "",
stationLng: "",
stationLat: "",
merchantId: "",
stationStatus: "",
construction: "",
businessHours: "",
pictures: "",
deptId: "",
},
stationId: this.$route.params.id,
publicFlagOptions: [
{
value: "1",
label: "是",
},
{
value: "0",
label: "否",
},
],
openFlagOptions: [
{
value: "1",
label: "是",
},
{
value: "0",
label: "否",
},
],
rules: {
stationName: [
{
required: true,
message: "请输入站点名称",
trigger: "blur",
},
],
areaCode: [
{
required: true,
message: "请输入站点区域",
trigger: "blur",
},
],
address: [
{ required: true, message: "请输入地址", trigger: "blur" },
],
stationTel: [
{
required: true,
message: "请输入联系电话",
trigger: "blur",
},
],
matchCars: [
{
required: true,
message: "请输入适配车辆类型",
trigger: "blur",
},
],
publicFlag: [
{
required: true,
message: "请填写是否对外开放",
trigger: "blur",
},
],
openFlag: [
{ required: true, message: "是否营业中", trigger: "blur" },
],
// merchantAdminName: [
// { required: true, message: "请输入管理员", trigger: "blur" },
// ],
stationLng: [
{ required: true, message: "请输入经度", trigger: "blur" },
],
stationLat: [
{ required: true, message: "请输入纬度", trigger: "blur" },
],
// merchantId: [
// { required: true, message: "请输入管理员", trigger: "blur" },
// ],
stationType: [
{
required: true,
message: "请输入站点类型",
trigger: "blur",
},
],
construction: [
{
required: true,
message: "请输入建设场所",
trigger: "blur",
},
],
region: [
{
required: true,
message: "请输入充电费率",
trigger: "blur",
},
],
type: [
{
required: true,
message: "请输入服务费率",
trigger: "blur",
},
],
businessHours: [
{
required: true,
message: "请输入营业时间",
trigger: "blur",
},
],
},
fileList: [], // 用于图片回显
// dialogVisible: null,
};
},
created() {},
methods: {
// 对图片进行上传前处理压缩
beforeUpload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
// 将图片绘制到一个canvas画布上并设定压缩后的宽度和高度。
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const maxWidth = 800; // 设置压缩后的最大宽度
const maxHeight = 600; // 设置压缩后的最大高度
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
// 将canvas画布中的内容转换为Blob对象
canvas.toBlob(
(blob) => {
const compressedFile = new File(
[blob],
file.name,
{ type: blob.type }
);
resolve(compressedFile);
},
file.type,
0.8
); // 设置压缩质量这里设为0.8
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
2023-03-04 16:29:55 +08:00
},
2023-07-18 10:59:28 +08:00
handleSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log("图片上传成功 url", this.imageUrl);
console.log("图片上传成功 res", res);
this.fileList.push({ url: res.url });
2023-03-04 16:29:55 +08:00
},
2023-07-18 10:59:28 +08:00
handleRemove(file, fileList) {
console.log("移除图片", file, fileList);
// 从pics数组中找到图片对应的索引值
const i = this.fileList.findIndex((x) => x.uid === file.uid);
// 调用splice方法移除图片信息
this.fileList.splice(i, 1);
2023-03-04 16:29:55 +08:00
},
2023-07-18 10:59:28 +08:00
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl);
this.dialogVisible = true;
},
handleChange() {
console.log("111");
},
// 渲染表格数据
async queryStationInfo() {
2023-08-09 15:16:18 +08:00
this.fileList = [];
2023-07-18 10:59:28 +08:00
const res = await getStationInfo(this.stationId);
console.log(res);
this.station = res.data;
if (res.data.pictures != null) {
var pictures = res.data.pictures.split(",");
for (let i = 0; i < pictures.length; i++) {
this.fileList.push({ url: pictures[i] });
}
}
console.log("queryStationInfo表格数据", this.station);
},
// 提交按钮
present() {
// 赋值
this.station.matchCars = this.station.selectMatchCars.join(",");
this.station.pictures = this.pictureList.join(",");
// console.log("matchCars赋值后", this.station.matchCars);
this.$refs.stationRef.validate((valid) => {
if (valid) {
this.subUpdate();
this.$message.success("提交成功");
}
});
},
// 修改充电站信息
async subUpdate() {
await updateStation(this.station);
2023-03-04 16:29:55 +08:00
},
},
2023-07-18 10:59:28 +08:00
mounted() {
// 接收map 地图传过来的搜索值
bus.$on("res", (data) => {
// console.log("data", data); // data就是它传过来的值
// console.log("原始this.station", this.station);
// 地址
2023-08-03 12:11:31 +08:00
// this.detailedAddress = data.address;
2023-07-18 10:59:28 +08:00
// console.log("详细地址", data.address);
var adcode = data.adcode;
var areaCode = [];
areaCode[0] = adcode.substr(0, 2) + "0000";
areaCode[1] = adcode.substr(0, 4) + "00";
areaCode[2] = adcode;
// console.log("拼装的areaCode", areaCode);
// 修改数据
this.station.areaCode = areaCode.join(",");
this.station.stationLng = String(data.pos[0]);
this.station.stationLat = String(data.pos[1]);
// console.log("修改后this.station", this.station);
2023-08-04 09:38:07 +08:00
console.log(data.address, "data.address");
this.station.address = data.address.includes("区")
? data.address.replace(/区/, " ").split(" ")[1]
: data.address;
2023-07-18 10:59:28 +08:00
// 优化之后
2023-08-03 12:11:31 +08:00
// let newAddress2 = this.detailedAddress
// .replace(/(?<=[省市区])/g, "$&,")
// .split(",");
// let end = newAddress2.pop();
// console.log("详细地址",this.station.areaCode,newAddress2);
// this.station.address = newAddress2;
2023-07-18 10:59:28 +08:00
});
},
computed: {
areaCodeList() {
return this.station.areaCode.split(",");
},
pictureList() {
var pictureList = [];
for (let i = 0; i < this.fileList.length; i++) {
pictureList.push(this.fileList[i].url);
}
return pictureList;
},
2023-03-04 16:29:55 +08:00
},
};
</script>
2023-08-09 15:16:18 +08:00
<style lang="scss" scoped>
::v-deep .el-select > .el-input,
::v-deep .el-cascader .el-input {
width: 283px;
}
</style>