From 1dca4365d8e0c87b9a3e680bbf077527168b5086 Mon Sep 17 00:00:00 2001
From: "BOOL\\25024" <http://192.168.2.2:8099/jsowell/jsowell-uniapp.git>
Date: Fri, 4 Aug 2023 13:37:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=9C=B0=E5=9B=BE=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=A4=9A=E4=B8=AA=E7=82=B9=E5=87=BB=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E7=82=B9=E6=A0=87=E8=AE=B0=E5=9C=B0=E5=8C=BA=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MapContainer/MapContainer.vue  | 394 +++++-----
 .../src/views/pile/station/pileList.vue       | 730 +++++++++---------
 2 files changed, 588 insertions(+), 536 deletions(-)

diff --git a/jsowell-ui/src/components/MapContainer/MapContainer.vue b/jsowell-ui/src/components/MapContainer/MapContainer.vue
index 0d971b989..22f303f7c 100644
--- a/jsowell-ui/src/components/MapContainer/MapContainer.vue
+++ b/jsowell-ui/src/components/MapContainer/MapContainer.vue
@@ -1,223 +1,237 @@
 <template>
-  <div class="basics">
-    <div class="mapCont">
-      <div>
-        <el-input
-          style="width: 85%"
-          v-model="inputObject.userInput"
-          placeholder="请输入你要查找的关键词"
-          type="text"
-          @keyup.enter.native="send"
-        ></el-input>
-        <el-button style="width: 85px" type="primary" @click="send"
-        >搜索
-        </el-button
-        >
-      </div>
+    <div class="basics">
+        <div class="mapCont">
+            <div>
+                <el-input
+                    style="width: 85%"
+                    v-model="inputObject.userInput"
+                    placeholder="请输入你要查找的关键词"
+                    type="text"
+                    @keyup.enter.native="send"
+                ></el-input>
+                <el-button style="width: 85px" type="primary" @click="send"
+                    >搜索
+                </el-button>
+            </div>
 
-      <div id="container"></div>
+            <div id="container"></div>
+        </div>
+
+        <!--    <div class="img">-->
+        <!--      <el-input-->
+        <!--        placeholder="请选择图片"-->
+        <!--        style="width: 50%"-->
+        <!--        type="file"-->
+        <!--        @change="onFileChange"-->
+        <!--        ref="iptRef"-->
+        <!--      ></el-input-->
+        <!--      >-->
+        <!--&lt;!&ndash;      <el-button style="width: 85px">上传图片</el-button>&ndash;&gt;-->
+        <!--    </div>-->
     </div>
