修改轮胎安装

ruoyi-ui/src/api/tireManagement/install.js

@@ -8,3 +8,11 @@ export function listCarQueue(query) {
         params: query
     })
 }
+// 查询轮胎详情
+export function setCarTyres(query) {
+    return request({
+        url: '/basecar/car/carTyres',
+        method: 'get',
+        params: query
+    })
+}

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

@@ -25,84 +25,66 @@
     </el-form>
     <div style="display: inline-block;width: 560px;height:auto">
       <div class="bg" style="margin-right: 40px;">
-        <div v-for="(item,index) in arr">
+        <div v-for="(item,index) in tireArrangement">
-          <div class="item" @click="tyreClick((index+1)+'-1-1')">
+          <div class="item" @click="tyreClick((index+1)+'-1-1',((index+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)+'-1-2')">
+          <div class="item" @click="tyreClick((index+1)+'-1-2',((index+1)+'排左侧内胎'))">
             <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 v-for="(item,index) in tireArrangement">
-          <div class="item" @click="tyreClick((index+1)+'-2-1')">
+          <div class="item" @click="tyreClick((index+1)+'-2-2',((index+1)+'排右侧内胎'))">
             <div
-                :style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-2-1')};border-color:${borderColorState((index+1)+'-2-1')}`"
+                :style="`${item === 2? '':'display:none;'}background-color:${backgroundColorState((index+1)+'-2-2')};border-color:${borderColorState((index+1)+'-2-2')}`"
                 class="circle">
               <span>{{ index + 1 }}排右侧内胎</span>
-              <!--              <span>{{ `${index + 1}-2-1` }}</span>-->
             </div>
           </div>
-          <div class="item" @click="tyreClick((index+1)+'-2-2')">
+          <div class="item" @click="tyreClick((index+1)+'-2-1',((index+1)+'排右侧外胎'))">
             <div
-                :style="`background-color:${backgroundColorState((index+1)+'-2-2')};border-color:${borderColorState((index+1)+'-2-2')}`"
+                :style="`background-color:${backgroundColorState((index+1)+'-2-1')};border-color:${borderColorState((index+1)+'-2-1')}`"
                 class="circle">
               <span>{{ index + 1 }}排右侧外胎</span>
-              <!--              <span>{{ `${index + 1}-2-2` }}</span>-->
             </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;">
+         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%;">
-          <el-input v-model="form2.params1"/>
+          {{ form2.location }}
         </el-form-item>
         <el-form-item label="轮胎编号" style="width: 100%;">
-          <el-input v-model="form2.params2">
+          <el-input v-model="form2.outerTireNumber">
             <template #append>
-              <el-button :icon="Search"/>
+              <el-button :icon="Search" @click="outerTireNumberSearchClick"/>
             </template>
           </el-input>
         </el-form-item>
         <el-form-item label="轮胎品牌" style="width: 100%;">
-          <el-select v-model="form2.params4" placeholder="Select">
+          <el-input v-model="form2.brand" disabled/>
-            <el-option
-                v-for="item in option4"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
         </el-form-item>
         <el-form-item label="规格型号" style="width: 100%;">
-          <el-select v-model="form2.params5" placeholder="Select">
+          <el-input v-model="form2.size" disabled/>
-            <el-option
-                v-for="item in option5"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
         </el-form-item>
         <el-form-item label="传感器ID" style="width: 100%;">
-          <el-input v-model="form2.params6"/>
+          <el-input v-model="form2.sensorId"/>
         </el-form-item>
         <el-form-item label="当前花纹深度" style="width: 100%;">
-          <el-input-number v-model="form2.params7" :precision="2" :step="0.1"/>
+          <el-input-number v-model="form2.currentTextureDepth" :precision="2" :step="0.1"/>
         </el-form-item>
         <el-form-item label=" ">
           <el-button type="primary" @click="installClick">安装/更换</el-button>
@@ -114,7 +96,7 @@
 </template>
 
 <script name="basetyre" setup>
