修改首页和危废车辆的弹窗展示内容，去掉列表和详情只留下轨迹页面
This commit is contained in:
978184212@qq.com
parent
cf960f82b2
commit
5e63145598
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
|
|
@ -1,183 +1,5 @@
|
|||
<template>
|
||||
<div class="yqgkcCon nynj">
|
||||
<!-- 智慧农机列表 -->
|
||||
<el-dialog
|
||||
custom-class="table_dialog"
|
||||
top="85px"
|
||||
:show-close="false"
|
||||
width="100%"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
:visible.sync="tableDialogVisible"
|
||||
>
|
||||
<div class="inner_width" style="background: #0B2536;overflow:hidden;height:106%;">
|
||||
<img class="inner-img-w" src="@/assets/image/big_background.png" alt="">
|
||||
<div class="content-box" style="margin-top:10px;">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<el-select class="selopt" v-model="searchParams.vehicleName" placeholder="请选择车辆" clearable>
|
||||
<el-option
|
||||
v-for="item in allRecords"
|
||||
:key="item.id"
|
||||
:label="item.veNotes || item.vePlate"
|
||||
:value="item.veNotes || item.vePlate">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-input class="selopt" v-model="searchParams.driverName" placeholder="请输入司机姓名" clearable></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="sousuocov" @click="searchData">
|
||||
<img style="width: 16px;height:18px;margin-top:10px;" src="@/assets/image/zhnjshow/query.png" alt="">
|
||||
<span>查询</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :offset="13" :span="2">
|
||||
<div style="height: 36px;width:88px;display: flex;align-items: center;justify-content: center;cursor: pointer;" @click="close">
|
||||
<div class="banrutimg">
|
||||
<span>返回</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="allRecords.length > 0" style="color: #01fffa;font-size: 13px;margin: 10px 0;padding: 8px 15px;background: rgba(0,0,0,0.4);border-radius: 4px;border: 1px solid rgba(12,202,255,0.2);">
|
||||
<div style="display: flex;flex-wrap: wrap;gap: 15px;">
|
||||
<span><span style="color: #fff;">车辆总数：</span><span style="color: #FFD700;font-weight: bold;">{{ allRecords.length }}</span></span>
|
||||
<span><span style="color: #fff;">当前页：</span><span style="color: #4a8ba8;">{{ pagination.pageNo }}</span></span>
|
||||
<span><span style="color: #fff;">每页显示：</span><span style="color: #4a8ba8;">{{ pagination.pageSize }} 条</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="background: none;margin-top: 10px;width:100%;"
|
||||
:header-row-style="rowstyle"
|
||||
:row-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column type="index" width="50" label="序号" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ (pagination.pageNo - 1) * pagination.pageSize + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="veNotes" label="车辆名称" align="center" min-width="120"></el-table-column>
|
||||
<el-table-column property="veDriver" label="司机姓名" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ formatName(scope.row.veDriver) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="veBrand" label="车辆品牌" align="center" min-width="100"></el-table-column>
|
||||
<el-table-column property="veModel" label="车辆型号" align="center" min-width="100"></el-table-column>
|
||||
<el-table-column property="vePlate" label="车牌号" align="center" min-width="120"></el-table-column>
|
||||
<el-table-column property="vePhone" label="联系方式" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatPhone(scope.row.vePhone) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="gpsId" label="GPS设备ID" align="center" min-width="120"></el-table-column>
|
||||
<el-table-column property="date" label="操作" width="120" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="njjkshow(scope.row)">
|
||||
<img style="width: 16px;height:16px;" src="@/assets/image/zhnjshow/look.png" alt="">
|
||||
查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pagination.pageNo"
|
||||
:page-size="pagination.pageSize"
|
||||
:page-sizes="[8, 16, 24, 32]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="allRecords.length"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 车辆详情弹窗 -->
|
||||
<el-dialog
|
||||
custom-class="table_dialog"
|
||||
top="85px"
|
||||
:show-close="false"
|
||||
width="100%"
|
||||
@close="handleModalClick"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
:visible.sync="detailDialogVisible"
|
||||
>
|
||||
<div class="inner_width" style="overflow:hidden;height:106%;">
|
||||
<img class="inner-img-w" src="@/assets/image/big_background.png" alt="">
|
||||
<div class="content-box">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="njxqBat">
|
||||
<span class="yxjlname">{{ currentRow.veNotes || '车辆' }}详情</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :offset="16" :span="2">
|
||||
<div style="height: 40px;display: flex;align-items: center;justify-content: center;cursor: pointer;" @click.stop="goBackToList">
|
||||
<div class="banrutimg">
|
||||
<span>返回</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="njxxtab">
|
||||
<img style="width: 22px;height:18px;display:inline-block;margin-top:6px;" src="@/assets/image/zhnjshow/tractor.png" alt="">
|
||||
车辆信息
|
||||
</div>
|
||||
<div class="nnjxxCov">
|
||||
<span class="njname">车辆名称： <span>{{currentRow.veNotes || '--'}}</span> </span>
|
||||
<span class="njname">司机姓名： <span>{{formatName(currentRow.veDriver)}}</span> </span>
|
||||
<span class="njname">车牌号： <span>{{currentRow.vePlate || '--'}}</span> </span>
|
||||
<span class="njname">车辆品牌： <span>{{currentRow.veBrand || '--'}}</span> </span>
|
||||
<span class="njname">车辆型号： <span>{{currentRow.veModel || '--'}}</span> </span>
|
||||
<span class="njname">联系方式： <span>{{formatPhone(currentRow.vePhone)}}</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="grid-content bg-purple djcknj" @click="lookTrajectoryFromDetail(currentRow)">
|
||||
<img src="@/assets/image/zhnjshow/big_tractor.png" alt="" class="tranjiconctor">
|
||||
<span class="djcknjname">查看轨迹</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<div class="grid-content bg-purple njvideo">
|
||||
<img src="@/assets/image/zhnjshow/lizi.gif" alt="" class="lizidong">
|
||||
<img src="@/assets/image/zhnjshow/zlc.png" alt="" class="zlcpng">
|
||||
<img src="@/assets/image/zhnjshow/samll_tractor.png" alt="" class="samlltractor">
|
||||
<div class="zonglc">
|
||||
<span class="namezlc">车辆状态：</span>
|
||||
<span class="numZlc" style="color: #00ff00;">在线</span>
|
||||
</div>
|
||||
<div class="zong2lc">
|
||||
<span class="namezlc">GPS设备：</span>
|
||||
<span class="numZlc">{{currentRow.gpsId || '--'}}</span>
|
||||
</div>
|
||||
<div class="zong3lc">
|
||||
<span class="namezlc">用途描述：</span>
|
||||
<span class="numZlc" style="font-size: 14px;">{{currentRow.veDes || '--'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 轨迹地图弹窗 -->
|
||||
<el-dialog
|
||||
custom-class="table_dialog"
|
||||
|
|
@ -196,9 +18,9 @@
|
|||
<div class="topdetail">
|
||||
<div class="map_detail_tit">
|
||||
轨迹详情
|
||||
<div style="height: 40px;float:right;cursor: pointer;" @click.stop="goBackToDetail">
|
||||
<div style="height: 40px;float:right;cursor: pointer;" @click.stop="closeMapDialog">
|
||||
<div class="banrutimg">
|
||||
<span>返回</span>
|
||||
<span>关闭</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -243,18 +65,12 @@ import { gpsRecordPage } from '@/api';
|
|||
export default {
|
||||
name: "zhnjCov",
|
||||
props: {
|
||||
// 从父组件接收车辆数据（点击地图标记时传入）
|
||||
vehicleData: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
vehicleList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
vehicleListFull: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
// 控制弹窗显示
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -263,26 +79,9 @@ export default {
|
|||
watch: {
|
||||
vehicleData: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.vehicleInfo = newVal;
|
||||
this.tableDialogVisible = true;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
vehicleList: {
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
vehicleListFull: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.updateTableData(newVal);
|
||||
if (newVal && newVal.gpsId) {
|
||||
// 接收到车辆数据，打开轨迹弹窗
|
||||
this.openTrajectoryDialog(newVal);
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
|
|
@ -290,10 +89,9 @@ export default {
|
|||
},
|
||||
visible: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.tableDialogVisible = true;
|
||||
} else {
|
||||
this.tableDialogVisible = false;
|
||||
if (!newVal) {
|
||||
this.mapDialogVisible = false;
|
||||
this.clearMap();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
|
|
@ -301,42 +99,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
searchParams: {
|
||||
driverName: '',
|
||||
vehicleName: ''
|
||||
},
|
||||
|
||||
pagination: {
|
||||
pageNo: 1,
|
||||
pageSize: 8,
|
||||
total: 0
|
||||
},
|
||||
|
||||
allRecords: [],
|
||||
|
||||
carType: [
|
||||
{ label: '拖拉机', val: '1' },
|
||||
{ label: '收获机', val: '2' },
|
||||
{ label: '植保机', val: '3' },
|
||||
{ label: '无人机', val: '11' },
|
||||
{ label: '插秧机', val: '5' }
|
||||
],
|
||||
workType: [
|
||||
{ label: '深松作业', val: '13' },
|
||||
{ label: '播种作业', val: '15' },
|
||||
{ label: '收获作业', val: '20' },
|
||||
{ label: '植保作业', val: '30' },
|
||||
{ label: '旋耕作业', val: '61' }
|
||||
],
|
||||
|
||||
tableDialogVisible: false,
|
||||
detailDialogVisible: false,
|
||||
mapDialogVisible: false,
|
||||
|
||||
vehicleInfo: null,
|
||||
tableData: [],
|
||||
currentRow: {},
|
||||
|
||||
// 轨迹相关
|
||||
trajectoryPoints: [],
|
||||
trajectoryVehicleName: '',
|
||||
|
|
@ -356,21 +120,29 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 从详情返回到列表
|
||||
goBackToList() {
|
||||
this.detailDialogVisible = false;
|
||||
this.$nextTick(() => {
|
||||
this.tableDialogVisible = true;
|
||||
});
|
||||
// 打开轨迹弹窗
|
||||
openTrajectoryDialog(vehicleInfo) {
|
||||
if (!vehicleInfo.gpsId) {
|
||||
this.$message.warning('该车辆没有GPS设备ID');
|
||||
return;
|
||||
}
|
||||
|
||||
this.trajectoryVehicleName = vehicleInfo.veNotes || vehicleInfo.vehicleName || '车辆';
|
||||
this.trajectoryPlate = vehicleInfo.vePlate || vehicleInfo.plateNumber || '--';
|
||||
this.trajectoryDriver = vehicleInfo.veDriver || vehicleInfo.driverName || '--';
|
||||
this.trajectoryGpsId = vehicleInfo.gpsId;
|
||||
|
||||
// 打开轨迹弹窗
|
||||
this.mapDialogVisible = true;
|
||||
// 获取轨迹数据
|
||||
this.fetchAllTrajectoryData();
|
||||
},
|
||||
|
||||
// 从轨迹返回到详情
|
||||
goBackToDetail() {
|
||||
// 关闭轨迹弹窗
|
||||
closeMapDialog() {
|
||||
this.mapDialogVisible = false;
|
||||
this.clearMap();
|
||||
this.$nextTick(() => {
|
||||
this.detailDialogVisible = true;
|
||||
});
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
// 清除地图
|
||||
|
|
@ -396,33 +168,11 @@ export default {
|
|||
this.playsttus = 0;
|
||||
},
|
||||
|
||||
// 从详情页查看轨迹
|
||||
lookTrajectoryFromDetail(row) {
|
||||
if (!row.gpsId) {
|
||||
this.$message.warning('该车辆没有GPS设备ID');
|
||||
return;
|
||||
}
|
||||
|
||||
this.trajectoryVehicleName = row.veNotes || '车辆';
|
||||
this.trajectoryPlate = row.vePlate || '--';
|
||||
this.trajectoryDriver = row.veDriver || '--';
|
||||
this.trajectoryGpsId = row.gpsId;
|
||||
this.currentRow = { ...row };
|
||||
|
||||
// 关闭详情弹窗，打开轨迹弹窗
|
||||
this.detailDialogVisible = false;
|
||||
this.$nextTick(() => {
|
||||
this.mapDialogVisible = true;
|
||||
// 获取轨迹数据（不分页，获取全部）
|
||||
this.fetchAllTrajectoryData();
|
||||
});
|
||||
},
|
||||
|
||||
// 获取全部轨迹数据（不分页）
|
||||
fetchAllTrajectoryData() {
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: 1000, // 设置一个大值获取全部
|
||||
pageSize: 1000,
|
||||
gpsId: this.trajectoryGpsId
|
||||
};
|
||||
|
||||
|
|
@ -573,13 +323,10 @@ export default {
|
|||
},
|
||||
|
||||
jog() {
|
||||
// 减速：每次减少500ms，最小1000ms
|
||||
// 这里简单处理，实际可以调整速度
|
||||
this.$message.info('减速');
|
||||
},
|
||||
|
||||
fastforward() {
|
||||
// 加速：每次增加500ms
|
||||
this.$message.info('加速');
|
||||
},
|
||||
|
||||
|
|
@ -588,79 +335,6 @@ export default {
|
|||
if (name.length <= 1) return name + '*';
|
||||
if (name.length === 2) return name.charAt(0) + '*';
|
||||
return name.charAt(0) + '*'.repeat(name.length - 1);
|
||||
},
|
||||
|
||||
formatPhone(phone) {
|
||||
if (!phone) return '--';
|
||||
const cleanPhone = phone.replace(/\s/g, '');
|
||||
if (/^\d{11}$/.test(cleanPhone)) {
|
||||
return cleanPhone.substring(0, 3) + '****' + cleanPhone.substring(7);
|
||||
}
|
||||
if (cleanPhone.length > 4) {
|
||||
const visibleStart = Math.min(3, Math.floor(cleanPhone.length / 3));
|
||||
const visibleEnd = Math.min(4, Math.floor(cleanPhone.length / 3));
|
||||
return cleanPhone.substring(0, visibleStart) + '****' + cleanPhone.substring(cleanPhone.length - visibleEnd);
|
||||
}
|
||||
return phone;
|
||||
},
|
||||
|
||||
updateTableData(fullData) {
|
||||
if (fullData && fullData.records) {
|
||||
this.allRecords = fullData.records || [];
|
||||
this.pagination.total = this.allRecords.length;
|
||||
this.pagination.pageNo = 1;
|
||||
this.pagination.pageSize = 8;
|
||||
this.updateCurrentPageData();
|
||||
}
|
||||
},
|
||||
|
||||
updateCurrentPageData() {
|
||||
const start = (this.pagination.pageNo - 1) * this.pagination.pageSize;
|
||||
const end = start + this.pagination.pageSize;
|
||||
this.tableData = this.allRecords.slice(start, end);
|
||||
},
|
||||
|
||||
searchData() {
|
||||
this.$emit('search', this.searchParams);
|
||||
},
|
||||
|
||||
rowstyle() {
|
||||
return {
|
||||
color: '#1C89FF',
|
||||
background: 'none',
|
||||
padding: '15px 0'
|
||||
};
|
||||
},
|
||||
tableRowClassName({ rowIndex }) {
|
||||
return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
|
||||
},
|
||||
close() {
|
||||
this.tableDialogVisible = false;
|
||||
this.detailDialogVisible = false;
|
||||
this.mapDialogVisible = false;
|
||||
this.clearMap();
|
||||
this.$emit('close');
|
||||
},
|
||||
handleModalClick() {
|
||||
this.detailDialogVisible = false;
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.pagination.pageNo = 1;
|
||||
this.updateCurrentPageData();
|
||||
this.$emit('page-change', this.pagination);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.pageNo = val;
|
||||
this.updateCurrentPageData();
|
||||
this.$emit('page-change', this.pagination);
|
||||
},
|
||||
njjkshow(row) {
|
||||
this.currentRow = { ...row };
|
||||
this.tableDialogVisible = false;
|
||||
this.$nextTick(() => {
|
||||
this.detailDialogVisible = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -670,210 +344,9 @@ export default {
|
|||
:deep.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background: #409EFF !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__body tr:hover > td) {
|
||||
background-color: #06111B !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__body tr.hover-row > td) {
|
||||
background-color: #06111B !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__body tr:hover) {
|
||||
background-color: #06111B !important;
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
||||
background-color: #06111B !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.njxxtab {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.djcknj {
|
||||
width: 188px;
|
||||
height: 149px;
|
||||
background: url(@/assets/image/zhnjshow/djcknj.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.djcknj .tranjiconctor {
|
||||
width: 102px;
|
||||
height: 72px;
|
||||
margin-top: 14px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.djcknj .djcknjname {
|
||||
font-size: 16px;
|
||||
color: #01fffa;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.njvideo {
|
||||
width: 509px;
|
||||
height: 172px;
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -30px;
|
||||
}
|
||||
.njvideo .lizidong {
|
||||
width: 509px;
|
||||
height: 172px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
mix-blend-mode: color-dodge;
|
||||
}
|
||||
.njvideo .zlcpng {
|
||||
width: 509px;
|
||||
height: 172px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.njvideo .samlltractor {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
right: 220px;
|
||||
z-index: 3;
|
||||
}
|
||||
.njvideo .zonglc {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 160px;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
}
|
||||
.njvideo .zonglc .namezlc {
|
||||
font-size: 16px;
|
||||
color: #01fffa;
|
||||
display: block;
|
||||
}
|
||||
.njvideo .zonglc .numZlc {
|
||||
font-size: 16px;
|
||||
font-family: "UnidreamLED";
|
||||
color: #fff;
|
||||
}
|
||||
.njvideo .zonglc .numZlc span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.njvideo .zong2lc {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: -50px;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
}
|
||||
.njvideo .zong2lc .namezlc {
|
||||
font-size: 16px;
|
||||
color: #01fffa;
|
||||
display: block;
|
||||
}
|
||||
.njvideo .zong2lc .numZlc {
|
||||
font-size: 16px;
|
||||
font-family: "UnidreamLED";
|
||||
color: #fff;
|
||||
}
|
||||
.njvideo .zong2lc .numZlc span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.njvideo .zong3lc {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0px;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
}
|
||||
.njvideo .zong3lc .namezlc {
|
||||
font-size: 16px;
|
||||
color: #01fffa;
|
||||
display: block;
|
||||
}
|
||||
.njvideo .zong3lc .numZlc {
|
||||
font-size: 16px;
|
||||
font-family: "UnidreamLED";
|
||||
color: #fff;
|
||||
}
|
||||
.njvideo .zong3lc .numZlc span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.nnjxxCov {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nnjxxCov .njname {
|
||||
font-size: 14px;
|
||||
color: #01fffa;
|
||||
width: 32%;
|
||||
}
|
||||
.nnjxxCov .njname span {
|
||||
color: #fff;
|
||||
}
|
||||
.njxqBat {
|
||||
width: 184px;
|
||||
height: 54px;
|
||||
line-height: 40px;
|
||||
background: url(@/assets/image/zhnjshow/biaoti.png) no-repeat;
|
||||
float: left;
|
||||
}
|
||||
.njxqBat .yxjlname {
|
||||
color: #01fffa;
|
||||
padding-left: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-select .el-input__inner {
|
||||
color: blue;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: #01fffa;
|
||||
}
|
||||
.inner_width .has-gutter tr {
|
||||
background-color: none !important;
|
||||
box-shadow: inset 0 0 30px rgba(12, 202, 255, 0.90) !important;
|
||||
color: #01fffa !important;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background: #06111B !important;
|
||||
}
|
||||
.el-table td,
|
||||
.el-table th.is-leaf {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.table_dialog .el-table tr {
|
||||
color: #fff;
|
||||
}
|
||||
.even-row {
|
||||
background-color: #0A344C !important;
|
||||
}
|
||||
.odd-row {
|
||||
background-color: #0D5072 !important;
|
||||
}
|
||||
.table_dialog {
|
||||
width: 100%;
|
||||
height: calc(100vh - 122px);
|
||||
|
|
@ -901,48 +374,6 @@ export default {
|
|||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table_dialog .inner_width .content-box .selopt {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #06a3ce;
|
||||
box-shadow: inset 0 0 20px rgba(12, 202, 255, 0.90);
|
||||
}
|
||||
.table_dialog .inner_width .content-box .sousuocov {
|
||||
width: 118px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #06a3ce;
|
||||
box-shadow: inset 0 0 20px rgba(12, 202, 255, 0.90);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.table_dialog .inner_width .content-box .banrutimg {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background: url(@/assets/image/zhnj/backreturn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.table_dialog .inner_width .content-box .banrutimg span {
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.table_dialog .inner_width .content-box .banrutimg:hover {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background: url(@/assets/image/zhnj/backreturnhover.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.table_dialog .inner_width .bottom-box {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
|
@ -1101,10 +532,33 @@ export default {
|
|||
}
|
||||
.mapparent {
|
||||
width: 98%;
|
||||
height: 400px;
|
||||
height: 800px;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
background: #0a2a3a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.banrutimg {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background: url(@/assets/image/zhnj/backreturn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.banrutimg span {
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.banrutimg:hover {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background: url(@/assets/image/zhnj/backreturnhover.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -194,10 +194,14 @@
|
|||
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
|
||||
<span class="scdlist_tit">长期定位监测站</span>
|
||||
</div>
|
||||
<div class="scdlist" @click="switchIcon('soil')">
|
||||
<div class="scdlist" @click="switchIcon('flowmeter')">
|
||||
<img src="@/assets/image/liuliang.png" class="xcdimg" alt="">
|
||||
<span class="scdlist_tit">微功率雷达监测</span>
|
||||
</div>
|
||||
<div class="scdlist" @click="switchIcon('vehicle')">
|
||||
<img src="@/assets/image/vehicle.png" class="xcdimg" alt="">
|
||||
<span class="scdlist_tit">危废车辆信息</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition enter-active-class="animate__animated animate__backInUp"
|
||||
|
|
@ -428,43 +432,53 @@
|
|||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 危废车辆菜单 -->
|
||||
<el-dropdown
|
||||
class="vehicle-dropdown-dark"
|
||||
trigger="hover"
|
||||
@command="handleVehicleSelect"
|
||||
>
|
||||
<el-button class="vehicle-dropdown-btn-dark">
|
||||
危废车辆 ({{ vehicleList.length }})
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<!-- 危废车辆菜单 - 自定义点击伸缩 -->
|
||||
<div class="vehicle-dropdown-wrapper">
|
||||
<div class="vehicle-dropdown-btn-dark" @click.stop="toggleVehicleDropdown">
|
||||
<span>危废车辆 ({{ vehicleList.length }})</span>
|
||||
<i :class="isVehicleDropdownOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="el-icon--right"></i>
|
||||
</div>
|
||||
|
||||
<el-dropdown-menu slot="dropdown" class="vehicle-dropdown-menu-dark">
|
||||
<el-dropdown-item
|
||||
<div v-show="isVehicleDropdownOpen" class="vehicle-dropdown-menu-dark">
|
||||
<!-- 全部点位选项 -->
|
||||
<div class="vehicle-dropdown-item-dark" @click="showAllVehiclePoints">
|
||||
<span class="vehicle-dot-dark all-dot">●</span>
|
||||
<span style="flex:1; color: #FFD700;">📍 全部点位</span>
|
||||
<span style="font-size:12px;color:#4a8ba8;">({{ vehicleList.length }})</span>
|
||||
</div>
|
||||
|
||||
<!-- 关闭点位选项 -->
|
||||
<div class="vehicle-dropdown-item-dark" @click="hideAllVehiclePoints">
|
||||
<span class="vehicle-dot-dark close-dot">●</span>
|
||||
<span style="flex:1; color: #ff6b6b;">✕ 关闭点位</span>
|
||||
</div>
|
||||
|
||||
<div class="vehicle-dropdown-divider"></div>
|
||||
|
||||
<!-- 车辆列表 -->
|
||||
<div
|
||||
v-for="(item, index) in vehicleList"
|
||||
:key="index"
|
||||
:command="item"
|
||||
class="vehicle-dropdown-item-dark"
|
||||
@click="handleVehicleSelect(item)"
|
||||
>
|
||||
<span class="vehicle-dot-dark"></span>
|
||||
<span class="vehicle-dot-dark">●</span>
|
||||
<span style="flex:1;">{{ item.veNotes || '未知车辆' }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<SoilDialog v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
|
||||
<LiulDialog v-if="liulShowFlag" :liulDataId="liulDataId" @close="liulShowFlag=false"/>
|
||||
<SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
|
||||
<TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect" @close="taizhangDialogShowFlag=false"/>
|
||||
<!-- 农机列表组件 -->
|
||||
<!-- 轨迹弹窗组件 -->
|
||||
<zhnjCov
|
||||
ref="agriculturalMachinery"
|
||||
:vehicle-data="agriculturalVehicleData"
|
||||
:vehicle-list="vehicleList"
|
||||
:vehicle-list-full="vehicleListFull"
|
||||
:visible.sync="agriculturalDialogVisible"
|
||||
@close="agriculturalDialogVisible = false"
|
||||
ref="trajectoryComponent"
|
||||
:vehicle-data="selectedVehicle"
|
||||
:visible.sync="trajectoryDialogVisible"
|
||||
@close="trajectoryDialogVisible = false"
|
||||
/>
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
|
@ -512,6 +526,9 @@ export default {
|
|||
markersOrient: [],
|
||||
markersSoil: [],
|
||||
markersOther: [],
|
||||
markersFlowmeter: [],
|
||||
markersVehicle: [],
|
||||
vehicleMarkerMap: new Map(), // 存储车辆id和marker的映射
|
||||
lastClickIcon: '',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
mapTypeFlag: true,
|
||||
|
|
@ -576,9 +593,11 @@ export default {
|
|||
currentVehicleInfo: null,
|
||||
vehicleLocationMarker: null,
|
||||
vehicleInfoWindow: null,
|
||||
agriculturalDialogVisible: false,
|
||||
agriculturalVehicleData: null,
|
||||
vehicleListFull: null,
|
||||
// 轨迹弹窗相关
|
||||
selectedVehicle: null,
|
||||
trajectoryDialogVisible: false,
|
||||
// 下拉菜单控制
|
||||
isVehicleDropdownOpen: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -638,9 +657,87 @@ export default {
|
|||
this.vehicleListData();
|
||||
},
|
||||
methods: {
|
||||
// ==================== 危废车辆下拉菜单方法 ====================
|
||||
|
||||
// 切换下拉菜单
|
||||
toggleVehicleDropdown() {
|
||||
this.isVehicleDropdownOpen = !this.isVehicleDropdownOpen;
|
||||
},
|
||||
|
||||
// 显示全部点位 - 使用veLat和veLong
|
||||
showAllVehiclePoints() {
|
||||
// 先清除之前的所有车辆标记
|
||||
this.markersVehicle.forEach(marker => {
|
||||
marker.setMap(null);
|
||||
});
|
||||
this.markersVehicle = [];
|
||||
this.vehicleMarkerMap.clear();
|
||||
|
||||
// 重新从vehicleList添加所有车辆点位
|
||||
let addedCount = 0;
|
||||
this.vehicleList.forEach(item => {
|
||||
const lat = parseFloat(item.veLat);
|
||||
const lng = parseFloat(item.veLong);
|
||||
|
||||
if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
|
||||
const marker = new AMap.Marker({
|
||||
position: [lng, lat],
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(30, 42),
|
||||
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
|
||||
imageSize: new AMap.Size(30, 42)
|
||||
}),
|
||||
offset: new AMap.Pixel(-15, -42),
|
||||
zIndex: 1002,
|
||||
extData: { vehicleInfo: item }
|
||||
});
|
||||
|
||||
// 点击标记弹出信息窗口
|
||||
marker.on('click', (e) => {
|
||||
const data = e.target.getExtData();
|
||||
if (data && data.vehicleInfo) {
|
||||
// 先获取车辆位置点
|
||||
const point = {
|
||||
jingdu: data.vehicleInfo.veLong,
|
||||
weidu: data.vehicleInfo.veLat,
|
||||
createTime: data.vehicleInfo.updateTime || new Date().toISOString()
|
||||
};
|
||||
this.showVehicleInfoWindow(point, data.vehicleInfo);
|
||||
}
|
||||
});
|
||||
|
||||
marker.setMap(this.aMap);
|
||||
this.markersVehicle.push(marker);
|
||||
this.vehicleMarkerMap.set(item.id, marker);
|
||||
addedCount++;
|
||||
}
|
||||
});
|
||||
|
||||
if (addedCount > 0) {
|
||||
this.aMap.setFitView(this.markersVehicle, false, [200, 500, 360, 360], 16);
|
||||
this.$message.success(`显示全部 ${addedCount} 个危废车辆点位`);
|
||||
} else {
|
||||
this.$message.warning('暂无有效的危废车辆点位数据');
|
||||
}
|
||||
this.isVehicleDropdownOpen = false;
|
||||
},
|
||||
|
||||
// 关闭点位显示
|
||||
hideAllVehiclePoints() {
|
||||
this.markersVehicle.forEach(marker => {
|
||||
marker.setMap(null);
|
||||
});
|
||||
this.markersVehicle = [];
|
||||
this.vehicleMarkerMap.clear();
|
||||
// 同时清除车辆位置标记
|
||||
this.clearVehicleMarker();
|
||||
this.$message.info('已关闭危废车辆点位显示');
|
||||
this.isVehicleDropdownOpen = false;
|
||||
},
|
||||
|
||||
// ==================== 危废车辆位置相关方法 ====================
|
||||
|
||||
// 危化车辆点击
|
||||
// 危化车辆点击 - 从下拉列表选择
|
||||
handleVehicleSelect(item) {
|
||||
this.currentVehicleInfo = item;
|
||||
|
||||
|
|
@ -649,61 +746,79 @@ export default {
|
|||
|
||||
const vehicleName = item.vePlate || item.plateNumber || '车辆';
|
||||
|
||||
|
||||
gpsRecordPage({
|
||||
pageNo: 1,
|
||||
pageSize: 1000,
|
||||
gpsId: item.gpsId,
|
||||
}).then(res => {
|
||||
|
||||
if (res.result && res.result.records && res.result.records.length > 0) {
|
||||
let trackData = res.result.records;
|
||||
|
||||
|
||||
// 过滤掉无效的经纬度数据
|
||||
trackData = trackData.filter(record => {
|
||||
const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon);
|
||||
const lat = parseFloat(record.weidu || record.latitude || record.lat);
|
||||
return !isNaN(lng) && !isNaN(lat) &&
|
||||
lng >= -180 && lng <= 180 &&
|
||||
lat >= -90 && lat <= 90;
|
||||
});
|
||||
|
||||
if (trackData.length === 0) {
|
||||
this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 按时间排序，获取最新位置
|
||||
trackData.sort((a, b) => {
|
||||
const timeA = a.createTime || a.server_time || a.updateTime || 0;
|
||||
const timeB = b.createTime || b.server_time || b.updateTime || 0;
|
||||
return new Date(timeA) - new Date(timeB);
|
||||
});
|
||||
|
||||
// 只取最后一个点（最新位置）
|
||||
const latestPoint = trackData[trackData.length - 1];
|
||||
|
||||
// 定位到车辆位置并添加标记
|
||||
this.locateToVehicle(latestPoint, item);
|
||||
|
||||
// 如果有经纬度直接定位
|
||||
if (item.veLat && item.veLong) {
|
||||
const lat = parseFloat(item.veLat);
|
||||
const lng = parseFloat(item.veLong);
|
||||
if (!isNaN(lat) && !isNaN(lng)) {
|
||||
const point = {
|
||||
jingdu: item.veLong,
|
||||
weidu: item.veLat,
|
||||
createTime: item.updateTime || new Date().toISOString()
|
||||
};
|
||||
this.locateToVehicle(point, item);
|
||||
this.$message({
|
||||
message: `成功加载 ${vehicleName} 的最新位置`,
|
||||
message: `定位到 ${vehicleName}`,
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${vehicleName} 暂无位置数据`,
|
||||
type: 'warning'
|
||||
});
|
||||
this.isVehicleDropdownOpen = false;
|
||||
return;
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取位置数据失败:', err);
|
||||
this.$message({
|
||||
message: '获取位置数据失败，请稍后重试',
|
||||
type: 'error'
|
||||
}
|
||||
|
||||
// 如果没有经纬度，尝试通过gpsRecordPage获取
|
||||
if (item.gpsId) {
|
||||
gpsRecordPage({
|
||||
pageNo: 1,
|
||||
pageSize: 1000,
|
||||
gpsId: item.gpsId,
|
||||
}).then(res => {
|
||||
if (res.result && res.result.records && res.result.records.length > 0) {
|
||||
let trackData = res.result.records;
|
||||
|
||||
trackData = trackData.filter(record => {
|
||||
const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon);
|
||||
const lat = parseFloat(record.weidu || record.latitude || record.lat);
|
||||
return !isNaN(lng) && !isNaN(lat) &&
|
||||
lng >= -180 && lng <= 180 &&
|
||||
lat >= -90 && lat <= 90;
|
||||
});
|
||||
|
||||
if (trackData.length === 0) {
|
||||
this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`);
|
||||
return;
|
||||
}
|
||||
|
||||
trackData.sort((a, b) => {
|
||||
const timeA = a.createTime || a.server_time || a.updateTime || 0;
|
||||
const timeB = b.createTime || b.server_time || b.updateTime || 0;
|
||||
return new Date(timeA) - new Date(timeB);
|
||||
});
|
||||
|
||||
const latestPoint = trackData[trackData.length - 1];
|
||||
this.locateToVehicle(latestPoint, item);
|
||||
|
||||
this.$message({
|
||||
message: `成功加载 ${vehicleName} 的最新位置`,
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${vehicleName} 暂无位置数据`,
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取位置数据失败:', err);
|
||||
this.$message({
|
||||
message: '获取位置数据失败，请稍后重试',
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$message.warning(`${vehicleName} 没有GPS设备ID和位置信息`);
|
||||
}
|
||||
this.isVehicleDropdownOpen = false;
|
||||
},
|
||||
|
||||
// 定位到车辆位置
|
||||
|
|
@ -716,17 +831,14 @@ export default {
|
|||
const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
|
||||
const lat = parseFloat(point.weidu || point.latitude || point.lat);
|
||||
|
||||
// 验证经纬度是否有效
|
||||
if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
|
||||
console.error('无效的经纬度:', lng, lat);
|
||||
this.$message.warning('车辆位置数据无效');
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加车辆位置标记（普通坐标点）
|
||||
this.addVehicleLocationMarker(lng, lat, point, vehicleInfo);
|
||||
|
||||
// 平滑定位到车辆位置
|
||||
this.aMap.panTo([lng, lat]);
|
||||
setTimeout(() => {
|
||||
this.aMap.setZoomAndCenter(16, [lng, lat]);
|
||||
|
|
@ -735,7 +847,7 @@ export default {
|
|||
console.log(`定位到车辆位置: ${lng}, ${lat}`);
|
||||
},
|
||||
|
||||
// 添加车辆位置标记（普通坐标点）
|
||||
// 添加车辆位置标记
|
||||
addVehicleLocationMarker(lng, lat, point, vehicleInfo) {
|
||||
if (isNaN(lng) || isNaN(lat)) {
|
||||
console.error('无效的经纬度:', lng, lat);
|
||||
|
|
@ -745,9 +857,6 @@ export default {
|
|||
this.removeLocationMarker();
|
||||
this.closeVehicleInfoWindow();
|
||||
|
||||
const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
|
||||
|
||||
// 使用普通坐标点标记
|
||||
const locationMarker = new AMap.Marker({
|
||||
position: [lng, lat],
|
||||
icon: new AMap.Icon({
|
||||
|
|
@ -760,7 +869,6 @@ export default {
|
|||
extData: { point: point, vehicleInfo: vehicleInfo }
|
||||
});
|
||||
|
||||
// 点击标记弹出信息窗口
|
||||
locationMarker.on('click', (e) => {
|
||||
const data = e.target.getExtData();
|
||||
this.showVehicleInfoWindow(data.point, data.vehicleInfo);
|
||||
|
|
@ -771,118 +879,137 @@ export default {
|
|||
this.vehicleMarkers.push(locationMarker);
|
||||
},
|
||||
|
||||
// 显示车辆信息窗口（深色科技风）
|
||||
showVehicleInfoWindow(point, vehicleInfo) {
|
||||
this.closeVehicleInfoWindow();
|
||||
// 显示车辆信息窗口
|
||||
showVehicleInfoWindow(point, vehicleInfo) {
|
||||
this.closeVehicleInfoWindow();
|
||||
|
||||
const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
|
||||
const lat = parseFloat(point.weidu || point.latitude || point.lat);
|
||||
const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
|
||||
const lat = parseFloat(point.weidu || point.latitude || point.lat);
|
||||
|
||||
const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
|
||||
const vehicleName = vehicleInfo.veNotes || vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
|
||||
|
||||
// 使用自定义HTML，不依赖InfoWindow的默认样式
|
||||
const infoContent = `
|
||||
<div style="
|
||||
padding: 16px 20px;
|
||||
max-width: 360px;
|
||||
min-width: 250px;
|
||||
background: rgba(0, 20, 40, 0.95) !important;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #8bb4d0;
|
||||
cursor: pointer;
|
||||
" class="vehicle-info-window">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
|
||||
<span style="font-size: 28px; margin-right: 12px;">🚛</span>
|
||||
<span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
|
||||
</div>
|
||||
<div style="font-size: 13px; line-height: 2.2;">
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">设备ID：</span>
|
||||
<span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
|
||||
const infoContent = `
|
||||
<div style="
|
||||
padding: 16px 20px;
|
||||
max-width: 360px;
|
||||
min-width: 250px;
|
||||
background: rgba(0, 20, 40, 0.95) !important;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #8bb4d0;
|
||||
cursor: pointer;
|
||||
" class="vehicle-info-window">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
|
||||
<span style="font-size: 28px; margin-right: 12px;">🚛</span>
|
||||
<span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
|
||||
</div>
|
||||
<div style="font-size: 13px; line-height: 2.2;">
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">设备ID：</span>
|
||||
<span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">车牌号：</span>
|
||||
<span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">最新时间：</span>
|
||||
<span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">经度：</span>
|
||||
<span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">纬度：</span>
|
||||
<span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px; text-align: center; font-size: 12px; color: #00d4ff; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||||
<span>📍 点击查看车辆轨迹</span>
|
||||
<span style="font-size: 16px;">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">车牌号：</span>
|
||||
<span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">最新时间：</span>
|
||||
<span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">经度：</span>
|
||||
<span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; padding: 3px 0;">
|
||||
<span style="color: #4a8ba8;">纬度：</span>
|
||||
<span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px; text-align: center; font-size: 12px; color: #00d4ff; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||||
<span>📍 点击查看农机列表</span>
|
||||
<span style="font-size: 16px;">→</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
|
||||
this.vehicleInfoWindow = new AMap.InfoWindow({
|
||||
content: infoContent,
|
||||
offset: new AMap.Pixel(0, -35),
|
||||
autoMove: true,
|
||||
closeWhenClickMap: true,
|
||||
isCustom: true,
|
||||
});
|
||||
this.vehicleInfoWindow = new AMap.InfoWindow({
|
||||
content: infoContent,
|
||||
offset: new AMap.Pixel(0, -35),
|
||||
autoMove: true,
|
||||
closeWhenClickMap: true,
|
||||
isCustom: true,
|
||||
});
|
||||
|
||||
if (!isNaN(lng) && !isNaN(lat)) {
|
||||
this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
|
||||
this.vehicleMarkers.push(this.vehicleInfoWindow);
|
||||
if (!isNaN(lng) && !isNaN(lat)) {
|
||||
this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
|
||||
this.vehicleMarkers.push(this.vehicleInfoWindow);
|
||||
|
||||
// 添加点击事件监听 - 点击信息窗口打开农机列表
|
||||
setTimeout(() => {
|
||||
const infoWindowEl = document.querySelector('.vehicle-info-window');
|
||||
if (infoWindowEl) {
|
||||
infoWindowEl.addEventListener('click', (e) => {
|
||||
// 防止点击内部按钮时冒泡
|
||||
if (e.target.closest('.vehicle-info-window')) {
|
||||
this.openAgriculturalMachineryList(vehicleInfo, point);
|
||||
setTimeout(() => {
|
||||
const infoWindowEl = document.querySelector('.vehicle-info-window');
|
||||
if (infoWindowEl) {
|
||||
infoWindowEl.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.vehicle-info-window')) {
|
||||
// 获取车辆GPS数据
|
||||
this.getVehicleGpsData(vehicleInfo);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const infoWindowContent = document.querySelector('.amap-info-content');
|
||||
if (infoWindowContent) {
|
||||
infoWindowContent.style.background = 'transparent !important';
|
||||
infoWindowContent.style.padding = '0 !important';
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取车辆GPS数据并打开轨迹
|
||||
getVehicleGpsData(vehicleInfo) {
|
||||
if (!vehicleInfo.gpsId) {
|
||||
this.$message.warning('该车辆没有GPS设备ID');
|
||||
return;
|
||||
}
|
||||
|
||||
// 覆盖InfoWindow的默认背景
|
||||
const infoWindowContent = document.querySelector('.amap-info-content');
|
||||
if (infoWindowContent) {
|
||||
infoWindowContent.style.background = 'transparent !important';
|
||||
infoWindowContent.style.padding = '0 !important';
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
|
||||
// 打开智慧农机列表并传值
|
||||
openAgriculturalMachineryList(vehicleInfo, point) {
|
||||
// 构建当前选中的车辆数据
|
||||
// 构建车辆数据
|
||||
const vehicleData = {
|
||||
vehicleInfo: vehicleInfo,
|
||||
location: point,
|
||||
gpsId: vehicleInfo.gpsId,
|
||||
veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆',
|
||||
vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--',
|
||||
veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--',
|
||||
vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
|
||||
deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
|
||||
latitude: point.weidu || point.latitude || point.lat || 0,
|
||||
longitude: point.jingdu || point.longitude || point.lng || point.lon || 0,
|
||||
extData: {
|
||||
vehicleType: '危废车辆',
|
||||
status: '在线',
|
||||
lastUpdate: point.createTime || point.server_time || point.updateTime || new Date().toISOString()
|
||||
}
|
||||
};
|
||||
|
||||
this.closeVehicleInfoWindow();
|
||||
this.qcdtdialogTableVisible = false;
|
||||
|
||||
this.agriculturalVehicleData = vehicleData;
|
||||
this.agriculturalDialogVisible = true;
|
||||
this.selectedVehicle = vehicleData;
|
||||
this.trajectoryDialogVisible = true;
|
||||
},
|
||||
|
||||
// 打开轨迹弹窗
|
||||
openTrajectoryDialog(vehicleInfo, point) {
|
||||
const vehicleData = {
|
||||
gpsId: vehicleInfo.gpsId || vehicleInfo.gpsDeviceId,
|
||||
veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆',
|
||||
vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--',
|
||||
veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--',
|
||||
vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
|
||||
deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
|
||||
latitude: point.weidu || point.latitude || point.lat || 0,
|
||||
longitude: point.jingdu || point.longitude || point.lng || point.lon || 0
|
||||
};
|
||||
|
||||
this.closeVehicleInfoWindow();
|
||||
this.qcdtdialogTableVisible = false;
|
||||
|
||||
this.selectedVehicle = vehicleData;
|
||||
this.trajectoryDialogVisible = true;
|
||||
|
||||
console.log('打开轨迹弹窗，车辆数据:', vehicleData);
|
||||
},
|
||||
|
||||
// 关闭信息窗口
|
||||
|
|
@ -920,20 +1047,19 @@ export default {
|
|||
vehicleListData() {
|
||||
vehicleList({
|
||||
pageNo: 1,
|
||||
pageSize: 30,
|
||||
pageSize: 100,
|
||||
}).then(res => {
|
||||
if (res.code === 200 && res.result) {
|
||||
// 存储完整的返回数据
|
||||
this.vehicleListFull = res.result;
|
||||
// 存储 records 数组
|
||||
this.vehicleList = res.result.records || [];
|
||||
// 默认显示全部点位
|
||||
this.$nextTick(() => {
|
||||
this.showAllVehiclePoints();
|
||||
});
|
||||
} else {
|
||||
this.vehicleList = [];
|
||||
this.vehicleListFull = null;
|
||||
}
|
||||
}).catch(err => {
|
||||
this.vehicleList = [];
|
||||
this.vehicleListFull = null;
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -1118,6 +1244,7 @@ export default {
|
|||
this.liulDataId = e.target.getExtData()
|
||||
this.liulShowFlag = true
|
||||
})
|
||||
this.markersFlowmeter.push(marker);
|
||||
this.markersSoil.push(marker);
|
||||
} else {
|
||||
this.markersOther.push(marker)
|
||||
|
|
@ -1365,6 +1492,9 @@ export default {
|
|||
let arr = [];
|
||||
if (this.lastClickIcon == flag) {
|
||||
this.lastClickIcon = ''
|
||||
// 取消选中，恢复视图
|
||||
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
|
||||
return;
|
||||
} else {
|
||||
this.lastClickIcon = flag;
|
||||
if (flag == 'livestock') {
|
||||
|
|
@ -1375,6 +1505,10 @@ export default {
|
|||
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
|
||||
} else if (flag == 'soil') {
|
||||
arr = this.markersSoil;
|
||||
} else if (flag == 'flowmeter') {
|
||||
arr = this.markersFlowmeter;
|
||||
} else if (flag == 'vehicle') {
|
||||
arr = this.markersVehicle;
|
||||
}
|
||||
}
|
||||
if (arr && arr.length > 0) {
|
||||
|
|
@ -1382,16 +1516,32 @@ export default {
|
|||
item.setzIndex((that.lastZIndex+=2));
|
||||
});
|
||||
that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16);
|
||||
const typeNames = {
|
||||
'livestock': '畜禽污染监测站',
|
||||
'orient': '农田污染监测站',
|
||||
'watershed': '小流域监测站',
|
||||
'soil': '长期定位监测站',
|
||||
'flowmeter': '微功率雷达监测点',
|
||||
'vehicle': '危废车辆'
|
||||
};
|
||||
this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`);
|
||||
} else {
|
||||
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
|
||||
const typeNames = {
|
||||
'livestock': '畜禽污染监测站',
|
||||
'orient': '农田污染监测站',
|
||||
'watershed': '小流域监测站',
|
||||
'soil': '长期定位监测站',
|
||||
'flowmeter': '微功率雷达监测点',
|
||||
'vehicle': '危废车辆'
|
||||
};
|
||||
this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
@import '@/assets/css/index.css';
|
||||
|
||||
|
|
@ -1435,22 +1585,16 @@ export default {
|
|||
font-family: douyuFont;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mywrcov_onehover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.centerMainBox2 img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.boxLis {
|
||||
width: 70%;
|
||||
height: 1.5vw;
|
||||
|
|
@ -1573,8 +1717,6 @@ a:hover {
|
|||
margin: 2% auto 0;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
/* -webkit-justify-content: space-between;
|
||||
-moz-justify-content: space-between; */
|
||||
}
|
||||
|
||||
.plant > li {
|
||||
|
|
@ -1587,11 +1729,7 @@ a:hover {
|
|||
height: 100%;
|
||||
background: rgba(0, 235, 255, .08);
|
||||
display: -webkit-flex;
|
||||
/* -webkit-flex-direction: column;
|
||||
-webkit-justify-content: space-between; */
|
||||
display: -moz-flex;
|
||||
/* -moz-flex-direction: column;
|
||||
-moz-justify-content: space-between; */
|
||||
}
|
||||
|
||||
.jumps > div > img {
|
||||
|
|
@ -1656,7 +1794,6 @@ a:hover {
|
|||
width: 70%;
|
||||
height: 2vw;
|
||||
display: -webkit-flex;
|
||||
/* -webkit-justify-content: space-between; */
|
||||
margin: 1vw 0 0 5vw;
|
||||
}
|
||||
|
||||
|
|
@ -1857,7 +1994,6 @@ a:hover {
|
|||
color: #fff;
|
||||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||||
font-family: douyuFont;
|
||||
/* position: absolute; */
|
||||
top: 1vw;
|
||||
left: 0%;
|
||||
display: block;
|
||||
|
|
@ -1886,7 +2022,6 @@ a:hover {
|
|||
font-size: 11px;
|
||||
color: #fff;
|
||||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||||
/* font-family: douyuFont; */
|
||||
position: absolute;
|
||||
top: 1.3vw;
|
||||
right: 18px;
|
||||
|
|
@ -1895,6 +2030,107 @@ a:hover {
|
|||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ========== 危废车辆下拉菜单样式 ========== */
|
||||
.vehicle-dropdown-wrapper {
|
||||
position: fixed;
|
||||
bottom: 2vw;
|
||||
right: 2vw;
|
||||
z-index: 999;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
background: rgba(0, 20, 40, 0.9);
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark:hover {
|
||||
border-color: rgba(0, 212, 255, 0.6);
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark .el-icon--right {
|
||||
margin-left: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-menu-dark {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-bottom: 4px;
|
||||
background: rgba(0, 20, 40, 0.95);
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 6px 0;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.vehicle-dropdown-menu-dark::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-menu-dark::-webkit-scrollbar-track {
|
||||
background: rgba(0, 212, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-menu-dark::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 212, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
color: #8bb4d0;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark:hover {
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark .vehicle-dot-dark {
|
||||
color: #00d4ff;
|
||||
font-size: 10px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark .all-dot {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark .close-dot {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-divider {
|
||||
height: 1px;
|
||||
margin: 4px 12px;
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
|
@ -1994,7 +2230,6 @@ a:hover {
|
|||
.jcsssj_rt_num {
|
||||
display: inline-block;
|
||||
font-size: 0.8vw;
|
||||
/* color: #fff; */
|
||||
margin-left: 20%;
|
||||
text-align: right;
|
||||
margin-top: 0.4vw;
|
||||
|
|
@ -2027,14 +2262,12 @@ a:hover {
|
|||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
.tcgldw::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .5);
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
.tcgldw::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(87, 146, 255, .8);
|
||||
|
|
@ -2155,7 +2388,6 @@ a:hover {
|
|||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.el-table th.gutter {
|
||||
display: none;
|
||||
width: 0;
|
||||
|
|
@ -2169,7 +2401,6 @@ a:hover {
|
|||
.in1con_lf_img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.mapTuLi {
|
||||
|
|
@ -2181,5 +2412,4 @@ a:hover {
|
|||
.mywrcov_onenumjx{
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue