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

修改报警请求

Browse Source
master
夜笙歌 2 years ago
parent 7b3737e83b
commit 9ca2e1613e
4 changed files with 204 additions and 188 deletions
Show Stats Download Patch File Download Diff File

33
ruoyi-ui/src/App.vue
Unescape Escape View File

@ -1,10 +1,12 @@
<template> <template>
<router-view /> <router-view/>
</template> </template>
<script setup> <script setup>
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme' import {handleThemeStyle} from '@/utils/theme'
import {ElNotification} from 'element-plus'
import useUserStore from "@/store/modules/user";
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
@ -12,4 +14,31 @@ onMounted(() => {
handleThemeStyle(useSettingsStore().theme) handleThemeStyle(useSettingsStore().theme)
}) })
}) })
const userStore = useUserStore()
const getWebsocket = () => {
let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name)
websocket.onopen = function (event) {
// console.log('onopen', event)
};
websocket.onmessage = function (event) {
// console.log('onmessage', event)
// let info = JSON.parse(event.data)
let info = JSON.parse("{\"carLicense\":\"鲁B66666\",\"ispowerinvalue\":\"0\",\"ispresshigh\":\"0\",\"ispresslower\":\"1\",\"istemperaturehigh\":\"0\",\"params\":{},\"reportTime\":\"2023-04-11 15:14:36\",\"tyrePosition\":\"1-1-1\"}")
ElNotification({
dangerouslyUseHTMLString: true,
message: `<div style="color: #fff"><img src="/src/assets/icons/highTemperature.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px"> ${info.ispresslower === '1' ? '低压' : ''} ${info.ispresshigh === '1' ? '高压' : ''} ${info.istemperaturehigh === '1' ? '高温' : ''} ${info.ispowerinvalue === '1' ? '低电压' : ''}</div>
<div style="position: absolute;top:50px;left: 0px">${info.reportTime}</div>
<div style="position: absolute;top:70px;left: 0px">信息</div>
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">${info.carLicense}</div>
<div style="position: absolute;top: 50px;right: 0px">${info.tyrePosition.split('-')[0]}排${info.tyrePosition.split('-')[1] === '1' ? '左' : '右'}侧${info.tyrePosition.split('-')[2] === '1' ? '外' : '内'}胎</div>
</div>`,
})
}
websocket.onerror = function () {
setTimeout(getWebsocket, 1000)
};
}
getWebsocket()
</script> </script>

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

@ -21,7 +21,7 @@ let downloadLoadingInstance;
export let isRelogin = {show: false}; export let isRelogin = {show: false};
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
console.log(import.meta.env.VITE_APP_BASE_API) // console.log(import.meta.env.VITE_APP_BASE_API)
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分 // axios中请求配置有baseURL选项，表示请求URL公共部分

345
ruoyi-ui/src/views/index.vue
Unescape Escape View File

@ -6,10 +6,14 @@
<div <div
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px"> style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
<div style="color: #3A71A8">车辆总数</div> <div style="color: #3A71A8">车辆总数</div>
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span> <div style="font-size: 24px">{{ carData.carTotal }}<span
style="vertical-align: top;font-size: 12px;color:#1ab394"> </span>
</div> </div>
<div style="color: #3A71A8">已绑定GPS</div> <div style="color: #3A71A8">已绑定GPS</div>
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span> <div style="font-size: 24px">{{ carData.carBindGps }}<span
style="vertical-align: top;font-size: 12px;color:#1ab394">{{
(carData.carBindGps / carData.carTotal).toFixed(4) * 100
}}%</span>
</div> </div>
</div> </div>
<div style="width: 90%;border-top: 1px solid #aaa;margin: 40px 0 40px 5%"></div> <div style="width: 90%;border-top: 1px solid #aaa;margin: 40px 0 40px 5%"></div>
@ -17,10 +21,14 @@
<div <div
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px"> style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
<div style="color: #3A71A8">轮胎数</div> <div style="color: #3A71A8">轮胎数</div>
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span> <div style="font-size: 24px">{{ tyreData.tyreTotal }}<span
style="vertical-align: top;font-size: 12px;color:#1ab394"></span>
</div> </div>
<div style="color: #3A71A8">已安装传感器数</div> <div style="color: #3A71A8">已安装传感器数</div>
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span> <div style="font-size: 24px">{{ tyreData.tyreBindSensor }}<span
style="vertical-align: top;font-size: 12px;color:#1ab394">{{
(tyreData.tyreBindSensor / tyreData.tyreTotal).toFixed(4) * 100
}}%</span>
</div> </div>
</div> </div>
<div <div
@ -65,62 +73,69 @@
<div <div
style="width: 20%;height: calc(100% - 20px);border-right: 1px solid #ccc;margin-top: 10px;display: inline-block;text-align: center;color:#fff;padding: 20px 0 0 0 "> style="width: 20%;height: calc(100% - 20px);border-right: 1px solid #ccc;margin-top: 10px;display: inline-block;text-align: center;color:#fff;padding: 20px 0 0 0 ">
<div style="font-size: 32px;font-weight: 600;line-height: 50px">16</div> <div style="font-size: 32px;font-weight: 600;line-height: 50px">16</div>
<div>预警总数</div> <div>报警总数</div>
</div> </div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;"> <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png" <img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute"> style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;"> <div style="width: 60%;margin-left: 30%;">
<div>1</div> <div>{{ warningInfo.istemperaturehigh }}</div>
<div>低温预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>高温预警</div> <div>高温预警</div>
</div> </div>
</div> </div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;"> <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png" <img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute"> style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;"> <div style="width: 60%;margin-left: 30%;">
<div>1</div> <div>{{ warningInfo.ispresshigh }}</div>
<div>低压预警</div> <div>高压预警</div>
</div> </div>
</div> </div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;"> <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png" <img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute"> style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;"> <div style="width: 60%;margin-left: 30%;">
<div>1</div> <div>{{ warningInfo.ispresslower }}</div>
<div>高压预警</div> <div>低压预警</div>
</div> </div>
</div> </div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;"> <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png" <img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute"> style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;"> <div style="width: 60%;margin-left: 30%;">
<div>12</div> <div>{{ warningInfo.ispowerinvalue }}</div>
<div>其他预警</div> <div>低电压预警</div>
</div> </div>
</div> </div>
</div> </div>
</el-footer> </el-footer>
</el-container> </el-container>
<el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)" <el-aside
style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px);;padding:12px 0 "
width="350px"> width="350px">
<div v-for="i in 60" style="position:relative;color:#fff;height: 120px;"> <div ref="warningRefP" style="height:100%;padding:0 24px">
<TransitionGroup class="container" name="fade" tag="div">
<div v-for="(i,index) in warringList" :key='index' ref="warningRef"
style="position:relative;color:#fff;height: 120px;">
<img src="../assets/icons/highTemperature.png" <img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px"> style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px">低压</div> <div style="position: absolute;top: 10px;left: 50px;font-size: 16px">
<div style="position: absolute;top:50px;left: 0px">时间</div> {{ i.ispresslower === 1 ? '低压' : '' }}
<div style="position: absolute;top:70px;left: 0px">信息</div> {{ i.ispresshigh === 1 ? '高压' : '' }} {{ i.istemperaturehigh === 1 ? '高温' : '' }}
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">鲁B66666</div> {{ i.ispowerinvalue === 1 ? '低电压' : '' }}
<div style="position: absolute;top: 50px;right: 0px">2排左侧内胎</div> </div>
<div style="width: 100%;border-top: 1px solid #aaa;margin: 10px 0;position:absolute;top: 100px"></div> <div style="position: absolute;top:50px;left: 0px">{{ i.createTime }}</div>
<div style="position: absolute;top:70px;left: 0px">传感器id：{{ i.sensorid }}</div>
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">{{ i.carLicense }}</div>
<div style="position: absolute;top: 50px;right: 0px">
{{ i.tyreposition?.split('-')[0] }}排{{
i.tyreposition?.split('-')[1] === '1' ? '左' : '右'
}}侧{{ i.tyreposition?.split('-')[2] === '1' ? '外' : '内' }}胎
</div>
<div
style="width: 100%;border-top: 1px solid #aaa;margin: 10px 0;position:absolute;top: 100px"></div>
</div>
</TransitionGroup>
</div> </div>
</el-aside> </el-aside>
</el-container> </el-container>
@ -133,9 +148,10 @@ import * as echarts from 'echarts';
// import resize from './mixins/resize' // import resize from './mixins/resize'
import chinaMap from './china.json' import chinaMap from './china.json'
import {getIndexdata} from "@/api/report/report"; import {getIndexdata} from "@/api/report/report";
import useUserStore from "@/store/modules/user";
const animationDuration = 6000 const animationDuration = 6000
const username=null const username = null
const dataInfo = ref({ const dataInfo = ref({
carTotal: '', carTotal: '',
carBindGps: '', carBindGps: '',
@ -161,11 +177,20 @@ export default {
}, },
data() { data() {
return { return {
items: [1, 2, 3, 4, 5],
chart: null, chart: null,
carChart: null, carChart: null,
tyreChart: null, tyreChart: null,
mapName: 'china', mapName: 'china',
geoCoordMap: {}, geoCoordMap: {},
warringList: [],
warringWaitList: [],
warningInfo: {
ispowerinvalue: 0,
ispresshigh: 0,
ispresslower: 0,
istemperaturehigh: 0,
},
chartData: [...(chinaMap.features.map(e => { chartData: [...(chinaMap.features.map(e => {
return { return {
name: e.properties.name, name: e.properties.name,
@ -175,142 +200,52 @@ export default {
name: '南海诸岛', name: '南海诸岛',
value: Math.random() * 200 value: Math.random() * 200
}], }],
toolTipData: [ toolTipData: [],
{ carData: {
"name": "北京", carBindGps: 0,
"value": [116.405285, 39.904989, 177] carTotal: 0
},
{
"name": "天津",
"value": [117.190182, 39.125596, 42]
}, },
{ tyreData: {
"name": "河北", tyreBindSensor: 0,
"value": [114.502461, 38.045474, 102] tyreTotal: 0
}, },
{
"name": "山西",
"value": [112.549248, 37.857014, 81]
},
{
"name": "内蒙古",
"value": [111.670801, 40.818311, 47]
},
{
"name": "辽宁",
"value": [123.429096, 41.796767, 67]
},
{
"name": "吉林",
"value": [125.3245, 43.886841, 82]
},
{
"name": "黑龙江",
"value": [126.642464, 45.756967, 66]
},
{
"name": "上海",
"value": [121.472644, 31.231706, 24]
},
{
"name": "江苏",
"value": [118.767413, 32.041544, 92]
},
{
"name": "浙江",
"value": [120.153576, 30.287459, 114]
},
{
"name": "安徽",
"value": [117.283042, 31.86119, 109]
},
{
"name": "福建",
"value": [119.306239, 26.075302, 116]
},
{
"name": "江西",
"value": [115.892151, 28.676493, 91]
},
{
"name": "山东",
"value": [117.000923, 36.675807, 119]
},
{
"name": "河南",
"value": [113.665412, 34.757975, 137]
},
{
"name": "湖北",
"value": [114.298572, 30.584355, 116]
},
{
"name": "湖南",
"value": [112.982279, 28.19409, 114]
},
{
"name": "重庆",
"value": [106.504962, 29.533155, 91]
},
{
"name": "四川",
"value": [104.065735, 30.659462, 125]
},
{
"name": "贵州",
"value": [106.713478, 26.578343, 62]
},
{
"name": "云南",
"value": [102.712251, 25.040609, 83]
},
{
"name": "西藏",
"value": [91.132212, 29.660361, 9]
},
{
"name": "陕西",
"value": [108.948024, 34.263161, 80]
},
{
"name": "甘肃",
"value": [103.823557, 36.058039, 56]
},
{
"name": "青海",
"value": [101.778916, 36.623178, 10]
},
{
"name": "宁夏",
"value": [106.278179, 38.46637, 18]
},
{
"name": "新疆",
"value": [87.617733, 43.792818, 67]
},
{
"name": "广东",
"value": [113.280637, 23.125178, 123]
},
{
"name": "广西",
"value": [108.320004, 22.82402, 59]
},
{
"name": "海南",
"value": [110.33119, 20.031971, 14]
}]
} }
}, },
mounted() { async mounted() {
// this.$nextTick(async () => {
// this.getErrInfo()
await this.setInfo()
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() let domList = this.$refs.warningRef
this.initCarChart() let domParent = this.$refs.warningRefP
this.initTyreChart() let listLength = Math.floor(domParent.clientHeight / 120)
this.getErrInfo() this.warringWaitList = []
let i = 1
let timeout = null
let timeoutF = () => {
timeout = setInterval(() => {
if (i >= listLength) {
clearInterval(timeout)
}
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
i++
}, 1000)
}
timeoutF()
setInterval(() => {
if (this.warringWaitList.length > 0) {
this.warringList.splice(1, 0)
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
}
}, 1000)
// console.log(this.warringList)
// console.log(domList.at(-1))
// domParent.scrollTop += 100
}) })
// })
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
@ -320,6 +255,29 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
async setInfo() {
await getIndexdata().then(response => {
// console.log(response)
this.warringWaitList = [...response.data.warringList, ...response.data.warringList, ...response.data.warringList],
this.carData = {
carBindGps: response.data.carBindGps,
carTotal: response.data.carTotal,
}
this.tyreData = {
tyreBindSensor: response.data.tyreBindSensor,
tyreTotal: response.data.tyreTotal,
}
this.toolTipData = response.data.carMap.map(e => {
return {
"name": '',
"value": [e.longitude, e.latitude, '']
}
})
this.initChart()
this.initCarChart()
this.initTyreChart()
})
},
setData(e) { setData(e) {
let item = e.filter(val => !!val) let item = e.filter(val => !!val)
this.XData = item.map(val => val.time || '') this.XData = item.map(val => val.time || '')
@ -328,12 +286,6 @@ export default {
this.initChart() this.initChart()
}, },
initChart() { initChart() {
getIndexdata().then(response => {
console.log(response)
}).finally(() => {
});
echarts.registerMap('china', chinaMap); echarts.registerMap('china', chinaMap);
this.chart = echarts.init(document.getElementById('charts'), 'macarons') this.chart = echarts.init(document.getElementById('charts'), 'macarons')
this.chart.showLoading(); this.chart.showLoading();
@ -481,7 +433,7 @@ export default {
this.carChart.setOption({ this.carChart.setOption({
title: [ title: [
{ {
text: "333", text: this.carData.carBindGps,
x: "center", x: "center",
top: "52%", top: "52%",
textStyle: { textStyle: {
@ -491,7 +443,7 @@ export default {
}, },
}, },
{ {
text: "60%", text: (this.carData.carBindGps / this.carData.carTotal).toFixed(4) * 100 + '%',
x: "center", x: "center",
top: "32%", top: "32%",
textStyle: { textStyle: {
@ -506,7 +458,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
}, },
angleAxis: { angleAxis: {
max: 100, max: this.carData.carTotal,
show: false, show: false,
}, },
radiusAxis: { radiusAxis: {
@ -532,7 +484,7 @@ export default {
backgroundStyle: { backgroundStyle: {
color: "rgba(66, 66, 66, .3)", color: "rgba(66, 66, 66, .3)",
}, },
data: [60], data: [this.carData.carBindGps],
coordinateSystem: "polar", coordinateSystem: "polar",
itemStyle: { itemStyle: {
@ -558,7 +510,7 @@ export default {
this.tyreChart.setOption({ this.tyreChart.setOption({
title: [ title: [
{ {
text: "333", text: this.tyreData.tyreBindSensor,
x: "center", x: "center",
top: "52%", top: "52%",
textStyle: { textStyle: {
@ -568,7 +520,7 @@ export default {
}, },
}, },
{ {
text: "60%", text: (this.tyreData.tyreBindSensor / this.tyreData.tyreTotal).toFixed(4) * 100 + '%',
x: "center", x: "center",
top: "32%", top: "32%",
textStyle: { textStyle: {
@ -583,7 +535,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
}, },
angleAxis: { angleAxis: {
max: 100, max: this.tyreData.tyreTotal,
show: false, show: false,
}, },
radiusAxis: { radiusAxis: {
@ -609,7 +561,7 @@ export default {
backgroundStyle: { backgroundStyle: {
color: "rgba(66, 66, 66, .3)", color: "rgba(66, 66, 66, .3)",
}, },
data: [60], data: [this.tyreData.tyreBindSensor],
coordinateSystem: "polar", coordinateSystem: "polar",
itemStyle: { itemStyle: {
@ -635,14 +587,15 @@ export default {
alert("您的浏览器不支持Websocket通信协议") alert("您的浏览器不支持Websocket通信协议")
return return
} }
const userStore = useUserStore()
const getWebsocket = () => { const getWebsocket = () => {
let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/admin_ny") let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name)
websocket.onopen = function (event) { websocket.onopen = function (event) {
console.log("服务已连接") // console.log('onopen',event)
}; };
websocket.onmessage = function (event) { websocket.onmessage = function (event) {
console.log(event) // console.log('onmessage',event)
} }
websocket.onerror = function () { websocket.onerror = function () {
setTimeout(getWebsocket, 1000) setTimeout(getWebsocket, 1000)
@ -657,4 +610,38 @@ export default {
.indexBg { .indexBg {
background-image: url('../assets/images/indexBg.jpg'); background-image: url('../assets/images/indexBg.jpg');
} }
.el-notification {
height: 100px;
background-color: #040f39;
color: #fff
}
.item {
width: 100%;
height: 30px;
background-color: #f3f3f3;
border: 1px solid #666;
box-sizing: border-box;
}
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}
/* 3. 确保离开的项目被移除出了布局流
以便正确地计算移动时的动画效果。 */
.fade-leave-active {
position: absolute;
}
</style> </style>

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

@ -31,7 +31,7 @@ export default defineConfig(({mode, command}) => {
port: 80, port: 80,
host: true, host: true,
// https:true, // https:true,
open: true, // open: true,
proxy: { proxy: {
'/dev-api': { '/dev-api': {
// target: 'https://ticptest.tercelo.com/dev-api', // target: 'https://ticptest.tercelo.com/dev-api',

Write Preview
Loading…
Cancel
Save