-import {listCarQueue} from "@/api/tireManagement/install";
+import {listCarQueue, setCarTyres} from "@/api/tireManagement/install";
 import {Search} from '@element-plus/icons-vue'
 import {useI18n} from 'vue-i18n';
 import Cookies from "js-cookie";
@@ -124,13 +106,31 @@ const {t} = useI18n();
 const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
 const {proxy} = getCurrentInstance();
 const {sys_normal_disable} = proxy.useDict("sys_normal_disable");
+const tireArrangement = ref([])
+const tireList = ref({})
 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 installedTyre = ref([])
+
+
+const form = ref({
+  carQueue: '',
+  licenseNumber: '',
+})
+
+
+const form2 = ref({
+  brand: "",
+  currentTextureDepth: null,
+  outerTireNumber: null,
+  sensorId: "",
+  size: "",
+  tyrePosition: "",
+})
 
 const backgroundColorState = (e) => {
   if (installedTyre.value.includes(e)) {
@@ -150,8 +150,11 @@ const borderColorState = (e) => {
   }
 }
 
-const tyreClick = (e) => {
+const tyreClick = (e, location) => {
   nowClick.value = e
+  let data = tireList.value.filter(res => res.tyrePosition === e)?.[0] || {}
+  form2.value = {...data, location}
+  console.log(form2.value)
 }
 
 const getList = async () => {
@@ -167,6 +170,16 @@ const getList = async () => {
 
 const carQueueChange = (e) => {
   form.value.licenseNumber = null
+  tireArrangement.value = []
+  nowClick.value = ''
+  form2.value = {
+    brand: "",
+    currentTextureDepth: null,
+    outerTireNumber: null,
+    sensorId: "",
+    size: "",
+    tyrePosition: "",
+  }
   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 => {
@@ -177,8 +190,31 @@ const carQueueChange = (e) => {
   })
 }
 
-const licenseNumberChange = (e) => {
+const licenseNumberChange = async (e) => {
-  console.log(form.value)
+  form2.value = {
+    brand: "",
+    currentTextureDepth: null,
+    outerTireNumber: null,
+    sensorId: "",
+    size: "",
+    tyrePosition: "",
+  }
+  nowClick.value = ''
+  const {data: res} = await setCarTyres({id: form.value.licenseNumber})
+  tireArrangement.value = (res.carType?.split('T')[1]?.split('|').filter(e => e !== '') || []).map((res) => {
+    return parseInt(res.split('-')[1])
+  })
+  installedTyre.value = res.carTyresList.map(e => (e.tyrePosition.split('-')[0] + '-' + e.tyrePosition.split('-')[1] + '-' + e.tyrePosition.split('-')[2]))
+  tireList.value = res.carTyresList.map(e => {
+    return {
+      ...e,
+      tyrePosition: e.tyrePosition.split('-')[0] + '-' + e.tyrePosition.split('-')[1] + '-' + e.tyrePosition.split('-')[2]
+    }
+  })
+}
+
+const outerTireNumberSearchClick = () => {
+  console.log(form2.value.outerTireNumber)
 }
 
 const installClick = () => {
@@ -189,85 +225,6 @@ const uninstallClick = () => {
   console.log(form2.value)
 }
 
-
-const item = '10T1-1|2-2|3-2|4-1|5-2|6-1|'
-const arr = ref([])
-arr.value = (item?.split('T')[1]?.split('|').filter(e => e !== '') || []).map((res) => {
-  return parseInt(res.split('-')[1])
-})
-console.log(arr.value)
-
-const form = ref({
-  carQueue: '',
-  licenseNumber: '',
-})
-const form2 = ref({
-  params1: '',
-  params2: '',
-  params3: '',
-  params4: '',
-  params5: '',
-  params6: '',
-  params7: '',
-})
-const option1 = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-]
-const option2 = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-]
-
-const option4 = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-]
-const option5 = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-]
-
 getList()
 </script>
 <style lang="scss">