From f95e1aceff9b78b45a0c5827ecebaeb94a8514f7 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Wed, 14 Aug 2024 18:05:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.env.development | 4 +-
src/components/Map/location/LocationMap.vue | 204 ++-
src/views/statistics/index.vue | 43 +-
src/views/system/area/areaSet.vue | 1622 +++++++++++--------
src/views/system/device/index.vue | 6 +-
5 files changed, 1208 insertions(+), 671 deletions(-)
diff --git a/.env.development b/.env.development
index 8f703d4..c500b62 100644
--- a/.env.development
+++ b/.env.development
@@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享电动车管理系统
ENV = 'development'
# 共享电动车管理系统/开发环境
-# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
-VUE_APP_BASE_API = 'http://192.168.2.46:8088'
+VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
+# VUE_APP_BASE_API = 'http://192.168.2.46:8088'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/components/Map/location/LocationMap.vue b/src/components/Map/location/LocationMap.vue
index eec4ba2..4d31b7e 100644
--- a/src/components/Map/location/LocationMap.vue
+++ b/src/components/Map/location/LocationMap.vue
@@ -11,7 +11,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig'
import { debounce } from '@/utils'
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
-
+import { getArea } from '@/api/system/area'
+import { listParking } from '@/api/system/parking'
export default {
name: "LocationMap",
components: { AreaTextSelect },
@@ -43,7 +44,11 @@ export default {
deviceSn: {
type: String,
default: ''
- }
+ },
+ areaId: {
+ type: Number,
+ default: ''
+ },
},
data() {
return {
@@ -55,13 +60,19 @@ export default {
keyword: null,
markers: [],
area: {
- province: '福建省',
- city: '宁德市',
- }
+ // province: '福建省',
+ // city: '宁德市',
+ },
+ area:{},
+ parkingList:[],
+ noParkingList:[],
+ noridingList:[],
+ labels: [],
}
},
mounted() {
- this.initAMap();
+ // this.initAMap();
+ this.getAreas(this.areaId)
},
beforeDestroy() {
console.log("轨迹=====组件将被销毁");
@@ -86,6 +97,30 @@ export default {
// this.doPlaceSearch(city + '人民政府');
// }
// },
+ async getAreas(areaId) {
+ getArea(this.areaId).then(response => {
+
+ console.log(response,'responseresponse');
+ this.area = response.data;
+
+
+ listParking({ areaId: this.area.areaId }).then(response => {
+ let list = response.rows;
+ console.log(list,'listlistlist');
+ list.forEach(item => {
+ if (item.type == '1') {
+ this.parkingList.push(item);
+ } else if (item.type == '2') {
+ this.noParkingList.push(item);
+ } else if (item.type == '3') {
+ this.noridingList.push(item);
+ }
+ });
+
+ this.initAMap();
+ });
+ });
+ },
initAMap() {
AMapLoader.load({
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -93,7 +128,7 @@ export default {
plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.AMap = AMap;
- this.map = new AMap.Map("container", {
+ this.map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 16, // 初始化地图级别
@@ -106,7 +141,22 @@ export default {
// 逆地理编码
// this.loadGeoCoder();
-
+ this.addArea(JSON.parse( this.area.boundaryStr) || []);
+ //停车区
+ this.parkingList.forEach(parking => {
+ this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
+ this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
+ });
+ //禁停区
+ this.noParkingList.forEach(noparking => {
+ this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
+ this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
+ });
+ //禁行区
+ this.noridingList.forEach(noriding => {
+ this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
+ this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
+ });
// 加载初始地址
this.initMarker();
@@ -137,6 +187,41 @@ export default {
// })
}
},
+ addMarker2(parking, icon, title, color) {
+ let marker = new AMap.Marker({
+ map: this.map,
+ icon: new AMap.Icon({
+ image: icon,
+ size: new AMap.Size(25, 36), // 设置图标的宽高
+ imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
+ }),
+ position: [parking.longitude, parking.latitude],
+ offset: new AMap.Pixel(-12.5, -36)
+ });
+
+ this.markers.push(marker);
+
+ // console.log("title============="+title)
+ // 创建一个 Text 实例来显示标题
+ let text = new AMap.Text({
+ text: title,
+ anchor: 'center', // 设置文本的锚点
+ position: [parking.longitude, parking.latitude],
+ offset: new AMap.Pixel(0, -50),
+ style: {
+ 'background-color': color, // 背景颜色为蓝色
+ 'border': 'none', // 边框颜色与背景一致
+ 'border-radius': '5px', // 圆角 5px
+ 'color': 'white', // 文字颜色为白色
+ 'font-size': '12px', // 字体大小
+ }
+ });
+
+ // 将文本标签添加到地图实例
+ this.map.add(text);
+ // console.log("text=============",text)
+ this.labels.push(text)
+ },
addMarker: function(lng, lat, title, status, onlineStatus) {
//创建一个 Marker 实例：
console.log('title===========' + title)
@@ -152,9 +237,11 @@ export default {
title: title,
offset: new AMap.Pixel(-12.5, -35)
})
+
//将创建的点标记添加到已有的地图实例：
this.map.add(marker)
this.markers.push(marker)
+ console.log();
// 创建一个 Text 实例来显示标题
let text = new AMap.Text({
@@ -174,6 +261,107 @@ export default {
// 将文本标签添加到地图实例
this.map.add(text)
+ },
+ addParking(data, title, lon, lat) {
+ let polygon = new AMap.Polygon({
+ path: data,
+ fillColor: '#ccebc5',
+ strokeOpacity: 1,
+ fillOpacity: 0.5,
+ strokeColor: '#3b7ed9', // 修改边界颜色为红色
+ strokeWeight: 2, // 加粗边界
+ strokeStyle: 'solid',
+ strokeDasharray: [5, 5],
+ });
+ polygon.on('mouseover', () => {
+ polygon.setOptions({
+ fillOpacity: 0.7,
+ fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色
+ });
+ });
+ polygon.on('mouseout', () => {
+ polygon.setOptions({
+ fillOpacity: 0.5,
+ fillColor: '#a7c1d0' // 鼠标移出时恢复填充颜色
+ });
+ });
+ this.map.add(polygon);
+ },
+ addNoParking(data) {
+ let polygon = new AMap.Polygon({
+ path: data,
+ fillColor: '#ccebc5',
+ strokeOpacity: 1,
+ fillOpacity: 0.5,
+ strokeColor: '#ff0000', // 修改边界颜色为红色
+ strokeWeight: 2, // 加粗边界
+ strokeStyle: 'solid',
+ strokeDasharray: [5, 5],
+ });
+ polygon.on('mouseover', () => {
+ polygon.setOptions({
+ fillOpacity: 0.7,
+ fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色
+ });
+ });
+ polygon.on('mouseout', () => {
+ polygon.setOptions({
+ fillOpacity: 0.5,
+ fillColor: '#cc7b7b' // 鼠标移出时恢复填充颜色
+ });
+ });
+ this.map.add(polygon);
+ },
+ addNoriding(data, title, lon, lat) {
+ let polygon = new AMap.Polygon({
+ path: data,
+ fillColor: '#ccebc5',
+ strokeOpacity: 1,
+ fillOpacity: 0.5,
+ strokeColor: '#ffcc00', // 修改边界颜色为红色
+ strokeWeight: 2, // 加粗边界
+ strokeStyle: 'solid',
+ strokeDasharray: [5, 5],
+ });
+ polygon.on('mouseover', () => {
+ polygon.setOptions({
+ fillOpacity: 0.7,
+ fillColor: '#FFEBA4FF'
+ });
+ });
+ polygon.on('mouseout', () => {
+ polygon.setOptions({
+ fillOpacity: 0.5,
+ fillColor: '#ffeba4'
+ });
+ });
+ this.map.add(polygon);
+ },
+
+ addArea(data) {
+ let polygon = new AMap.Polygon({
+ path: data,
+ fillColor: '#ccebc5',
+ strokeOpacity: 1,
+ fillOpacity: 0.5,
+ strokeColor: '#2b8cbe',
+ strokeWeight: 1,
+ strokeStyle: 'dashed',
+ strokeDasharray: [5, 5],
+ });
+ // polygon.on('mouseover', () => {
+ // polygon.setOptions({
+ // fillOpacity: 0.7,
+ // fillColor: '#7bccc4'
+ // })
+ // })
+ // polygon.on('mouseout', () => {
+ // polygon.setOptions({
+ // fillOpacity: 0.5,
+ // fillColor: '#ccebc5'
+ // })
+ // })
+ this.map.add(polygon);
},
formarStatus(status,onlineStatus){
if(onlineStatus == "0"){
diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue
index 573682e..4efb598 100644
--- a/src/views/statistics/index.vue
+++ b/src/views/statistics/index.vue
@@ -2,10 +2,26 @@
<div class="page">
<div class="area-options">
<span style="margin-right: .625rem;">切换运营区</span>
- <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange" size="medium">
- <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
- :value="item.areaId"></el-option>
- </el-select>
+ <el-select
+ v-model="areaId"
+ placeholder="请选择运营区"
+ filterable
+ clearable
+ @change="handleAreaChange"
+ size="medium"
+ >
+ <el-option
+ v-for="item in areaOptions"
+ :key="item.areaId"
+ :label="item.areaName + ' - ' + item.deptName"
+ :value="item.areaId"
+ >
+ <div class="option-content" style=" display: flex;justify-content: space-between;">
+ <span class="area-name">{{ item.areaName }}</span>
+ <span class="dept-name">{{ item.deptName }}</span>
+ </div>
+ </el-option>
+ </el-select>
</div>
<div class="top_box">
<div class="tops_left">
@@ -400,6 +416,25 @@ export default {
// height: 100vh;
display: flex;
flex-direction: column;
+.option-content {
+ display: flex;
+ flex-wrap: nowrap;
+ // justify-content: space-between;
+ // align-items: center;
+ width: 100%;
+ .area-name {
+ // width: 10rem !important;
+ // flex-grow: 1;
+ // text-align: left;
+}
+
+.dept-name {
+ margin-left: 20px;
+ // flex-grow: 1;
+ // text-align: right;
+}
+}
+
.area-options {
width: 100%;
diff --git a/src/views/system/area/areaSet.vue b/src/views/system/area/areaSet.vue
index 29303ef..90730ae 100644
--- a/src/views/system/area/areaSet.vue
+++ b/src/views/system/area/areaSet.vue
@@ -1,387 +1,672 @@
<template>
- <div class="page">
- <div class="tit"
- style="width: 100%;display: flex;justify-content: space-between;padding-right: 30px;align-items: center;">{{
- title }} <el-button type="primary" @click="submitForm" size="medium"
- style="margin-left: auto;">保存</el-button></div>
- <div class="pagecont">
- <div class="left_box">
- <el-form ref="form" :model="form" :rules="rules" label-width="90px">
- <el-row>
- <el-col :span="12">
- <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'" data-tip="这是运营商选择框">
- <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
- placeholder="请选择运营商" @change="changedept" />
-
-
-
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="运营区" prop="areaName" data-tip="这是运营区输入框">
- <el-input v-model="form.areaName" placeholder="请输入运营区" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="运营个性化图片" prop="picture" label-width="140" data-tip="这是运营个性化图片上传框">
- <div style="display: flex;flex-wrap: wrap;">
- <image-upload :limit="1" :isShowTip="false" v-model="form.picture" />
-
- </div>
-
- </el-form-item>
- <div class="tip">用户地图上显示的车辆图标样式</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="运营区域" data-tip="这是运营区域选择框">
- <el-select v-model="form.province" clearable size="small" placeholder="请选择省"
- class="filter-item" style="width: 90px" @change="provinceChange($event)">
- <el-option v-for="item in form.provinceList" :key="item.name" :label="item.name"
- :value="item.name" />
- </el-select>
-
- <el-select v-model="form.city" clearable size="small" placeholder="请选择城市"
- class="filter-item" style="width: 100px" @change="cityChange($event)">
- <el-option v-for="item in form.cityList" :key="item.name" :label="item.name"
- :value="item.name" />
- </el-select>
-
- <el-select v-model="form.county" clearable size="small" placeholder="请选择区县"
- class="filter-item" style="width: 100px">
- <el-option v-for="item in form.countyList" :key="item.name" :label="item.name"
- :value="item.name" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-form-item label="运营时间" prop="areaTime">
- <div style="display: flex;flex-wrap: wrap;">
- <el-select v-model="form.areaTime" placeholder="请选择运营时间" style="width: 100%;">
- <el-option v-for="item in dictList" :key="item.value" :label="item.label"
- :value="item.value" />
- </el-select>
- <div class="tip">运营区外的时间用户无法解锁骑行</div>
- </div>
-
- </el-form-item>
- <el-row v-if="form.areaTime == 2">
- <el-col :span="18">
- <el-form-item label="自定义运营时间" label-width="140px" data-tip="这是自定义运营时间选择框">
- <el-time-picker v-model="form.areaTimeStart" value-format="HH:mm:ss" placeholder="开始时间">
- </el-time-picker>
- <el-time-picker arrow-control v-model="form.areaTimeEnd" value-format="HH:mm:ss"
- placeholder="结束时间">
- </el-time-picker>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="20">
- <el-form-item label="自定义客服" prop="customService" label-width="120" class="switch-item">
- <el-switch v-model="form.customService" class="drawer-switch" />
- </el-form-item>
- </el-col>
- </el-row>
- <div v-if="form.customService == '1'">
- <el-row v-for="(service, index) in customServices" :key="index">
- <el-col :span="7">
- <el-form-item :label="'自定义客服名称' + (index + 1)" :prop="'serviceName' + index"
- label-width="80">
- <el-input v-model="service.name" placeholder="请输入自定义客服名称" />
- </el-form-item>
- </el-col>
- <el-col :span="7" style="margin-left: 20px;">
- <el-form-item label="电话" :prop="'servicePhone' + index" label-width="80">
- <el-input v-model="service.phone" placeholder="请输入客服电话" />
- </el-form-item>
- </el-col>
- <el-col :span="4" style="margin-top: 5px;margin-left: 10px;">
- <el-button type="primary" @click="addService"
- v-if="index === customServices.length - 1 && customServices.length < 3">添加</el-button>
- <el-button type="danger" @click="removeService(index)" v-if="index > 0">删除</el-button>
- </el-col>
- </el-row>
- </div>
- <el-row>
- <el-col :span="12">
- <el-form-item label="实名认证" label-width="120" class="switch-item">
- <el-switch v-model="form.authentication" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启后用户骑行前必须先进行实名认证才可使用</div>
- </el-col>
-
- <el-col :span="12">
- <el-form-item label="是否开启押金抵扣" label-width="120" class="switch-item">
- <el-switch v-model="form.isDepositDeduction" class="drawer-switch" />
- </el-form-item>
- <div class="tips">关闭:用户需对订单付费后方可退还押金，开启:押金可以直接抵扣订单金额付款</div>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="还车是否拍照审核" label-width="120" class="switch-item">
- <el-switch v-model="form.returnVerify" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启后则需用户拍摄视频后审核订单方可退还押金</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="短信通知服务" label-width="120" class="switch-item">
- <el-switch v-model="form.msgSwitch" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启短信通知，短信费用0.1元/条，从余额中扣除</div>
- </el-col>
-
- </el-row>
-
- <el-row>
- <el-col :span="12">
- <el-form-item label="强制停车点还车" label-width="120" class="switch-item">
- <el-switch v-model="form.parkingReturn" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启则必须在停车点才可还车，停车点存在误差</div>
- </el-col>
- <el-col :span="12" v-if="form.parkingReturn == false">
- <el-form-item label="运营区外还车" label-width="120" class="switch-item">
- <el-switch v-model="form.areaOutReturn" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启后可以在运营区范围外还车</div>
- </el-col>
- </el-row>
-
- <el-row v-if="form.parkingReturn == false">
- <el-col :span="12">
- <el-form-item label="停车点外还车调度" label-width="120" class="switch-item">
- <el-switch v-model="form.parkingOutDispatch" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启后在停车点外还车会收取调度费</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="运营区外还车调度" label-width="120" class="switch-item">
- <el-switch v-model="form.areaOutDispatch" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启后在运营区外还车会收取调度费</div>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="运营区外调度费" label-width="120" class="switch-item">
- <el-input-number style="width: 100%" v-model="form.dispatchFee"
- placeholder="车辆超出运行区外的调度费用"></el-input-number>
- </el-form-item>
- <div class="tips">设置车辆超出运营区外产生的调度费用</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="停车点外调度费" label-width="120" class="switch-item">
- <el-input-number style="width: 100%" v-model="form.vehicleManagementFee"
- placeholder="车辆在运营区内但没在停车区产生的调度费用"></el-input-number>
- </el-form-item>
- <div class="tips">设置车辆超出停车点外产生的调度费用</div>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="还车误差（米）" label-width="120" class="switch-item">
- <el-input-number v-model="form.error" placeholder="还车误差"></el-input-number>
- </el-form-item>
- <div class="tips">允许用户在规划的停车点外多少米还车</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="禁行区内断电" label-width="120" class="switch-item">
- <el-switch v-model="form.noRidingOutage" class="drawer-switch" />
- </el-form-item>
- <div class="tips">开启后当进入禁行区内将进行断电</div>
- </el-col>
-
- </el-row>
- <el-row>
-
-
- <el-col :span="12">
- <el-form-item label="运营区域外断电" label-width="120" class="switch-item">
- <div style="display: flex;flex-wrap: wrap;">
- <el-switch v-model="form.areaOutOutage" class="drawer-switch" />
-
- </div>
-
- </el-form-item>
- <div class="tips">开启后当进入运营区域外内将进行断电</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="骑行押金" label-width="120" class="switch-item" prop="deposit">
- <el-input-number style="width: 100%" v-model="form.deposit"
- placeholder="骑行前需要充值的押金"></el-input-number>
- </el-form-item>
- <div class="tips">设置骑行前需要缴纳的押金金额</div>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="收费方式" label-width="120" class="switch-item" prop="ruleIds">
- <el-select v-model="form.ruleIds" multiple placeholder="请选择收费方式" >
- <el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.name"
- :value="item.ruleId"></el-option>
- </el-select>
- </el-form-item>
- <div class="tips">选择在收费方式菜单当中设置好的收费套餐(可多选)</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="低于电量（%）不得骑行" label-width="120" class="switch-item">
- <el-input-number style="width: 100%" v-model="form.undercharge"
- placeholder="低于电量（%）不得骑行"></el-input-number>
- </el-form-item>
- <div class="tips">当车辆电量低于多少时无法解锁用车</div>
- </el-col>
- </el-row>
- <el-row>
-
- <el-col :span="12">
- <el-form-item label="最大预约时间(分)" label-width="120" class="switch-item">
- <el-input-number style="width: 100%" v-model="form.timeoutMinutes"
- placeholder="车辆可最长预约多少分钟"></el-input-number>
- </el-form-item>
- <div class="tips">设置车辆的最大可以预约时间</div>
- </el-col>
- <el-col :span="12">
- <el-form-item label="预约服务费（元）" label-width="120" class="switch-item">
- <el-input-number style="width: 100%" v-model="form.appointmentServiceFee"
- placeholder="预约时每十分钟的计费"></el-input-number>
- </el-form-item>
- <div class="tips">设置车辆预约时每十分钟产生的费用</div>
- </el-col>
- </el-row>
-
-
- <el-row>
- <el-col :span="15">
- <el-form-item label="电量低于多少值自动生成换电订单" label-width="120" class="switch-item"
- prop="autoReplacementOrder">
- <el-input-number style="width: 50%" v-model="form.autoReplacementOrder"
- placeholder="电量低于多少值自动生成换电订单"></el-input-number>
- </el-form-item>
- <div class="tips">设置车辆电量低于多少时自动生成的换电维护工单</div>
- </el-col>
-
- </el-row>
- </el-form>
- </div>
- <div class="right_box">
- <div class="right_tit">弹窗公告</div>
- <editor v-model="form.agreement" :min-height="192" />
- <div class="right_tit">电子围栏设置</div>
- <area-map :key="key" v-model="form.boundaryStr" :dataId="form.areaId" :pathList="form.boundaryStr"
- :lon="form.longitude" :lat="form.latitude" @center="center" @mapList="mapList" />
- <div class="right_tit">运营区经纬度</div>
- <el-row>
- <el-col :span="11">
- <el-input v-model="form.longitude" placeholder="请输入经度" disabled />
- </el-col>
- <el-col :span="11" style="margin-left: 20px;">
- <el-input v-model="form.latitude" placeholder="请输入纬度" disabled />
- </el-col>
- </el-row>
- </div>
- </div>
+ <div class="page">
+ <div
+ class="tit"
+ style="
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ padding-right: 30px;
+ align-items: center;
+ "
+ >
+ {{ title }}
+ <el-button
+ type="primary"
+ @click="submitForm"
+ size="medium"
+ style="margin-left: auto"
+ >保存</el-button
+ >
</div>
+ <div class="pagecont">
+ <div class="left_box">
+ <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="运营商"
+ prop="deptId"
+ v-if="userName == 'admin'"
+ data-tip="这是运营商选择框"
+ >
+ <treeselect
+ v-model="form.deptId"
+ :options="deptOptions"
+ :show-count="true"
+ placeholder="请选择运营商"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="运营区"
+ prop="areaName"
+ data-tip="这是运营区输入框"
+ >
+ <el-input v-model="form.areaName" placeholder="请输入运营区" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="运营个性化图片"
+ prop="picture"
+ label-width="140"
+ data-tip="这是运营个性化图片上传框"
+ >
+ <div style="display: flex; flex-wrap: wrap">
+ <image-upload
+ :limit="1"
+ :isShowTip="false"
+ v-model="form.picture"
+ />
+ </div>
+ </el-form-item>
+ <div class="tip">用户地图上显示的车辆图标样式</div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="运营区域" data-tip="这是运营区域选择框">
+ <el-select
+ v-model="form.province"
+ clearable
+ size="small"
+ placeholder="请选择省"
+ class="filter-item"
+ style="width: 90px"
+ @change="provinceChange($event)"
+ >
+ <el-option
+ v-for="item in form.provinceList"
+ :key="item.name"
+ :label="item.name"
+ :value="item.name"
+ />
+ </el-select>
+
+ <el-select
+ v-model="form.city"
+ clearable
+ size="small"
+ placeholder="请选择城市"
+ class="filter-item"
+ style="width: 100px"
+ @change="cityChange($event)"
+ >
+ <el-option
+ v-for="item in form.cityList"
+ :key="item.name"
+ :label="item.name"
+ :value="item.name"
+ />
+ </el-select>
+
+ <el-select
+ v-model="form.county"
+ clearable
+ size="small"
+ placeholder="请选择区县"
+ class="filter-item"
+ style="width: 100px"
+ >
+ <el-option
+ v-for="item in form.countyList"
+ :key="item.name"
+ :label="item.name"
+ :value="item.name"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-form-item label="运营时间" prop="areaTime">
+ <div style="display: flex; flex-wrap: wrap">
+ <el-select
+ v-model="form.areaTime"
+ placeholder="请选择运营时间"
+ style="width: 100%"
+ >
+ <el-option
+ v-for="item in dictList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <div class="tip">运营区外的时间用户无法解锁骑行</div>
+ </div>
+ </el-form-item>
+ <el-row v-if="form.areaTime == 2">
+ <el-col :span="18">
+ <el-form-item
+ label="自定义运营时间"
+ label-width="140px"
+ data-tip="这是自定义运营时间选择框"
+ >
+ <el-time-picker
+ v-model="form.areaTimeStart"
+ value-format="HH:mm:ss"
+ placeholder="开始时间"
+ >
+ </el-time-picker>
+ <el-time-picker
+ arrow-control
+ v-model="form.areaTimeEnd"
+ value-format="HH:mm:ss"
+ placeholder="结束时间"
+ >
+ </el-time-picker>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="20">
+ <el-form-item
+ label="自定义客服"
+ prop="customService"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch v-model="form.customService" class="drawer-switch" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <div v-if="form.customService == '1'">
+ <el-row v-for="(service, index) in customServices" :key="index">
+ <el-col :span="7">
+ <el-form-item
+ :label="'自定义客服名称' + (index + 1)"
+ :prop="'serviceName' + index"
+ label-width="80"
+ >
+ <el-input
+ v-model="service.name"
+ placeholder="请输入自定义客服名称"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="7" style="margin-left: 20px">
+ <el-form-item
+ label="电话"
+ :prop="'servicePhone' + index"
+ label-width="80"
+ >
+ <el-input
+ v-model="service.phone"
+ placeholder="请输入客服电话"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" style="margin-top: 5px; margin-left: 10px">
+ <el-button
+ type="primary"
+ @click="addService"
+ v-if="
+ index === customServices.length - 1 &&
+ customServices.length < 3
+ "
+ >添加</el-button
+ >
+ <el-button
+ type="danger"
+ @click="removeService(index)"
+ v-if="index > 0"
+ >删除</el-button
+ >
+ </el-col>
+ </el-row>
+ </div>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="实名认证"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch
+ v-model="form.authentication"
+ class="drawer-switch"
+ />
+ </el-form-item>
+ <div class="tips">开启后用户骑行前必须先进行实名认证才可使用</div>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item
+ label="是否开启押金抵扣"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch
+ v-model="form.isDepositDeduction"
+ class="drawer-switch"
+ />
+ </el-form-item>
+ <div class="tips">
+ 关闭:用户需对订单付费后方可退还押金，开启:押金可以直接抵扣订单金额付款
+ </div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="还车是否拍照审核"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch v-model="form.returnVerify" class="drawer-switch" />
+ </el-form-item>
+ <div class="tips">
+ 开启后则需用户拍摄视频后审核订单方可退还押金
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="短信通知服务"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch v-model="form.msgSwitch" class="drawer-switch" />
+ </el-form-item>
+ <div class="tips">
+ 开启短信通知，短信费用0.1元/条，从余额中扣除
+ </div>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="强制停车点还车"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch v-model="form.parkingReturn" class="drawer-switch" />
+ </el-form-item>
+ <div class="tips">开启则必须在停车点才可还车，停车点存在误差</div>
+ </el-col>
+ <el-col :span="12" v-if="form.parkingReturn == false">
+ <el-form-item
+ label="运营区外还车"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch v-model="form.areaOutReturn" class="drawer-switch" />
+ </el-form-item>
+ <div class="tips">开启后可以在运营区范围外还车</div>
+ </el-col>
+ </el-row>
+
+ <el-row v-if="form.parkingReturn == false">
+ <el-col :span="12">
+ <el-form-item
+ label="停车点外还车调度"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch
+ v-model="form.parkingOutDispatch"
+ class="drawer-switch"
+ />
+ </el-form-item>
+ <div class="tips">开启后在停车点外还车会收取调度费</div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="运营区外还车调度"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch
+ v-model="form.areaOutDispatch"
+ class="drawer-switch"
+ />
+ </el-form-item>
+ <div class="tips">开启后在运营区外还车会收取调度费</div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="运营区外调度费"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-input-number
+ style="width: 100%"
+ v-model="form.dispatchFee"
+ placeholder="车辆超出运行区外的调度费用"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">设置车辆超出运营区外产生的调度费用</div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="停车点外调度费"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-input-number
+ style="width: 100%"
+ v-model="form.vehicleManagementFee"
+ placeholder="车辆在运营区内但没在停车区产生的调度费用"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">设置车辆超出停车点外产生的调度费用</div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="还车误差（米）"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-input-number
+ v-model="form.error"
+ placeholder="还车误差"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">允许用户在规划的停车点外多少米还车</div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="禁行区内断电"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-switch
+ v-model="form.noRidingOutage"
+ class="drawer-switch"
+ />
+ </el-form-item>
+ <div class="tips">开启后当进入禁行区内将进行断电</div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="运营区域外断电"
+ label-width="120"
+ class="switch-item"
+ >
+ <div style="display: flex; flex-wrap: wrap">
+ <el-switch
+ v-model="form.areaOutOutage"
+ class="drawer-switch"
+ />
+ </div>
+ </el-form-item>
+ <div class="tips">开启后当进入运营区域外内将进行断电</div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="骑行押金"
+ label-width="120"
+ class="switch-item"
+ prop="deposit"
+ >
+ <el-input-number
+ style="width: 100%"
+ v-model="form.deposit"
+ placeholder="骑行前需要充值的押金"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">设置骑行前需要缴纳的押金金额</div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="收费方式"
+ label-width="120"
+ class="switch-item"
+ prop="ruleIds"
+ >
+ <el-select
+ v-model="form.ruleIds"
+ multiple
+ placeholder="请选择收费方式"
+ >
+ <el-option
+ v-for="item in ruleOptions"
+ :key="item.ruleId"
+ :label="item.name"
+ :value="item.ruleId"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <div class="tips">
+ 选择在收费方式菜单当中设置好的收费套餐(可多选)
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="低于电量（%）不得骑行"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-input-number
+ style="width: 100%"
+ v-model="form.undercharge"
+ placeholder="低于电量（%）不得骑行"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">当车辆电量低于多少时无法解锁用车</div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item
+ label="最大预约时间(分)"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-input-number
+ style="width: 100%"
+ v-model="form.timeoutMinutes"
+ placeholder="车辆可最长预约多少分钟"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">设置车辆的最大可以预约时间</div>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item
+ label="预约服务费（元）"
+ label-width="120"
+ class="switch-item"
+ >
+ <el-input-number
+ style="width: 100%"
+ v-model="form.appointmentServiceFee"
+ placeholder="预约时每十分钟的计费"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">设置车辆预约时每十分钟产生的费用</div>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="15">
+ <el-form-item
+ label="电量低于多少值自动生成换电订单"
+ label-width="120"
+ class="switch-item"
+ prop="autoReplacementOrder"
+ >
+ <el-input-number
+ style="width: 50%"
+ v-model="form.autoReplacementOrder"
+ placeholder="电量低于多少值自动生成换电订单"
+ ></el-input-number>
+ </el-form-item>
+ <div class="tips">
+ 设置车辆电量低于多少时自动生成的换电维护工单
+ </div>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <div class="right_box">
+ <div class="right_tit">弹窗公告</div>
+ <editor v-model="form.agreement" :min-height="192" />
+ <div class="right_tit">电子围栏设置</div>
+ <area-map
+ :key="key"
+ v-model="form.boundaryStr"
+ :dataId="form.areaId"
+ :pathList="form.boundaryStr"
+ :lon="form.longitude"
+ :lat="form.latitude"
+ @center="center"
+ @mapList="mapList"
+ />
+ <div class="right_tit">运营区经纬度</div>
+ <el-row>
+ <el-col :span="11">
+ <el-input
+ v-model="form.longitude"
+ placeholder="请输入经度"
+ disabled
+ />
+ </el-col>
+ <el-col :span="11" style="margin-left: 20px">
+ <el-input
+ v-model="form.latitude"
+ placeholder="请输入纬度"
+ disabled
+ />
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { listArea, getArea, delArea, addArea, updateArea, updateArea2 } from "@/api/system/area";
+import {
+ listArea,
+ getArea,
+ delArea,
+ addArea,
+ updateArea,
+ updateArea2,
+} from "@/api/system/area";
import AreaMap from "@/components/AreaMap";
import { listFee } from "@/api/system/fee";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getDistrictList } from "@/api/common/common";
-import { deptTreeSelect } from '@/api/system/user'
-
+import { deptTreeSelect } from "@/api/system/user";
export default {
- components: { AreaMap, Treeselect },
- dicts: ['et_operating_area_status', 'et_operating_area_time', 'et_business_switch'],
- data() {
- return {
- dictList: null,
- loading: true,
- ids: [],
- single: true,
- multiple: true,
- showSearch: true,
- total: 0,
- dateRange: [],
- customService: false,
- ruleOptions: [],
- provinceList: [],
- cityList: [],
- countyList: [],
- CITY: [],
- XIAN: [],
- areaList: [],
- userName: null,
- deptOptions: undefined,
- title: "新增运营区",
- open: false,
- mapopen: false,
- key: 0,
- customServices: [
- { name: '', phone: '' }
- ],
- queryParams: {
- pageNum: 1,
- pageSize: 50,
- areaName: null,
- },
- form: {
- status: '1',
- province: '',
- city: '',
- county: '',
- provinceList: [],
- cityList: [],
- countyList: [],
- },
- rules: {
- areaName: [{ required: true, message: "运营区域不能为空", trigger: "blur" }],
- autoReplacementOrder: [{ required: true, message: "最低电量不能为空", trigger: "blur" }],
- deptId: [{ required: true, message: "运营商不能为空", trigger: "blur" }],
- // ruleIds: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
- deposit: [{ required: true, message: "骑行押金不能为空", trigger: "blur" }],
+ components: { AreaMap, Treeselect },
+ dicts: [
+ "et_operating_area_status",
+ "et_operating_area_time",
+ "et_business_switch",
+ ],
+ data() {
+ return {
+ dictList: null,
+ loading: true,
+ ids: [],
+ single: true,
+ multiple: true,
+ showSearch: true,
+ total: 0,
+ dateRange: [],
+ customService: false,
+ ruleOptions: [],
+ provinceList: [],
+ cityList: [],
+ countyList: [],
+ CITY: [],
+ XIAN: [],
+ areaList: [],
+ userName: null,
+ deptOptions: undefined,
+ title: "新增运营区",
+ open: false,
+ mapopen: false,
+ key: 0,
+ customServices: [{ name: "", phone: "" }],
+ queryParams: {
+ pageNum: 1,
+ pageSize: 50,
+ areaName: null,
+ },
+ form: {
+ status: "1",
+ province: "",
+ city: "",
+ county: "",
+ provinceList: [],
+ cityList: [],
+ countyList: [],
+ },
+ rules: {
+ areaName: [
+ { required: true, message: "运营区域不能为空", trigger: "blur" },
+ ],
+ autoReplacementOrder: [
+ { required: true, message: "最低电量不能为空", trigger: "blur" },
+ ],
+ deptId: [
+ { required: true, message: "运营商不能为空", trigger: "blur" },
+ ],
+ // ruleIds: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
+ deposit: [
+ { required: true, message: "骑行押金不能为空", trigger: "blur" },
+ ],
+ },
+ };
+ },
+ watch: {
+ 'form.deptId'(newValue, oldValue) {
+ console.log('运营商ID变化了:', newValue);
+ this.changedept()
+ // 在这里执行值变化后的逻辑
+ }
+ },
- },
- }
- },
- created() {
- const areaId = this.$route.params && this.$route.params.areaId;
- if (areaId) {
- this.getArea(areaId);
- }else{
- this.reset()
- }
- this.getCityList();
- this.userName = this.$store.state.user.name;
- this.getDeptTree();
+ created() {
+ const areaId = this.$route.params && this.$route.params.areaId;
+ if (areaId) {
+ this.getArea(areaId);
+ } else {
+ this.reset();
+ }
+ this.getCityList();
+ this.userName = this.$store.state.user.name;
+ this.getDeptTree();
- this.dictList = this.dict.type.et_operating_area_time
- console.log(this.dictList, 'dictdict');
+ this.dictList = this.dict.type.et_operating_area_time;
+ console.log(this.dictList, "dictdict");
+ },
+ methods: {
+ changedept() {
+ console.log("111");
+ listFee({ deptId: this.form.deptId }).then((response) => {
+ this.ruleOptions = response.rows;
+ });
},
- methods: {
- changedept(){
- clog
- },
reset() {
this.form = {
- areaTime:'1',
+ areaTime: "1",
areaId: null,
areaName: null,
boundaryStr: null,
longitude: null,
latitude: null,
// parkingPoint: null,
- agreement: '<p><strong style=\\"color: rgb(68, 68, 68);\\">亲爱的用户，为了确保您的骑行安全，</strong></p><p><strong style=\\"color: rgb(68, 68, 68);\\">请务必遵守以下骑行提示： </strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">仅限16岁及以上用户使用。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">为确保安全，后座不允许载人。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请务必佩戴安全头盔，保护自身安全。 </span></p><p><span style=\\"color: rgb(136, 136, 136);\\">注意道路状况，避开坑洼，小心骑行。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请在规定的地点还车，避免随意停放。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">不逆行、不闯红灯，遵守所有交通法规。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">骑行时不要使用手机，保持注意力集中。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">避免急刹车和急转弯，保持适当的车速。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">夜间骑行时，确保车灯和反光标识正常。</span></p><p><br></p><p><strong style=\\"color: rgb(68, 68, 68);\\">紧急情况处理：</strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">如有紧急情况，请及时拨打客服电话。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">感谢您的理解与配合，祝您骑行愉快。</span></p>',
+ agreement:
+ '<p><strong style=\\"color: rgb(68, 68, 68);\\">亲爱的用户，为了确保您的骑行安全，</strong></p><p><strong style=\\"color: rgb(68, 68, 68);\\">请务必遵守以下骑行提示： </strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">仅限16岁及以上用户使用。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">为确保安全，后座不允许载人。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请务必佩戴安全头盔，保护自身安全。 </span></p><p><span style=\\"color: rgb(136, 136, 136);\\">注意道路状况，避开坑洼，小心骑行。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请在规定的地点还车，避免随意停放。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">不逆行、不闯红灯，遵守所有交通法规。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">骑行时不要使用手机，保持注意力集中。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">避免急刹车和急转弯，保持适当的车速。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">夜间骑行时，确保车灯和反光标识正常。</span></p><p><br></p><p><strong style=\\"color: rgb(68, 68, 68);\\">紧急情况处理：</strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">如有紧急情况，请及时拨打客服电话。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">感谢您的理解与配合，祝您骑行愉快。</span></p>',
createBy: null,
createTime: null,
- status: '1',
+ status: "1",
deptId: null,
contact: null,
phone: null,
@@ -407,355 +692,380 @@ export default {
deposit: 200,
customService: true,
undercharge: 10,
- dispatchFee:10,
- vehicleManagementFee:10,
- error:5,
- timeoutMinutes:30,
- appointmentServiceFee:2,
-
-
-
-
-
+ dispatchFee: 10,
+ vehicleManagementFee: 10,
+ error: 5,
+ timeoutMinutes: 30,
+ appointmentServiceFee: 2,
};
this.resetForm("form");
},
- submitForm() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- const { cityList, countyList, provinceList, ...rest } = this.form;
+ submitForm() {
+ this.$refs["form"].validate((valid) => {
+ if (valid) {
+ const { cityList, countyList, provinceList, ...rest } = this.form;
- // 将 rest 对象中的属性赋值给 data
- let data = { ...rest };
- console.log("this.form=================", data)
- data.customService = data.customService ? "1" : "0";
- data.areaOutOutage = data.areaOutOutage ? "1" : "0";
- data.parkingOutDispatch = data.parkingOutDispatch ? "1" : "0";
- data.areaOutDispatch = data.areaOutDispatch ? "1" : "0";
- data.noRidingOutage = data.noRidingOutage ? "1" : "0";
- data.authentication = data.authentication ? "1" : "0";
- data.msgSwitch = data.msgSwitch ? "1" : "0";
- data.parkingReturn = data.parkingReturn ? "1" : "0";
- data.areaOutReturn = data.areaOutReturn ? "1" : "0";
- data.isDepositDeduction = data.isDepositDeduction ? "1" : "0";
- data.returnVerify = data.returnVerify ? "1" : "0";
- if (data.isDepositDeduction === '1' && data.returnVerify === '1') {
- this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
- return
- }
- this.customServices.forEach((service, index) => {
- data[`serviceName${index + 1}`] = service.name;
- data[`servicePhone${index + 1}`] = service.phone;
- });
- if (data.isDepositDeduction === '1' && data.returnVerify === '1') {
- this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
- return
- }
- if(data.serviceName1==''&&data.servicePhone1==''){
- this.$modal.msgError("最少添加一个客服电话");
- return
- }
- if (this.form.areaId != null) {
- updateArea2({ areaId: this.form.areaId, boundary: this.form.boundary, boundaryStr: this.form.boundaryStr }).then(response => {
- this.$modal.msgSuccess("修改成功");
- this.open = false;
- this.mapopen = false
- this.getList();
- });
- } else {
- addArea(data).then(response => {
- this.$modal.msgSuccess("新增成功");
- this.open = false;
-
- this.getList();
- });
- }
- // console.log(data, 'data without cityList, countyList, provinceList');
- // console.log(this.form,'formformformformform');
- if (this.form.areaId != null) {
- updateArea(data).then(response => {
-
- this.$modal.msgSuccess("修改成功");
- this.open = false;
- this.mapopen = false
- this.getList();
- });
- } else {
- addArea(data).then(response => {
- this.$modal.msgSuccess("新增成功");
- this.open = false;
-
- this.getList();
- });
- }
- }
+ // 将 rest 对象中的属性赋值给 data
+ let data = { ...rest };
+ console.log("this.form=================", data);
+ data.customService = data.customService ? "1" : "0";
+ data.areaOutOutage = data.areaOutOutage ? "1" : "0";
+ data.parkingOutDispatch = data.parkingOutDispatch ? "1" : "0";
+ data.areaOutDispatch = data.areaOutDispatch ? "1" : "0";
+ data.noRidingOutage = data.noRidingOutage ? "1" : "0";
+ data.authentication = data.authentication ? "1" : "0";
+ data.msgSwitch = data.msgSwitch ? "1" : "0";
+ data.parkingReturn = data.parkingReturn ? "1" : "0";
+ data.areaOutReturn = data.areaOutReturn ? "1" : "0";
+ data.isDepositDeduction = data.isDepositDeduction ? "1" : "0";
+ data.returnVerify = data.returnVerify ? "1" : "0";
+ if (data.isDepositDeduction === "1" && data.returnVerify === "1") {
+ this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
+ return;
+ }
+ this.customServices.forEach((service, index) => {
+ data[`serviceName${index + 1}`] = service.name;
+ data[`servicePhone${index + 1}`] = service.phone;
+ });
+ if (data.isDepositDeduction === "1" && data.returnVerify === "1") {
+ this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
+ return;
+ }
+ if (data.serviceName1 == "" && data.servicePhone1 == "") {
+ this.$modal.msgError("最少添加一个客服电话");
+ return;
+ }
+ if (this.form.areaId != null) {
+ updateArea2({
+ areaId: this.form.areaId,
+ boundary: this.form.boundary,
+ boundaryStr: this.form.boundaryStr,
+ }).then((response) => {
+ this.$modal.msgSuccess("修改成功");
+ this.open = false;
+ this.mapopen = false;
+ this.getList();
});
- },
- submitForm2() {
- this.$refs["form"].validate(valid => {
- if (valid) {
+ } else {
+ addArea(data).then((response) => {
+ this.$modal.msgSuccess("新增成功");
+ this.open = false;
- }
+ this.getList();
});
- },
- addService() {
- if (this.customServices.length < 3) {
- this.customServices.push({ name: '', phone: '' });
- }
- },
- removeService(index) {
-
- if (index > 0 && this.customServices.length > 1) {
- this.$delete(this.customServices, index);
- this.$set(this.form, `serviceName${index + 1}`, '');
- this.$set(this.form, `servicePhone${index + 1}`, '');
- }
- },
- getArea(areaId) {
- getArea(areaId).then(response => {
- this.form = response.data;
- this.form.ruleIds = response.ruleIds;
- response.data.customService == "1" ? this.form.customService = true : this.form.customService = false;
- response.data.areaOutOutage == "1" ? this.form.areaOutOutage = true : this.form.areaOutOutage = false;
- response.data.parkingOutDispatch == "1" ? this.form.parkingOutDispatch = true : this.form.parkingOutDispatch = false;
- response.data.areaOutDispatch == "1" ? this.form.areaOutDispatch = true : this.form.areaOutDispatch = false;
- response.data.noRidingOutage == "1" ? this.form.noRidingOutage = true : this.form.noRidingOutage = false;
- response.data.authentication == "1" ? this.form.authentication = true : this.form.authentication = false;
- response.data.msgSwitch == "1" ? this.form.msgSwitch = true : this.form.msgSwitch = false;
- response.data.parkingReturn == "1" ? this.form.parkingReturn = true : this.form.parkingReturn = false;
- response.data.areaOutReturn == "1" ? this.form.areaOutReturn = true : this.form.areaOutReturn = false;
- response.data.isDepositDeduction == "1" ? this.form.isDepositDeduction = true : this.form.isDepositDeduction = false;
- response.data.returnVerify == "1" ? this.form.returnVerify = true : this.form.returnVerify = false;
-
- // 初始化 customServices 数组
- this.customServices = [];
- for (let i = 1; i <= 3; i++) {
- if (response.data[`serviceName${i}`] || response.data[`servicePhone${i}`]) {
- this.customServices.push({
- name: response.data[`serviceName${i}`] || '',
- phone: response.data[`servicePhone${i}`] || ''
- });
- }
- }
-
- // 如果 customServices 为空，添加一个默认的服务
- if (this.customServices.length === 0) {
- this.customServices.push({ name: '', phone: '' });
- }
-
- this.title = "修改运营区";
- this.key++;
- // listFee({ areaId: this.form.areaId }).then(response => {
- // this.ruleOptions = response.rows;
- // this.open = true;
- // this.title = "修改运营区";
- // this.key++;
- // });
-
+ }
+ // console.log(data, 'data without cityList, countyList, provinceList');
+ // console.log(this.form,'formformformformform');
+ if (this.form.areaId != null) {
+ updateArea(data).then((response) => {
+ this.$modal.msgSuccess("修改成功");
+ this.open = false;
+ this.mapopen = false;
+ this.getList();
});
- },
- cityChange(that) {
- let countyCode = 0
- let cityname = ''
- let newCountyArry = []
- this.form.cityList.forEach((item, index) => {
- if (item.name == that) {
- countyCode = item.id
- cityname = item.name
- }
- })
- if (countyCode) {
- this.form.countyList = []
- this.XIAN.forEach((item, index) => {
- if (item.code == countyCode && item.cityCountyName == cityname) {
- this.form.countyList.push(item)
- }
- })
- }
- },
- provinceChange(that) {
- // 根据选中省，匹配市
- let cityCode = 0
- let newCityArry = []
- this.form.provinceList.forEach((item, index) => {
- if (item.name == that) {
- cityCode = item.code
- }
- })
- // console.log(cityCode)
- if (cityCode) {
- this.form.cityList = []
- this.CITY.forEach((item, index) => {
- if (item.code == cityCode) {
- this.form.cityList.push(item)
- }
- }) /* 市匹配成功*/
- }
- },
- getFeeList(){
- listFee({ deptId: this.form.deptId }).then(response => {
- this.ruleOptions = response.rows;
+ } else {
+ addArea(data).then((response) => {
+ this.$modal.msgSuccess("新增成功");
+ this.open = false;
- });
-
- },
- getCityList() {
-
- getDistrictList().then(res => {
- this.form.provinceList = JSON.parse(res.data)
- // console.log("provinceList======"+JSON.stringify(this.form.provinceList))
- // this.form.provinceList = res.data.districts[0].districts /* 省*/
- /* 进行遍历赋值*/
- /* 市区和县区*/
- let newProvince = this.form.provinceList
- for (let i = 0; i < newProvince.length; i++) { /* 省级*/
- for (let j = 0; j < newProvince[i].districts.length; j++) { /* 市级*/
- let city = newProvince[i].districts[j].name
- this.CITY.push({ id: j + 1, name: city, code: i + 1 })
- for (let k = 0; k < newProvince[i].districts[j].districts.length; k++) {/* 县级*/
- let xian = newProvince[i].districts[j].districts[k].name
- this.XIAN.push({ id: k + 1, name: xian, code: j + 1, cityCountyName: city })
- }
- }
- }
- for (let m = 0; m < newProvince.length; m++) {
- newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } }
- }
- // console.log("newProvince======"+JSON.stringify(newProvince))
- this.form.provinceList = newProvince
- // this.loading = true
- console.log(console.log(this.form.provinceList, ' this.form.provinceList'))
- })
- },
- center(data) {
- this.form.longitude = data.lng;
- this.form.latitude = data.lat;
- },
- mapList(data) {
- let mapListJson = JSON.stringify(data);
- console.log("mapListJson:" + mapListJson);
- this.form.boundaryStr = mapListJson;
- },
- getDeptTree() {
- deptTreeSelect().then(response => {
- this.deptOptions = response.data;
+ this.getList();
});
- },
- }
-}
+ }
+ }
+ });
+ },
+ submitForm2() {
+ this.$refs["form"].validate((valid) => {
+ if (valid) {
+ }
+ });
+ },
+ addService() {
+ if (this.customServices.length < 3) {
+ this.customServices.push({ name: "", phone: "" });
+ }
+ },
+ removeService(index) {
+ if (index > 0 && this.customServices.length > 1) {
+ this.$delete(this.customServices, index);
+ this.$set(this.form, `serviceName${index + 1}`, "");
+ this.$set(this.form, `servicePhone${index + 1}`, "");
+ }
+ },
+ getArea(areaId) {
+ getArea(areaId).then((response) => {
+ this.form = response.data;
+ this.form.ruleIds = response.ruleIds;
+ response.data.customService == "1"
+ ? (this.form.customService = true)
+ : (this.form.customService = false);
+ response.data.areaOutOutage == "1"
+ ? (this.form.areaOutOutage = true)
+ : (this.form.areaOutOutage = false);
+ response.data.parkingOutDispatch == "1"
+ ? (this.form.parkingOutDispatch = true)
+ : (this.form.parkingOutDispatch = false);
+ response.data.areaOutDispatch == "1"
+ ? (this.form.areaOutDispatch = true)
+ : (this.form.areaOutDispatch = false);
+ response.data.noRidingOutage == "1"
+ ? (this.form.noRidingOutage = true)
+ : (this.form.noRidingOutage = false);
+ response.data.authentication == "1"
+ ? (this.form.authentication = true)
+ : (this.form.authentication = false);
+ response.data.msgSwitch == "1"
+ ? (this.form.msgSwitch = true)
+ : (this.form.msgSwitch = false);
+ response.data.parkingReturn == "1"
+ ? (this.form.parkingReturn = true)
+ : (this.form.parkingReturn = false);
+ response.data.areaOutReturn == "1"
+ ? (this.form.areaOutReturn = true)
+ : (this.form.areaOutReturn = false);
+ response.data.isDepositDeduction == "1"
+ ? (this.form.isDepositDeduction = true)
+ : (this.form.isDepositDeduction = false);
+ response.data.returnVerify == "1"
+ ? (this.form.returnVerify = true)
+ : (this.form.returnVerify = false);
+
+ // 初始化 customServices 数组
+ this.customServices = [];
+ for (let i = 1; i <= 3; i++) {
+ if (
+ response.data[`serviceName${i}`] ||
+ response.data[`servicePhone${i}`]
+ ) {
+ this.customServices.push({
+ name: response.data[`serviceName${i}`] || "",
+ phone: response.data[`servicePhone${i}`] || "",
+ });
+ }
+ }
+
+ // 如果 customServices 为空，添加一个默认的服务
+ if (this.customServices.length === 0) {
+ this.customServices.push({ name: "", phone: "" });
+ }
+
+ this.title = "修改运营区";
+ this.key++;
+ // listFee({ areaId: this.form.areaId }).then(response => {
+ // this.ruleOptions = response.rows;
+ // this.open = true;
+ // this.title = "修改运营区";
+ // this.key++;
+ // });
+ });
+ },
+ cityChange(that) {
+ let countyCode = 0;
+ let cityname = "";
+ let newCountyArry = [];
+ this.form.cityList.forEach((item, index) => {
+ if (item.name == that) {
+ countyCode = item.id;
+ cityname = item.name;
+ }
+ });
+ if (countyCode) {
+ this.form.countyList = [];
+ this.XIAN.forEach((item, index) => {
+ if (item.code == countyCode && item.cityCountyName == cityname) {
+ this.form.countyList.push(item);
+ }
+ });
+ }
+ },
+ provinceChange(that) {
+ // 根据选中省，匹配市
+ let cityCode = 0;
+ let newCityArry = [];
+ this.form.provinceList.forEach((item, index) => {
+ if (item.name == that) {
+ cityCode = item.code;
+ }
+ });
+ // console.log(cityCode)
+ if (cityCode) {
+ this.form.cityList = [];
+ this.CITY.forEach((item, index) => {
+ if (item.code == cityCode) {
+ this.form.cityList.push(item);
+ }
+ }); /* 市匹配成功*/
+ }
+ },
+
+ getCityList() {
+ getDistrictList().then((res) => {
+ this.form.provinceList = JSON.parse(res.data);
+ // console.log("provinceList======"+JSON.stringify(this.form.provinceList))
+ // this.form.provinceList = res.data.districts[0].districts /* 省*/
+ /* 进行遍历赋值*/
+ /* 市区和县区*/
+ let newProvince = this.form.provinceList;
+ for (let i = 0; i < newProvince.length; i++) {
+ /* 省级*/
+ for (let j = 0; j < newProvince[i].districts.length; j++) {
+ /* 市级*/
+ let city = newProvince[i].districts[j].name;
+ this.CITY.push({ id: j + 1, name: city, code: i + 1 });
+ for (
+ let k = 0;
+ k < newProvince[i].districts[j].districts.length;
+ k++
+ ) {
+ /* 县级*/
+ let xian = newProvince[i].districts[j].districts[k].name;
+ this.XIAN.push({
+ id: k + 1,
+ name: xian,
+ code: j + 1,
+ cityCountyName: city,
+ });
+ }
+ }
+ }
+ for (let m = 0; m < newProvince.length; m++) {
+ newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } };
+ }
+ // console.log("newProvince======"+JSON.stringify(newProvince))
+ this.form.provinceList = newProvince;
+ // this.loading = true
+ console.log(
+ console.log(this.form.provinceList, " this.form.provinceList")
+ );
+ });
+ },
+ center(data) {
+ this.form.longitude = data.lng;
+ this.form.latitude = data.lat;
+ },
+ mapList(data) {
+ let mapListJson = JSON.stringify(data);
+ console.log("mapListJson:" + mapListJson);
+ this.form.boundaryStr = mapListJson;
+ },
+ getDeptTree() {
+ deptTreeSelect().then((response) => {
+ this.deptOptions = response.data;
+ });
+ },
+ },
+};
</script>
<style scoped lang="scss">
::v-deep .el-form-item__label {
- font-size: 18px;
- font-weight: bold;
- display: flex;
- align-items: center;
- height: 36px;
+ font-size: 18px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ height: 36px;
}
::v-deep .el-form-item__content {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
::v-deep .el-input .el-input__inner {
- height: 36px !important;
- display: flex;
- align-items: center;
+ height: 36px !important;
+ display: flex;
+ align-items: center;
}
::v-deep .el-input-number {
- display: flex;
- align-items: center;
- height: 36px; // 这里设置为和其他输入框一致的高度
+ display: flex;
+ align-items: center;
+ height: 36px; // 这里设置为和其他输入框一致的高度
}
::v-deep .el-input-number__input {
- height: 36px !important;
- display: flex;
- align-items: center;
+ height: 36px !important;
+ display: flex;
+ align-items: center;
}
::v-deep .el-input-number__increase,
::v-deep .el-input-number__decrease {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 36px !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 36px !important;
}
.tip {
- font-size: 14px;
- color: #888;
- margin-top: 5px;
+ font-size: 14px;
+ color: #888;
+ margin-top: 5px;
}
.tips {
- font-size: 14px;
- color: #888;
- margin-top: -10px;
+ font-size: 14px;
+ color: #888;
+ margin-top: -10px;
}
::v-deep .el-form-item__content::after {
- content: attr(data-tip);
- display: block;
- font-size: 14px;
- color: #888;
- margin-top: 5px;
+ content: attr(data-tip);
+ display: block;
+ font-size: 14px;
+ color: #888;
+ margin-top: 5px;
}
.page {
- padding: 10px;
+ padding: 10px;
- .tit {
- font-size: 30px;
- font-weight: 700;
+ .tit {
+ font-size: 30px;
+ font-weight: 700;
+ }
+
+ .pagecont {
+ width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
+
+ .left_box {
+ padding: 10px;
+ width: 53%;
+ border: 1px solid #ccc;
+ border-radius: 10px;
}
- .pagecont {
- width: 100%;
- display: flex;
- flex-wrap: nowrap;
+ .right_box {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ margin-left: 1%;
+ width: 44%;
- .left_box {
- padding: 10px;
- width: 53%;
- border: 1px solid #ccc;
- border-radius: 10px;
- }
+ .right_tit {
+ margin-bottom: 20px;
+ font-size: 24px;
+ color: #000;
+ margin-top: 20px;
+ }
- .right_box {
- padding: 10px;
- border: 1px solid #ccc;
- border-radius: 10px;
- margin-left: 1%;
- width: 44%;
-
- .right_tit {
- margin-bottom: 20px;
- font-size: 24px;
- color: #000;
- margin-top: 20px;
- }
-
- // background: yellow;
- }
+ // background: yellow;
}
+ }
}
.switch-item {
- margin-top: 20px;
- display: flex;
- align-items: center;
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
-
-
- /* 垂直居中 */
- // justify-content: flex-start;
- .el-switch {
- margin-left: 10px;
- /* 根据需要调整间距 */
- }
+ /* 垂直居中 */
+ // justify-content: flex-start;
+ .el-switch {
+ margin-left: 10px;
+ /* 根据需要调整间距 */
+ }
}
</style>
diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index 5f37ef6..a65843f 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -523,7 +523,9 @@
:status="form.status"
:online-status="form.onlineStatus"
:device-sn="form.sn"
+ :areaId="form.areaId"
/>
+
</el-col>
</el-row>
<el-row>
@@ -558,7 +560,7 @@
updateDevice,
handleLock,
handleUnlocking,
- ring,
+ ring,
oneClickOnline,
oneClickOffline,
reboot,
@@ -1065,7 +1067,9 @@ export default {
/** 详情按钮 */
handleView(row) {
this.open2 = true;
+
this.form = row;
+ console.log(this.form,'this.formthis.formthis.form');
this.showPlaceSearchMap = true;
this.key++;
this.orderRecordKey += 1;