From b18c67ccd26c2ef118982b12a3aab69c2e4c1c3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 31 Jul 2023 09:13:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=95=E8=BD=A6=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../carMonitoring/index.vue                   | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue b/ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue
index 2378ca5..a5708af 100644
--- a/ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue
+++ b/ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue
@@ -36,10 +36,10 @@
         </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%"
+              :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">
+                 :style="'border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top;background-color:'+setBg(index + 1,tyreList.find(e => e.tyrePositionS === (`${index + 1}-1-1`)))">
               <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 50px">
                 <div class="icon1"/>
                 {{
@@ -61,7 +61,7 @@
               :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">
+                 :style="'border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align: top;background-color:'+setBg(index + 1,tyreList.find(e => e.tyrePositionS === (`${index + 1}-1-2`)))">
               <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 50px">
                 <div class="icon1"/>
                 {{
@@ -83,7 +83,7 @@
               :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">
+                 :style="'border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top;background-color:'+setBg(index + 1,tyreList.find(e => e.tyrePositionS === (`${index + 1}-2-2`)))">
               <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 50px">
                 <div class="icon1"/>
                 {{
@@ -103,7 +103,7 @@
               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">
+                 :style="'border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top;background-color:'+setBg(index + 1,tyreList.find(e => e.tyrePositionS === (`${index + 1}-2-1`)))">
               <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 50px">
                 <div class="icon1"/>
                 {{
@@ -284,6 +284,28 @@ const markers = ref(null)
 const tyreInfo = ref({})
 const childrenList = ref([])
 
+const setBg = (index, e) => {
+  if (!e) return
+  if(parseFloat(e.temperature)>e.temperature_high){
+    return 'rgb(248,213,104)'
+  }
+  if (index === 1) {
+    if(parseFloat(e.pressure)>e.z1_pressure_high){
+      return 'rgb(136, 8, 8)'
+    }
+    if(parseFloat(e.pressure)<e.z1_pressure_low){
+      return 'rgb(170, 255, 0)'
+    }
+  } else {
+    if(parseFloat(e.pressure)>e.z_pressure_high){
+      return 'rgb(136, 8, 8)'
+    }
+    if(parseFloat(e.pressure)<e.z_pressure_low){
+      return 'rgb(170, 255, 0)'
+    }
+  }
+}
+
 const getTyreInfo = (e) => {
   console.log(e)
   console.log(tyreList.value)
@@ -427,8 +449,9 @@ function handleQuery() {
 
   getList();
 }
-const toGPS = ()=>{
-  proxy.$tab.openPage("/GPS/tyre"+"?id="+tyreInfo.value.id,"/GPS")
+
+const toGPS = () => {
+  proxy.$tab.openPage("/GPS/tyre" + "?id=" + tyreInfo.value.id, "/GPS")
 }
 
 /** 重置按钮操作 */