更改地图选择多个点击多个点标记地区选择问题

This commit is contained in:
BOOL\25024
2023-08-04 13:37:59 +08:00
parent 182ee5db2f
commit 1dca4365d8
2 changed files with 588 additions and 536 deletions

View File

@@ -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>