|
|
|
@ -1,127 +1,31 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<el-form :model="form" inline label-width="80px">
|
|
|
|
|
<el-form-item label="所属车队">
|
|
|
|
|
<el-select v-model="form.carQueue" placeholder="请选择" @change="carQueueChange">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in carQueueOption"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-form :model="form" label-width="120px">
|
|
|
|
|
<el-form-item label="Activity form">
|
|
|
|
|
<el-upload
|
|
|
|
|
:http-request="requestUpload"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
action="#"
|
|
|
|
|
class="avatar-uploader"
|
|
|
|
|
>
|
|
|
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar"/>
|
|
|
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
|
|
|
<Plus/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="车牌号">
|
|
|
|
|
<el-select v-model="form.licenseNumber" :disabled='isLicenseNumber' placeholder="请选择"
|
|
|
|
|
@change="licenseNumberChange">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in licenseNumberOption"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="onSubmit">Create</el-button>
|
|
|
|
|
<el-button>Cancel</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div style="display: inline-block;width: 560px;height:auto">
|
|
|
|
|
<div class="bg" style="margin-right: 40px;">
|
|
|
|
|
<div v-for="(item,index) in tireArrangement">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<div v-for="(item,index) in tireArrangement">
|
|
|
|
|
<div class="item" @click="tyreClick((index+1)+'-2-2',((index+1)+'排右侧内胎'))">
|
|
|
|
|
<div
|
|
|
|
|
: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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" @click="tyreClick((index+1)+'-2-1',((index+1)+'排右侧外胎'))">
|
|
|
|
|
<div
|
|
|
|
|
:style="`background-color:${backgroundColorState((index+1)+'-2-1')};border-color:${borderColorState((index+1)+'-2-1')}`"
|
|
|
|
|
class="circle">
|
|
|
|
|
<span>{{ index + 1 }}排右侧外胎</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;">
|
|
|
|
|
<el-form ref="form22" :model="form2" :rules="rules" inline label-width="120px">
|
|
|
|
|
<el-form-item label="当前轮胎位置" style="width: 100%;">
|
|
|
|
|
{{ form2.location }}
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="轮胎编号" prop="outerTireNumber" style="width: 100%;">
|
|
|
|
|
<!-- <el-select-->
|
|
|
|
|
<!-- v-model="value"-->
|
|
|
|
|
<!-- :loading="loading"-->
|
|
|
|
|
<!-- :remote-method="outerTireNumberSearchClick"-->
|
|
|
|
|
<!-- filterable-->
|
|
|
|
|
<!-- multiple-->
|
|
|
|
|
<!-- placeholder="Please enter a keyword"-->
|
|
|
|
|
<!-- remote-->
|
|
|
|
|
<!-- reserve-keyword-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- <el-option-->
|
|
|
|
|
<!-- v-for="item in outerTireNumberOption"-->
|
|
|
|
|
<!-- :key="item.value"-->
|
|
|
|
|
<!-- :label="item.label"-->
|
|
|
|
|
<!-- :value="item.value"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- </el-select>-->
|
|
|
|
|
<el-input v-model="form2.outerTireNumber">
|
|
|
|
|
<template #append>
|
|
|
|
|
<el-button :icon="Search" @click="outerTireNumberSearchClick"/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="轮胎品牌" style="width: 100%;">
|
|
|
|
|
<el-input v-model="form2.brand" disabled/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="规格型号" style="width: 100%;">
|
|
|
|
|
<el-input v-model="form2.size" disabled/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="传感器ID" style="width: 100%;">
|
|
|
|
|
<el-input v-model="form2.sensorId"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="里程" style="width: 100%;">
|
|
|
|
|
<el-input-number v-model="form2.carOnlineMileage"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="当前花纹深度" style="width: 100%;">
|
|
|
|
|
<el-input-number v-model="form2.currentTextureDepth" :precision="2" :step="0.1"/>
|
|
|
|
|
|
|
|
|
|
<el-button @click="EditPatternTextureDepthFun">修改花纹深度</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label=" ">
|
|
|
|
|
<el-button type="primary" @click="installClick()">安装/更换</el-button>
|
|
|
|
|
<!-- <el-button type="primary" @click="installClick(1)">安装/更换</el-button>-->
|
|
|
|
|
<!-- <el-button type="primary" @click="installClick(2)">更换</el-button>-->
|
|
|
|
|
<el-button :disabled="!form2?.tyreId" @click="uninstallClick(3)">卸载轮胎</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script name="basetyre" setup>
|
|
|
|
|
import {listCarQueue, setCarTyres, TyreInstall, getTyreInfo, TyreUnInstall,EditPatternTextureDepth} from "@/api/tireManagement/install";
|
|
|
|
|
import {
|
|
|
|
|
uploadImg
|
|
|
|
|
} from "@/api/feedback/feedback";
|
|
|
|
|
import {Search} from '@element-plus/icons-vue'
|
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
@ -131,280 +35,45 @@ 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([])
|
|
|
|
|
|
|
|
|
|
const imageUrl = ref('')
|
|
|
|
|
|
|
|
|
|
const form = ref({
|
|
|
|
|
carQueue: '',
|
|
|
|
|
licenseNumber: '',
|
|
|
|
|
const form = reactive({
|
|
|
|
|
imgUrl: '',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const form2 = ref({
|
|
|
|
|
brand: "",
|
|
|
|
|
currentTextureDepth: null,
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
sensorId: "",
|
|
|
|
|
size: "",
|
|
|
|
|
tyrePositionVal: '',
|
|
|
|
|
carOnlineMileage:'',
|
|
|
|
|
tyrePosition: "",
|
|
|
|
|
})
|
|
|
|
|
const rules = {
|
|
|
|
|
outerTireNumber: [
|
|
|
|
|
{required: true, message: '请输入轮胎编号', trigger: 'change'},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
const outerTireNumberOption = ref([
|
|
|
|
|
{
|
|
|
|
|
value: 'Option1',
|
|
|
|
|
label: 'Option1',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 'Option2',
|
|
|
|
|
label: 'Option2',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 'Option3',
|
|
|
|
|
label: 'Option3',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 'Option4',
|
|
|
|
|
label: 'Option4',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 'Option5',
|
|
|
|
|
label: 'Option5',
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
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, location) => {
|
|
|
|
|
nowClick.value = e
|
|
|
|
|
let data = tireList.value.filter(res => res.tyrePositionVal === e)?.[0] || {}
|
|
|
|
|
form2.value = {...data, location}
|
|
|
|
|
console.log(data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
tireArrangement.value = []
|
|
|
|
|
nowClick.value = ''
|
|
|
|
|
form2.value = {
|
|
|
|
|
brand: "",
|
|
|
|
|
currentTextureDepth: null,
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
sensorId: "",
|
|
|
|
|
size: "",
|
|
|
|
|
tyrePositionVal: '',
|
|
|
|
|
tyrePosition: "",
|
|
|
|
|
carOnlineMileage:'',
|
|
|
|
|
tyreiId: ''
|
|
|
|
|
}
|
|
|
|
|
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 = async (e) => {
|
|
|
|
|
form2.value = {
|
|
|
|
|
brand: "",
|
|
|
|
|
currentTextureDepth: null,
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
sensorId: "",
|
|
|
|
|
size: "",
|
|
|
|
|
tyrePositionVal: "",
|
|
|
|
|
carOnlineMileage:'',
|
|
|
|
|
tyrePosition: "",
|
|
|
|
|
tyreiId: ''
|
|
|
|
|
}
|
|
|
|
|
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,
|
|
|
|
|
tyrePositionVal: e.tyrePosition?.split('-')[0] + '-' + e.tyrePosition?.split('-')[1] + '-' + e.tyrePosition?.split('-')[2]
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const onSubmit = () => {
|
|
|
|
|
console.log('submit!')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const outerTireNumberSearchClick = async () => {
|
|
|
|
|
const {data} = await getTyreInfo({outerTireNumber: form2.value.outerTireNumber})
|
|
|
|
|
let list = nowClick.value?.split('-').map(e => parseFloat(e))
|
|
|
|
|
let num = 0
|
|
|
|
|
if (list[0] === 1) {
|
|
|
|
|
if (list[1] === 1 && list[2] === 1) {
|
|
|
|
|
num += 2
|
|
|
|
|
}
|
|
|
|
|
if (list[1] === 2 && list[2] === 1) {
|
|
|
|
|
num += 1
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
num += 2
|
|
|
|
|
for (let i = 1; i < list?.[0] - 1; i++) {
|
|
|
|
|
num += (tireArrangement.value[i - 1] * 4)
|
|
|
|
|
}
|
|
|
|
|
if (list[1] === 1 && list[2] === 1) {
|
|
|
|
|
num += 4
|
|
|
|
|
}
|
|
|
|
|
if (list[1] === 1 && list[2] === 2) {
|
|
|
|
|
num += 3
|
|
|
|
|
}
|
|
|
|
|
if (list[1] === 2 && list[2] === 2) {
|
|
|
|
|
num += 2
|
|
|
|
|
}
|
|
|
|
|
if (list[1] === 2 && list[2] === 1) {
|
|
|
|
|
num += 1
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
form2.value.brand = data.brand
|
|
|
|
|
form2.value.size = data.size
|
|
|
|
|
form2.value.sensorId = data.sensorId
|
|
|
|
|
form2.value.tyreId = data.id
|
|
|
|
|
form2.value.tyrePosition = nowClick.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const installClick = (e) => {
|
|
|
|
|
let state = e
|
|
|
|
|
if (!e) {
|
|
|
|
|
state = 1
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
proxy.$refs["form22"].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log(form2.value)
|
|
|
|
|
TyreInstall({
|
|
|
|
|
...form2.value,
|
|
|
|
|
carLicense: licenseNumberOption.value.filter(e => e.value === form.value.licenseNumber)?.[0].label,
|
|
|
|
|
carId: form.value.licenseNumber,
|
|
|
|
|
type: state
|
|
|
|
|
}).then(async (e) => {
|
|
|
|
|
proxy.$modal.msgSuccess(e.msg);
|
|
|
|
|
let param = nowClick.value
|
|
|
|
|
let str = form2.value.location
|
|
|
|
|
await licenseNumberChange()
|
|
|
|
|
tyreClick(param, str)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
const EditPatternTextureDepthFun = () => {
|
|
|
|
|
proxy.$refs["form22"].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log(form2.value)
|
|
|
|
|
EditPatternTextureDepth({
|
|
|
|
|
...form2.value,
|
|
|
|
|
carLicense: licenseNumberOption.value.filter(e => e.value === form.value.licenseNumber)?.[0].label,
|
|
|
|
|
carId: form.value.licenseNumber,
|
|
|
|
|
type: 4
|
|
|
|
|
}).then(async (e) => {
|
|
|
|
|
proxy.$modal.msgSuccess(e.msg);
|
|
|
|
|
let param = nowClick.value
|
|
|
|
|
let str = form2.value.location
|
|
|
|
|
await licenseNumberChange()
|
|
|
|
|
tyreClick(param, str)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const requestUpload = (e) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
let formData = new FormData();
|
|
|
|
|
formData.append("avatarfile", e.file);
|
|
|
|
|
uploadImg(formData).then(response => {
|
|
|
|
|
console.log(response)
|
|
|
|
|
form.value.imgUrl = response.imgUrl
|
|
|
|
|
imageUrl.value = import.meta.env.VITE_APP_BASE_API+response.imgUrl
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const uninstallClick = (val) => {
|
|
|
|
|
if (form2.value.tyreId) {
|
|
|
|
|
TyreUnInstall({
|
|
|
|
|
...form2.value,
|
|
|
|
|
carLicense: licenseNumberOption.value.filter(e => e.value === form.value.licenseNumber)?.[0].label,
|
|
|
|
|
carId: form.value.licenseNumber,
|
|
|
|
|
type: val
|
|
|
|
|
}).then(async (e) => {
|
|
|
|
|
proxy.$modal.msgSuccess(e.msg);
|
|
|
|
|
let param = nowClick.value
|
|
|
|
|
let str = form2.value.location
|
|
|
|
|
await licenseNumberChange()
|
|
|
|
|
tyreClick(param, str)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getList()
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.bg {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 260px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
|
|
|
|
|
:not(:first-child) {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
.avatar-uploader .el-upload {
|
|
|
|
|
border: 1px dashed var(--el-border-color);
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: var(--el-transition-duration-fast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.circle {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #90bfea;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 2px solid #90bfea;
|
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
|
|
|
border-color: var(--el-color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
float: left;
|
|
|
|
|
line-height: 96px;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #8c939d;
|
|
|
|
|
width: 178px;
|
|
|
|
|
height: 178px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|