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

修改地图坐标

Browse Source
master
夜笙歌 1 year ago
parent 38e9817bf1
commit 237d85a5e9
7 changed files with 141 additions and 149 deletions
Show Stats Download Patch File Download Diff File

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

@ -2,44 +2,10 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询轮胎基础信息列表 // 查询轮胎基础信息列表
export function listTest(query) { export function listBaseCar(query) {
return request({ return request({
url: '/basetyre/CollectMachineGps/list', url: '/carqueue/carqueue/carQueuelist',
method: 'get', method: 'get',
params: query 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'
})
}

86
ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue
Unescape Escape View File

@ -41,14 +41,16 @@
<div v-if="tyreDataList.includes(`${index+1}-1-1`)" <div v-if="tyreDataList.includes(`${index+1}-1-1`)"
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top"> style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top">
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].temperature }} <div class="icon1"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].temperature }}
</div> </div>
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pressure }} <div class="icon2"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pressure }}
</div> </div>
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">--> <!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pattern }}--> <!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pattern }}-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
<div <div
@ -57,14 +59,16 @@
<div v-if="tyreDataList.includes(`${index+1}-1-2`)" <div v-if="tyreDataList.includes(`${index+1}-1-2`)"
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align: top"> style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align: top">
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].temperature }} <div class="icon1"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].temperature }}
</div> </div>
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pressure }} <div class="icon2"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pressure }}
</div> </div>
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">--> <!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pattern }}--> <!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pattern }}-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
<img sizes="100% 100%" src="@/assets/images/zhou.png" <img sizes="100% 100%" src="@/assets/images/zhou.png"
@ -75,14 +79,16 @@
<div v-if="tyreDataList.includes(`${index+1}-2-2`)" <div v-if="tyreDataList.includes(`${index+1}-2-2`)"
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top"> style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top">
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].temperature }} <div class="icon1"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].temperature }}
</div> </div>
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pressure }} <div class="icon2"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pressure }}
</div> </div>
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">--> <!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pattern }}--> <!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pattern }}-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
<div <div
@ -91,14 +97,16 @@
<div v-if="tyreDataList.includes(`${index+1}-2-1`)" <div v-if="tyreDataList.includes(`${index+1}-2-1`)"
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top"> style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top">
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].temperature }} <div class="icon1"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].temperature }}
</div> </div>
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px"> <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pressure }} <div class="icon2"/>
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pressure }}
</div> </div>
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">--> <!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pattern }}--> <!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pattern }}-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
</div> </div>
@ -319,7 +327,6 @@ AMapLoader.load({
center: [116.397428, 39.90923], //初始化地图中心点位置 center: [116.397428, 39.90923], //初始化地图中心点位置
}); });
}).catch(e => { }).catch(e => {
console.log(e);
}) })
proxy.$nextTick(async () => { proxy.$nextTick(async () => {
pageId.value = $router?.currentRoute?.value?.query?.id pageId.value = $router?.currentRoute?.value?.query?.id
@ -355,10 +362,9 @@ const getList = async () => {
const tableChange = async (e) => { const tableChange = async (e) => {
pageId.value = e.id pageId.value = e.id
const {data: info} = await getCarGpsList({id: pageId.value}) const {data: info} = await getCarGpsList({id: pageId.value})
console.log(info)
cardInfo.value = { cardInfo.value = {
carLicense: info.carLicense, carLicense: info.carLicense,
name:info.carQueue name: info.carQueue
} }
let TireRow1 = info.cartype?.split('T')[1]?.split('|').filter(e => e !== '') || [] let TireRow1 = info.cartype?.split('T')[1]?.split('|').filter(e => e !== '') || []
let title = [] let title = []
@ -374,7 +380,6 @@ const tableChange = async (e) => {
}) })
tyreList.value = tyreListData tyreList.value = tyreListData
tyreDataList.value = tyreListData.map(e => e.tyrePositionS) tyreDataList.value = tyreListData.map(e => e.tyrePositionS)
console.log(tyreList.value)
let timeOut = () => { let timeOut = () => {
setTimeout(() => { setTimeout(() => {
if (map) { if (map) {
@ -456,16 +461,23 @@ const resetQuery = () => {
tableRef1.value.setCurrentRow() tableRef1.value.setCurrentRow()
} }
const setMarker = (res) => { const setMarker = (res) => {
markers.value ? map.remove(markers.value) : '' console.log(res)
markers.value = new AMap.Marker({ let pathRow = [[res.longitude, res.latitude]]
content: '<div class="markerIcon" />', markers.value && map.remove(markers.value)
position: [res.longitude, res.latitude], AMap.convertFrom(pathRow, 'gps', function (status, result) {
anchor: 'bottom-center', if (result.info === 'ok') {
offset: new AMap.Pixel(0, 0), let lnglats = result.locations.map(e => [e.lng, e.lat]);
}); markers.value = new AMap.Marker({
map.add(markers.value) content: '<div class="markerIcon" />',
map.setFitView() position: lnglats[0],
map.setZoom(8) anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
});
map.add(markers.value)
map.setFitView()
map.setZoom(8)
}
})
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
map.destroy() map.destroy()
@ -534,7 +546,8 @@ onBeforeUnmount(() => {
.el-descriptions__label { .el-descriptions__label {
width: 170px; width: 170px;
} }
.icon1{
.icon1 {
margin-left: 5px; margin-left: 5px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -546,7 +559,8 @@ onBeforeUnmount(() => {
background-size: 100% 100%; background-size: 100% 100%;
background-image: url('@/assets/images/temperature.png') background-image: url('@/assets/images/temperature.png')
} }
.icon2{
.icon2 {
margin-left: 5px; margin-left: 5px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;

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

@ -4,13 +4,13 @@
<el-form ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" :model="queryParams" <el-form ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" :model="queryParams"
style="margin-top: 24px"> style="margin-top: 24px">
<el-form-item label="车牌号" prop="carLicense"> <el-form-item label="车牌号" prop="carLicense">
<el-input <el-cascader
v-model="queryParams.carLicense" v-model="queryParams.carLicense"
:options="options"
:placeholder=" t('common.pleaseEnter') + '车牌号'" :placeholder=" t('common.pleaseEnter') + '车牌号'"
:props="cascaderProps"
clearable clearable
style="width: 200px" @change="cascaderChange"/>
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="时间" prop="internationalization3"> <el-form-item label="时间" prop="internationalization3">
<el-date-picker <el-date-picker
@ -35,9 +35,11 @@
</template> </template>
<script setup> <script setup>
import AMapLoader from '@amap/amap-jsapi-loader'; import AMapLoader from '@amap/amap-jsapi-loader';
import {addTest, delTest, getTest, listTest, updateTest} from "@/api/realTimeMonitoring/electronicFence";
import {useI18n} from 'vue-i18n'; import {useI18n} from 'vue-i18n';
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import {listBaseCar} from "@/api/realTimeMonitoring/electronicFence";
import {getInfoById} from "@/api/realTimeMonitoring/alarmSendingSettings";
import {parseTime} from "@/utils/ruoyi";
const {t} = useI18n(); const {t} = useI18n();
@ -45,6 +47,27 @@ const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance(); const {proxy} = getCurrentInstance();
const queryParams = ref({}) const queryParams = ref({})
const dateRange = ref([]) const dateRange = ref([])
const options = ref([])
const carIds = ref([])
const cascaderProps = {multiple: true, value: 'id', label: 'title', children: 'baseCarList'}
listBaseCar().then(e => {
let res = JSON.stringify(e.rows)
let newObj = JSON.parse(res.replace(/"carLicense":/g, '"title":'))
options.value = newObj
})
const cascaderChange = (e) => {
let params = []
e.forEach(val => {
params.push(val.at(-1))
})
// let lastIds = ids.value || []
// let nowIds = e.map(val => val.at(-1))
// let nowClick = nowIds.filter(val => !(lastIds.includes(val)))?.[0]
// ids.value = e.map(val => val.at(-1))
// if (!nowClick) return
carIds.value = params
}
let map = null let map = null
let polyEditor = null let polyEditor = null
@ -82,10 +105,9 @@ AMapLoader.load({
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType()); map.addControl(new AMap.MapType());
// setPolygon(areaPath.value) // setPolygon(areaPath.value)
// setMarker(marketPath.value) // setMarker(marketPath.value)
setPolygon([])
}).catch(e => { }).catch(e => {
console.log(e); console.log(e);
@ -132,9 +154,6 @@ const setMarker = (e) => {
}) })
} }
const createPolygon = () => { const createPolygon = () => {
if(!polyEditor){
polyEditor = new AMap.PolygonEditor(map);
}
polyEditor.close(); polyEditor.close();
polyEditor.setTarget(); polyEditor.setTarget();
polyEditor.open() polyEditor.open()
@ -189,7 +208,10 @@ const getLine = () => {
}) })
}) })
}) })
console.log(params) console.log({
carIds: carIds.value,
polygons: params
})
} }
/** 重置按钮操作 */ /** 重置按钮操作 */

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

@ -92,30 +92,6 @@ const handleQuery = () => {
AMap.convertFrom(pathRow, 'gps', function (status, result) { AMap.convertFrom(pathRow, 'gps', function (status, result) {
if (result.info === 'ok') { if (result.info === 'ok') {
let lnglats = result.locations.map(e => [e.lng, e.lat]); let lnglats = result.locations.map(e => [e.lng, e.lat]);
//
// let GraspRoadPath = lnglats.map((res, i) => {
// if (i === 0) {
// return {
// 'x': res[0],
// 'y': res[1],
// 'sp': 10,
// 'ag': 0,
// 'tm': 1478031031,
// }
// }
// return {
// 'x': res[0],
// 'y': res[1],
// 'sp': 10,
// 'ag': 0,
// 'tm': i,
// }
// })
// grasp.driving(GraspRoadPath, function (error, result) {
// if (!error) {
// var newPath = result.data.points;//纠偏后的轨迹
// var distance = result.data.distance;//里程
// let newPolylinePath = newPath.map(e => [e.x, e.y])
polyline = new AMap.Polyline({ polyline = new AMap.Polyline({
strokeColor: '#00BBFF', // 线颜色-深蓝色 strokeColor: '#00BBFF', // 线颜色-深蓝色
path: lnglats, path: lnglats,

80
ruoyi-ui/src/views/realTimeMonitoring/vehicleMonitoring/index.vue
Unescape Escape View File

@ -7,7 +7,7 @@
<script setup> <script setup>
import AMapLoader from '@amap/amap-jsapi-loader'; import AMapLoader from '@amap/amap-jsapi-loader';
import {getCarGpsList, listBasetyre,queryCardata} from '@/api/realTimeMonitoring/vehicleMonitoring' import {getCarGpsList, listBasetyre, queryCardata} from '@/api/realTimeMonitoring/vehicleMonitoring'
import {parseTime} from "@/utils/ruoyi"; import {parseTime} from "@/utils/ruoyi";
import {onBeforeUnmount} from "@vue/runtime-core"; import {onBeforeUnmount} from "@vue/runtime-core";
@ -15,52 +15,67 @@ const {proxy} = getCurrentInstance();
let map = null let map = null
const treeData = ref([]) const treeData = ref([])
const markers = ref([]) const markers = ref([])
const nowData = ref(null)
const treeDefaultProps = {label: 'title', children: 'baseCarList'} const treeDefaultProps = {label: 'title', children: 'baseCarList'}
const treeClick = (data) => { const treeClick = (data, zoom) => {
if (!data.baseCarList) { console.log('123123', parseFloat(zoom) || 14)
nowData.value = data
if (!data?.baseCarList) {
map.remove(markers.value); map.remove(markers.value);
markers.value = [] markers.value = []
setMarker({id: data.id}, 14,false) setMarker({id: data.id}, parseFloat(zoom) || 14, false)
} else { } else {
map.remove(markers.value); map.remove(markers.value);
markers.value = [] markers.value = []
setMarker({queueId: data.id}, 8,true) setMarker({queueId: data.id}, parseFloat(zoom) || 8, true)
} }
} }
setInterval(() => {
nowData.value && treeClick(nowData.value, map.getZoom())
}, 1000 * 10)
window.$tab = proxy.$tab window.$tab = proxy.$tab
const setMarker = async (data, zoom,isChildren) => { const setMarker = async (data, zoom, isChildren) => {
let markerArr = [] let markerArr = []
if(isChildren){ if (isChildren) {
let e= await getCarGpsList(data) let e = await getCarGpsList(data)
markerArr = e.data markerArr = e.data
} else{ } else {
let e = await queryCardata(data) let e = await queryCardata(data)
markerArr = [e.data] markerArr = [e.data]
} }
console.log(markerArr) let pathRow = markerArr.map(val => [val.longitude, val.latitude])
markerArr.forEach((e, index) => { AMap.convertFrom(pathRow, 'gps', function (status, result) {
// 点标记 if (result.info === 'ok') {
markers.value[index] = new AMap.Marker({ let lnglats = result.locations.map(e => [e.lng, e.lat]);
content: '<div class="markerIcon" />', lnglats.forEach((v, i) => {
position: [e.longitude, e.latitude], markerArr[i].longitude = v[0]
anchor: 'bottom-center', markerArr[i].latitude = v[1]
offset: new AMap.Pixel(0, 0), })
label: { markerArr.forEach((e, index) => {
direction: 'top', // 点标记
content: `<div class='info'>${e.carLicense || ''} - <span style="color: ${e.state === 0 ? 'green">在线' : 'red">离线'}</span></div><div class='info' onClick='function a(i){window.$tab.openPage("carMonitoring"+"?id="+i,"/realTimeMonitoring") }a("${e.id}")'>监控 ${e.three || ''}</div><div class='info'>${parseTime(e.laseRuntime) || ''}</div>`, //设置文本标注内容 markers.value[index] = new AMap.Marker({
}, content: '<div class="markerIcon" />',
extData: { position: [e.longitude, e.latitude],
id: '123' anchor: 'bottom-center',
} offset: new AMap.Pixel(0, 0),
}); label: {
markers.value[index].on('click', (e) => { direction: 'top',
console.log(e.target._opts.extData) content: `<div class='info'>${e.carLicense || ''} - <span style="color: ${e.state === 0 ? 'green">在线' : 'red">离线'}</span></div><div class='info' onClick='function a(i){window.$tab.openPage("carMonitoring"+"?id="+i,"/realTimeMonitoring") }a("${e.id}")'>监控 ${e.three || ''}</div><div class='info'>${parseTime(e.laseRuntime) || ''}</div>`, //设置文本标注内容
}) },
extData: {
id: '123'
}
});
markers.value[index].on('click', (e) => {
console.log(e.target._opts.extData)
})
})
map.add(markers.value)
map.setFitView()
map.setZoom(zoom || 8)
}
}) })
map.add(markers.value)
map.setFitView()
map.setZoom(zoom || 8)
} }
@ -76,7 +91,7 @@ AMapLoader.load({
zoom: 8, //初始化地图级别 zoom: 8, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置 center: [116.397428, 39.90923], //初始化地图中心点位置
}); });
await setMarker(undefined,undefined,true) await setMarker(undefined, undefined, true)
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件 // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
@ -93,7 +108,6 @@ AMapLoader.load({
}).catch(e => { }).catch(e => {
console.log(e);
}) })
listBasetyre().then(e => { listBasetyre().then(e => {

12
ruoyi-ui/src/views/tireManagement/lifecycle/index.vue
Unescape Escape View File

@ -172,12 +172,12 @@ const tireInfo = ref({
longestWorkTime: '', longestWorkTime: '',
highPressHis: '', highPressHis: '',
warringTimes: '', warringTimes: '',
war: [ // war: [
{ // {
type: '高温', // type: '高温',
num: 1 // num: 1
} // }
] // ]
}) })

2
ruoyi-ui/vite.config.js
Unescape Escape View File

@ -28,7 +28,7 @@ export default defineConfig(({mode, command}) => {
}, },
// vite 相关配置 // vite 相关配置
server: { server: {
port: 80, port: 81,
host: true, host: true,
// https:true, // https:true,
// open: true, // open: true,

Write Preview
Loading…
Cancel
Save