chuangte/bick_back
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: chuangte:c75308b390b9e86921b033c73591eb97f9ddcd76
Branches Tags
chuangte:master
chuangte:tx
chuangte:pay-channel
chuangte:coupon
chuangte:qzz
..
compare: chuangte:74be13b5346f9605a7d833fa3e287929d799080f
Branches Tags
chuangte:master
chuangte:tx
chuangte:pay-channel
chuangte:coupon
chuangte:qzz

No commits in common. "c75308b390b9e86921b033c73591eb97f9ddcd76" and "74be13b5346f9605a7d833fa3e287929d799080f" have entirely different histories.
c75308b390 ... 74be13b534

11 changed files with 717 additions and 969 deletions
Show Stats Expand all files Collapse all files

2
.env.development
View File

@ -6,7 +6,7 @@ ENV = 'development'
# 共享电动车管理系统/开发环境 # 共享电动车管理系统/开发环境
# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api' # VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
VUE_APP_BASE_API = 'http://192.168.2.189:8080' VUE_APP_BASE_API = 'http://localhost:8080'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

14
src/App.vue
View File

@ -25,18 +25,4 @@ export default {
#app .theme-picker { #app .theme-picker {
display: none; display: none;
} }
</style>
<style lang="scss" >
.el-select {
.el-input__inner{
color: red;
}
}
.el-input{
.el-input__inner{
color: red;
}
}
</style> </style>

8
src/api/system/area.js
View File

