修改轮胎安装

ruoyi-ui/src/views/tireManagement/install/index.vue

@@ -26,34 +26,46 @@
     <div style="display: inline-block;width: 560px;height:auto">
       <div class="bg" style="margin-right: 40px;">
         <div v-for="(item,index) in arr">
-          <div class="item" @click="tyreClick(index,1,1)">
-            <div class="circle">
+          <div class="item" @click="tyreClick((index+1)+'-1-1')">
+            <div
+                :style="`background-color:${backgroundColorState((index+1)+'-1-1')};border-color:${borderColorState((index+1)+'-1-1')}`"
+                class="circle">
               <span>{{ index + 1 }}排左侧外胎</span>
+              <!--              <span>{{ `${index + 1}-1-1` }}</span>-->
             </div>
           </div>
-          <div class="item" @click="tyreClick(index,1,2)">
-            <div :style="item === 2? '':'display:none'" class="circle">
+          <div class="item" @click="tyreClick((index+1)+'-1-2')">
+            <div
+                :style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-1-2')};border-color:${borderColorState((index+1)+'-1-2')}`"
+                class="circle">
               <span>{{ index + 1 }}排左侧内胎</span>
+              <!--              <span>{{ `${index + 1}-1-2` }}</span>-->
             </div>
           </div>
         </div>
       </div>
       <div class="bg">
         <div v-for="(item,index) in arr">
-          <div class="item" @click="tyreClick(index,2,1)">
-            <div :style="item === 2? '':'display:none'" class="circle">
+          <div class="item" @click="tyreClick((index+1)+'-2-1')">
+            <div
+                :style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-2-1')};border-color:${borderColorState((index+1)+'-2-1')}`"
+                class="circle">
               <span>{{ index + 1 }}排右侧内胎</span>
+              <!--              <span>{{ `${index + 1}-2-1` }}</span>-->
             </div>
           </div>
-          <div class="item">
-            <div class="circle" @click="tyreClick(index,2,2)">
+          <div class="item" @click="tyreClick((index+1)+'-2-2')">
+            <div
+                :style="`background-color:${backgroundColorState((index+1)+'-2-2')};border-color:${borderColorState((index+1)+'-2-2')}`"
+                class="circle">
               <span>{{ index + 1 }}排右侧外胎</span>
+              <!--              <span>{{ `${index + 1}-2-2` }}</span>-->
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div
+    <div v-if="!!nowClick"
         style="display: inline-block;width: calc(100% - 600px);margin-left: 40px;max-width:400px;height: 200px;vertical-align:top;">
       <el-form :model="form2" inline label-width="120px">
         <el-form-item label="当前轮胎位置" style="width: 100%;">
@@ -116,6 +128,67 @@ const isLicenseNumber = ref(true)
 const carQueueList = ref([])
 const carQueueOption = ref([])
 const licenseNumberOption = ref([])
+const nowClick = ref('')
+// 列 - 左1右2 - 外1内2
+const installedTyre = ref(['1-1-1', '3-2-1', '2-2-2', '5-1-2'])
+
+const backgroundColorState = (e) => {
+  if (installedTyre.value.includes(e)) {
+    return '#41ca7f'
+  } else {
+    return '#90bfea'
+  }
+}
+const borderColorState = (e) => {
+  if (e === nowClick.value) {
+    return '#ffff00'
+  }
+  if (installedTyre.value.includes(e)) {
+    return '#41ca7f'
+  } else {
+    return '#90bfea'
+  }
+}
+
+const tyreClick = (e) => {
+  nowClick.value = e
+}
+
+const getList = async () => {
+  let {rows: queueList} = await listCarQueue()
+  carQueueList.value = queueList
+  carQueueOption.value = queueList.map(e => {
+    return {
+      label: e.title,
+      value: e.id
+    }
+  })
+}
+
+const carQueueChange = (e) => {
+  form.value.licenseNumber = null
+  let option = carQueueList.value.filter(res => res.id === e)[0]?.baseCarList || []
+  option.length !== 0 ? isLicenseNumber.value = false : isLicenseNumber.value = true
+  licenseNumberOption.value = option.map(e => {
+    return {
+      label: e.carLicense,
+      value: e.id
+    }
+  })
+}
+
+const licenseNumberChange = (e) => {
+  console.log(form.value)
+}
+
+const installClick = () => {
+  console.log(form2.value)
+}
+
+const uninstallClick = () => {
+  console.log(form2.value)
+}
+
 
 const item = '10T1-1|2-2|3-2|4-1|5-2|6-1|'
 const arr = ref([])
@@ -195,42 +268,6 @@ const option5 = [
   },
 ]
 
-const tyreClick = (index, dir, e) => {
-  let param1 = index + 1
-  let param2 = index + 1
-  let param3 = index + 1
-  console.log(index, dir, e)
-}
-const getList = async () => {
-  let {rows: queueList} = await listCarQueue()
-  carQueueList.value = queueList
-  carQueueOption.value = queueList.map(e => {
-    return {
-      label: e.title,
-      value: e.id
-    }
-  })
-}
-const carQueueChange = (e) => {
-  form.value.licenseNumber = null
-  let option = carQueueList.value.filter(res => res.id === e)[0]?.baseCarList || []
-  option.length !== 0 ? isLicenseNumber.value = false : isLicenseNumber.value = true
-  licenseNumberOption.value = option.map(e => {
-    return {
-      label: e.carLicense,
-      value: e.id
-    }
-  })
-}
-const licenseNumberChange = (e) => {
-  console.log(form.value)
-}
-const installClick = () => {
-  console.log(form2.value)
-}
-const uninstallClick = () => {
-  console.log(form2.value)
-}
 getList()
 </script>
 <style lang="scss">
@@ -257,12 +294,13 @@ getList()
     height: 100%;
     background-color: #90bfea;
     border-radius: 50%;
+    border: 2px solid #90bfea;
 
     span {
       display: inline-block;
       width: 100%;
       float: left;
-      line-height: 100px;
+      line-height: 96px;
       vertical-align: top;
     }
   }

ruoyi-ui/vite.config.js

@@ -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/, '')
                 }