修改地图坐标

master
夜笙歌 2 years ago
parent 38e9817bf1
commit 237d85a5e9

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

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

@ -4,13 +4,13 @@
<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
<el-cascader
v-model="queryParams.carLicense"
:options="options"
:placeholder=" t('common.pleaseEnter') + '车牌号'"
:props="cascaderProps"
clearable
style="width: 200px"
@keyup.enter.native="handleQuery"
/>
@change="cascaderChange"/>
</el-form-item>
<el-form-item label="时间" prop="internationalization3">
<el-date-picker
@ -35,9 +35,11 @@
</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";
import {listBaseCar} from "@/api/realTimeMonitoring/electronicFence";
import {getInfoById} from "@/api/realTimeMonitoring/alarmSendingSettings";
import {parseTime} from "@/utils/ruoyi";
const {t} = useI18n();
@ -45,6 +47,27 @@ const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance();
const queryParams = 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 polyEditor = null
@ -82,10 +105,9 @@ AMapLoader.load({
//
map.addControl(new AMap.MapType());
// setPolygon(areaPath.value)
// setMarker(marketPath.value)
setPolygon([])
}).catch(e => {
console.log(e);
@ -132,9 +154,6 @@ const setMarker = (e) => {
})
}
const createPolygon = () => {
if(!polyEditor){
polyEditor = new AMap.PolygonEditor(map);
}
polyEditor.close();
polyEditor.setTarget();
polyEditor.open()
@ -189,7 +208,10 @@ const getLine = () => {
})
})
})
console.log(params)
console.log({
carIds: carIds.value,
polygons: params
})
}
/** 重置按钮操作 */

@ -92,30 +92,6 @@ const handleQuery = () => {
AMap.convertFrom(pathRow, 'gps', function (status, result) {
if (result.info === 'ok') {
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({
strokeColor: '#00BBFF', // 线-
path: lnglats,

@ -7,7 +7,7 @@
<script setup>
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 {onBeforeUnmount} from "@vue/runtime-core";
@ -15,30 +15,43 @@ const {proxy} = getCurrentInstance();
let map = null
const treeData = ref([])
const markers = ref([])
const nowData = ref(null)
const treeDefaultProps = {label: 'title', children: 'baseCarList'}
const treeClick = (data) => {
if (!data.baseCarList) {
const treeClick = (data, zoom) => {
console.log('123123', parseFloat(zoom) || 14)
nowData.value = data
if (!data?.baseCarList) {
map.remove(markers.value);
markers.value = []
setMarker({id: data.id}, 14,false)
setMarker({id: data.id}, parseFloat(zoom) || 14, false)
} else {
map.remove(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
const setMarker = async (data, zoom,isChildren) => {
const setMarker = async (data, zoom, isChildren) => {
let markerArr = []
if(isChildren){
let e= await getCarGpsList(data)
if (isChildren) {
let e = await getCarGpsList(data)
markerArr = e.data
} else{
} else {
let e = await queryCardata(data)
markerArr = [e.data]
}
console.log(markerArr)
let pathRow = markerArr.map(val => [val.longitude, val.latitude])
AMap.convertFrom(pathRow, 'gps', function (status, result) {
if (result.info === 'ok') {
let lnglats = result.locations.map(e => [e.lng, e.lat]);
lnglats.forEach((v, i) => {
markerArr[i].longitude = v[0]
markerArr[i].latitude = v[1]
})
markerArr.forEach((e, index) => {
//
markers.value[index] = new AMap.Marker({
@ -61,6 +74,8 @@ const setMarker = async (data, zoom,isChildren) => {
map.add(markers.value)
map.setFitView()
map.setZoom(zoom || 8)
}
})
}
@ -76,7 +91,7 @@ AMapLoader.load({
zoom: 8, //
center: [116.397428, 39.90923], //
});
await setMarker(undefined,undefined,true)
await setMarker(undefined, undefined, true)
//
@ -93,7 +108,6 @@ AMapLoader.load({
}).catch(e => {
console.log(e);
})
listBasetyre().then(e => {

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

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

Loading…
Cancel
Save