-
-
-<!--    <div class="img">-->
-<!--      <el-input-->
-<!--        placeholder="请选择图片"-->
-<!--        style="width: 50%"-->
-<!--        type="file"-->
-<!--        @change="onFileChange"-->
-<!--        ref="iptRef"-->
-<!--      ></el-input-->
-<!--      >-->
-<!--&lt;!&ndash;      <el-button style="width: 85px">上传图片</el-button>&ndash;&gt;-->
-<!--    </div>-->
-  </div>
 </template>
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import {getStation} from "@/api/pile/station.js";
+import { getStation } from "@/api/pile/station.js";
 import bus from "@/bus/bus";
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
 
 window._AMapSecurityConfig = {
-  securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
+    securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
 };
 export default {
-  props:['stationLat','stationLng'],
-  data() {
-    return {
-      dialogImageUrl: '',
-      dialogVisible: false,
-      // headers:{
-      //   Authorization:this.$store.state.user.token
-      // },
-      map: null,
-      autoOptions: {
-        input: "",
-      },
-      inputObject: {
-        userInput: "",
-        // inputId: "searchInput",
-        lnglat: "",
-      },
-      searchPlaceInput: "",
-      auto: null,
-      placeSearch: "",
-      stationId: this.$route.params.id,
-      avatar: "",
-
-    };
-  },
-  methods: {
-    // 点击搜索按钮
-    send() {
-      this.searchPlaceInput = this.inputObject.userInput;
-      console.log("搜索值", this.searchPlaceInput);
-      // 向表单 site-info传值
-      bus.$emit("inp", this.searchPlaceInput);
+    props: ["stationLat", "stationLng"],
+    data() {
+        return {
+            dialogImageUrl: "",
+            dialogVisible: false,
+            // headers:{
+            //   Authorization:this.$store.state.user.token
+            // },
+            map: null,
+            autoOptions: {
+                input: "",
+            },
+            inputObject: {
+                userInput: "",
+                // inputId: "searchInput",
+                lnglat: "",
+            },
+            searchPlaceInput: "",
+            auto: null,
+            placeSearch: "",
+            stationId: this.$route.params.id,
+            avatar: "",
+        };
     },
-    // queryStationInfo() {
-    //   getStation(this.stationId).then((response) => {
-    //     this.lat = response.data.stationLat;
-    //     this.lng = response.data.stationLng;
-    //     console.log(this.lat, this.lng);
-    //     this.initMap(this.lat, this.lng);
-    //   });
-    // },
-
-    initMap() {
-      // console.log(lat, lng);
-      AMapLoader.load({
-        key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      })
-        .then((AMap) => {
-          this.map = new AMap.Map("container", {
-            //设置地图容器id
-            viewMode: "3D", //是否为3D地图模式
-            zoom: 15, //初始化地图级别
-            center: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
-          });
-          // this.map.addControl(new AMap.Geolocation());
-          // console.log("map", this.map);
-          // 设置鼠标的样式
-          this.map.setDefaultCursor("pointer");
-          // 点标记
-          let marker = new AMap.Marker({
-            position: new AMap.LngLat(+this.stationLng, +this.stationLat),
-          });
-          // 将创建的点标记添加到已有的地图实例
-          this.map.add(marker);
-          AMap.plugin("AMap.AutoComplete", function () {
-            let auto = new AMap.AutoComplete(this.autoOptions);
-            //构造地点查询类
-            auto.on("select", this.select);
-          });
-          this.placeSearch = new AMap.PlaceSearch({
-            map: this.map,
-          });
-          // 逆向地理编码 -> 要正向地理编码
-          this.map.on("click", (e) => {
-            let lat = e.lnglat.lat;
-            let lng = e.lnglat.lng;
+    methods: {
+        // 点击搜索按钮
+        send() {
+            this.searchPlaceInput = this.inputObject.userInput;
+            console.log("搜索值", this.searchPlaceInput);
+            // 向表单 site-info传值
+            bus.$emit("inp", this.searchPlaceInput);
+        },
+        // queryStationInfo() {
+        //   getStation(this.stationId).then((response) => {
+        //     this.lat = response.data.stationLat;
+        //     this.lng = response.data.stationLng;
+        //     console.log(this.lat, this.lng);
+        //     this.initMap(this.lat, this.lng);
+        //   });
+        // },
+        handleSearchResultClick(data) {
+            // 在这里处理点击事件
+            // console.log(data); // 你可以在控制台打印点击结果的数据
+            let lat = data.entr_location.lat;
+            let lng = data.entr_location.lng;
             this.getLngLatService(lat, lng);
-            // let lnglat = [lng, lat];
-            // console.log("经纬度", lnglat);
-          });
-          marker.on("click", (e) => {
-            let lat = e.lnglat.lat;
-            let lng = e.lnglat.lng;
-            this.getLngLatService(lat, lng);
-          });
-        })
-        .catch((e) => {
-          console.log(e);
-        });
+        },
+        initMap() {
+            // console.log(lat, lng);
+            AMapLoader.load({
+                key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填
+                version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+                plugins: [
+                    "AMap.AutoComplete",
+                    "AMap.PlaceSearch",
+                    "AMap.Geocoder",
+                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+            })
+                .then((AMap) => {
+                    this.map = new AMap.Map("container", {
+                        //设置地图容器id
+                        viewMode: "3D", //是否为3D地图模式
+                        zoom: 15, //初始化地图级别
+                        center: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
+                    });
+                    // this.map.addControl(new AMap.Geolocation());
+                    // console.log("map", this.map);
+                    // 设置鼠标的样式
+                    this.map.setDefaultCursor("pointer");
+                    // 点标记
+                    let marker = new AMap.Marker({
+                        position: new AMap.LngLat(
+                            +this.stationLng,
+                            +this.stationLat
+                        ),
+                    });
+                    // 将创建的点标记添加到已有的地图实例
+                    this.map.add(marker);
+                    AMap.plugin("AMap.AutoComplete", function () {
+                        let auto = new AMap.AutoComplete(this.autoOptions);
+                        //构造地点查询类
+                        auto.on("select", this.select);
+                    });
+                    this.placeSearch = new AMap.PlaceSearch({
+                        map: this.map,
+                    });
+                    // 点击搜索结果的回调函数
+                    this.placeSearch.on("markerClick", (e) => {
+                        // 在此处处理点击事件
+                        this.handleSearchResultClick(e.data);
+                    });
+                    // 逆向地理编码 -> 要正向地理编码
+                    this.map.on("click", (e) => {
+                        let lat = e.lnglat.lat;
+                        let lng = e.lnglat.lng;
+                        this.getLngLatService(lat, lng);
+                        // let lnglat = [lng, lat];
+                        // console.log("经纬度", lnglat);
+                    });
+                    marker.on("click", (e) => {
+                        let lat = e.lnglat.lat;
+                        let lng = e.lnglat.lng;
+                        this.getLngLatService(lat, lng);
+                    });
+                })
+                .catch((e) => {
+                    console.log(e);
+                });
+        },
+        select(e) {
+            this.placeSearch.search(e.poi.name); //关键字查询查询
+        },
+        //逆向地理编码服务
+        getLngLatService(lat, lng) {
+            let pos = [lng, lat];
+            let lnglat = new AMap.LngLat(lng, lat);
+            let geocoder = new AMap.Geocoder({
+                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+                city: "全国",
+            });
+            //1.点击地图任意位置生成一个marker
+            // let marker = new AMap.Marker({
+            //   position: new AMap.LngLat(lng, lat),
+            // });
+            // this.map.add(marker);
+            // 移除已创建的marker
+            // this.map.remove(marker);
+            // let address = "";
+            //2.将位置转化为坐标点-->地理信息
+            //3.根据地理信息（地址）进行搜索获取详细信息！
+            geocoder.getAddress(lnglat, (status, result) => {
+                if (status === "complete" && result.regeocode) {
+                    // console.log("geocoder.getAddress result", result);
+                    let address = result.regeocode.formattedAddress;
+                    let adcode = result.regeocode.addressComponent.adcode;
+                    let res = {
+                        pos: pos,
+                        address: address,
+                        adcode: adcode,
+                    };
+                    // console.log("res", res);
+                    bus.$emit("res", res);
+                    //需求：固定的窗体信息进行展示！
+                } else {
+                    console.log("根据经纬度查询地址失败");
+                    // log.error("根据经纬度查询地址失败");
+                }
+            });
+        },
+    },
+    mounted() {
+        //DOM初始化完成进行地图初始化
+        // this.queryStationInfo()
+    },
+    created() {
+        // this.send();
+    },
+    watch: {
+        searchPlaceInput(newValue) {
+            if (newValue != null) {
+                console.log(newValue);
 
+                this.placeSearch.search(newValue);
+                this.map.setZoom(16, true, 1);
+            }
+        },
     },
-    select(e) {
-      this.placeSearch.search(e.poi.name); //关键字查询查询
-    },
-    //逆向地理编码服务
-    getLngLatService(lat, lng) {
-      let pos = [lng, lat];
-      let lnglat = new AMap.LngLat(lng, lat);
-      let geocoder = new AMap.Geocoder({
-        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
-        city: "全国",
-      });
-      //1.点击地图任意位置生成一个marker
-      // let marker = new AMap.Marker({
-      //   position: new AMap.LngLat(lng, lat),
-      // });
-      // this.map.add(marker);
-      // 移除已创建的marker
-      // this.map.remove(marker);
-      // let address = "";
-      //2.将位置转化为坐标点-->地理信息
-      //3.根据地理信息（地址）进行搜索获取详细信息！
-      geocoder.getAddress(lnglat, (status, result) => {
-        if (status === "complete" && result.regeocode) {
-          // console.log("geocoder.getAddress result", result);
-          let address = result.regeocode.formattedAddress;
-          let adcode = result.regeocode.addressComponent.adcode;
-          let res = {
-            pos: pos,
-            address: address,
-            adcode: adcode,
-          };
-          // console.log("res", res);
-          bus.$emit("res", res);
-          //需求：固定的窗体信息进行展示！
-        } else {
-          console.log("根据经纬度查询地址失败");
-          // log.error("根据经纬度查询地址失败");
-        }
-      });
-    },
-  },
-  mounted() {
-    //DOM初始化完成进行地图初始化
-    // this.queryStationInfo()
-  },
-  created() {
-    // this.send();
-  },
-  watch: {
-    searchPlaceInput(newValue) {
-      if (newValue != null) {
-        console.log(newValue);
-
-        this.placeSearch.search(newValue);
-        this.map.setZoom(16, true, 1);
-      }
-    },
-  },
 };
 </script>
 
 <style lang="scss">
 #container {
-  padding: 0px;
-  margin: 0px;
-  width: 100%;
-  height: 90%;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 90%;
 }
 
 .basics {
-  display: flex;
-  height: 500px;
-  width: 100%;
+    display: flex;
+    height: 500px;
+    width: 100%;
 }
 
 .mapCont {
-  width: 50%;
+    width: 50%;
 }
 
 .img {
-  flex: 1;
-  margin-left: 100px;
+    flex: 1;
+    margin-left: 100px;
 }
 
 // #search_container {
diff --git a/jsowell-ui/src/views/pile/station/pileList.vue b/jsowell-ui/src/views/pile/station/pileList.vue
index a8fe1b44d..df958ef09 100644
--- a/jsowell-ui/src/views/pile/station/pileList.vue
+++ b/jsowell-ui/src/views/pile/station/pileList.vue
@@ -1,370 +1,408 @@
 <template>
-  <div class="app-container">
-    <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-      @submit.native.prevent
-    >
-      <el-form-item label="桩号" prop="pileSn">
-        <el-input
-          v-model="queryParams.pileSn"
-          placeholder="请输入桩号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <!-- 切换运营商按钮 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          v-hasPermi="['pile:station:add']"
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="click"
-          >批量修改站点</el-button
+    <div class="app-container">
+        <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
+            @submit.native.prevent
         >
-      </el-col>
-    </el-row>
-
-    <el-table
-      v-loading="loading"
-      :data="pileList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="桩号" align="center" prop="sn">
-        <template slot-scope="scope">
-          <router-link
-            :to="'/pile/detail/index/' + scope.row.pileId"
-            class="link-type"
-          >
-            <span>{{ scope.row.pileSn }}</span>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.pile_status"
-            :value="scope.row.status"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="接口数量" align="center" prop="gunNum" />
-      <el-table-column label="电桩类型" align="center" prop="pileType">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.connector_type"
-            :value="scope.row.pileType"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="运营商" align="center" prop="merchantName" />
-      <el-table-column label="充电站" align="center" prop="stationName" />
-      <el-table-column
-        label="注册时间"
-        align="center"
-        prop="registrationTime"
-      />
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getPileList"
-    />
-
-    <!-- 修改充电桩站点 -->
-    <el-dialog :title="title" :visible.sync="open" width="45%" append-to-body>
-      <el-form ref="form" :model="updateData" label-width="120px">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="已选择的桩">
-              <el-tag v-for="tag in updateData.pileSnList" :key="tag">
-                {{ tag }}
-              </el-tag>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="运营商">
-              <el-select
-                v-model="updateData.merchantId"
-                placeholder="请选择运营商"
-                @change="changeSelectMerchant(updateData.merchantId)"
-              >
-                <el-option
-                  v-for="item in merchantList"
-                  :key="item.merchantName"
-                  :label="item.merchantName"
-                  :value="item.id"
+            <el-form-item label="桩号" prop="pileSn">
+                <el-input
+                    v-model="queryParams.pileSn"
+                    placeholder="请输入桩号"
+                    clearable
+                    @keyup.enter.native="handleQuery"
                 />
-              </el-select>
             </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="站点" prop="stationId">
-              <el-select
-                v-model="updateData.stationId"
-                placeholder="请选择站点"
-                filterable
-              >
-                <el-option
-                  v-for="item in stationList"
-                  :key="item.id"
-                  :label="item.stationName"
-                  :value="item.id"
-                />
-              </el-select>
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    >搜索</el-button
+                >
+                <el-button
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="resetQuery"
+                    >重置</el-button
+                >
             </el-form-item>
-          </el-col>
+        </el-form>
+        <!-- 切换运营商按钮 -->
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    v-hasPermi="['pile:station:add']"
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="click"
+                    >批量修改站点</el-button
+                >
+            </el-col>
         </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="产品型号" prop="modelId">
-              <el-select v-model="updateData.modelId" placeholder="请选择产品型号"
-                         v-selectLoadMore="selectLoadMore"
-                         :remote-method="remoteMethod"
-              >
-                <el-option
-                  v-for="item in modelList"
-                  :key="item.modelName"
-                  :label="item.modelName"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="枪口数量" prop="connectorNum">
-              <el-input
-                v-model="updateData.connectorNum"
-                placeholder="请输入枪口数量"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="batchUpdate">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
+
+        <el-table
+            v-loading="loading"
+            :data="pileList"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="桩号" align="center" prop="sn">
+                <template slot-scope="scope">
+                    <router-link
+                        :to="'/pile/detail/index/' + scope.row.pileId"
+                        class="link-type"
+                    >
+                        <span>{{ scope.row.pileSn }}</span>
+                    </router-link>
+                </template>
+            </el-table-column>
+            <el-table-column label="状态" align="center" prop="status">
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.pile_status"
+                        :value="scope.row.status"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column label="接口数量" align="center" prop="gunNum" />
+            <el-table-column label="电桩类型" align="center" prop="pileType">
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.connector_type"
+                        :value="scope.row.pileType"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="运营商"
+                align="center"
+                prop="merchantName"
+            />
+            <el-table-column label="充电站" align="center" prop="stationName" />
+            <el-table-column
+                label="注册时间"
+                align="center"
+                prop="registrationTime"
+            />
+        </el-table>
+
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getPileList"
+        />
+
+        <!-- 修改充电桩站点 -->
+        <el-dialog
+            :title="title"
+            :visible.sync="open"
+            width="45%"
+            append-to-body
+            :before-close="handleClose"
+        >
+            <el-form ref="form" :model="updateData" label-width="120px">
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="已选择的桩">
+                            <el-tag
+                                v-for="tag in updateData.pileSnList"
+                                :key="tag"
+                            >
+                                {{ tag }}
+                            </el-tag>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="运营商">
+                            <el-select
+                                v-model="updateData.merchantId"
+                                placeholder="请选择运营商"
+                                @change="
+                                    changeSelectMerchant(updateData.merchantId)
+                                "
+                            >
+                                <el-option
+                                    v-for="item in merchantList"
+                                    :key="item.merchantName"
+                                    :label="item.merchantName"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="站点" prop="stationId">
+                            <el-select
+                                v-model="updateData.stationId"
+                                placeholder="请选择站点"
+                                filterable
+                            >
+                                <el-option
+                                    v-for="item in stationList"
+                                    :key="item.id"
+                                    :label="item.stationName"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="产品型号" prop="modelId">
+                            <el-select
+                                v-model="updateData.modelId"
+                                placeholder="请选择产品型号"
+                                v-selectLoadMore="selectLoadMore"
+                                :remote-method="remoteMethod"
+                            >
+                                <el-option
+                                    v-for="item in modelList"
+                                    :key="item.modelName"
+                                    :label="item.modelName"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="枪口数量" prop="connectorNum">
+                            <el-input
+                                v-model="updateData.connectorNum"
+                                placeholder="请输入枪口数量"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="batchUpdate">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
 </template>
 <script>
 import { batchUpdatePileList, listBasic } from "@/api/pile/basic";
 import { getMerchantList } from "@/api/pile/merchant";
 import { getStationListByMerchantId } from "@/api/pile/station";
-import {listModel} from "@/api/pile/model";
+import { listModel } from "@/api/pile/model";
 
 export default {
-  name: "PileList",
-  dicts: ["pile_status", "software_protocol", "connector_type"],
-  props: {
-    stationId: "",
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 总条数
-      total: 0,
-      // 显示搜索条件
-      showSearch: true,
-      // 查询参数
-      queryParams: {
-        stationId: null,
-        pageNum: 1,
-        pageSize: 10,
-        pileSn: null,
-      },
-      pileList: [],
-      // 选中数组
-      ids: [],
-      // 是否显示弹出层
-      open: false,
-      // 弹出层标题
-      title: "",
-      // 运营商列表
-      merchantList: [],
-      // 站点列表
-      stationList: [],
-      // 更新站点参数
-      updateData: {
-        merchantId: null,
-        stationId: null,
-        pileIdList: [],
-        pileSnList: [],
-        connectorNum: null,
-        modelId: null,
-      },
-      // 型号列表
-      modelList: [],
-      modelTotal: 0,
-      loadMoreFlag: true,
-      searchModelParam: {
-        name: '',
-        pageNo: 1,
-        pageSize: 10
-      },
-    };
-  },
-  created() {
-    // this.getPileList();
-  },
-  methods: {
-    // 下拉加载更多
-    selectLoadMore () {
-      console.log("触底了 ", this.searchModelParam.pageSize)
-      if (this.loadMoreFlag === false) {
-        return;
-      }
-      this.searchModelParam.pageSize = this.searchModelParam.pageSize + 10;
-      console.log('触底了执行查询', this.searchModelParam);
-      this.getModelList();
+    name: "PileList",
+    dicts: ["pile_status", "software_protocol", "connector_type"],
+    props: {
+        stationId: "",
     },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 总条数
+            total: 0,
+            // 显示搜索条件
+            showSearch: true,
+            // 查询参数
+            queryParams: {
+                stationId: null,
+                pageNum: 1,
+                pageSize: 10,
+                pileSn: null,
+            },
+            pileList: [],
+            // 选中数组
+            ids: [],
+            // 是否显示弹出层
+            open: false,
+            // 弹出层标题
+            title: "",
+            // 运营商列表
+            merchantList: [],
+            // 站点列表
+            stationList: [],
+            // 更新站点参数
+            updateData: {
+                merchantId: null,
+                stationId: null,
+                pileIdList: [],
+                pileSnList: [],
+                connectorNum: null,
+                modelId: null,
+            },
+            // 型号列表
+            modelList: [],
+            modelTotal: 0,
+            loadMoreFlag: true,
+            searchModelParam: {
+                name: "",
+                pageNo: 1,
+                pageSize: 10,
+            },
+        };
+    },
+    created() {
+        // this.getPileList();
+    },
+    methods: {
+        // 下拉加载更多
+        selectLoadMore() {
+            console.log("触底了 ", this.searchModelParam.pageSize);
+            if (this.loadMoreFlag === false) {
+                return;
+            }
+            this.searchModelParam.pageSize =
+                this.searchModelParam.pageSize + 10;
+            console.log("触底了执行查询", this.searchModelParam);
+            this.getModelList();
+        },
 
-    // 远程搜索
-    remoteMethod (val) {
-      console.log('输入了', val)
-      this.loading = true
-      this.search.name = val
-      this.search.start = 1
-      this.list= []
-      setTimeout(() => {
-        this.loading = false
-        this.getModelList()
-      }, 500)
-    },
+        // 远程搜索
+        remoteMethod(val) {
+            console.log("输入了", val);
+            this.loading = true;
+            this.search.name = val;
+            this.search.start = 1;
+            this.list = [];
+            setTimeout(() => {
+                this.loading = false;
+                this.getModelList();
+            }, 500);
+        },
 
-    // 分页查询
-    getModelList() {
-      listModel(this.searchModelParam).then((response) => {
-        console.log("分页查询response", response);
-        this.modelTotal = response.total;
-        this.modelList = response.rows;
-        this.loadMoreFlag = this.searchModelParam.pageSize <= this.modelTotal;
-      });
+        // 分页查询
+        getModelList() {
+            listModel(this.searchModelParam).then((response) => {
+                console.log("分页查询response", response);
+                this.modelTotal = response.total;
+                this.modelList = response.rows;
+                this.loadMoreFlag =
+                    this.searchModelParam.pageSize <= this.modelTotal;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getPileList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.queryParams = {
+                pageNum: 1,
+            };
+            // this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 查询充电桩列表 */
+        getPileList() {
+            this.loading = true;
+            this.queryParams.stationId = this.stationId;
+            listBasic(this.queryParams).then((response) => {
+                this.pileList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+                // console.log(this.pileList);
+            });
+        },
+        getMerchantList() {
+            getMerchantList().then((response) => {
+                this.merchantList = response.rows;
+            });
+        },
+        changeSelectMerchant(value) {
+            console.log(value);
+            // 通过接口查
+            getStationListByMerchantId(value).then((response) => {
+                this.stationList = response.data;
+            });
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            // console.log(selection);
+            this.updateData.pileSnList = selection.map((item) => item.pileSn);
+            this.updateData.pileIdList = selection.map((item) => item.pileId);
+            // console.log(this.updateData.pileIdList);
+        },
+        /** 按钮操作 */
+        click() {
+            if (this.updateData.pileIdList.length === 0) {
+                return this.$message({
+                    message: "请选择充电桩",
+                    type: "warning",
+                });
+            }
+            this.getMerchantList();
+            this.getModelList();
+            this.reset();
+            this.open = true;
+            this.title = "更换站点";
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+            this.stationList = [];
+        },
+        // 点击弹框右上角×
+        handleClose() {
+            this.open = false;
+            this.reset();
+            this.stationList = [];
+        },
+        reset() {
+            this.updateData.merchantId = null;
+            this.updateData.stationId = null;
+            this.updateData.modelId = null;
+            this.updateData.connectorNum = null;
+        },
+        batchUpdate() {
+            if (this.updateData.merchantId === null) {
+                return this.$message({
+                    message: "请选择运营商",
+                    type: "warning",
+                });
+            }
+            if (this.updateData.stationId === null) {
+                return this.$message({
+                    message: "请选择站点",
+                    type: "warning",
+                });
+            }
+            console.log("点击批量更新", this.updateData);
+            this.loading = true;
+            batchUpdatePileList(this.updateData)
+                .then((response) => {
+                    this.loading = false;
+                    this.$message({
+                        message: "操作成功",
+                        type: "success",
+                    });
+                    this.open = false;
+                    this.getPileList();
+                    this.stationList = [];
+                })
+                .catch((error) => {
+                    this.loading = false;
+                    console.log(error);
+                });
+        },
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getPileList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.queryParams = {
-        pageNum: 1
-      };
-      // this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 查询充电桩列表 */
-    getPileList() {
-      this.loading = true;
-      this.queryParams.stationId = this.stationId;
-      listBasic(this.queryParams).then((response) => {
-        this.pileList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-        // console.log(this.pileList);
-      });
-    },
-    getMerchantList() {
-      getMerchantList().then((response) => {
-        this.merchantList = response.rows;
-      });
-    },
-    changeSelectMerchant(value) {
-      console.log(value);
-      // 通过接口查
-      getStationListByMerchantId(value).then((response) => {
-        this.stationList = response.data;
-      });
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      // console.log(selection);
-      this.updateData.pileSnList = selection.map((item) => item.pileSn);
-      this.updateData.pileIdList = selection.map((item) => item.pileId);
-      // console.log(this.updateData.pileIdList);
-    },
-    /** 按钮操作 */
-    click() {
-      if (this.updateData.pileIdList.length === 0) {
-        return this.$message({
-          message: "请选择充电桩",
-          type: "warning",
-        });
-      }
-      this.getMerchantList();
-      this.getModelList();
-      this.reset();
-      this.open = true;
-      this.title = "更换站点";
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    reset() {
-      this.updateData.merchantId = null;
-      this.updateData.stationId = null;
-      this.updateData.modelId = null;
-      this.updateData.connectorNum = null;
-    },
-    batchUpdate() {
-      if (this.updateData.merchantId === null) {
-        return this.$message({
-          message: "请选择运营商",
-          type: "warning",
-        });
-      }
-      if (this.updateData.stationId === null) {
-        return this.$message({
-          message: "请选择站点",
-          type: "warning",
-        });
-      }
-      console.log("点击批量更新", this.updateData);
-      this.loading = true;
-      batchUpdatePileList(this.updateData)
-        .then((response) => {
-          this.loading = false;
-          this.$message({
-            message: "操作成功",
-            type: "success",
-          });
-          this.open = false;
-          this.getPileList();
-        })
-        .catch((error) => {
-          this.loading = false;
-          console.log(error);
-        });
-    },
-  },
 };
 </script>
 
 <style>
 .el-tag {
-  margin-left: 10px;
+    margin-left: 10px;
 }
 </style>