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

修改单车监测

Browse Source
master
夜笙歌 2 years ago
parent 751fa99dab
commit def60f21ce
3 changed files with 130 additions and 40 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-ui/src/assets/images/platebg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

@ -14,9 +14,25 @@
<!-- </div>-->
</el-col>
<el-col :offset="1" :span="11">
<div style="width: 100%;text-align: center">
<p style="font-weight: 600;font-size: 20px;margin-top: 32px">单车监控</p>
<p style="font-weight: 600;font-size: 16px;color:#cba658">{{ cardInfo.carLicense }} 里程：000.00km</p>
<div style="width: 100%;text-align: center;height: 100px">
<div style="width: calc(50% - 50px);float:left;">
<span style="font-weight: 600;font-size: 16px;color:#cba658;line-height: 40px">
<span class="platebg">
<span class="span1">{{ cardInfo.carLicense.slice(0, 2) }}</span>
<span class="span2">{{ cardInfo.carLicense.slice(2, 7) }}</span>
</span>
</span>
</div>
<div style="width: 100px;float:left;">
<span style="font-weight: 600;font-size: 20px;line-height: 100px">单车监控</span>
</div>
<div style="width: calc(50% - 50px);float:left;">
<span style="font-weight: 600;font-size: 16px;color:#cba658;line-height: 100px">
<span style="vertical-align:top;">
里程：000.00km
</span>
</span>
</div>
</div>
<div v-for="(item,index) in 5" key="index" style="margin-bottom: 18px">
<div
@ -44,7 +60,7 @@
>
<el-tab-pane label="有车载设备车辆" name="有车载设备车辆">
<el-form ref="queryRef" :inline="true" :model="queryParams"
label-width="60px">
label-width="60px" max-height="800">
<el-form-item label="车队" prop="carQueueId">
<el-input
v-model="queryParams.carQueueId"
@ -76,7 +92,7 @@
@current-change="tableChange"
>
<el-table-column label="label" prop="label"/>
<el-table-column label="id" prop="id" v-if="false" />
<el-table-column v-if="false" label="id" prop="id"/>
</el-table>
<pagination
@ -97,15 +113,56 @@
</template>
<script setup>
import {listBaseCar,getCarGpsList} from '@/api/realTimeMonitoring/carMonitoring'
import {listBaseCar, getCarGpsList} from '@/api/realTimeMonitoring/carMonitoring'
import AMapLoader from '@amap/amap-jsapi-loader';
import {useI18n} from "vue-i18n";
import {ref} from 'vue'
import {useRouter} from 'vue-router';
import {parseTime} from "@/utils/ruoyi";
const {proxy} = getCurrentInstance();
const $router = useRouter();
const {t} = useI18n();
const pageId = ref('')
const tableRef1 = ref()
let map = null
const markers = ref(null)
AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "1.4.15", //
version: "2.0", //
plugins: [],
AMapUI: {
version: '1.1',
plugins: []
}
}).then((AMap) => {
map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 16, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置
});
}).catch(e => {
console.log(e);
})
proxy.$nextTick(async () => {
pageId.value = $router?.currentRoute?.value?.query?.id
if (pageId.value) {
// await tableChange({id: pageId.value})
const {rows: list} = await listBaseCar(queryParams.value)
tableData.value = list.map(e => {
return {
label: e.carLicense,
...e
}
})
tableRef1.value.setCurrentRow(tableData.value.find(e => e.id === pageId.value))
} else {
getList()
}
})
// 总条数
const total = ref(0);
@ -114,7 +171,7 @@ const getList = async () => {
tableData.value = list.map(e => {
return {
label: e.carLicense,
id:e.id
...e
}
})
total.value = tableData.value.length
@ -122,16 +179,27 @@ const getList = async () => {
}
const tableChange = async (e) => {
const {data:info} = await getCarGpsList({id:e.id})
console.log(info)
pageId.value = e.id
const {data: info} = await getCarGpsList({id: pageId.value})
cardInfo.value = {
carLicense:info[0].carLicense
carLicense: info[0].carLicense
}
console.log(info)
let timeOut = () => {
setTimeout(() => {
if (map) {
console.log(111)
setMarker(info[0])
clearTimeout(timeOut)
}
}, 1000)
}
timeOut()
}
const cardInfo = ref({
name: '名称',
carLicense:''
carLicense: ''
})
const tabsName = ref('有车载设备车辆')
@ -162,34 +230,20 @@ const resetQuery = () => {
handleQuery();
tableRef1.value.setCurrentRow()
}
let map = null
let polyline = null
let passedPolyline = null
let mouseTool = null
let path = [[116.478935, 39.997761], [103.85094, 35.987496], [106.205794, 38.458831], [108.983569, 34.285675], [111.761777, 40.875595]]
AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "1.4.15", //
version: "2.0", //
plugins: [],
AMapUI: {
version: '1.1',
plugins: []
}
}).then((AMap) => {
map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 16, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置
const setMarker = (res) => {
markers.value ? map.remove(markers.value) : ''
markers.value = new AMap.Marker({
content: '<div class="markerIcon" />',
position: [res.longitude, res.latitude],
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
});
}).catch(e => {
console.log(e);
})
getList()
map.add(markers.value)
map.setFitView()
map.setZoom(8)
}
</script>
<style>
<style lang="scss">
.container1 {
padding: 0px;
margin: 0px;
@ -211,4 +265,40 @@ getList()
.el-tabs {
border: 1px solid #ddd
}
.platebg {
display: inline-block;
width: 192px;
height: 60px;
background-image: url("../../../assets/images/platebg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 40px;
font-size: 30px;
color: #fff;
margin-top: 20px;
.span1 {
display: inline-block;
float: left;
line-height: 60px;
width: 32%;
}
.span2 {
display: inline-block;
float: left;
line-height: 60px;
width: 68%;
letter-spacing: 4px;
}
}
.markerIcon {
width: 65px;
height: 50px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("../../../assets/images/trucks.png");
}
</style>

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

@ -31,8 +31,8 @@ export default defineConfig(({mode, command}) => {
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
// target: 'http://10.11.41.249:8080',
target: 'http://localhost:8080',
target: 'http://10.11.41.249:8080',
// target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}

Write Preview
Loading…
Cancel
Save