496 lines
12 KiB
Vue
496 lines
12 KiB
Vue
<template>
|
|
<div style="width: 100vw">
|
|
<scroll-view class="divForm" :style="{ height }" scroll-y show-scrollbar>
|
|
<uni-forms ref="formRef" :model="formData" :label-width="80">
|
|
<uni-forms-item
|
|
label="站点名称"
|
|
name="name"
|
|
required
|
|
:rules="[{ required: true, errorMessage: '请填写站点名称' }]"
|
|
>
|
|
<uni-easyinput v-model="formData.name" />
|
|
</uni-forms-item>
|
|
<uni-forms-item
|
|
label="站点类型:"
|
|
name="zdlx"
|
|
required
|
|
:rules="[{ required: true, errorMessage: '请选择站点类型' }]"
|
|
>
|
|
<uni-data-select v-model="formData.zdlx" :localdata="arrZDLX" />
|
|
</uni-forms-item>
|
|
<uni-forms-item
|
|
label="站点级别:"
|
|
name="zdjb"
|
|
required
|
|
:rules="[{ required: true, errorMessage: '请选择站点级别' }]"
|
|
>
|
|
<div class="divRow">
|
|
<uni-data-checkbox v-model="formData.zdjb" :localdata="arrZDJB" />
|
|
</div>
|
|
</uni-forms-item>
|
|
<!-- <uni-forms-item label="调度投放:" name="ddtf" required :rules="[{'required': true,errorMessage: '请选择调度投放'}]">
|
|
<div class="divRow">
|
|
<uni-data-checkbox v-model="formData.ddtf" :localdata="arrDDTF" />
|
|
</div>
|
|
|
|
</uni-forms-item>
|
|
<uni-forms-item label="用户端显示:" name="zdxs" required :rules="[{'required': true,errorMessage: '请选择用户端显示'}]">
|
|
<div class="divRow">
|
|
<uni-data-checkbox v-model="formData.zdxs" :localdata="arrZDXS" />
|
|
<label style="margin-left: 10px;" @click="showTip('开启后在用户端小程序地图上不会显示站点,但不影响用户在该站点范围内还车')">
|
|
<uni-icons type="info" size="20" color="#5892E3" /></label>
|
|
</div>
|
|
</uni-forms-item>-->
|
|
<uni-forms-item
|
|
label="可停车辆:"
|
|
name="ktcl"
|
|
required
|
|
:rules="[{ required: true, errorMessage: '请填写可停车辆' }]"
|
|
>
|
|
<div class="divRow">
|
|
<uni-easyinput v-model="formData.ktcl" />
|
|
<label>辆</label>
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item
|
|
label="最大可停:"
|
|
name="zdkt"
|
|
required
|
|
:rules="[{ required: true, errorMessage: '请填写最大可停' }]"
|
|
>
|
|
<div class="divRow">
|
|
<uni-easyinput v-model="formData.zdkt" />
|
|
<label>辆</label>
|
|
</div>
|
|
</uni-forms-item>
|
|
<!-- <uni-forms-item label="还车半径:">
|
|
<div class="divRow">
|
|
<uni-easyinput v-model="formData.hcbj" />
|
|
<label>米</label>
|
|
</div>
|
|
</uni-forms-item> -->
|
|
<uni-forms-item label="站点图片:">
|
|
<div>
|
|
<div class="divFontColor" style="margin: 10px 0px">最多3张</div>
|
|
<uni-file-picker
|
|
file-mediatype="image"
|
|
mode="grid"
|
|
file-extname="png,jpg"
|
|
:limit="3"
|
|
:value="filevalue"
|
|
@select="uploadfile"
|
|
@delete="delfile"
|
|
/>
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="站点描述:">
|
|
<uni-easyinput type="textarea" v-model="formData.zdms" />
|
|
</uni-forms-item>
|
|
<!-- <uni-forms-item label="站点标签:">
|
|
<uni-data-checkbox mode="button" multiple v-model="formData.zdbq" :localdata="arrZDBQ" />
|
|
</uni-forms-item> -->
|
|
</uni-forms>
|
|
</scroll-view>
|
|
<div class="divBottom">
|
|
<div
|
|
class="b-btn-white divtBtn"
|
|
v-if="opentype == 'edit'"
|
|
@click="openMap"
|
|
>
|
|
重新绘制
|
|
</div>
|
|
<div
|
|
class="b-btn-white divtBtn"
|
|
v-if="opentype == 'add'"
|
|
@click="openMap"
|
|
>
|
|
返回绘制
|
|
</div>
|
|
<div
|
|
class="b-btn-blue divtBtn"
|
|
style="margin-left: 10px"
|
|
@click="SaveData"
|
|
>
|
|
确认{{ opentype == "add" ? "新建" : "保存" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { showModelMessage, getScreenHeightNoTabBar } from "@/utils/tools.js";
|
|
import { ref } from "vue";
|
|
import * as map from "@/utils/map.js";
|
|
import AMapWX from "@/utils/amap-wx.130.js";
|
|
import { callOperateApi, fileUploadApi } from "../../../utils/api";
|
|
import config from "../../../utils/config";
|
|
import { findIndex, lastIndexOf } from "lodash";
|
|
|
|
var qqmapsdk = new AMapWX({
|
|
key: map.sdkKey,
|
|
});
|
|
|
|
const formRef = ref("formRef");
|
|
let height = ref("100%");
|
|
const opentype = ref("add");
|
|
|
|
const arrZDLX = ref([]);
|
|
|
|
const arrZDJB = ref([]);
|
|
|
|
/* const arrDDTF = ref([{
|
|
text: "开启",
|
|
value: 1
|
|
}, {
|
|
text: "关闭",
|
|
value: 2
|
|
}]);
|
|
|
|
const arrZDXS = ref([{
|
|
text: "隐藏",
|
|
value: 1
|
|
}, {
|
|
text: "显示",
|
|
value: 2
|
|
}]);
|
|
|
|
const arrZDBQ = ref([{
|
|
text: "早高峰",
|
|
value: 1
|
|
}, {
|
|
text: "午高峰",
|
|
value: 2
|
|
}, {
|
|
text: "晚高峰",
|
|
value: 2
|
|
}]); */
|
|
|
|
let arrPoint = [];
|
|
let radius = null;
|
|
let regionid = null;
|
|
let arrFile = [];
|
|
const filevalue = ref([]);
|
|
const formData = ref({
|
|
id: "",
|
|
name: "",
|
|
address: "",
|
|
zdlx: 1,
|
|
zdjb: 1,
|
|
ktcl: 10,
|
|
zdkt: 20,
|
|
hcbj: 10,
|
|
zdms: "",
|
|
zdbq: [1],
|
|
zdtf: 1,
|
|
zdxs: 1,
|
|
});
|
|
|
|
function openMap() {
|
|
const type = opentype.value;
|
|
if (type == "add") {
|
|
uni.navigateBack();
|
|
return;
|
|
}
|
|
if (type == "edit") {
|
|
const id = formData.value.id;
|
|
const points = JSON.stringify(arrPoint);
|
|
uni.navigateTo({
|
|
url: `/pages/map/map-bikesite?type=edit&id=${id}&points=${points}&k=${Date.now()}`,
|
|
});
|
|
}
|
|
}
|
|
|
|
function SaveData() {
|
|
formRef.value.validate().then((res) => {
|
|
const { name, zdlx, zdjb, ktcl, zdkt, zdms } = res;
|
|
const { id, address } = formData.value;
|
|
let shapeType = 2;
|
|
let points = null;
|
|
let siteLng = null;
|
|
let siteLat = null;
|
|
let r = null;
|
|
if (arrPoint.length == 1) {
|
|
shapeType = 1;
|
|
siteLng = arrPoint[0].longitude;
|
|
siteLat = arrPoint[0].latitude;
|
|
r = radius;
|
|
} else {
|
|
points = arrPoint;
|
|
}
|
|
const params = {
|
|
siteRegionId: id,
|
|
operationRegionId: regionid,
|
|
siteName: name,
|
|
siteAdress: address,
|
|
siteType: zdlx,
|
|
siteLevel: zdjb,
|
|
allowedParkingNum: ktcl,
|
|
allowedParkingMax: zdkt,
|
|
radius: r,
|
|
shapeType,
|
|
points,
|
|
siteLng,
|
|
siteLat,
|
|
imageIds: arrFile,
|
|
describe: zdms,
|
|
};
|
|
let url = "ebikeRegion/saveSite";
|
|
if (opentype.value == "edit") {
|
|
url = "ebikeRegion/updateSite";
|
|
}
|
|
callOperateApi(url, params, "post").then((res) => {
|
|
console.log("1111111111111111111", "/ebikeRegion/saveSite", params, res);
|
|
const { code, data, message } = res;
|
|
if (code != 200) {
|
|
showModelMessage("保存失败！");
|
|
console.log("ebikeRegion/saveSite", message);
|
|
return;
|
|
} else {
|
|
showModelMessage("保存成功！");
|
|
uni.reLaunch({
|
|
url: "/pages/devops/bikesite/bikesite-list",
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function showTip(title) {
|
|
showModelMessage(title);
|
|
}
|
|
|
|
//站点类型
|
|
function getZDLX() {
|
|
callOperateApi("ebikeRegion/siteType", null, "get").then((res) => {
|
|
const { code, data, message } = res;
|
|
if (code != 200) {
|
|
console.log("ebikeRegion/siteType", message);
|
|
}
|
|
const arrData = [];
|
|
data.map((item) => {
|
|
const { siteTypeName, siteTypeValue } = item;
|
|
arrData.push({
|
|
text: siteTypeName,
|
|
value: siteTypeValue,
|
|
});
|
|
});
|
|
arrZDLX.value = arrData;
|
|
});
|
|
}
|
|
|
|
//站点级别
|
|
function getZDJB() {
|
|
callOperateApi("ebikeRegion/siteLevelList", null, "get").then((res) => {
|
|
const { code, data, message } = res;
|
|
if (code != 200) {
|
|
console.log("ebikeRegion/siteLevelList", message);
|
|
}
|
|
const arrData = [];
|
|
data.map((item) => {
|
|
const { levelName, levelValue } = item;
|
|
arrData.push({
|
|
text: levelName,
|
|
value: levelValue,
|
|
});
|
|
});
|
|
arrZDJB.value = arrData;
|
|
});
|
|
}
|
|
|
|
function uploadfile(e) {
|
|
fileUploadApi("operate/ebikeRegion/siteImagesUpload", e.tempFiles[0]).then(
|
|
(res) => {
|
|
const { code, message, data } = res;
|
|
if (code != 200) {
|
|
console.log("uploadfile", message);
|
|
showModelMessage("上传失败！");
|
|
}
|
|
arrFile.push(data);
|
|
}
|
|
);
|
|
}
|
|
|
|
function delfile(e) {
|
|
const { index } = e;
|
|
arrFile.splice(index, 1);
|
|
console.log("99999999999999999999999", e);
|
|
}
|
|
|
|
function getSiteInfo(id) {
|
|
const params = {
|
|
siteRegionId: id,
|
|
};
|
|
callOperateApi("ebikeRegion/siteInfo", params, "get").then((res) => {
|
|
const { code, data, message } = res;
|
|
if (code != 200) {
|
|
showModelMessage("获取数据失败！");
|
|
console.log("ebikeRegion/siteInfo", message);
|
|
}
|
|
const {
|
|
siteRegionId: id,
|
|
operationRegionId,
|
|
siteName,
|
|
siteAdress,
|
|
siteType,
|
|
siteLevel,
|
|
siteLng,
|
|
siteLat,
|
|
shapeType,
|
|
radius: r,
|
|
points,
|
|
allowedParkingNum,
|
|
allowedParkingMax,
|
|
describe,
|
|
images = [],
|
|
} = data;
|
|
regionid = operationRegionId;
|
|
radius = r;
|
|
const arrFileData = [];
|
|
images.map((item) => {
|
|
const { imageId, imageBucket, imageName } = item;
|
|
const extname = imageName.substring(lastIndexOf(imageName, ".") + 1);
|
|
const obj = {
|
|
url: `${config.filePath}/${imageBucket}/${imageName}`,
|
|
name: imageName,
|
|
extname,
|
|
};
|
|
arrFileData.push(obj);
|
|
arrFile.push(imageId);
|
|
});
|
|
if (arrPoint.length == 0) {
|
|
if (shapeType == "2") {
|
|
arrPoint = points;
|
|
} else {
|
|
arrPoint = [
|
|
{
|
|
longitude: siteLng,
|
|
latitude: siteLat,
|
|
},
|
|
];
|
|
}
|
|
}
|
|
|
|
filevalue.value = arrFileData;
|
|
formData.value = {
|
|
id,
|
|
name: siteName,
|
|
address: siteAdress,
|
|
zdlx: siteType,
|
|
zdjb: siteLevel,
|
|
ktcl: allowedParkingNum,
|
|
zdkt: allowedParkingMax,
|
|
//hcbj: 10,
|
|
zdms: describe,
|
|
//zdbq: [1],
|
|
// zdtf: 1,
|
|
// zdxs: 1
|
|
};
|
|
});
|
|
}
|
|
onLoad((options) => {
|
|
const { id, points, radius: r, type, regionid: rid } = options;
|
|
console.log("111111111111111111111", options);
|
|
opentype.value = type;
|
|
regionid = rid;
|
|
|
|
let title = "";
|
|
switch (type) {
|
|
case "add":
|
|
title = "新建站点";
|
|
break;
|
|
case "edit":
|
|
title = "编辑站点";
|
|
break;
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title,
|
|
});
|
|
getScreenHeightNoTabBar((res) => {
|
|
height.value = res - 60 + "px";
|
|
});
|
|
arrPoint = [];
|
|
if (points) {
|
|
arrPoint = JSON.parse(points);
|
|
radius = r;
|
|
const { latitude, longitude } = arrPoint[0];
|
|
if (type == "add") {
|
|
map.reverseGeocoder(
|
|
qqmapsdk,
|
|
longitude,
|
|
latitude,
|
|
(res) => {
|
|
const { name, formatted_address, adcode, province, city, district } =
|
|
res;
|
|
// const {
|
|
// address,
|
|
// formatted_addresses: {
|
|
// recommend
|
|
// }
|
|
// } = res;
|
|
formData.value = {
|
|
...formData.value,
|
|
name: name,
|
|
address: formatted_address,
|
|
};
|
|
},
|
|
(res) => {
|
|
console.log("fail", res);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
if (arrZDLX.value.length == 0) {
|
|
getZDLX();
|
|
}
|
|
if (arrZDJB.value.length == 0) {
|
|
getZDJB();
|
|
}
|
|
if (id) {
|
|
getSiteInfo(id);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.divForm {
|
|
width: 100vw;
|
|
padding: 10px 20px 10px 15px;
|
|
}
|
|
|
|
/* .divForm /deep/ .uni-forms-item {
|
|
margin-bottom: 10px !important;
|
|
} */
|
|
|
|
.divFontColor {
|
|
color: #606266;
|
|
}
|
|
|
|
.divRow {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
height: 36px;
|
|
}
|
|
|
|
.divRow label {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.divBottom {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
background-color: white;
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 100vw;
|
|
}
|
|
|
|
.divBottom .divtBtn {
|
|
width: 100vw;
|
|
text-align: center;
|
|
}
|
|
</style>
|