Merge branch 'main' of http://47.109.71.130:3000/attiya/ebike-ui
This commit is contained in:
863620989
commit
8ca8f2b2a0
@ -1,5 +1,6 @@
|
|||||||
const config = {
|
const config = {
|
||||||
apiUrl: "http://192.168.2.156:10010/",
|
//apiUrl: "http://192.168.2.156:10010/",
|
||||||
|
apiUrl: "https://attiya.fun/ebike/",
|
||||||
cdnPath: "/",
|
cdnPath: "/",
|
||||||
ERR_OK: 200,
|
ERR_OK: 200,
|
||||||
sm2PublicKey: "04f5084ee12767d932f293508e30e3b0100185042ec0f061dedaf92b793b93f79fd6179d5e47e25b7aec98e00cf90dd56df1f8191012537187e7bbfd2d1de299fc", //f8209a2ebe6691e41e1f2b667bfe71f0b511716cc0f7c4452502fc12ec3957e4
|
sm2PublicKey: "04f5084ee12767d932f293508e30e3b0100185042ec0f061dedaf92b793b93f79fd6179d5e47e25b7aec98e00cf90dd56df1f8191012537187e7bbfd2d1de299fc", //f8209a2ebe6691e41e1f2b667bfe71f0b511716cc0f7c4452502fc12ec3957e4
|
||||||
|
|||||||
@ -4,10 +4,10 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/src/assets/logo.png" type="image/png">
|
<link rel="icon" href="/src/assets/logo.png" type="image/png">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>克能单车</title>
|
<title>景上出行</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app" style="background-color: rgb(0,21,41);"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,26 +1,29 @@
|
|||||||
export function getCache(name) {
|
export function getCache(name) {
|
||||||
if (name == undefined || name == "") {
|
if (name == undefined || name == "") {
|
||||||
return "";
|
return "";
|
||||||
}
|
|
||||||
let result = sessionStorage.getItem(name);
|
|
||||||
if (result != null) {
|
|
||||||
if ((result.startsWith("{") && result.endsWith("}")) || (result.startsWith("[") && result.endsWith("]"))) {
|
|
||||||
result = JSON.parse(result);
|
|
||||||
}
|
}
|
||||||
|
//let result = localStorage.getItem(name);
|
||||||
|
let result = sessionStorage.getItem(name);
|
||||||
|
if (result!= null) {
|
||||||
|
if ((result.startsWith("{") && result.endsWith("}")) || (result.startsWith("[") && result.endsWith("]"))) {
|
||||||
|
result = JSON.parse(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
return result;
|
|
||||||
}
|
export function setCache(name, value) {
|
||||||
|
if (name == undefined || name == "") {
|
||||||
export function setCache(name, value) {
|
return false;
|
||||||
if (name == undefined || name == "") {
|
}
|
||||||
return false;
|
if(typeof value === 'object') {
|
||||||
}
|
value = JSON.stringify(value);
|
||||||
if (typeof value === 'object') {
|
}
|
||||||
value = JSON.stringify(value);
|
//let result = localStorage.setItem(name, value);
|
||||||
}
|
let result = sessionStorage.setItem(name, value);
|
||||||
let result = sessionStorage.setItem(name, value);
|
return result;
|
||||||
return result;
|
}
|
||||||
}
|
export function clearStorage() {
|
||||||
export function clearStorage() {
|
sessionStorage.clear();
|
||||||
sessionStorage.clear();
|
//localStorage.clear();
|
||||||
}
|
}
|
||||||
@ -19,7 +19,7 @@
|
|||||||
animation: fade 1s;
|
animation: fade 1s;
|
||||||
"
|
"
|
||||||
v-if="!collapsed"
|
v-if="!collapsed"
|
||||||
>克能单车</span>
|
>景上出行</span>
|
||||||
</div>
|
</div>
|
||||||
<a-menu
|
<a-menu
|
||||||
v-model:openKeys="openKeys"
|
v-model:openKeys="openKeys"
|
||||||
@ -51,10 +51,17 @@
|
|||||||
</a-button> -->
|
</a-button> -->
|
||||||
<!-- 登录 -->
|
<!-- 登录 -->
|
||||||
<div class="topAvatar">
|
<div class="topAvatar">
|
||||||
<template v-if="userdfrname != ''">
|
<template v-if="userdfrname != '' && username != 'admin'">
|
||||||
<a>
|
<a-dropdown>
|
||||||
当前区域：{{ userdfrname }} <DownOutlined />
|
<a class="ant-dropdown-link" @click.prevent>
|
||||||
</a>
|
当前区域：{{ userdfrname }} <DownOutlined />
|
||||||
|
</a>
|
||||||
|
<template #overlay>
|
||||||
|
<a-menu @click="onOperationClick">
|
||||||
|
<a-menu-item v-for="(item) in useroperation" :key="item.regionId" :data="item">{{ item.regionName }}</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
<a-divider type="vertical" />
|
<a-divider type="vertical" />
|
||||||
<UserOutlined style="margin: 0px 5px;" />
|
<UserOutlined style="margin: 0px 5px;" />
|
||||||
</template>
|
</template>
|
||||||
@ -109,7 +116,7 @@ import { useRouter, useRoute } from 'vue-router'
|
|||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import { getMenus } from '../../pages';
|
import { getMenus } from '../../pages';
|
||||||
import { getLogoutAPI } from '@/apis/login.js'
|
import { getLogoutAPI } from '@/apis/login.js'
|
||||||
import { getCache, clearStorage } from '@/utils/authority';
|
import { getCache, setCache, clearStorage } from '@/utils/authority';
|
||||||
const selectedKeys = ref(['1'])
|
const selectedKeys = ref(['1'])
|
||||||
const openKeys = ref(['1'])
|
const openKeys = ref(['1'])
|
||||||
const collapsed = ref(false)
|
const collapsed = ref(false)
|
||||||
@ -122,6 +129,7 @@ const router = useRouter()
|
|||||||
// 登录状态
|
// 登录状态
|
||||||
const isLogin = ref(false)
|
const isLogin = ref(false)
|
||||||
const username = ref('')
|
const username = ref('')
|
||||||
|
const useroperation = ref([])
|
||||||
const userdfrname = ref('')
|
const userdfrname = ref('')
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -137,10 +145,16 @@ onMounted(() => {
|
|||||||
console.log('userinfo', userinfo)
|
console.log('userinfo', userinfo)
|
||||||
username.value = userinfo.username ? userinfo.username : 'X'
|
username.value = userinfo.username ? userinfo.username : 'X'
|
||||||
|
|
||||||
|
//获取用户区域
|
||||||
|
const cuseroperation = getCache('ebike-useroperation');
|
||||||
|
if(cuseroperation){
|
||||||
|
useroperation.value = cuseroperation;
|
||||||
|
}
|
||||||
|
|
||||||
//获取默认区域
|
//获取默认区域
|
||||||
const userdefultoperation = getCache('ebike-userdefultoperation');
|
const cuserdefultoperation = getCache('ebike-userdefultoperation');
|
||||||
if(userdefultoperation){
|
if(cuserdefultoperation){
|
||||||
userdfrname.value = userdefultoperation.regionName ? userdefultoperation.regionName : '';
|
userdfrname.value = cuserdefultoperation.regionName ? cuserdefultoperation.regionName : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
const menus = getMenus()
|
const menus = getMenus()
|
||||||
@ -191,12 +205,16 @@ const confirm = async (e) => {
|
|||||||
}
|
}
|
||||||
const cancel = (e) => {
|
const cancel = (e) => {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
message.error('退出登录取消！！！')
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const goBack = () => {
|
const onOperationClick = (e) => {
|
||||||
router.back()
|
if(e.item && e.item.data){
|
||||||
|
const regionName = e.item.data.regionName;
|
||||||
|
userdfrname.value = regionName;
|
||||||
|
//存储默认区域
|
||||||
|
setCache('ebike-userdefultoperation', e.item.data);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
@finish="onFinish"
|
@finish="onFinish"
|
||||||
@finishFailed="onFinishFailed"
|
@finishFailed="onFinishFailed"
|
||||||
>
|
>
|
||||||
<a-divider>克能单车</a-divider>
|
<a-divider>景上出行</a-divider>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label=""
|
label=""
|
||||||
name="username"
|
name="username"
|
||||||
|
|||||||
@ -213,7 +213,7 @@ import { message } from 'ant-design-vue'
|
|||||||
import config from '@/utils/config.js'
|
import config from '@/utils/config.js'
|
||||||
import RegionFeeCofFrom from '@/views/form/operateregion/RegionFeeCofFrom.vue'
|
import RegionFeeCofFrom from '@/views/form/operateregion/RegionFeeCofFrom.vue'
|
||||||
import OperateConfForm from '@/views/form/operateregion/OperateConfForm.vue'
|
import OperateConfForm from '@/views/form/operateregion/OperateConfForm.vue'
|
||||||
import operateRegionMap from './operateRegionMap.vue'
|
import operateRegionMap from '../OperateRegionMap/index.vue'
|
||||||
import {
|
import {
|
||||||
SettingOutlined
|
SettingOutlined
|
||||||
} from '@ant-design/icons-vue'
|
} from '@ant-design/icons-vue'
|
||||||
|
|||||||
@ -1,341 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<a-modal
|
|
||||||
v-model:open="open"
|
|
||||||
:title="openTitle"
|
|
||||||
width="100%"
|
|
||||||
wrap-class-name="full-modal"
|
|
||||||
:footer="null"
|
|
||||||
:afterClose="handleClose"
|
|
||||||
>
|
|
||||||
<div class="button-panel">
|
|
||||||
<a-button type="primary" @click="onEditorClear">{{ buttonName }}</a-button>
|
|
||||||
<a-button type="primary" @click="onEditorComplete">完成</a-button>
|
|
||||||
</div>
|
|
||||||
<div class="map-container" style="width: auto; height: auto;">
|
|
||||||
<tlbs-map
|
|
||||||
ref="mapRef"
|
|
||||||
:api-key="config.map.apiKey"
|
|
||||||
:center="center"
|
|
||||||
zoom="16"
|
|
||||||
:control="control"
|
|
||||||
:options="options"
|
|
||||||
@map_inited="onMapInited"
|
|
||||||
>
|
|
||||||
<tlbs-geometry-editor
|
|
||||||
ref="editorRef"
|
|
||||||
action-mode="draw"
|
|
||||||
selectable
|
|
||||||
@draw_complete="onDrowComplet"
|
|
||||||
@draw_error="onDrawError"
|
|
||||||
@adjust_complete="onAdjustComplete"
|
|
||||||
@adjust_error="onAdjustError"
|
|
||||||
@delete_complete="onDeleteComplete"
|
|
||||||
/>
|
|
||||||
</tlbs-map>
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, defineProps } from 'vue'
|
|
||||||
import { callOperate } from '@/apis/call.js'
|
|
||||||
import { message } from 'ant-design-vue'
|
|
||||||
import { isNullOrEmpty } from '@/utils/tools.js'
|
|
||||||
import config from '@/utils/config.js'
|
|
||||||
const props = defineProps({
|
|
||||||
onCallBack: {
|
|
||||||
type: Function,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
openTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '' // Default value in case no openTitle is provided
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const open = ref(false);
|
|
||||||
const showModal = (data) => {
|
|
||||||
if (data) {
|
|
||||||
loadMap(data);
|
|
||||||
}
|
|
||||||
open.value = true;
|
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
open.value = false;
|
|
||||||
ClearEditor();
|
|
||||||
if (props.onCallBack) {
|
|
||||||
props.onCallBack(formData.value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
defineExpose({ showModal });
|
|
||||||
|
|
||||||
const formData = ref({
|
|
||||||
"regionId": "",
|
|
||||||
"regionName": "",
|
|
||||||
"simpleName": "",
|
|
||||||
"zoneId": "",
|
|
||||||
"points": [],
|
|
||||||
"shapeType": 2, // 1:圆形 2:多边形
|
|
||||||
"radius": 0, // 圆形半径
|
|
||||||
});
|
|
||||||
|
|
||||||
let timer = null;
|
|
||||||
const loadMap = (dataRegion) => {
|
|
||||||
if (editorRef.value) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
if (dataRegion) {
|
|
||||||
const { regionId } = dataRegion;
|
|
||||||
callOperate("/ebikeRegion/getRegionInfo/" + regionId, {}, "get").then((res) => {
|
|
||||||
if (res.code != 200) {
|
|
||||||
message.error(res.message)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const { regionName, simpleName, zoneId, points, shapeType, radius } = res.data;
|
|
||||||
formData.value = {
|
|
||||||
"regionId": regionId,
|
|
||||||
"regionName": regionName,
|
|
||||||
"simpleName": simpleName,
|
|
||||||
"zoneId": zoneId,
|
|
||||||
"points": points,
|
|
||||||
"shapeType": shapeType, // 1:圆形 2:多边形
|
|
||||||
"radius": radius, // 圆形半径
|
|
||||||
}
|
|
||||||
loadGeometry();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
loadMap(dataRegion);
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let shapeId = null;
|
|
||||||
const loadGeometry = () => {
|
|
||||||
const { points, shapeType, regionId, radius } = formData.value;
|
|
||||||
shapeId = 'polygon' + regionId;
|
|
||||||
if (shapeType == 1) {
|
|
||||||
shapeId = 'circle' + regionId;
|
|
||||||
}
|
|
||||||
if (points) {
|
|
||||||
if(shapeType == 1){
|
|
||||||
const circleGeometries = [];//editorRef.value.circle.getGeometries();
|
|
||||||
if (circleGeometries.length > 0) {
|
|
||||||
circleGeometries.forEach((geometry) => {
|
|
||||||
editorRef.value.circle.remove(geometry); // 删除之前的图形数据
|
|
||||||
});
|
|
||||||
}
|
|
||||||
circleGeometries.push({
|
|
||||||
id: shapeId, // 圆形图形数据的标志信息
|
|
||||||
styleId: 'circle', // 样式id
|
|
||||||
radius: radius, // 圆形的半径
|
|
||||||
center: new TMap.LatLng(points[0].latitude, points[0].longitude),
|
|
||||||
properties: {
|
|
||||||
// 圆形的属性数据
|
|
||||||
title: 'circle',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
editorRef.value.circle.setGeometries(circleGeometries);
|
|
||||||
//设置视野范围
|
|
||||||
const mycircle = editorRef.value.circle.getGeometryById(shapeId);
|
|
||||||
const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths);
|
|
||||||
mapRef.value.map.fitBounds(boundary,{
|
|
||||||
padding: 100, // 设置地图边界的内边距
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if(shapeType == 2){
|
|
||||||
const paths = [];
|
|
||||||
points.forEach((point) => {
|
|
||||||
paths.push(new TMap.LatLng(point.latitude, point.longitude));
|
|
||||||
});
|
|
||||||
const polygonGeometries = [];//editorRef.value.polygon.getGeometries();
|
|
||||||
polygonGeometries.push({
|
|
||||||
id: shapeId, // 多边形图形数据的标志信息
|
|
||||||
styleId: 'polygon', // 样式id
|
|
||||||
paths, // 多边形的位置信息
|
|
||||||
properties: {
|
|
||||||
// 多边形的属性数据
|
|
||||||
title: 'polygon',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
editorRef.value.polygon.setGeometries(polygonGeometries);
|
|
||||||
// var position = TMap.geometry.computeCentroid(paths);
|
|
||||||
// mapRef.value.map.setCenter(position);
|
|
||||||
//设置视野范围
|
|
||||||
const mypolygon = editorRef.value.polygon.getGeometryById(shapeId);
|
|
||||||
const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths);
|
|
||||||
mapRef.value.map.fitBounds(boundary,{
|
|
||||||
padding: 100, // 设置地图边界的内边距
|
|
||||||
});
|
|
||||||
}
|
|
||||||
buttonName.value = '重置';
|
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
|
||||||
editorRef.value.editor.select([shapeId]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapRef = ref(null);
|
|
||||||
const center = ref( config.map.center );
|
|
||||||
const control = ref({ scale: {}, zoom: { position: 'topRight',},});
|
|
||||||
const options = ref({ renderOptions: { renderOptions: true, }});
|
|
||||||
const editorRef = ref(null);
|
|
||||||
const onMapInited = () => {
|
|
||||||
if (mapRef.value) {
|
|
||||||
const windowWidth = window.innerWidth;
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
const calculatedWidth = windowWidth - 60;
|
|
||||||
const calculatedHeight = windowHeight - 100;
|
|
||||||
// 调用地图实例的 resize 方法
|
|
||||||
const map = mapRef.value.map;
|
|
||||||
if (map) {
|
|
||||||
map.resize(calculatedWidth, calculatedHeight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const buttonName = ref('清除');
|
|
||||||
const onDrowComplet = (geomeytry) => {
|
|
||||||
//console.log("onDrowComplet",geomeytry);
|
|
||||||
if(geomeytry.id){
|
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
|
||||||
editorRef.value.editor.select([geomeytry.id]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onDrawError = (e) => {
|
|
||||||
ClearEditor();
|
|
||||||
editorRef.value.editor.stop();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onAdjustComplete = (geomeytry) => {
|
|
||||||
//console.log("onAdjustComplete",geomeytry);
|
|
||||||
};
|
|
||||||
const onAdjustError = (e) => {
|
|
||||||
ClearEditor();
|
|
||||||
loadGeometry();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onEditorClear = () => {
|
|
||||||
if(!isNullOrEmpty(shapeId)){
|
|
||||||
loadGeometry();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
ClearEditor();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const ClearEditor = () => {
|
|
||||||
editorRef.value.editor.select([]);
|
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
|
||||||
editorRef.value.circle.setGeometries([]);
|
|
||||||
editorRef.value.polygon.setGeometries([]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const onEditorComplete = () => {
|
|
||||||
if(editorRef.value.editor.getSelectedList().length > 0){
|
|
||||||
const selectedList = editorRef.value.editor.getSelectedList();
|
|
||||||
const geometry = selectedList[0];
|
|
||||||
console.log("onEditorComplete",geometry);
|
|
||||||
if(geometry.id){
|
|
||||||
if(geometry.radius && geometry.center){
|
|
||||||
formData.value.radius = geometry.radius;
|
|
||||||
formData.value.points = [
|
|
||||||
{
|
|
||||||
"latitude": geometry.center.lat,
|
|
||||||
"longitude": geometry.center.lng,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
formData.value.shapeType = 1;
|
|
||||||
}
|
|
||||||
else if(geometry.paths){
|
|
||||||
formData.value.radius = 0;
|
|
||||||
formData.value.points = geometry.paths.map((point) => {
|
|
||||||
return {
|
|
||||||
"latitude": point.lat,
|
|
||||||
"longitude": point.lng,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
formData.value.points.push({
|
|
||||||
"latitude": geometry.paths[0].lat,
|
|
||||||
"longitude": geometry.paths[0].lng,
|
|
||||||
});
|
|
||||||
formData.value.shapeType = 2;
|
|
||||||
}
|
|
||||||
if(!isNullOrEmpty(formData.value.regionId)){
|
|
||||||
callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
|
|
||||||
if (res.code == 200) {
|
|
||||||
message.success(res.message, 3, handleClose);
|
|
||||||
} else {
|
|
||||||
message.error(res.message, 10);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
handleClose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
message.error("请先绘制区域！")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onDeleteComplete = (geomeytry) => {
|
|
||||||
if(editorRef.value.polygon.getGeometries().length > 0){
|
|
||||||
const shapeId = editorRef.value.polygon.getGeometries()[0].id;
|
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
|
||||||
editorRef.value.editor.select([shapeId]);
|
|
||||||
}
|
|
||||||
else if(editorRef.value.circle.getGeometries().length > 0){
|
|
||||||
const shapeId = editorRef.value.circle.getGeometries()[0].id;
|
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
|
||||||
editorRef.value.editor.select([shapeId]);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
|
||||||
// editorRef.value.circle.setGeometries([]);
|
|
||||||
// editorRef.value.polygon.setGeometries([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.full-modal .ant-modal {
|
|
||||||
max-width: 100%;
|
|
||||||
top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.full-modal .ant-modal-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: calc(100vh);
|
|
||||||
border-radius:0 !important;
|
|
||||||
}
|
|
||||||
.full-modal .ant-modal-body {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-panel{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 55px;
|
|
||||||
right: 35px;
|
|
||||||
z-index: 2000;
|
|
||||||
width: 300px;
|
|
||||||
height: 105px;
|
|
||||||
background-color: rgb(255, 255, 255, 0.8);
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
.button-panel button{
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
342
ebike-operate/src/views/Urban/OperateRegionMap/index.vue
Normal file
342
ebike-operate/src/views/Urban/OperateRegionMap/index.vue
Normal file
@ -0,0 +1,342 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<a-modal
|
||||||
|
v-model:open="open"
|
||||||
|
:title="openTitle"
|
||||||
|
width="100%"
|
||||||
|
wrap-class-name="full-modal"
|
||||||
|
:footer="null"
|
||||||
|
:afterClose="handleClose"
|
||||||
|
>
|
||||||
|
<div class="button-panel">
|
||||||
|
<a-button type="primary" @click="onEditorClear">{{ buttonName }}</a-button>
|
||||||
|
<a-button type="primary" @click="onEditorComplete">完成</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="map-container" style="width: auto; height: auto;">
|
||||||
|
<tlbs-map
|
||||||
|
ref="mapRef"
|
||||||
|
:api-key="config.map.apiKey"
|
||||||
|
:center="center"
|
||||||
|
zoom="16"
|
||||||
|
:control="control"
|
||||||
|
:options="options"
|
||||||
|
@map_inited="onMapInited"
|
||||||
|
>
|
||||||
|
<tlbs-geometry-editor
|
||||||
|
ref="editorRef"
|
||||||
|
action-mode="draw"
|
||||||
|
selectable
|
||||||
|
@draw_complete="onDrowComplet"
|
||||||
|
@draw_error="onDrawError"
|
||||||
|
@adjust_complete="onAdjustComplete"
|
||||||
|
@adjust_error="onAdjustError"
|
||||||
|
@delete_complete="onDeleteComplete"
|
||||||
|
/>
|
||||||
|
</tlbs-map>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, defineProps } from 'vue'
|
||||||
|
import { callOperate } from '@/apis/call.js'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import { isNullOrEmpty } from '@/utils/tools.js'
|
||||||
|
import config from '@/utils/config.js'
|
||||||
|
const props = defineProps({
|
||||||
|
onCallBack: {
|
||||||
|
type: Function,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
openTitle: {
|
||||||
|
type: String,
|
||||||
|
default: '' // Default value in case no openTitle is provided
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const open = ref(false);
|
||||||
|
const showModal = (data) => {
|
||||||
|
if (data) {
|
||||||
|
loadMap(data);
|
||||||
|
}
|
||||||
|
open.value = true;
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
open.value = false;
|
||||||
|
ClearEditor();
|
||||||
|
if (props.onCallBack) {
|
||||||
|
props.onCallBack(formData.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
defineExpose({ showModal });
|
||||||
|
|
||||||
|
const formData = ref({
|
||||||
|
"regionId": "",
|
||||||
|
"regionName": "",
|
||||||
|
"simpleName": "",
|
||||||
|
"zoneId": "",
|
||||||
|
"points": [],
|
||||||
|
"shapeType": 2, // 1:圆形 2:多边形
|
||||||
|
"radius": 0, // 圆形半径
|
||||||
|
});
|
||||||
|
|
||||||
|
let timer = null;
|
||||||
|
const loadMap = (dataRegion) => {
|
||||||
|
if (editorRef.value) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
if (dataRegion) {
|
||||||
|
const { regionId } = dataRegion;
|
||||||
|
callOperate("/ebikeRegion/getRegionInfo/" + regionId, {}, "get").then((res) => {
|
||||||
|
if (res.code != 200) {
|
||||||
|
message.error(res.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const { regionName, simpleName, zoneId, points, shapeType, radius } = res.data;
|
||||||
|
formData.value = {
|
||||||
|
"regionId": regionId,
|
||||||
|
"regionName": regionName,
|
||||||
|
"simpleName": simpleName,
|
||||||
|
"zoneId": zoneId,
|
||||||
|
"points": points,
|
||||||
|
"shapeType": shapeType, // 1:圆形 2:多边形
|
||||||
|
"radius": radius, // 圆形半径
|
||||||
|
}
|
||||||
|
loadGeometry();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
loadMap(dataRegion);
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let shapeId = null;
|
||||||
|
const loadGeometry = () => {
|
||||||
|
const { points, shapeType, regionId, radius } = formData.value;
|
||||||
|
shapeId = 'polygon' + regionId;
|
||||||
|
if (shapeType == 1) {
|
||||||
|
shapeId = 'circle' + regionId;
|
||||||
|
}
|
||||||
|
if (points) {
|
||||||
|
if(shapeType == 1){
|
||||||
|
const circleGeometries = [];//editorRef.value.circle.getGeometries();
|
||||||
|
if (circleGeometries.length > 0) {
|
||||||
|
circleGeometries.forEach((geometry) => {
|
||||||
|
editorRef.value.circle.remove(geometry); // 删除之前的图形数据
|
||||||
|
});
|
||||||
|
}
|
||||||
|
circleGeometries.push({
|
||||||
|
id: shapeId, // 圆形图形数据的标志信息
|
||||||
|
styleId: 'circle', // 样式id
|
||||||
|
radius: radius, // 圆形的半径
|
||||||
|
center: new TMap.LatLng(points[0].latitude, points[0].longitude),
|
||||||
|
properties: {
|
||||||
|
// 圆形的属性数据
|
||||||
|
title: 'circle',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
editorRef.value.circle.setGeometries(circleGeometries);
|
||||||
|
//设置视野范围
|
||||||
|
const mycircle = editorRef.value.circle.getGeometryById(shapeId);
|
||||||
|
const boundary = TMap.geometry.computeBoundingRectangle(mycircle.paths);
|
||||||
|
mapRef.value.map.fitBounds(boundary,{
|
||||||
|
padding: 100, // 设置地图边界的内边距
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if(shapeType == 2){
|
||||||
|
const paths = [];
|
||||||
|
points.forEach((point) => {
|
||||||
|
paths.push(new TMap.LatLng(point.latitude, point.longitude));
|
||||||
|
});
|
||||||
|
const polygonGeometries = [];//editorRef.value.polygon.getGeometries();
|
||||||
|
polygonGeometries.push({
|
||||||
|
id: shapeId, // 多边形图形数据的标志信息
|
||||||
|
styleId: 'polygon', // 样式id
|
||||||
|
paths, // 多边形的位置信息
|
||||||
|
properties: {
|
||||||
|
// 多边形的属性数据
|
||||||
|
title: 'polygon',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
editorRef.value.polygon.setGeometries(polygonGeometries);
|
||||||
|
// var position = TMap.geometry.computeCentroid(paths);
|
||||||
|
// mapRef.value.map.setCenter(position);
|
||||||
|
//设置视野范围
|
||||||
|
const mypolygon = editorRef.value.polygon.getGeometryById(shapeId);
|
||||||
|
const boundary = TMap.geometry.computeBoundingRectangle(mypolygon.paths);
|
||||||
|
mapRef.value.map.fitBounds(boundary,{
|
||||||
|
padding: 100, // 设置地图边界的内边距
|
||||||
|
});
|
||||||
|
}
|
||||||
|
buttonName.value = '重置';
|
||||||
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||||
|
editorRef.value.editor.select([shapeId]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapRef = ref(null);
|
||||||
|
const center = ref( config.map.center );
|
||||||
|
const control = ref({ scale: {}, zoom: { position: 'topRight',},});
|
||||||
|
const options = ref({ renderOptions: { renderOptions: true, }});
|
||||||
|
const editorRef = ref(null);
|
||||||
|
const onMapInited = () => {
|
||||||
|
if (mapRef.value) {
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
const calculatedWidth = windowWidth - 60;
|
||||||
|
const calculatedHeight = windowHeight - 100;
|
||||||
|
// 调用地图实例的 resize 方法
|
||||||
|
const map = mapRef.value.map;
|
||||||
|
if (map) {
|
||||||
|
map.resize(calculatedWidth, calculatedHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonName = ref('清除');
|
||||||
|
const onDrowComplet = (geomeytry) => {
|
||||||
|
//console.log("onDrowComplet",geomeytry);
|
||||||
|
if(geomeytry.id){
|
||||||
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||||
|
editorRef.value.editor.select([geomeytry.id]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onDrawError = (e) => {
|
||||||
|
ClearEditor();
|
||||||
|
editorRef.value.editor.stop();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAdjustComplete = (geomeytry) => {
|
||||||
|
//console.log("onAdjustComplete",geomeytry);
|
||||||
|
};
|
||||||
|
const onAdjustError = (e) => {
|
||||||
|
ClearEditor();
|
||||||
|
loadGeometry();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEditorClear = () => {
|
||||||
|
if(!isNullOrEmpty(shapeId)){
|
||||||
|
loadGeometry();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ClearEditor();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClearEditor = () => {
|
||||||
|
editorRef.value.editor.select([]);
|
||||||
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
||||||
|
editorRef.value.circle.setGeometries([]);
|
||||||
|
editorRef.value.polygon.setGeometries([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onEditorComplete = () => {
|
||||||
|
if(editorRef.value.editor.getSelectedList().length > 0){
|
||||||
|
const selectedList = editorRef.value.editor.getSelectedList();
|
||||||
|
const geometry = selectedList[0];
|
||||||
|
console.log("onEditorComplete",geometry);
|
||||||
|
if(geometry.id){
|
||||||
|
if(geometry.radius && geometry.center){
|
||||||
|
formData.value.radius = geometry.radius;
|
||||||
|
formData.value.points = [
|
||||||
|
{
|
||||||
|
"latitude": geometry.center.lat,
|
||||||
|
"longitude": geometry.center.lng,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
formData.value.shapeType = 1;
|
||||||
|
}
|
||||||
|
else if(geometry.paths){
|
||||||
|
formData.value.radius = 0;
|
||||||
|
formData.value.points = geometry.paths.map((point) => {
|
||||||
|
return {
|
||||||
|
"latitude": point.lat,
|
||||||
|
"longitude": point.lng,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
formData.value.points.push({
|
||||||
|
"latitude": geometry.paths[0].lat,
|
||||||
|
"longitude": geometry.paths[0].lng,
|
||||||
|
});
|
||||||
|
formData.value.shapeType = 2;
|
||||||
|
}
|
||||||
|
if(!isNullOrEmpty(formData.value.regionId)){
|
||||||
|
callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
message.success(res.message, 3, handleClose);
|
||||||
|
} else {
|
||||||
|
message.error(res.message, 10);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
handleClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
message.error("请先绘制区域！")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDeleteComplete = (geomeytry) => {
|
||||||
|
if(editorRef.value.polygon.getGeometries().length > 0){
|
||||||
|
const shapeId = editorRef.value.polygon.getGeometries()[0].id;
|
||||||
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||||
|
editorRef.value.editor.select([shapeId]);
|
||||||
|
}
|
||||||
|
else if(editorRef.value.circle.getGeometries().length > 0){
|
||||||
|
const shapeId = editorRef.value.circle.getGeometries()[0].id;
|
||||||
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
||||||
|
editorRef.value.editor.select([shapeId]);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
||||||
|
// editorRef.value.circle.setGeometries([]);
|
||||||
|
// editorRef.value.polygon.setGeometries([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.full-modal .ant-modal {
|
||||||
|
max-width: 100%;
|
||||||
|
top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.full-modal .ant-modal-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh);
|
||||||
|
border-radius:0 !important;
|
||||||
|
}
|
||||||
|
.full-modal .ant-modal-body {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-panel{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 55px;
|
||||||
|
right: 35px;
|
||||||
|
z-index: 2000;
|
||||||
|
width: 300px;
|
||||||
|
height: 105px;
|
||||||
|
background-color: rgb(255, 255, 255, 0.8);
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.button-panel button{
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0px !important;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
338
ebike-operate/src/views/Urban/SiteManage/index.vue
Normal file
338
ebike-operate/src/views/Urban/SiteManage/index.vue
Normal file
@ -0,0 +1,338 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<a-form
|
||||||
|
:label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
|
||||||
|
:wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
|
||||||
|
>
|
||||||
|
<a-row :gutter="8">
|
||||||
|
<a-col
|
||||||
|
:xl="6"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
|
<a-form-item label="站点类型">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryform.type"
|
||||||
|
placeholder="请选择站点类型"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-select-option value="2">停车站点</a-select-option>
|
||||||
|
<a-select-option value="5">禁停区</a-select-option>
|
||||||
|
<a-select-option value="6">禁行区</a-select-option>
|
||||||
|
<a-select-option value="7">扣车区</a-select-option>
|
||||||
|
<a-select-option value="8">接客站点</a-select-option>
|
||||||
|
<a-select-option value="3">仓管区</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:xl="6"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
|
<a-form-item label="站点级别">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryform.level"
|
||||||
|
placeholder="请选择站点级别"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-select-option value="1">1级</a-select-option>
|
||||||
|
<a-select-option value="2">2级</a-select-option>
|
||||||
|
<a-select-option value="3">3级</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:xl="6"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
|
<a-form-item label="站点名称">
|
||||||
|
<a-input
|
||||||
|
v-model:value.trim="queryform.name"
|
||||||
|
placeholder="请输入站点名称"
|
||||||
|
allow-clear
|
||||||
|
></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:xl="6"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
class="ele-text-right"
|
||||||
|
:wrapper-col="{ span: 24 }"
|
||||||
|
>
|
||||||
|
<a-space>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
style="background-color: #5cc750"
|
||||||
|
@click="search"
|
||||||
|
>查询</a-button>
|
||||||
|
<!-- <a-button>重置</a-button> -->
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
<!-- 数据操作 -->
|
||||||
|
<a-space style="margin-bottom: 10px">
|
||||||
|
<a-button
|
||||||
|
style="background-color: #5cc750"
|
||||||
|
type="primary"
|
||||||
|
class="ele-btn-icon"
|
||||||
|
@click="handleAdd"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<plus-outlined />
|
||||||
|
</template>
|
||||||
|
<span>新增</span>
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<a-table
|
||||||
|
:pagination="pagination"
|
||||||
|
@change="handleTableChange"
|
||||||
|
bordered
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:scroll="{ x: 'max-content' }"
|
||||||
|
>
|
||||||
|
<template #headerCell="{ column }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<SettingOutlined style="margin-right: 5px" />{{ column.title }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-space>
|
||||||
|
<a>详情</a>
|
||||||
|
<a-divider type="vertical" />
|
||||||
|
<a>编辑</a>
|
||||||
|
<a-divider type="vertical" />
|
||||||
|
<a>申请删除</a>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
<!-- 地图 -->
|
||||||
|
<operateRegionMap
|
||||||
|
ref="editORMapModel"
|
||||||
|
:onCallBack="onORMapCallBack"
|
||||||
|
:openTitle="openORMapTitle"
|
||||||
|
></operateRegionMap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, reactive, nextTick } from 'vue'
|
||||||
|
import { callOperate } from '@/apis/call.js'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import config from '@/utils/config.js'
|
||||||
|
import operateRegionMap from '../OperateRegionMap/index.vue'
|
||||||
|
import {
|
||||||
|
SettingOutlined
|
||||||
|
} from '@ant-design/icons-vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
// 表格行数据
|
||||||
|
const dataSource = ref([])
|
||||||
|
const data = ref([])
|
||||||
|
const router = useRouter()
|
||||||
|
const editORMapModel = ref(null);
|
||||||
|
const openORMapTitle = ref('地图');
|
||||||
|
// 查询相关
|
||||||
|
const queryform = ref({
|
||||||
|
type: '',
|
||||||
|
level: '',
|
||||||
|
name: '',
|
||||||
|
pageParam: {
|
||||||
|
pageNum: config.pageParam.pageNum,
|
||||||
|
pageSize: config.pageParam.pageSize
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//对于每页数据的管理
|
||||||
|
let pagination = reactive({
|
||||||
|
total: dataSource.value.length,
|
||||||
|
current: queryform.value.pageParam.pageNum,
|
||||||
|
pageSize: queryform.value.pageParam.pageSize,
|
||||||
|
showSizeChanger: true,
|
||||||
|
pageSizeOptions: config.pageParam.pageSizeOptions,
|
||||||
|
showQuickJumper: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const columns = ref([
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
key: 'index',
|
||||||
|
width: 80,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'index'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'typeName',
|
||||||
|
title: '站点类型',
|
||||||
|
width: 200,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'typeName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'regionName',
|
||||||
|
title: '运营区域',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'regionName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'simpleName',
|
||||||
|
title: '区域简称',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'simpleName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'inOperation',
|
||||||
|
title: '运营状态',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'inOperation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'regionRank',
|
||||||
|
title: '区域级别',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'regionRank'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'regionCode',
|
||||||
|
title: '区域编码',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'regionCode'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'siteCount',
|
||||||
|
title: '站点数量',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'siteCount'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'freeDuration',
|
||||||
|
title: '免费时长',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'freeDuration'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'billingStandard',
|
||||||
|
title: '计费标准',
|
||||||
|
width: 200,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'billingStandard'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'dispatchFee',
|
||||||
|
title: '运调度费(元)',
|
||||||
|
width: 250,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'dispatchFee'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'cappedAmount',
|
||||||
|
title: '封顶金额(元)',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'cappedAmount'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'createdAt',
|
||||||
|
title: '创建时间',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'createdAt'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 300,
|
||||||
|
align: 'center',
|
||||||
|
fixed: 'right',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
//获取用户列表数据并格式化字段
|
||||||
|
onMounted(async () => {
|
||||||
|
getData();
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
let url = "/ebikeRegion/pageOperation?pageNum=" + queryform.value.pageParam.pageNum + "&pageSize=" + queryform.value.pageParam.pageSize
|
||||||
|
if (queryform.value.regionName) {
|
||||||
|
url += "®ionName=" + queryform.value.regionName
|
||||||
|
}
|
||||||
|
if (queryform.value.simpleName) {
|
||||||
|
url += "&simpleName=" + queryform.value.simpleName
|
||||||
|
}
|
||||||
|
if (queryform.value.inOperation) {
|
||||||
|
url += "&inOperation=" + queryform.value.inOperation
|
||||||
|
}
|
||||||
|
const res = await callOperate(url, {}, "get");
|
||||||
|
if (res.code != 200) {
|
||||||
|
message.error(res.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
data.value = res.data.records
|
||||||
|
data.value = data.value.map((item, index) => {
|
||||||
|
index++
|
||||||
|
return { ...item, index }
|
||||||
|
})
|
||||||
|
dataSource.value = data.value
|
||||||
|
pagination.total = res.data.totalRow
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 对每页数据显示的交互
|
||||||
|
let handleTableChange = (pagina) => {
|
||||||
|
pagination.current = pagina.current
|
||||||
|
pagination.pageSize = pagina.pageSize
|
||||||
|
queryform.value.pageParam.pageNum = pagina.current
|
||||||
|
queryform.value.pageParam.pageSize = pagina.pageSize
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const search = () => {
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditORMap = (record) => {
|
||||||
|
openORMapTitle.value = '绘制地图（' + record['regionName'] + '）';
|
||||||
|
const data = {
|
||||||
|
regionId: record['regionId']
|
||||||
|
}
|
||||||
|
editORMapModel.value.showModal(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onORMapCallBack = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
router.push('/Urban/OperateRegionAdd');
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -111,7 +111,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps, onMounted } from 'vue'
|
import { ref, defineProps, onMounted } from 'vue'
|
||||||
import operateRegionMap from '../../Urban/OperateRegion/operateRegionMap.vue'
|
import operateRegionMap from '../../Urban/OperateRegionMap/index.vue'
|
||||||
import { callOperate } from '@/apis/call.js'
|
import { callOperate } from '@/apis/call.js'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import { getCache } from '@/utils/authority';
|
import { getCache } from '@/utils/authority';
|
||||||
|
|||||||
@ -5,6 +5,8 @@ import vue from '@vitejs/plugin-vue'
|
|||||||
import Components from 'unplugin-vue-components/vite';
|
import Components from 'unplugin-vue-components/vite';
|
||||||
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
|
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
|
||||||
|
|
||||||
|
let targetUrl = 'http://192.168.2.156:10010/'
|
||||||
|
targetUrl = 'https://attiya.fun/ebike/'
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
@ -29,7 +31,7 @@ export default defineConfig({
|
|||||||
proxy: {
|
proxy: {
|
||||||
'^/operate/*': {
|
'^/operate/*': {
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
target: 'http://192.168.2.156:10010/',
|
target: targetUrl,
|
||||||
rewrite: (path) => {
|
rewrite: (path) => {
|
||||||
return path.replace(/^\/operate/, 'operate')
|
return path.replace(/^\/operate/, 'operate')
|
||||||
}
|
}
|
||||||
@ -43,7 +45,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
'^/maintenance/*': {
|
'^/maintenance/*': {
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
target: 'http://192.168.2.156:10010/',
|
target: targetUrl,
|
||||||
rewrite: (path) => {
|
rewrite: (path) => {
|
||||||
return path.replace(/^\/maintenance/, 'maintenance')
|
return path.replace(/^\/maintenance/, 'maintenance')
|
||||||
}
|
}
|
||||||
@ -57,7 +59,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
'^/user/*': {
|
'^/user/*': {
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
target: 'http://192.168.2.156:10010/',
|
target: targetUrl,
|
||||||
rewrite: (path) => {
|
rewrite: (path) => {
|
||||||
return path.replace(/^\/user/, 'user')
|
return path.replace(/^\/user/, 'user')
|
||||||
}
|
}
|
||||||
@ -71,7 +73,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
'^/order/*': {
|
'^/order/*': {
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
target: 'http://192.168.2.156:10010/',
|
target: targetUrl,
|
||||||
rewrite: (path) => {
|
rewrite: (path) => {
|
||||||
return path.replace(/^\/order/, 'order')
|
return path.replace(/^\/order/, 'order')
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user