From 2feb00655428e65d34f6179d9fc1a02e1ce7b15e Mon Sep 17 00:00:00 2001
From: "BOOL\\25024" <http://192.168.2.2:8099/jsowell/jsowell-uniapp.git>
Date: Tue, 18 Jul 2023 10:59:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E5=8E=8B?=
 =?UTF-8?q?=E7=BC=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pile/merchant/components/adapayMember.vue |   4 +
 .../pile/station/components/SiteInfo.vue      | 894 ++++++++++--------
 2 files changed, 513 insertions(+), 385 deletions(-)

diff --git a/jsowell-ui/src/views/pile/merchant/components/adapayMember.vue b/jsowell-ui/src/views/pile/merchant/components/adapayMember.vue
index d97ce09b7..9d7baee66 100644
--- a/jsowell-ui/src/views/pile/merchant/components/adapayMember.vue
+++ b/jsowell-ui/src/views/pile/merchant/components/adapayMember.vue
@@ -647,6 +647,7 @@
                         :action="actionUrl"
                         :headers="headers"
                         :on-success="idCardSuccess"
+                        :before-upload="beforeUpload"
                         :on-remove="idCardRemove"
                         :file-list="idCardList"
                         :limit="1"
@@ -665,6 +666,7 @@
                         :action="actionUrl"
                         :headers="headers"
                         :on-success="sideCardSuccess"
+                        :before-upload="getBefore"
                         :on-remove="sideCardRemove"
                         :file-list="sideCardList"
                         list-type="picture-card"
@@ -684,6 +686,7 @@
                         :action="actionUrl"
                         :headers="headers"
                         :on-success="depositBankSuccess"
+                        :before-upload="beforeData"
                         :on-remove="depositBankRemove"
                         :file-list="depositBankList"
                         list-type="picture-card"
@@ -703,6 +706,7 @@
                         :action="actionUrl"
                         :headers="headers"
                         :on-success="businessSuccess"
+                        :before-upload="beforeFormer"
                         :on-remove="businessRemove"
                         :file-list="businessList"
                         list-type="picture-card"
diff --git a/jsowell-ui/src/views/pile/station/components/SiteInfo.vue b/jsowell-ui/src/views/pile/station/components/SiteInfo.vue
index 1725a133f..c6ff9d2b7 100644
--- a/jsowell-ui/src/views/pile/station/components/SiteInfo.vue
+++ b/jsowell-ui/src/views/pile/station/components/SiteInfo.vue
@@ -1,400 +1,524 @@
 <template>
-  <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"
-      :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>
+    <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>
 
-      <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>
+            <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>
 
-      <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>
+            <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>
 
-      <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>
-      </el-row>
-    </el-form>
-    <el-button type="primary" style="margin-left: 94%" @click="present" v-has-permi = "['pile:station:edit']">提交</el-button>
-  </div>
+            <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>
+            </el-row>
+        </el-form>
+        <el-button
+            type="primary"
+            style="margin-left: 94%"
+            @click="present"
+            v-has-permi="['pile:station:edit']"
+            >提交</el-button
+        >
+    </div>
 </template>
 
 <script>
-import {
-  getStationInfo,
-  updateStation,
-} from "@/api/pile/station.js";
+import { getStationInfo, updateStation } from "@/api/pile/station.js";
 import bus from "@/bus/bus";
-import { regionData} from "element-china-area-data";
-import {getToken} from "@/utils/auth";
+import { regionData } from "element-china-area-data";
+import { getToken } from "@/utils/auth";
 
 export default {
-  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: "",
-        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() {
+    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: "",
+                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();
 
-  },
-  methods: {
-    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);
+                    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;
 
-      // 优化之后
-      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(",");
+                        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);
+            });
+        },
+        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>