@ -54,14 +54,6 @@ export function updateArea(data) {
data: data data: data
}) })
} }
// 修改导览
export function putguide(data) {
return request({
url: '/system/area/guide',
method: 'put',
data: data
})
}
// 修改运营区 // 修改运营区
export function updateArea2(data) { export function updateArea2(data) {
return request({ return request({

41
src/components/Map/TrajectoryMap.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="place-search-map" :style="{ width: width, height: height }" v-loading="loading"> <div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
<div id="container"></div> <div id="container"></div>
<div class="input-card"> <div class="input-card">
<h4>轨迹回放控制</h4> <h4>轨迹回放控制</h4>
@ -52,7 +52,7 @@ export default {
loading: false, loading: false,
keyword: null, keyword: null,
markers: [], markers: [],
line: [], line:[],
area: { area: {
province: '福建省', province: '福建省',
city: '宁德市', city: '宁德市',
@ -99,40 +99,7 @@ export default {
// 显示轨迹 // 显示轨迹
trajectory() { trajectory() {
this.line = JSON.parse(this.tripRouteStr) this.line = JSON.parse(this.tripRouteStr)
console.log("this.line================" + this.line) console.log("this.line================"+this.line)
let abb;
try {
abb = JSON.parse(this.tripRouteStr);
} catch (error) {
console.error("Error parsing tripRouteStr:", error);
return;
}
let latitude = parseFloat(abb[0][1]);
let longitude = parseFloat(abb[0][0]);
let latitude1 = parseFloat(abb[abb.length - 1][1]);
let longitude1 = parseFloat( abb[abb.length - 1][0]);
this.marker = new AMap.Marker({
map: this.map,
position: [longitude, latitude],
icon: new AMap.Icon({
size: new AMap.Size(25, 38), // 图标大小
image: "https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr",
imageSize: new AMap.Size(25, 38) // 图标图片大小
}),
offset: new AMap.Pixel(-12.5, -19.5),
});
this.marker = new AMap.Marker({
map: this.map,
position: [longitude1, latitude1],
icon: new AMap.Icon({
size: new AMap.Size(25, 38), // 图标大小
image: "https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx",
imageSize: new AMap.Size(25, 38) // 图标图片大小
}),
offset: new AMap.Pixel(-12.5, -19.5),
});
// console.log(latitude,longitude,'longitudelongitudelongitude');
let line = this.line; let line = this.line;
this.marker = new AMap.Marker({ this.marker = new AMap.Marker({
map: this.map, map: this.map,
@ -229,7 +196,7 @@ export default {
line-height: 1.5; line-height: 1.5;
border-radius: 1rem; border-radius: 1rem;
-webkit-appearance: button; -webkit-appearance: button;
cursor: pointer; cursor:pointer;
} }
.input-item { .input-item {

106
src/views/system/area/guide.vue
View File

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<div class="input-card-right"> <div class="input-card-right">
<div class="img"> <div class="img">
<image-upload :limit="1" :isShowTip="false" v-model="picture" /> <image-upload v-model="picture" />
</div> </div>
<el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')"> <el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
@ -16,10 +16,6 @@
<el-button @click="generateMap" :disabled="!canGenerateMap"> <el-button @click="generateMap" :disabled="!canGenerateMap">
生成导览地图 生成导览地图
</el-button> </el-button>
<el-button @click="saveMap" :disabled="!canSaveMap">
保存
</el-button>
</div> </div>
<div id="amap-container" class="map-container"></div> <div id="amap-container" class="map-container"></div>
@ -29,16 +25,15 @@
<div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div> <div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig'; import globalConfig from '@/utils/config/globalConfig';
import { getArea, putguide } from "@/api/system/area"; import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
export default { export default {
name: "NewPage", name: "NewPage",
data() { data() {
return { return {
map: null, map: null,
@ -49,31 +44,17 @@ export default {
picture: '', picture: '',
buttonStyleActive: 'background-color: #409EFF; color: white;', buttonStyleActive: 'background-color: #409EFF; color: white;',
buttonStyleInactive: 'background-color: #fff; color: #409EFF;', buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
areaLon: null,
areaLat: null,
queryParams: {
pageNum: 1,
pageSize: 10,
parkingName: null,
areaId: null,
type: "2"
},
// 默认区域id
defaultAreaId: "",
isMapGenerated: false,
}; };
}, },
computed: { computed: {
canGenerateMap() { canGenerateMap() {
return this.picture && this.topRightCoord && this.bottomLeftCoord; return this.picture && this.topRightCoord && this.bottomLeftCoord;
},
canSaveMap() {
return this.isMapGenerated;
} }
}, },
created() { created() {
const areaId = this.$route.params && this.$route.params.areaId; const areaId = this.$route.params && this.$route.params.areaId;
this.getArea(areaId); this.getArea(areaId);
// this.getAreaList();
}, },
mounted() { mounted() {
this.initMap(); this.initMap();
@ -86,6 +67,7 @@ export default {
this.areaLon = response.data.longitude; this.areaLon = response.data.longitude;
this.areaLat = response.data.latitude; this.areaLat = response.data.latitude;
this.defaultAreaId = response.data.areaId; this.defaultAreaId = response.data.areaId;
this.getList();
}); });
}, },
initMap() { initMap() {
@ -102,7 +84,6 @@ export default {
this.map = new AMap.Map("amap-container", { this.map = new AMap.Map("amap-container", {
viewMode: "3D", viewMode: "3D",
zoom: 13, zoom: 13,
center: [this.areaLon, this.areaLat], // 初始化地图中心点位置
}); });
this.map.setFitView(); this.map.setFitView();
this.map.on('click', this.handleMapClick); this.map.on('click', this.handleMapClick);
@ -112,49 +93,33 @@ export default {
}, },
setClickType(type) { setClickType(type) {
this.clickType = type; this.clickType = type;
// 清除相应的坐标和标记
if (type === 'topRight' && this.topRightCoord) {
this.clearMarker('topRight');
this.topRightCoord = null;
} else if (type === 'bottomLeft' && this.bottomLeftCoord) {
this.clearMarker('bottomLeft');
this.bottomLeftCoord = null;
}
}, },
handleMapClick(event) { handleMapClick(event) {
const lnglat = event.lnglat; const lnglat = event.lnglat;
// 只有在点击了“右上角坐标”或“左下角坐标”按钮后才能添加标记
if (this.clickType === 'topRight') { if (this.clickType === 'topRight') {
this.topRightCoord = lnglat; this.topRightCoord = lnglat;
this.addMarker(lnglat, 'topRight');
} else if (this.clickType === 'bottomLeft') { } else if (this.clickType === 'bottomLeft') {
this.bottomLeftCoord = lnglat; this.bottomLeftCoord = lnglat;
this.addMarker(lnglat, 'bottomLeft');
} }
// 清除点击类型 // 创建标记
this.clickType = null;
},
addMarker(lnglat, type) {
// 清除之前的标记
this.clearMarker(type);
// 创建新标记
const marker = new AMap.Marker({ const marker = new AMap.Marker({
position: lnglat, position: lnglat,
}); });
this.map.add(marker); this.map.add(marker);
this.markers.push({ marker, type }); this.markers.push(marker);
// 清除点击类型
this.clickType = null;
}, },
clearMarker(type) { clearMarkers() {
this.markers = this.markers.filter(({ marker, type: markerType }) => { this.markers.forEach(marker => {
if (markerType === type) {
this.map.remove(marker); this.map.remove(marker);
return false;
}
return true;
}); });
this.markers = [];
this.topRightCoord = null;
this.bottomLeftCoord = null;
}, },
generateMap() { generateMap() {
if (!this.canGenerateMap) { if (!this.canGenerateMap) {
@ -171,20 +136,14 @@ export default {
const topRight = lnglatToFixed(this.topRightCoord); const topRight = lnglatToFixed(this.topRightCoord);
const bottomLeft = lnglatToFixed(this.bottomLeftCoord); const bottomLeft = lnglatToFixed(this.bottomLeftCoord);
console.log('Top Right:', topRight);
console.log('Bottom Left:', bottomLeft);
// 计算边界 // 计算边界
const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]); const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);
console.log('Bounds:', bounds);
// 创建图片图层 // 创建图片图层
const imageLayer = new AMap.ImageLayer({ const imageLayer = new AMap.ImageLayer({
url: this.picture, url: this.picture,
bounds: bounds, bounds: bounds,
zooms: [15, 20], zooms: [15, 20]
zIndex: 999 // 设置zIndex确保图层在其他图层之上
}); });
// 清除现有图层 // 清除现有图层
@ -196,34 +155,6 @@ export default {
// 添加图片图层 // 添加图片图层
this.map.add(imageLayer); this.map.add(imageLayer);
// 设置地图已生成的标志
this.isMapGenerated = true;
},
saveMap() {
if (!this.canSaveMap) {
this.$message.error('请先生成导览地图');
return;
}
// 格式化坐标为字符串格式，不包含方括号
const formatLngLat = (lnglat) => `${lnglat.lng},${lnglat.lat}`;
// 保存逻辑
const mapData = {
guideMap: this.picture,
upperRight: formatLngLat(this.topRightCoord),
lowerLeft: formatLngLat(this.bottomLeftCoord),
areaId: this.defaultAreaId
};
putguide(mapData).then(response => {
// 处理更新后的响应
});
// 例如，将 mapData 发送到后端保存
console.log('保存地图数据:', mapData);
this.$message.success('地图数据已保存');
} }
}, },
}; };
@ -241,14 +172,11 @@ export default {
} }
.input-card-right { .input-card-right {
position: fixed;
top: 100px;
left: 230px;
z-index: 100;
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: flex-end; align-items: flex-end;
// justify-content: center;
margin-bottom: 10px; margin-bottom: 10px;
} }

18
src/views/system/device/index.vue
View File

@ -1,16 +1,13 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'"> <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'">
<el-select v-model="queryParams.deptId" placeholder="请选择运营商" clearable :popper-append-to-body="false"> <el-select v-model="queryParams.deptId" placeholder="请选择运营商" clearable>
<el-option <el-option
v-for="item in deptOptions" v-for="item in deptOptions"
:key="item.deptId" :key="item.deptId"
:label="item.deptName" :label="item.deptName"
:value="item.deptId" :value="item.deptId"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -1074,18 +1071,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss"> <style>
.el-select {
.el-input__inner{
color: red;
}
}
.el-input{
.el-input__inner{
color: red;
}
}
.nav-container { .nav-container {
display: flex; display: flex;
justify-content: center; justify-content: center;

13
src/views/system/flow/index.vue
View File

@ -368,16 +368,3 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" >
.el-select {
.el-input__inner{
color: red;
}
}
.el-input{
.el-input__inner{
color: red;
}
}
</style>

318
src/views/system/map/index.vue
View File

@ -36,10 +36,14 @@
</div> </div>
</div> </div>
<div class="area-options" v-if="userName == 'admin'"> <div class="area-options" v-if="userName == 'admin'">
<span>切换运营区</span> <span >切换运营区</span>
<el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange"> <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange">
<el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName" <el-option
:value="item.areaId"></el-option> v-for="item in areaOptions"
:key="item.areaId"
:label="item.areaName"
:value="item.areaId"
></el-option>
</el-select> </el-select>
</div> </div>
<div class="input-card"> <div class="input-card">
@ -58,12 +62,15 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item> <el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item>
<el-form-item label="剩余电量：">{{ form.remainingPower }}%</el-form-item> <el-form-item label="剩余电量：" >{{ form.remainingPower }}%</el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="二维码："> <el-form-item label="二维码：">
<template> <template>
<el-popover placement="top" width="180" trigger="hover"> <el-popover
placement="top"
width="180"
trigger="hover">
<div class="qr-code-box"> <div class="qr-code-box">
<qr-code :text="form.qrText" :width="150" :height="150" /> <qr-code :text="form.qrText" :width="150" :height="150" />
</div> </div>
@ -71,25 +78,23 @@
</el-popover> </el-popover>
</template> </template>
</el-form-item> </el-form-item>
<el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' <el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' }}</el-form-item>
}}</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<div class="nav-container"> <div class="nav-container">
<el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" <el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" @select="handleSelect">
@select="handleSelect"> <el-menu-item index="1" >使用记录</el-menu-item>
<el-menu-item index="1">使用记录</el-menu-item> <el-menu-item index="2" >维修记录</el-menu-item>
<el-menu-item index="2">维修记录</el-menu-item> <el-menu-item index="3" >换电记录</el-menu-item>
<el-menu-item index="3">换电记录</el-menu-item>
</el-menu> </el-menu>
<div class="line"></div> <div class="line"></div>
</div> </div>
</el-row> </el-row>
<el-row> <el-row>
<order-record v-show="activeIndex == '1'" :sn="form.sn" /> <order-record v-show="activeIndex == '1'" :sn="form.sn"/>
<repair-record v-show="activeIndex == '2'" :sn="form.sn" /> <repair-record v-show="activeIndex == '2'" :sn="form.sn"/>
<replacement-record v-show="activeIndex == '3'" :sn="form.sn" /> <replacement-record v-show="activeIndex == '3'" :sn="form.sn"/>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -100,46 +105,46 @@
</template> </template>
<script> <script>
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from "@/utils/config/globalConfig"; import globalConfig from "@/utils/config/globalConfig";
import { getDevice, listDevice } from '@/api/system/device' import { getDevice, listDevice } from '@/api/system/device'
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area' import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
import { listParking } from '@/api/system/parking' import { listParking } from '@/api/system/parking'
import LocationMap from '@/components/Map/location/LocationMap' import LocationMap from '@/components/Map/location/LocationMap'
import OrderRecord from '@/views/system/device/components/orderRecord' import OrderRecord from '@/views/system/device/components/orderRecord'
import RepairRecord from '@/views/system/device/components/repairRecord' import RepairRecord from '@/views/system/device/components/repairRecord'
import ReplacementRecord from '@/views/system/device/components/replacementRecord' import ReplacementRecord from '@/views/system/device/components/replacementRecord'
import QrCode from '@/components/QrCode' import QrCode from '@/components/QrCode'
function formarStatus(status, onlineStatus) { function formarStatus(status,onlineStatus) {
if (onlineStatus == "0") { if(onlineStatus == "0"){
if (status == "3") { if(status == "3"){
return globalConfig.icon.redyellow; return globalConfig.icon.redyellow;
} else if (status == "4") { }else if(status == "4"){
return globalConfig.icon.orangered; return globalConfig.icon.orangered;
} }
return globalConfig.icon.red; return globalConfig.icon.red;
} else { }else{
if (status == "0") { if(status == "0"){
return globalConfig.icon.gray; return globalConfig.icon.gray;
} else if (status == "1") { }else if(status == "1"){
return globalConfig.icon.blue; return globalConfig.icon.blue;
} else if (status == "2") { }else if(status == "2"){
return globalConfig.icon.green; return globalConfig.icon.green;
} else if (status == "3") { }else if(status == "3"){
return globalConfig.icon.yellow; return globalConfig.icon.yellow;
} else if (status == "4") { }else if(status == "4"){
return globalConfig.icon.orange; return globalConfig.icon.orange;
} else if (status == "8") { }else if(status == "8"){
return globalConfig.icon.gray; return globalConfig.icon.gray;
} else if (status == "9") { }else if(status == "9"){
return globalConfig.icon.gray; return globalConfig.icon.gray;
} }
} }
} }
export default { export default {
name: "map-view", name: "map-view",
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap }, components: { OrderRecord, RepairRecord, ReplacementRecord,QrCode,LocationMap },
data() { data() {
return { return {
AMap: null, AMap: null,
@ -152,7 +157,7 @@ export default {
userName: undefined, userName: undefined,
lon: null, lon: null,
lat: null, lat: null,
area: null, area:null,
ids: null, ids: null,
showDialog: null, showDialog: null,
icons: globalConfig.icon, icons: globalConfig.icon,
@ -179,7 +184,7 @@ export default {
} }
}, },
mounted() { mounted() {
console.log("当前用户信息：", this.$store.state.user.name) console.log("当前用户信息：",this.$store.state.user.name)
this.userName = this.$store.state.user.name; this.userName = this.$store.state.user.name;
this.getAreaList(this.areaId); this.getAreaList(this.areaId);
this.getAreaOptions(); this.getAreaOptions();
@ -230,14 +235,14 @@ export default {
console.log(key, keyPath); console.log(key, keyPath);
}, },
showMarkers() { showMarkers() {
if (this.show) { if(this.show){
// this.markers.forEach(marker => { // this.markers.forEach(marker => {
// marker.show(); // marker.show();
// }); // });
this.labels.forEach(label => { this.labels.forEach(label => {
label.show(); label.show();
}); });
} else { }else{
// this.markers.forEach(marker => { // this.markers.forEach(marker => {
// marker.hide(); // marker.hide();
// }); // });
@ -251,8 +256,8 @@ export default {
element.style.visibility = this.show ? 'hidden' : 'visible'; element.style.visibility = this.show ? 'hidden' : 'visible';
}); });
}, },
async getAreaList(areaId) { async getAreaList(areaId){
listArea({ areaId: areaId }).then(response => { listArea({areaId: areaId}).then(response => {
this.areaList = response.rows; this.areaList = response.rows;
if (this.areaList.length > 0) { // 确保数组不为空 if (this.areaList.length > 0) { // 确保数组不为空
const firstArea = this.areaList[0]; // 获取第一个元素 const firstArea = this.areaList[0]; // 获取第一个元素
@ -260,8 +265,8 @@ export default {
console.log('第一个区域的信息:', firstArea); console.log('第一个区域的信息:', firstArea);
this.lon = firstArea.longitude; this.lon = firstArea.longitude;
this.lat = firstArea.latitude; this.lat = firstArea.latitude;
console.log("area=============" + JSON.stringify(this.area)) console.log("area============="+JSON.stringify(this.area))
listParking({ areaId: this.area.areaId }).then(response => { listParking({areaId: this.area.areaId}).then(response => {
let list = response.rows; let list = response.rows;
list.forEach(item => { list.forEach(item => {
if (item.type === '1') { if (item.type === '1') {
@ -272,17 +277,17 @@ export default {
this.noridingList.push(item); this.noridingList.push(item);
} }
}); });
console.log("parkingList=============" + JSON.stringify(this.parkingList)); console.log("parkingList============="+JSON.stringify(this.parkingList));
console.log("noParkingList=============" + JSON.stringify(this.noParkingList)); console.log("noParkingList============="+JSON.stringify(this.noParkingList));
console.log("noriding=============" + JSON.stringify(this.noridingList)); console.log("noriding============="+JSON.stringify(this.noridingList));
this.initAMap(); this.initAMap();
}); });
} else { }else{
console.log('区域列表为空'); console.log('区域列表为空');
} }
}); });
}, },
changeMapStyle() { changeMapStyle(){
// 创建一个默认的图层组件 // 创建一个默认的图层组件
let defaultLayer = new AMap.TileLayer(); let defaultLayer = new AMap.TileLayer();
// 创建一个卫星图图层组件 // 创建一个卫星图图层组件
@ -293,18 +298,18 @@ export default {
// 获取当前地图显示的图层 // 获取当前地图显示的图层
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置 let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
// 切换图层 // 切换图层
if (this.type == 'default') { if(this.type=='default'){
console.log(1111111) console.log(1111111)
//获取地图图层数据 //获取地图图层数据
this.map.setLayers([defaultLayer]); // 切换回默认图层 this.map.setLayers([defaultLayer]); // 切换回默认图层
this.type = 'Satellite'; this.type = 'Satellite';
} else { }else{
console.log(222222) console.log(222222)
this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层 this.map.setLayers([satelliteLayer,roadNetLayer]); // 切换到卫星图图层
this.type = 'default'; this.type = 'default';
} }
}, },
setFitView() { setFitView(){
this.map.setFitView(null, false, [150, 60, 100, 60]); this.map.setFitView(null, false, [150, 60, 100, 60]);
}, },
initAMap() { initAMap() {
@ -316,14 +321,14 @@ export default {
// 设置地图容器id // 设置地图容器id
viewMode: "3D", // 是否为3D地图模式 viewMode: "3D", // 是否为3D地图模式
zoom: 13, // 初始化地图级别 zoom: 13, // 初始化地图级别
center: [this.lon, this.lat], //初始化地图中心点位置 center: [this.lon,this.lat], //初始化地图中心点位置
}); });
// 创建信息窗体 // 创建信息窗体
this.infoWindow = new AMap.InfoWindow({ this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30) offset: new AMap.Pixel(0, -30)
}); });
//设备点标记 //设备点标记
console.log("this.areaId=============" + this.areaId) console.log("this.areaId============="+this.areaId)
this.deviceMarker(this.areaId); this.deviceMarker(this.areaId);
//运营区边界 //运营区边界
this.areaList.forEach(area => { this.areaList.forEach(area => {
@ -331,18 +336,18 @@ export default {
}); });
//停车区 //停车区
this.parkingList.forEach(parking => { this.parkingList.forEach(parking => {
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude); 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.addMarker2(parking,"https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh",parking.parkingName,"#1890ff");
}); });
//禁停区 //禁停区
this.noParkingList.forEach(noparking => { this.noParkingList.forEach(noparking => {
this.addNoParking(JSON.parse(noparking.boundaryStr) || []); this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444"); this.addMarker2(noparking,"https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab",noparking.parkingName,"#ff4444");
}); });
//禁行区 //禁行区
this.noridingList.forEach(noriding => { this.noridingList.forEach(noriding => {
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude); this.addNoriding(JSON.parse(noriding.boundaryStr) || [],noriding.parkingName,noriding.longitude,noriding.latitude);
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00"); this.addMarker2(noriding,"https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2",noriding.parkingName,"#ffcc00");
}); });
// setTimeout(() => { // setTimeout(() => {
// this.setFitView(); // this.setFitView();
@ -355,14 +360,14 @@ export default {
freshMarker(points) { freshMarker(points) {
let that = this; let that = this;
console.log("刷新点标记====", points) console.log("刷新点标记====",points)
// 检查 points 数据格式 // 检查 points 数据格式
if (!Array.isArray(points)) { if (!Array.isArray(points)) {
console.error("Points data is not an array"); console.error("Points data is not an array");
return; return;
} }
console.log("this.cluster=======", this.cluster) console.log("this.cluster=======",this.cluster)
// 聚合对象存在，则修改数据 // 聚合对象存在，则修改数据
if (this.cluster) { if (this.cluster) {
@ -394,54 +399,37 @@ export default {
}, },
// 点击聚合对象事件 // 点击聚合对象事件
onClickCluster(e) { onClickCluster(e) {
console.log("点击聚合点====", e) console.log("点击聚合点====",e)
this.onDeviceList = e.clusterData.map(item => item); this.onDeviceList = e.clusterData.map(item => item);
// 如果数量 > 1，则打开列表页 // 如果数量 > 1，则打开列表页
if (this.onDeviceList.length > 1) { if (this.onDeviceList.length > 1) {
console.log("打开列表====", this.onDeviceList) console.log("打开列表====",this.onDeviceList)
let content = this.generateInfoContent(this.onDeviceList); let content = this.generateInfoContent(this.onDeviceList);
this.infoWindow.setContent(content); this.infoWindow.setContent(content);
this.infoWindow.open(this.map, e.lnglat); this.infoWindow.open(this.map, e.lnglat);
} }
}, },
generateInfoContent(data) { generateInfoContent(data) {
let content = `<div style="max-hight: 500px; overflow-y: auto;"> let content = `<div><table class="info-table">
<table class="info-table">
<thead> <thead>
<tr> <tr>
<th>SN</th> <th>SN</th>
<th>车牌号</th> <th>车牌号</th>
<th>状态</th> <th>状态</th>
<th>操作</th> <th>操作</th>
<th>SN</th>
<th>车牌号</th>
<th>状态</th>
<th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody>`; <tbody>`;
data.forEach(item => {
for (let i = 0; i < data.length; i += 2) { content += `<tr>
content += `<tr>`; <td>${item.sn}</td>
content += generateRowContent(data[i]);
if (i + 1 < data.length) {
content += generateRowContent(data[i + 1]);
} else {
content += `<td colspan="4"></td>`;
}
content += `</tr>`;
}
content += `</tbody>
</table></div>`;
function generateRowContent(item) {
return `<td>${item.sn}</td>
<td>${item.vehicleNum}</td> <td>${item.vehicleNum}</td>
<td>${formatVehicleStatus(item.status)}</td> <td>${formatVehicleStatus(item.status)}</td>
<td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>`; <td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>
} </tr>`;
});
content += `</tbody>
</table></div>`;
function formatVehicleStatus(status) { function formatVehicleStatus(status) {
switch (status) { switch (status) {
case '7': case '7':
@ -464,12 +452,10 @@ export default {
return '未知状态'; return '未知状态';
} }
} }
return content; return content;
}, },
handleInfoWindowClick(event) { handleInfoWindowClick(event) {
console.log("点击详情按钮====", event) console.log("点击详情按钮====",event)
const button = event.target.closest('.detail-btn'); const button = event.target.closest('.detail-btn');
if (button) { if (button) {
const deviceId = button.getAttribute('data-device-id'); const deviceId = button.getAttribute('data-device-id');
@ -482,7 +468,7 @@ export default {
let content = ` let content = `
<div class="apiary-marker"> <div class="apiary-marker">
<div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div> <div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
<image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/> <image class="apiary-marker-img" src='${formarStatus(device.status,device.onlineStatus)}'/>
</div> </div>
` `
context.marker.setContent(content); context.marker.setContent(content);
@ -490,7 +476,7 @@ export default {
}, },
// 点击非聚合点事件 // 点击非聚合点事件
onClickMarker(deviceId) { onClickMarker(deviceId) {
console.log("点击非聚合点====", deviceId) console.log("点击非聚合点====",deviceId)
getDevice(deviceId).then(response => { getDevice(deviceId).then(response => {
this.open2 = true; this.open2 = true;
this.form = response.data; this.form = response.data;
@ -499,7 +485,7 @@ export default {
}); });
}, },
openDetail(deviceId) { openDetail(deviceId) {
console.log("点击非聚合点====", deviceId) console.log("点击非聚合点====",deviceId)
getDevice(deviceId).then(response => { getDevice(deviceId).then(response => {
this.open2 = true; this.open2 = true;
this.form = response.data; this.form = response.data;
@ -546,7 +532,7 @@ export default {
}, },
] ]
}, },
addMarker2(parking, icon, title, color) { addMarker2(parking, icon,title,color) {
let marker = new AMap.Marker({ let marker = new AMap.Marker({
map: this.map, map: this.map,
icon: new AMap.Icon({ icon: new AMap.Icon({
@ -581,9 +567,9 @@ export default {
// console.log("text=============",text) // console.log("text=============",text)
this.labels.push(text) this.labels.push(text)
}, },
deviceMarker(areaId) { deviceMarker(areaId){
this.data = []; this.data = [];
listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => { listDevice({pageNum: 1,pageSize: 999,areaId:areaId}).then(response => {
this.deviceList = response.rows; this.deviceList = response.rows;
this.deviceList.forEach(device => { this.deviceList.forEach(device => {
// 检查经纬度是否为空且为有效数字 // 检查经纬度是否为空且为有效数字
@ -608,7 +594,7 @@ export default {
console.error('获取设备列表失败:', error); console.error('获取设备列表失败:', error);
}); });
}, },
addMarker(lng, lat, status, onlineStatus, title) { addMarker(lng, lat, status, onlineStatus,title) {
@ -640,7 +626,7 @@ export default {
// }) // })
this.map.add(polygon); this.map.add(polygon);
}, },
addParking(data, title, lon, lat) { addParking(data,title,lon,lat) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
path: data, path: data,
fillColor: '#ccebc5', fillColor: '#ccebc5',
@ -690,7 +676,7 @@ export default {
}); });
this.map.add(polygon); this.map.add(polygon);
}, },
addNoriding(data, title, lon, lat) { addNoriding(data,title,lon,lat) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
path: data, path: data,
fillColor: '#ccebc5', fillColor: '#ccebc5',
@ -716,50 +702,14 @@ export default {
this.map.add(polygon); this.map.add(polygon);
} }
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#container { #container {
width: 100%; width: 100%;
height: 850px; height: 850px;
} }
.info-table { .container {
width: 100%;
border-collapse: collapse;
}
.info-table th,
.info-table td {
border: 1px solid #ddd;
padding: 8px;
}
.info-table thead {
background-color: #f4f4f4;
}
.info-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
.info-table tbody tr:hover {
background-color: #f1f1f1;
}
/* Scrollbar styles for WebKit browsers (Chrome, Safari) */
.info-table::-webkit-scrollbar {
width: 8px;
}
.info-table::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
.info-table::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.container {
position: relative; position: relative;
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);
@ -768,24 +718,19 @@ export default {
bottom: 15px; bottom: 15px;
right: 15px; right: 15px;
} }
} }
.tips{
.tips {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
.tip-item { .tip-item {
display: flex; display: flex;
align-items: center; align-items: center; /* 垂直居中 */
/* 垂直居中 */ margin-bottom: 10px; /* 可以根据需要调整间距 */
margin-bottom: 10px;
/* 可以根据需要调整间距 */
color: #38383b; color: #38383b;
.span-class{
.span-class {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
padding: 3px 5px; padding: 3px 5px;
border-radius: 5px; border-radius: 5px;
@ -793,47 +738,40 @@ export default {
font-size: 13px; font-size: 13px;
} }
} }
img{
img {
width: 25px; width: 25px;
padding-top: 5px; padding-top: 5px;
height: auto; height: auto; /* 保持图片高度自适应 */
/* 保持图片高度自适应 */ margin-right: 10px; /* 图片与文字间距，根据需要调整 */
margin-right: 10px;
/* 图片与文字间距，根据需要调整 */
} }
} }
.area-options{
.area-options {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; right: 15px;
span{
span {
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 10px; padding-right: 10px;
font-size: 13px; font-size: 13px;
color: #535353; color: #535353;
} }
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.apiary-marker { .apiary-marker{
position: relative; position: relative;
top: -19px; top: -19px;
left: -19px; left: -19px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.apiary-marker-img{
.apiary-marker-img {
width: 25px; width: 25px;
} }
.apiary-marker-name{
.apiary-marker-name {
background-color: #1890ff; background-color: #1890ff;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@ -841,9 +779,8 @@ export default {
font-size: 12px; font-size: 12px;
padding: 5px; padding: 5px;
} }
} }
.detail-btn {
.detail-btn {
background: none; background: none;
border: none; border: none;
color: #007bff; color: #007bff;
@ -851,35 +788,36 @@ export default {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
padding: 0; padding: 0;
} }
.detail-btn:hover { .detail-btn:hover {
color: #0056b3; color: #0056b3;
} }
.info-table { .info-table {
border: 1px solid #ccc; border: 1px solid #ccc;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
} }
.info-table th, .info-table th,
.info-table td { .info-table td {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 8px; padding: 8px;
} }
.info-table th { .info-table th {
background-color: #f4f4f4; background-color: #f4f4f4;
} }
.amap-info-content { .amap-info-content{
padding: 10px 25px 10px 10px !important; padding: 10px 25px 10px 10px !important;
} }
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
</style> </style>

13
src/views/system/repair/index.vue
View File

@ -313,16 +313,3 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" >
.el-select {
.el-input__inner{
color: red;
}
}
.el-input{
.el-input__inner{
color: red;
}
}
</style>

14
src/views/system/withdraw/index.vue
View File

@ -518,19 +518,7 @@ export default {
} }
}; };
</script> </script>
<style>
<style lang="scss">
.el-select {
.el-input__inner{
color: red;
}
}
.el-input{
.el-input__inner{
color: red;
}
}
.amoun-tips{ .amoun-tips{
color: red; color: red;
font-size: 12px; font-size: 12px;

13
src/views/system/withdrawAudit/index.vue
View File

@ -490,18 +490,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss"> <style>
.el-select {
.el-input__inner{
color: red;
}
}
.el-input{
.el-input__inner{
color: red;
}
}
.amoun-tips{ .amoun-tips{
color: red; color: red;
font-size: 12px; font-size: 12px;