vehicleInfo.vue 5.18 KB
<template>
  <div>
  <div v-loading="loading" style="border: 1px solid black;">
        <el-row  >
          <el-col :span="6" class="bd">所属公司</el-col>
          <el-col :span="6" class="bd">{{infoData.companyName}}</el-col>
          <el-col :span="6" class="bd">车辆类型</el-col>
          <el-col :span="6" class="bd">{{infoData.energyTypeName}}</el-col>
        </el-row>
        <el-row  >
          <el-col :span="6" class="bd bd_left">车牌号码</el-col>
          <el-col :span="6" class="bd">{{infoData.licenseplateNo}}</el-col>
          <el-col :span="6" class="bd">车辆品牌</el-col>
          <el-col :span="6" class="bd">{{infoData.brandName}}</el-col>
        </el-row>
        <el-row >
          <el-col :span="6" class="bd bd_left">排放标准</el-col>
          <el-col :span="6" class="bd">{{infoData.emissionStanName}}</el-col>
            <el-col :span="6" class="bd">关联驾驶员</el-col>
            <el-col :span="6" class="bd">{{infoData.driverName}}</el-col>
        </el-row>

        <el-row  >
          <el-col :span="6" class="bd">道路运输证有效期</el-col>
          <el-col :span="6" class="bd">{{infoData.transportCertValid}}</el-col>
          <el-col :span="6" class="bd bd_left">行驶证有效期</el-col>
          <el-col :span="6" class="bd">{{infoData.licenseValid}}</el-col>
        </el-row>
        <el-row >
          <el-col :span="6" class="bd bd_left">录入日期</el-col>
          <el-col :span="6" class="bd">{{infoData.registerAt}}</el-col>
          <el-col :span="6" class="bd">车辆标识牌</el-col>
          <el-col :span="6" class="bd">{{infoData.abbreviation}}</el-col>
        </el-row>
        <el-row >
          <el-col :span="6" class="bd bd_left">车架号</el-col>
          <el-col :span="6" class="bd">{{infoData.frmaeNo}}</el-col>
          <el-col :span="6" class="bd">货箱体积</el-col>
          <el-col :span="6" class="bd">{{infoData.containerVolume}}</el-col>
        </el-row>

        <el-row >
          <el-col :span="6" class="bd bd_left">车牌颜色</el-col>
          <el-col :span="6" class="bd">{{infoData.licenseplateColorName}}</el-col>
          <el-col :span="6" class="bd">车辆设备</el-col>
          <el-col :span="6" class="bd">{{infoData.endName}}</el-col>
        </el-row>
        <el-row >
          <el-col :span="6" class="bd bd_left">备注</el-col>
          <el-col :span="18" class="bd">{{infoData.comment}}</el-col>
        </el-row>

       <div v-for="dict in dicts">
         <p >{{dict.name}}</p>
         <el-image v-for="item in infoData.attachmentList"
                   style="width: 40px; height: 40px; margin: 5px;"
                   :src="'/remotedown/' + item.attachmentPath"
                   :z-index="2000"
                    :preview-src-list="[slides1('/remotedown/' + item.attachmentPath)]"
                   v-if="item.typeCode == dict.code && (item.attachmentPath.toLowerCase().indexOf('.jpg') > -1 || item.attachmentPath.toLowerCase().indexOf('.png') > -1)">
         </el-image>
         <a v-for="item in infoData.attachmentList"
           @click="downloadFile(item.attachmentPath);"
           style="color:blue;"
           v-if="item.typeCode == dict.code
           && item.attachmentPath.toLowerCase().indexOf('.jpg') == -1
           && item.attachmentPath.toLowerCase().indexOf('.png') == -1"><p>{{item.name}}</p></a>
       </div>

  </div>

      <el-dialog title="" :visible.sync="showPic" append-to-body width="400px">
        <el-image
          style="width: 350px; height: 350px; margin: 5px;"
          :src="picImage"
          :preview-src-list="[picImage]"
          :z-index="2000">
        </el-image>
      </el-dialog>
    </div>
</template>

<script>


import store from "@/store";
  import {
    getToken
  } from "@/utils/auth";


  import {
    getTruckInfo,
    getArea,
    getDict
  } from "@/api/dict";


  export default {
    name: "truckInfo",
    props: {
      businessKey: {
        type: String
      },
    },
    data() {
      return {
        areas: [],
        loading: null,
        infoData: {},
        dicts:null,
        showPic:false,
        picImage:null,
      }
    },
    created() {


      getDict({type:"CSVehicleAttachmentType"}).then(res=>{
          this.dicts = res.result;
      });


      this.loading = true;
      this.getInfo();

    },
    methods: {
      slides1(img){
        return img;
      },
      getInfo() {
        let id;
        if (this.businessKey.split(":").length == 2) {
          id = this.businessKey.split(":")[1];
        } else {
          id = this.businessKey;
        }

        getTruckInfo(id).then(response => {

           this.infoData = response.result;

          this.loading = false;
        });
      },
      downloadFile(path){
          let file =  "/remotedown/" + path;

        if(path.indexOf(".jpg") != -1){
            this.showPic = true;

            this.picImage = file;
            return;
        }


          window.open(file,"new window");

          // window.location.href
      }
    }

  }
</script>
<style>
  .bd{
    padding:5px;
  }



</style>