autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-05-17 16:28:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

上传图片压缩

Browse Source
This commit is contained in:
BOOL\25024
2023-07-18 10:59:28 +08:00
parent fa44dc7ca6
commit 2feb006554
2 changed files with 513 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
jsowell-ui/src/views/pile/merchant/components/adapayMember.vue
View File

@@ -647,6 +647,7 @@
:action="actionUrl" :action="actionUrl"
:headers="headers" :headers="headers"
:on-success="idCardSuccess" :on-success="idCardSuccess"
:before-upload="beforeUpload"
:on-remove="idCardRemove" :on-remove="idCardRemove"
:file-list="idCardList" :file-list="idCardList"
:limit="1" :limit="1"
@@ -665,6 +666,7 @@
:action="actionUrl" :action="actionUrl"
:headers="headers" :headers="headers"
:on-success="sideCardSuccess" :on-success="sideCardSuccess"
:before-upload="getBefore"
:on-remove="sideCardRemove" :on-remove="sideCardRemove"
:file-list="sideCardList" :file-list="sideCardList"
list-type="picture-card" list-type="picture-card"
@@ -684,6 +686,7 @@
:action="actionUrl" :action="actionUrl"
:headers="headers" :headers="headers"
:on-success="depositBankSuccess" :on-success="depositBankSuccess"
:before-upload="beforeData"
:on-remove="depositBankRemove" :on-remove="depositBankRemove"
:file-list="depositBankList" :file-list="depositBankList"
list-type="picture-card" list-type="picture-card"
@@ -703,6 +706,7 @@
:action="actionUrl" :action="actionUrl"
:headers="headers" :headers="headers"
:on-success="businessSuccess" :on-success="businessSuccess"
:before-upload="beforeFormer"
:on-remove="businessRemove" :on-remove="businessRemove"
:file-list="businessList" :file-list="businessList"
list-type="picture-card" list-type="picture-card"

894
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
View File

