|
|
|
@ -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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|