Yangwl
/
xy_tyrems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加历史轨迹和电子围栏

Browse Source
master
夜笙歌 2 years ago
parent aaba2a27b9
commit b083c4d153
5 changed files with 357 additions and 55 deletions
Show Stats Download Patch File Download Diff File

45
ruoyi-ui/src/api/realTimeMonitoring/electronicFence.js
Unescape Escape View File

@ -0,0 +1,45 @@
import request from '@/utils/request'
// 查询轮胎基础信息列表
export function listTest(query) {
return request({
url: '/basetyre/CollectMachineGps/list',
method: 'get',
params: query
})
}
// 查询轮胎基础信息详细
export function getTest(id) {
return request({
url: '/test/test/' + id,
method: 'get'
})
}
// 新增轮胎基础信息
export function addTest(data) {
return request({
url: '/test/test',
method: 'post',
data: data
})
}
// 修改轮胎基础信息
export function updateTest(data) {
return request({
url: '/test/test',
method: 'put',
data: data
})
}
// 删除轮胎基础信息
export function delTest(id) {
return request({
url: '/test/test/' + id,
method: 'delete'
})
}

45
ruoyi-ui/src/api/realTimeMonitoring/historicalRoute.js
Unescape Escape View File

@ -0,0 +1,45 @@
import request from '@/utils/request'
// 查询轮胎基础信息列表
export function listTest(query) {
return request({
url: '/basetyre/CollectMachineGps/list',
method: 'get',
params: query
})
}
// 查询轮胎基础信息详细
export function getTest(id) {
return request({
url: '/test/test/' + id,
method: 'get'
})
}
// 新增轮胎基础信息
export function addTest(data) {
return request({
url: '/test/test',
method: 'post',
data: data
})
}
// 修改轮胎基础信息
export function updateTest(data) {
return request({
url: '/test/test',
method: 'put',
data: data
})
}
// 删除轮胎基础信息
export function delTest(id) {
return request({
url: '/test/test/' + id,
method: 'delete'
})
}

80
ruoyi-ui/src/views/GPS/car/index.vue
Unescape Escape View File

