修改单车监控

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,6 +449,7 @@ function handleQuery() {
 
   getList();
 }
+
 const toGPS = () => {
   proxy.$tab.openPage("/GPS/tyre" + "?id=" + tyreInfo.value.id, "/GPS")
 }