@@ -1,400 +1,524 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div>上传图片</div> <div>上传图片</div>
<el-upload <el-upload
:action="actionUrl" :action="actionUrl"
:headers="headers" :headers="headers"
list-type="picture-card" list-type="picture-card"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:on-success="handleSuccess" :on-success="handleSuccess"
:file-list="fileList" :before-upload="beforeUpload"
style="margin: 10px 0" :file-list="fileList"
> style="margin: 10px 0"
<i class="el-icon-plus"></i> >
</el-upload> <i class="el-icon-plus"></i>
<el-dialog :visible.sync="dialogVisible"> </el-upload>
<img width="100%" :src="dialogImageUrl" alt=""> <el-dialog :visible.sync="dialogVisible">
</el-dialog> <img width="100%" :src="dialogImageUrl" alt="" />
<el-form </el-dialog>
:label-position="labelPosition" <el-form
label-width="120px" :label-position="labelPosition"
:model="station" label-width="120px"
:rules="rules" :model="station"
ref="stationRef" :rules="rules"
> ref="stationRef"
<el-row :gutter="24"> >
<el-col :span="6"> <el-row :gutter="24">
<el-form-item label="站点名称" prop="stationName"> <el-col :span="6">
<el-input v-model="station.stationName"></el-input> <el-form-item label="站点名称" prop="stationName">
</el-form-item> <el-input v-model="station.stationName"></el-input>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item prop="area" label="站点区域"> <el-col :span="6">
<!--<el-input v-model="station.areaCode"> </el-input>--> <el-form-item prop="area" label="站点区域">
<el-cascader <!--<el-input v-model="station.areaCode"> </el-input>-->
size="large" <el-cascader
:options="options" size="large"
v-model="areaCodeList" :options="options"
@change="handleChange" v-model="areaCodeList"
disabled @change="handleChange"
> disabled
</el-cascader> >
</el-form-item> </el-cascader>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item prop="address" label="地址"> <el-col :span="6">
<el-input v-model="station.address" disabled></el-input> <el-form-item prop="address" label="地址">
</el-form-item> <el-input v-model="station.address" disabled></el-input>
</el-col> </el-form-item>
<el-col :span="6"> </el-col>
<el-form-item prop="stationTel" label="联系电话"> <el-col :span="6">
<el-input v-model="station.stationTel"></el-input> <el-form-item prop="stationTel" label="联系电话">
</el-form-item> <el-input v-model="station.stationTel"></el-input>
</el-col> </el-form-item>
</el-row> </el-col>
</el-row>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="6"> <el-col :span="6">
<el-form-item prop="matchCars" label="适配车辆类型"> <el-form-item prop="matchCars" label="适配车辆类型">
<el-select v-model="station.selectMatchCars" multiple placeholder="请选择"> <el-select
<el-option v-model="station.selectMatchCars"
v-for="item in dict.type.match_cars" multiple
:key="item.value" placeholder="请选择"
:label="item.label" >
:value="item.value" <el-option
/> v-for="item in dict.type.match_cars"
</el-select> :key="item.value"
</el-form-item> :label="item.label"
</el-col> :value="item.value"
<el-col :span="6"> />
<el-form-item prop="publicFlag" label="是否对外开放"> </el-select>
<el-select v-model="station.publicFlag" placeholder="请选择"> </el-form-item>
<el-option </el-col>
v-for="item in publicFlagOptions" <el-col :span="6">
:key="item.value" <el-form-item prop="publicFlag" label="是否对外开放">
:label="item.label" <el-select
:value="item.value" v-model="station.publicFlag"
> placeholder="请选择"
</el-option> >
</el-select> <el-option
</el-form-item> v-for="item in publicFlagOptions"
</el-col> :key="item.value"
<el-col :span="6"> :label="item.label"
<el-form-item prop="openFlag" label="是否营业中"> :value="item.value"
<el-select v-model="station.openFlag" placeholder="请选择"> >
<el-option </el-option>
v-for="item in openFlagOptions" </el-select>
:key="item.value" </el-form-item>
:label="item.label" </el-col>
:value="item.value" <el-col :span="6">
> <el-form-item prop="openFlag" label="是否营业中">
</el-option> <el-select
</el-select> v-model="station.openFlag"
</el-form-item> placeholder="请选择"
</el-col> >
<el-col :span="6"> <el-option
<el-form-item prop="merchantAdminName" label="管理员"> v-for="item in openFlagOptions"
<el-input :key="item.value"
:value=" :label="item.label"
station.merchantAdminName === null :value="item.value"
? '无' >
: station.merchantAdminName </el-option>
" </el-select>
></el-input> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="6">
</el-row> <el-form-item prop="merchantAdminName" label="管理员">
<el-input
:value="
station.merchantAdminName === null
? '无'
: station.merchantAdminName
"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="6"> <el-col :span="6">
<el-form-item prop="stationLng" label="经度"> <el-form-item prop="stationLng" label="经度">
<el-input v-model="station.stationLng" disabled></el-input> <el-input
</el-form-item> v-model="station.stationLng"
</el-col> disabled
<el-col :span="6"> ></el-input>
<el-form-item prop="stationLat" label="纬度"> </el-form-item>
<el-input v-model="station.stationLat" disabled></el-input> </el-col>
</el-form-item> <el-col :span="6">
</el-col> <el-form-item prop="stationLat" label="纬度">
<el-col :span="6"> <el-input
<el-form-item prop="merchantName" label="运营商"> v-model="station.stationLat"
<el-input disabled
:value=" ></el-input>
station.merchantName === null ? '无' : station.merchantName </el-form-item>
" </el-col>
disabled <el-col :span="6">
></el-input> <el-form-item prop="merchantName" label="运营商">
</el-form-item> <el-input
</el-col> :value="
<el-col :span="6"> station.merchantName === null
<el-form-item prop="stationType" label="站点类型"> ? '无'
<el-select v-model="station.stationType" placeholder="请选择"> : station.merchantName
<el-option "
v-for="item in dict.type.station_type" disabled
:key="item.value" ></el-input>
:label="item.label" </el-form-item>
:value="item.value" </el-col>
/> <el-col :span="6">
</el-select> <el-form-item prop="stationType" label="站点类型">
</el-form-item> <el-select
</el-col> v-model="station.stationType"
</el-row> 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>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="6"> <el-col :span="6">
<el-form-item prop="construction" label="建设场所"> <el-form-item prop="construction" label="建设场所">
<el-select v-model="station.construction" placeholder="请选择"> <el-select
<el-option v-model="station.construction"
v-for="item in dict.type.construction_type" placeholder="请选择"
:key="item.value" >
:label="item.label" <el-option
:value="item.value" v-for="item in dict.type.construction_type"
/> :key="item.value"
</el-select> :label="item.label"
</el-form-item> :value="item.value"
</el-col> />
<el-col :span="6"> </el-select>
<el-form-item prop="electricityPrice" label="充电费率"> </el-form-item>
<el-input </el-col>
:value="station.electricityPrice === null ? 0 : station.electricityPrice <el-col :span="6">
" <el-form-item prop="electricityPrice" label="充电费率">
disabled <el-input
></el-input> :value="
</el-form-item> station.electricityPrice === null
</el-col> ? 0
<el-col :span="6"> : station.electricityPrice
<el-form-item prop="servicePrice" label="服务费率"> "
<el-input disabled
:value="station.servicePrice === null ? 0 : station.servicePrice" ></el-input>
disabled </el-form-item>
></el-input> </el-col>
</el-form-item> <el-col :span="6">
</el-col> <el-form-item prop="servicePrice" label="服务费率">
<el-col :span="6"> <el-input
<el-form-item prop="businessHours" label="营业时间"> :value="
<el-input v-model="station.businessHours"></el-input> station.servicePrice === null
</el-form-item> ? 0
</el-col> : station.servicePrice
</el-row> "
</el-form> disabled
<el-button type="primary" style="margin-left: 94%" @click="present" v-has-permi = "['pile:station:edit']">提交</el-button> ></el-input>
</div> </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>
</el-row>
</el-form>
<el-button
type="primary"
style="margin-left: 94%"
@click="present"
v-has-permi="['pile:station:edit']"
>提交</el-button
>
</div>
</template> </template>
<script> <script>
import { import { getStationInfo, updateStation } from "@/api/pile/station.js";
getStationInfo,
updateStation,
} from "@/api/pile/station.js";
import bus from "@/bus/bus"; import bus from "@/bus/bus";
import { regionData} from "element-china-area-data"; import { regionData } from "element-china-area-data";
import {getToken} from "@/utils/auth"; import { getToken } from "@/utils/auth";
export default { export default {
dicts: ["station_type", "match_cars", "construction_type"], dicts: ["station_type", "match_cars", "construction_type"],
data() { data() {
return { return {
actionUrl:process.env.VUE_APP_BASE_API+'/common/uploadOSS', actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
dialogVisible:false, dialogVisible: false,
headers: { headers: {
Authorization: "Bearer " + getToken() Authorization: "Bearer " + getToken(),
}, },
imageUrl: null, imageUrl: null,
dialogImageUrl:'', dialogImageUrl: "",
options: regionData, options: regionData,
labelPosition: "right", labelPosition: "right",
station: { station: {
stationName: "", stationName: "",
areaCode: "", areaCode: "",
address: "", address: "",
stationTel: "", stationTel: "",
matchCars: "", matchCars: "",
selectMatchCars: [], selectMatchCars: [],
publicFlag: "", publicFlag: "",
openFlag: "", openFlag: "",
aMapFlag: "", aMapFlag: "",
merchantAdminName: "", merchantAdminName: "",
stationLng: "", stationLng: "",
stationLat: "", stationLat: "",
merchantId: "", merchantId: "",
stationStatus: "", stationStatus: "",
construction: "", construction: "",
businessHours: "", businessHours: "",
pictures: "", pictures: "",
deptId: "", deptId: "",
}, },
stationId: this.$route.params.id, stationId: this.$route.params.id,
publicFlagOptions: [ publicFlagOptions: [
{ {
value: "1", value: "1",
label: "是", label: "是",
}, },
{ {
value: "0", value: "0",
label: "否", label: "否",
}, },
], ],
openFlagOptions: [ openFlagOptions: [
{ {
value: "1", value: "1",
label: "是", label: "是",
}, },
{ {
value: "0", value: "0",
label: "否", label: "否",
}, },
], ],
rules: { rules: {
stationName: [ stationName: [
{ required: true, message: "请输入站点名称", trigger: "blur" }, {
], required: true,
areaCode: [ message: "请输入站点名称",
{ required: true, message: "请输入站点区域", trigger: "blur" }, trigger: "blur",
], },
address: [ ],
{ required: true, message: "请输入地址", trigger: "blur" } areaCode: [
], {
stationTel: [ required: true,
{ required: true, message: "请输入联系电话", trigger: "blur" }, message: "请输入站点区域",
], trigger: "blur",
matchCars: [ },
{ required: true, message: "请输入适配车辆类型", trigger: "blur" }, ],
], address: [
publicFlag: [ { required: true, message: "请输入地址", trigger: "blur" },
{ required: true, message: "请填写是否对外开放", trigger: "blur" }, ],
], stationTel: [
openFlag: [ {
{ required: true, message: "是否营业中", trigger: "blur" } required: true,
], message: "请输入联系电话",
// merchantAdminName: [ trigger: "blur",
// { required: true, message: "请输入管理员", trigger: "blur" }, },
// ], ],
stationLng: [ matchCars: [
{ required: true, message: "请输入经度", trigger: "blur" }, {
], required: true,
stationLat: [ message: "请输入适配车辆类型",
{ required: true, message: "请输入纬度", trigger: "blur" }, trigger: "blur",
], },
// merchantId: [ ],
// { required: true, message: "请输入管理员", trigger: "blur" }, publicFlag: [
// ], {
stationType: [ required: true,
{ required: true, message: "请输入站点类型", trigger: "blur" }, message: "请填写是否对外开放",
], trigger: "blur",
construction: [ },
{ required: true, message: "请输入建设场所", trigger: "blur" }, ],
], openFlag: [
region: [ { required: true, message: "是否营业中", trigger: "blur" },
{ required: true, message: "请输入充电费率", trigger: "blur" }, ],
], // merchantAdminName: [
type: [ // { required: true, message: "请输入管理员", trigger: "blur" },
{ required: true, message: "请输入服务费率", trigger: "blur" } // ],
], stationLng: [
businessHours: [ { required: true, message: "请输入经度", trigger: "blur" },
{ required: true, message: "请输入营业时间", trigger: "blur" }, ],
], stationLat: [
}, { required: true, message: "请输入纬度", trigger: "blur" },
fileList: [], // 用于图片回显 ],
// dialogVisible: null, // merchantId: [
}; // { required: true, message: "请输入管理员", trigger: "blur" },
}, // ],
created() { 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 = () => {
methods: { const canvas = document.createElement("canvas");
handleSuccess(res, file) { const ctx = canvas.getContext("2d");
this.imageUrl = URL.createObjectURL(file.raw); const maxWidth = 800; // 设置压缩后的最大宽度
console.log("图片上传成功 url：", this.imageUrl); const maxHeight = 600; // 设置压缩后的最大高度
console.log("图片上传成功 res：", res); let width = img.width;
this.fileList.push({url: res.url}); let height = img.height;
},
handleRemove(file, fileList) {
console.log("移除图片", file, fileList);
// 从pics数组中，找到图片对应的索引值
const i = this.fileList.findIndex(x => x.uid === file.uid);
// 调用splice方法，移除图片信息
this.fileList.splice(i, 1);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl)
this.dialogVisible = true;
},
handleChange() {
console.log("111");
},
// 渲染表格数据
async queryStationInfo() {
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);
},
},
mounted() {
// 接收map 地图传过来的搜索值
bus.$on("res", (data) => {
// console.log("data", data); // data就是它传过来的值
// console.log("原始this.station", this.station);
// 地址
this.detailedAddress = data.address;
// 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);
// 优化之后 if (width > height) {
let newAddress2 = this.detailedAddress if (width > maxWidth) {
.replace(/(?<=[省市区])/g, "$&,") height *= maxWidth / width;
.split(","); width = maxWidth;
let end = newAddress2.pop(); }
console.log("详细地址", end); } else {
this.station.address = end; if (height > maxHeight) {
}); width *= maxHeight / height;
}, height = maxHeight;
computed: { }
areaCodeList() { }
return this.station.areaCode.split(","); 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);
});
},
handleSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log("图片上传成功 url：", this.imageUrl);
console.log("图片上传成功 res：", res);
this.fileList.push({ url: res.url });
},
handleRemove(file, fileList) {
console.log("移除图片", file, fileList);
// 从pics数组中，找到图片对应的索引值
const i = this.fileList.findIndex((x) => x.uid === file.uid);
// 调用splice方法，移除图片信息
this.fileList.splice(i, 1);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl);
this.dialogVisible = true;
},
handleChange() {
console.log("111");
},
// 渲染表格数据
async queryStationInfo() {
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);
},
},
mounted() {
// 接收map 地图传过来的搜索值
bus.$on("res", (data) => {
// console.log("data", data); // data就是它传过来的值
// console.log("原始this.station", this.station);
// 地址
this.detailedAddress = data.address;
// 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);
// 优化之后
let newAddress2 = this.detailedAddress
.replace(/(?<=[省市区])/g, "$&,")
.split(",");
let end = newAddress2.pop();
console.log("详细地址", end);
this.station.address = end;
});
},
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;
},
}, },
pictureList() {
var pictureList = [];
for (let i = 0; i < this.fileList.length; i++) {
pictureList.push(this.fileList[i].url);
}
return pictureList;
}
},
}; };
</script> </script>