integrated_traffic_vue/src/views/mechanical_files/operations/view.vue

131 lines
5.6 KiB
Vue

<template>
<layout-card>
<div id="printContainer">
<el-divider content-position="left">{{data.busInfo.PLATE_NUMBER}}车辆档案</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label-class-name="width_200" label="登记编号">
{{ info.NUM }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车牌号">
{{ data.busInfo.PLATE_NUMBER }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车架号">
{{ data.busInfo.VIN }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车辆类型">
{{ data.busInfo.TRAILER_TYPE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车辆型号">
{{ data.busInfo.VEHICLE_MODEL }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车辆品牌">
{{ data.busInfo.VEHICLE_BRAND }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车主业户">
{{ data.busInfo.CAR_OWNERS }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="联系电话">
{{ data.busInfo.CAR_OWNERS_TEL }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="初登日期">
{{ data.busInfo.INITIAL_REGISTRATION_DATE }}
</el-descriptions-item>
<!--<el-descriptions-item label-class-name="width_200" label="经营企业">-->
<!--{{ info.CAR_OWNERS }}-->
<!--</el-descriptions-item>-->
</el-descriptions>
<el-divider content-position="left">运营证信息</el-divider>
<el-descriptions :column="2" border>
<el-descriptions-item label-class-name="width_200" label="登记人">
{{ info.REGISTRANT }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="办理日期">
{{ info.PROCESSING_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="运营证周期">
{{ info.CYCLE_NAME }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="到期日期">
{{ info.DUE_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="提醒天数">
{{ info.REMINDER_DAYS }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="提醒日期">
{{ info.REMINDER_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="提醒状态">
{{ info.REMINDER_STATUS==='1'?'开启':'关闭' }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="运营证资料" span="2">
<img
v-for="item in info.OPERATIONSINFO"
:key="item.FILEPATH"
v-viewer
:src="item.url"
width="100"
height="100"
alt=""
class="ml-10"
/>
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="备注" span=2>
{{ info.NOTES }}
</el-descriptions-item>
</el-descriptions>
</div>
<div class="mt-10 tc">
<el-button v-print="'#printContainer'" type="primary"></el-button>
</div>
<div v-html="PRINT_STYLE" />
</layout-card>
</template>
<script setup>
import { ref ,reactive} from "vue";
import { getOperationsView, getTrailerList} from "@/request/mechanical_files.js";
import { useRoute } from "vue-router";
import { addingPrefixToFile } from "@/assets/js/utils.js";
const route = useRoute();
const OPERATIONS_ID = route.query;
const info = ref({});
const data = reactive({
busInfo:{
NUM:'',
PLATE_NUMBER:'',
VIN:'',
TRAILER_TYPE:'',
VEHICLE_MODEL:'',
VEHICLE_BRAND:'',
CAR_OWNERS:'',
CAR_OWNERS_TEL:'',
INITIAL_REGISTRATION_DATE:'',
}
});
const fnBusChange = async (event) => {
const resData = await getTrailerList({ID:event})
data.busInfo = resData.list[0]
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile(
resData.drivingLicenseImgs
);
};
const fnGetData = async () => {
if (!OPERATIONS_ID) return;
const resData = await getOperationsView(OPERATIONS_ID);
info.value = resData.pd;
info.value.OPERATIONSINFO = []
fnBusChange(resData.pd.VEHICLE)
info.value.OPERATIONSINFO = addingPrefixToFile(
resData.operationsinfoImgs
);
};
fnGetData();
</script>
<style lang="scss" scoped>
.width_200{
width: 200px;
}
</style>