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

修改单车监控界面

Browse Source
master
夜笙歌 2 years ago
parent b083c4d153
commit dd1392813b
7 changed files with 349 additions and 245 deletions
Show Stats Download Patch File Download Diff File

10
ruoyi-ui/src/api/realTimeMonitoring/carMonitoring.js
Unescape Escape View File

@ -8,6 +8,7 @@ export function listBaseCar(query) {
params: query
})
}
// 查询列表
export function getCarGpsList(query) {
return request({
@ -17,3 +18,12 @@ export function getCarGpsList(query) {
})
}
// 查询轮胎信息
export function getTyreList(query) {
return request({
url: '/basetyre/tyre/' + query,
method: 'get',
isNoLang: true,
})
}

2
ruoyi-ui/src/utils/request.js
Unescape Escape View File

@ -45,10 +45,10 @@ service.interceptors.request.use(config => {
...(config.params || {}),
lang
});
url = url.slice(0, -1);
} else {
url = config.url
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}

22
ruoyi-ui/src/views/dashboard/Temp.vue
Unescape Escape View File

@ -1,13 +1,13 @@
<template>
<div :class="className" :style="{height:height,width:width}" id="myChart"/>
<div id="myChart" :class="className" :style="{height:height,width:width}"/>
</template>
<script>
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import resize from './mixins/resize'
import {defineComponent, toRefs, reactive, onMounted} from 'vue'
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default defineComponent({
export default defineComponent({
mixins: [resize],
props: {
className: {
@ -42,7 +42,7 @@
trigger: 'axis'
},
legend: {
data: ['速度(千米)', '温度(℃)', '压力(Kpa)' ]
data: ['速度(千米)', '温度(℃)', '压力(Kpa)']
},
grid: {
left: '3%',
@ -66,7 +66,7 @@
interval: 0, //显示所有X轴信息
rotate: -40 //倾斜角度
},
data: ['2023-03-15 08:31', '2023-03-15 08:32', '2023-03-15 08:33', '2023-03-15 08:34', '2023-03-15 08:35', '2023-03-15 08:36', '2023-03-15 08:37', '2023-03-15 08:38','2023-03-15 08:39']
data: ['2023-03-15 08:31', '2023-03-15 08:32', '2023-03-15 08:33', '2023-03-15 08:34', '2023-03-15 08:35', '2023-03-15 08:36', '2023-03-15 08:37', '2023-03-15 08:38', '2023-03-15 08:39']
},
yAxis: [
{
@ -125,7 +125,7 @@
{
name: '速度(千米)',
type: 'line',
data: [0,0,0,18,21,36,44,45,58,66],
data: [0, 0, 0, 18, 21, 36, 44, 45, 58, 66],
symbol: "none",
// symbolSize: 10,
yAxisIndex: 0,
@ -141,7 +141,7 @@
{
name: '温度(℃)',
type: 'line',
data: [20,20,20,25,32,40,46,53,70,87],
data: [20, 20, 20, 25, 32, 40, 46, 53, 70, 87],
yAxisIndex: 1,//对应y轴
symbol: "none",
itemStyle: {
@ -156,7 +156,7 @@
{
name: '压力(Kpa)',
type: 'line',
data: [600,600,600,615,616,617,620,622,622,622],
data: [600, 600, 600, 615, 616, 617, 620, 622, 622, 622],
yAxisIndex: 2,//对应右侧的y轴
symbol: "none",
itemStyle: {
@ -185,6 +185,6 @@
...toRefs(state),
}
},
})
})
</script>

29
ruoyi-ui/src/views/deviceManagement/info/index.vue
Unescape Escape View File

@ -119,7 +119,11 @@
<el-table-column :label="t('baseDevice.baseDevice.internetThingsNo')" align="center" prop="internetThingsNo"
width="150"/>
<el-table-column :label="t('baseDevice.baseDevice.deviceType')" align="center" prop="deviceType"
/>
>
<template #default="scope">
{{ scope.row.state === 0? 'GPS接收机' : '胎压传感器' }}
</template>
</el-table-column>
<el-table-column :label="t('baseDevice.baseDevice.state')" align="center" prop="state"
>
<template #default="scope">
@ -135,25 +139,6 @@
width="150"/>
<el-table-column :label="t('common.createTime')" align="center" prop="createTime" width="160"/>
<el-table-column :label="t('common.createBy')" align="center" prop="createBy"/>
<el-table-column :label="t('option.option')" align="center" class-name="small-padding fixed-width" fixed="right"
width="160">
<template #default="scope">
<el-button
v-hasPermi="['basedevice:basedevice:edit']"
icon="Edit"
type="text"
@click="handleUpdate(scope.row)"
>{{ t('option.edit') }}
</el-button>
<el-button
v-hasPermi="['basedevice:basedevice:remove']"
icon="Delete"
type="text"
@click="handleDelete(scope.row)"
>{{ t('option.remove') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
@ -213,11 +198,11 @@ const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance();
const options = [
{
value: 'Option1',
value: '0',
label: 'GPS接收机',
},
{
value: 'Option2',
value: '1',
label: '胎压传感器',
},
]

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

@ -36,36 +36,69 @@
</div>
<div v-for="(item,index) in TireRow" key="index" style="margin-bottom: 18px">
<div
style="vertical-align:top;width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid #666;border-radius: 10%">
<div style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top" v-if="tyreDataList.includes(`${index+1}-1-1`)">
<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].currentTextureDepth}}</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].outerTireNumber}}</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>
style="vertical-align:top;width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid #666;border-radius: 10%"
@click="getTyreInfo(`${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">
<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].currentTextureDepth }}
</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].outerTireNumber }}
</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
:style="'vertical-align: top;width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid'+ (TireRow[index] === 2 ? '#666;' :'rgba(0,0,0,0);') + 'border-radius: 10%'"
@click="getTyreInfo(`${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">
<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].currentTextureDepth }}
</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].outerTireNumber }}
</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="'width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid'+ (TireRow[index] === 2 ? '#666;' :'rgba(0,0,0,0);') + 'border-radius: 10%'">
<div style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top" v-if="tyreDataList.includes(`${index+1}-1-2`)">
<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].currentTextureDepth}}</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].outerTireNumber}}</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"
style="width: calc(50% - 108px);height: 100px;display: inline-block;vertical-align:top"/>
<div
:style="'width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid '+ (TireRow[index] === 2 ? '#666' :'rgba(0,0,0,0)') +';border-radius: 10%'">
<div style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top" v-if="tyreDataList.includes(`${index+1}-2-2`)">
<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].currentTextureDepth}}</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].outerTireNumber}}</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>
:style="'vertical-align: top;width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid '+ (TireRow[index] === 2 ? '#666' :'rgba(0,0,0,0)') +';border-radius: 10%'"
@click="getTyreInfo(`${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">
<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].currentTextureDepth }}
</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].outerTireNumber }}
</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
style="width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid #666;border-radius: 10%">
<div style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top" v-if="tyreDataList.includes(`${index+1}-2-1`)">
<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].currentTextureDepth}}</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].outerTireNumber}}</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>
style="vertical-align: top;width: 12.5%;margin: 0 12px; height: 100px;display: inline-block;border: 1px solid #666;border-radius: 10%"
@click="getTyreInfo(`${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">
<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].currentTextureDepth }}
</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].outerTireNumber }}
</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>
@ -120,18 +153,44 @@
</el-col>
</el-row>
<el-dialog v-model="open" :title="title" append-to-body width="800px">
<el-form :inline="true" ref="postRef" :label-width=" locale ? '90px':'140px'" :model="tyreInfo" :rules="rules">
<el-form-item v-if="false" prop="id">
<el-input v-model="tyreInfo.id"/>
</el-form-item>
<el-form-item :label="t('test.test.internationalization1')" prop="internationalization1">
<el-input
v-model="tyreInfo.internationalization1"
:placeholder="t('common.pleaseEnter') + t('test.test.internationalization1')"/>
</el-form-item>
<el-form-item :label="t('test.test.internationalization2')" prop="internationalization2">
<el-input
v-model="tyreInfo.internationalization2"
:placeholder="t('common.pleaseEnter') + t('test.test.internationalization2')"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">{{ t('option.ok') }}</el-button>
<el-button @click="cancel">{{ t('option.cancel') }}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {listBaseCar, getCarGpsList} from '@/api/realTimeMonitoring/carMonitoring'
import {listBaseCar, getCarGpsList, getTyreList} 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";
import {onBeforeUnmount} from "@vue/runtime-core";
import {addBaseDevice, updateBaseDevice} from "@/api/deviceManagement/info";
const title = '轮胎信息'
const {proxy} = getCurrentInstance();
const $router = useRouter();
const {t} = useI18n();
@ -140,8 +199,20 @@ const tyreList = ref([])
const tyreDataList = ref([])
const pageId = ref('')
const tableRef1 = ref()
const open = ref(false)
let map = null
const markers = ref(null)
const tyreInfo = ref({})
const getTyreInfo = (e) => {
let id = tyreList.value.filter(val => val.tyrePositionS === e)?.[0]?.tyreId || ''
console.log(id)
if (!id) return
open.value = true
getTyreList(id).then(e => {
console.log(e)
})
}
AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
@ -205,14 +276,14 @@ const tableChange = async (e) => {
title.push(parseInt(res.split('-')[1]))
})
TireRow.value = title
let tyreListData = info[0].tyreList.map(e=>{
let tyreListData = info[0].tyreList.map(e => {
return {
...e,
tyrePositionS : e.tyrePosition?.split('-')[0] + '-' + e.tyrePosition?.split('-')[1] + '-' + e.tyrePosition?.split('-')[2]
tyrePositionS: e.tyrePosition?.split('-')[0] + '-' + e.tyrePosition?.split('-')[1] + '-' + e.tyrePosition?.split('-')[2]
}
})
tyreList.value = tyreListData
tyreDataList.value = tyreListData.map(e=>e.tyrePositionS)
tyreDataList.value = tyreListData.map(e => e.tyrePositionS)
console.log(tyreList.value)
let timeOut = () => {
setTimeout(() => {
@ -239,6 +310,45 @@ const queryParams = ref({
const tableData = ref([])
/** 取消按钮 */
function cancel() {
open.value = false;
reset();
}
/** 表单重置 */
function reset() {
tyreInfo.value = {
id: null,
internetThingsNo: null,
deviceType: null,
state: null,
};
proxy.resetForm("postRef");
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["postRef"].validate(valid => {
if (valid) {
if (tyreInfo.value.id != undefined) {
// updateBaseDevice(tyreInfo.value).then(response => {
// proxy.$modal.msgSuccess(t('option.modificationSuccessful'));
open.value = false;
// getList();
// });
} else {
// addBaseDevice(tyreInfo.value).then(response => {
// proxy.$modal.msgSuccess(t('option.addedSuccessfully'));
open.value = false;
// getList();
// });
}
}
});
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;

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

@ -41,7 +41,7 @@ const setMarker = async (data, zoom) => {
offset: new AMap.Pixel(0, 0),
label: {
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){console.log(window.$tab);window.$tab.openPage("carMonitoring"+"?id="+i,"/realTimeMonitoring") }a("${e.id}")'>监控 ${e.three || ''}</div><div class='info'>${parseTime(e.laseRuntime) || ''}</div>`, //设置文本标注内容
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'

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

@ -11,26 +11,26 @@
</template>
</el-input>
</div>
<div>品牌：{{ tireInfo.info1 }} 规格：{{ tireInfo.info2 }} 花纹：{{ tireInfo.info3 }}</div>
<div>品牌：{{ tireInfo.brand }} 规格：{{ tireInfo.size }} 花纹：{{ tireInfo.pattern }}</div>
<div>
<span class="yellow">使用时间&nbsp;&nbsp;</span>
<span>{{ tireInfo.info4 }}&nbsp;&nbsp;</span>
<span>{{ tireInfo.userTime }}&nbsp;&nbsp;</span>
<span class="yellow">最长连续报警时间&nbsp;&nbsp;</span>
<span>{{ tireInfo.info5 }}&nbsp;&nbsp;</span>
<span>{{ tireInfo.warringTime }}&nbsp;&nbsp;</span>
<span class="yellow">历史最高胎压&nbsp;&nbsp;</span>
<span>{{ tireInfo.info6 }}&nbsp;&nbsp;</span>
<span>{{ tireInfo.highTemHis }}&nbsp;&nbsp;</span>
</div>
<div>
<span class="yellow">预计剩余里程&nbsp;&nbsp;</span>
<span>{{ tireInfo.info7 }}km&nbsp;&nbsp;</span>
<span>{{ tireInfo.surplusMileage }}km&nbsp;&nbsp;</span>
<span class="yellow">最长连续工作时间&nbsp;&nbsp;</span>
<span>{{ tireInfo.info8 }}&nbsp;&nbsp;</span>
<span>{{ tireInfo.longestWorkTime }}&nbsp;&nbsp;</span>
<span class="yellow">历史最高胎温&nbsp;&nbsp;</span>
<span>{{ tireInfo.info9 }}&nbsp;&nbsp;</span>
<span>{{ tireInfo.highPressHis }}&nbsp;&nbsp;</span>
</div>
<div>
<span class="yellow">报警次数&nbsp;&nbsp;</span>
<span>{{ tireInfo.info10 }}&nbsp;&nbsp;</span>
<span>{{ tireInfo.warringTimes }}&nbsp;&nbsp;</span>
<div v-for="item in tireInfo.war" style="display: inline-block">
<span>{{ item.type }}&nbsp;&nbsp;</span>
<span>{{ item.num }}&nbsp;&nbsp;</span>
@ -133,8 +133,8 @@ const outerTireNumberSearchClick = async () => {
const {data: info} = await getTyreLife({
outerTireNumber: tireInfo.value.title
})
console.log(info)
list.value = info
list.value = info.lifeList
tireInfo.value = info.tyresLifeInfo
list.value.push({
datetime: new Date().getTime(),
description: '今日'
@ -148,8 +148,7 @@ const tyrePosition = (e) => {
let position = [parseFloat(arr?.[0]), parseFloat(arr?.[1]), parseFloat(arr?.[2])]
let Enum1 = ['左', '右']
let Enum2 = ['外', '内']
return `${position[0]}排${Enum1[position[1] - 1]}侧${Enum1[position[2] - 1]}胎`
console.log(position)
return `${position[0]}排${Enum1[position[1] - 1]}侧${Enum2[position[2] - 1]}胎`
}
const percentage = '3.33'
@ -158,16 +157,16 @@ const run = '3.33'
const tireInfo = ref({
title: '1001',
info1: '品牌',
info2: '规格',
info3: '花纹',
info4: '10h',
info5: '10h',
info6: '40°C',
info7: '666',
info8: '10h',
info9: '40°C',
info10: '1',
brand: '',
size: '',
pattern: '',
userTime: '',
warringTime: '',
highTemHis: '',
surplusMileage: '',
longestWorkTime: '',
highPressHis: '',
warringTimes: '',
war: [
{
type: '高温',

Write Preview
Loading…
Cancel
Save