@ -3,9 +3,9 @@
<!-- 搜索栏--> <!-- 搜索栏-->
<el-form v-show="showSearch" ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" <el-form v-show="showSearch" ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'"
:model="queryParams"> :model="queryParams">
<el-form-item label="车牌号" prop="internationalization1"> <el-form-item label="车牌号" prop="carLicense">
<el-input <el-input
v-model="queryParams.internationalization1" v-model="queryParams.carLicense"
:placeholder=" t('common.pleaseEnter') + '车牌号'" :placeholder=" t('common.pleaseEnter') + '车牌号'"
clearable clearable
style="width: 200px" style="width: 200px"
@ -86,49 +86,48 @@
<!-- 表格主体--> <!-- 表格主体-->
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column align="center" fixed type="selection" width="55"/> <el-table-column align="center" fixed type="selection" width="55"/>
<el-table-column label="序号" align="center" prop="internationalization1" <el-table-column label="序号" align="center" type="index" width="50" />
width="150"/>
<el-table-column label="GPS时间" align="center" prop="internationalization2" <el-table-column label="GPS时间" align="center" prop="internationalization2"
width="150"/> width="150"/>
<el-table-column label="收发器ID" align="center" prop="internationalization3" <el-table-column label="收发器ID" align="center" prop="machineId"
width="150"/> width="150"/>
<el-table-column label="车牌号" align="center" prop="internationalization4" <el-table-column label="车牌号" align="center" prop="carLicense"
width="150"/> width="150"/>
<el-table-column label="纬度" align="center" prop="internationalization5" <el-table-column label="纬度" align="center" prop="latitude"
width="150"/> width="150"/>
<el-table-column label="经度" align="center" prop="internationalization6" <el-table-column label="经度" align="center" prop="longitude"
width="150"/> width="150"/>
<el-table-column label="GPS里程" align="center" prop="internationalization7" <el-table-column label="GPS里程" align="center" prop="gpsMileage"
width="150"/> width="150"/>
<el-table-column label="海拔" align="center" prop="internationalization8" <el-table-column label="海拔" align="center" prop="altitude"
width="150"/> width="150"/>
<el-table-column label="速度" align="center" prop="internationalization9" <el-table-column label="速度" align="center" prop="speed"
width="150"/> width="150"/>
<el-table-column label="方向" align="center" prop="internationalization10" <el-table-column label="方向" align="center" prop="course"
width="150"/> width="150"/>
<el-table-column label="是否外接电源" align="center" prop="internationalization11" <el-table-column label="是否外接电源" align="center" prop="isOutPower"
width="150"/> width="150"/>
<el-table-column label="设备上传电池电压" align="center" prop="internationalization12" <el-table-column label="设备上传电池电压" align="center" prop="carPower"
width="150"/> width="150"/>
<el-table-column label="胎压设备是否正常工作" align="center" prop="internationalization13" <el-table-column label="胎压设备是否正常工作" align="center" prop="isSensorRun"
width="170"/> width="170"/>
<el-table-column label="紧急报警" align="center" prop="internationalization14" <el-table-column label="紧急报警" align="center" prop="emergencyAlarm"
width="150"/> width="150"/>
<el-table-column label="超速预警" align="center" prop="internationalization15" <el-table-column label="超速预警" align="center" prop="speedAlarm"
width="150"/> width="150"/>
<el-table-column label="疲劳驾驶" align="center" prop="internationalization16" <el-table-column label="疲劳驾驶" align="center" prop="fatigueDrivingAlarm"
width="150"/> width="150"/>
<el-table-column label="危险预警" align="center" prop="internationalization17" <el-table-column label="危险预警" align="center" prop="riskEarlyAlarm"
width="150"/> width="150"/>
<el-table-column label="gnss模块" align="center" prop="internationalization18" <el-table-column label="gnss模块" align="center" prop="gnssModule"
width="150"/> width="150"/>
<el-table-column label="天线缺失" align="center" prop="internationalization19" <el-table-column label="天线缺失" align="center" prop="gnssLossAntenna"
width="150"/> width="150"/>
<el-table-column label="天线短路" align="center" prop="internationalization20" <el-table-column label="天线短路" align="center" prop="gnssAntennaShortcircuit"
width="150"/> width="150"/>
<el-table-column label="终端主电源欠压" align="center" prop="internationalization20" <el-table-column label="终端主电源欠压" align="center" prop="mainPowerLake"
width="150"/> width="150"/>
<el-table-column label="终端主电源掉电" align="center" prop="internationalization20" <el-table-column label="终端主电源掉电" align="center" prop="mainpowerloss"
width="150"/> width="150"/>
<el-table-column :label="t('option.option')" align="center" class-name="small-padding fixed-width" fixed="right" <el-table-column :label="t('option.option')" align="center" class-name="small-padding fixed-width" fixed="right"
width="160"> width="160">
@ -344,6 +343,7 @@ const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance(); const {proxy} = getCurrentInstance();
// 表格数据 // 表格数据
const postList = ref([]); const postList = ref([]);
// 模态框开关标识 // 模态框开关标识
@ -367,43 +367,13 @@ const title = ref("");
const queryParams = ref({ const queryParams = ref({
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
internationalization1: undefined, carLicense: undefined,
internationalization2: undefined, internationalization2: undefined,
internationalization3: undefined, internationalization3: undefined,
internationalization4: undefined,
internationalization5: undefined,
internationalization6: undefined,
internationalization7: undefined,
internationalization8: undefined,
internationalization9: undefined,
internationalization10: undefined,
internationalization11: undefined,
internationalization12: undefined,
internationalization13: undefined,
internationalization14: undefined,
internationalization15: undefined,
internationalization16: undefined,
internationalization17: undefined,
internationalization18: undefined,
internationalization19: undefined,
internationalization20: undefined,
isDelete: undefined,
createTime: undefined,
createId: undefined,
createBy: undefined,
createName: undefined,
modifyTime: undefined,
modifyId: undefined,
modifyBy: undefined,
modifyName: undefined,
}) })
// 表单验证规则 // 表单验证规则
const rules = { const rules = {
brand: [{required: true, message: "轮胎品牌不能为空", trigger: "blur"}],
type: [{required: true, message: "轮胎型号不能为空", trigger: "blur"}],
serialNumber: [{required: true, message: "轮胎编号不能为空", trigger: "blur"}],
depth: [{required: true, message: "花纹深度不能为空", trigger: "blur"}],
} }
// 表单数据 // 表单数据

128
ruoyi-ui/src/views/realTimeMonitoring/electronicFence/index.vue
Unescape Escape View File

@ -0,0 +1,128 @@
<template>
<div>
<el-form ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" :model="queryParams"
style="margin-top: 24px">
<el-form-item label="车牌号" prop="carLicense">
<el-input
v-model="queryParams.carLicense"
:placeholder=" t('common.pleaseEnter') + '车牌号'"
clearable
style="width: 200px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="时间" prop="internationalization3">
<el-date-picker
v-model="queryParams.internationalization3"
end-placeholder="结束时间"
range-separator="到"
start-placeholder="开始时间"
type="datetimerange"
/>
</el-form-item>
<el-form-item label=" ">
<el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
</el-form-item>
</el-form>
<div id="container4"></div>
</div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {addTest, delTest, getTest, listTest, updateTest} from "@/api/realTimeMonitoring/electronicFence";
import {useI18n} from 'vue-i18n';
import Cookies from "js-cookie";
const {t} = useI18n();
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance();
const queryParams = ref({})
let map = null
let polyline = null
let passedPolyline = null
let mouseTool = null
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
let marketPath = [116.390669, 39.911147]
AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "1.4.15", //
version: "2.0", //
plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Marker'],
AMapUI: {
version: '1.1',
plugins: []
}
}).then((AMap) => {
map = new AMap.Map("container4", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 16, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置
});
let marker = new AMap.Marker({
position: marketPath,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setTitle('我是marker的title');
marker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path),
});
marker.setMap(map);
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar({position: 'LT'}));
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({isOpen: true}));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
let polygon = new AMap.Polygon({path: path});
map.add([polygon]);
let polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons([polygon]);
polyEditor.on('add', function (data) {
console.log(data);
let polygon = data.target;
polyEditor.addAdsorbPolygons(polygon);
})
polyEditor.on('addnode', function (data) {
// 获取区域坐标
console.log(polyEditor.getTarget()._opts.path)
})
polyEditor.on('adjust', function (data) {
// 获取区域坐标
console.log(polyEditor.getTarget()._opts.path)
})
polyEditor.setTarget(polygon);
polyEditor.open();
// map.setFitView();
}).catch(e => {
console.log(e);
})
</script>
<style>
#container4 {
padding: 0px;
margin: 20px 0 0 0;
width: 100%;
height: calc(100vh - 190px);
}
</style>

114
ruoyi-ui/src/views/realTimeMonitoring/historicalRoute/index.vue
Unescape Escape View File

@ -0,0 +1,114 @@
<template>
<div>
<el-form ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" :model="queryParams"
style="margin-top: 24px">
<el-form-item label="车牌号" prop="carLicense">
<el-input
v-model="queryParams.carLicense"
:placeholder=" t('common.pleaseEnter') + '车牌号'"
clearable
style="width: 200px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="时间" prop="internationalization3">
<el-date-picker
v-model="queryParams.internationalization3"
end-placeholder="结束时间"
range-separator="到"
start-placeholder="开始时间"
type="datetimerange"
/>
</el-form-item>
<el-form-item label=" ">
<el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
</el-form-item>
</el-form>
<div id="container3"></div>
</div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {addTest, delTest, getTest, listTest, updateTest} from "@/api/realTimeMonitoring/historicalRoute";
import {useI18n} from 'vue-i18n';
import Cookies from "js-cookie";
const {t} = useI18n();
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance();
const queryParams = ref({})
let map = null
let polyline = null
let passedPolyline = null
let mouseTool = null
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
let marketPath = [116.390669, 39.911147]
AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "1.4.15", //
version: "2.0", //
plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Marker'],
AMapUI: {
version: '1.1',
plugins: []
}
}).then((AMap) => {
map = new AMap.Map("container3", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 16, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置
});
// let marker = new AMap.Marker({
// position: marketPath,
// anchor: 'bottom-center',
// offset: new AMap.Pixel(0, 0)
// });
// marker.setTitle('我是marker的title');
// marker.setLabel({
// direction: 'top',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path),
// });
// marker.setMap(map);
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar({position: 'LT'}));
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({isOpen: true}));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
polyline = new AMap.Polyline({
strokeColor: '#00BBFF', // 线颜色-深蓝色
path: [[116.478935, 39.997761], [103.85094, 35.987496]],
strokeWeight: 6 // 线宽
})
map.add(polyline);
map.setFitView()
}).catch(e => {
console.log(e);
})
</script>
<style>
#container3 {
padding: 0px;
margin: 20px 0 0 0;
width: 100%;
height: calc(100vh - 190px);
}
</style>
Write Preview
Loading…
Cancel
Save