soc_app/src/views/menu/iot/videoIntegrity/detail.vue

<template>
  <div class="record-detail">
    <nav-bar></nav-bar>
    <div class="page-container">
      <div class="card">
        <van-panel title="XXX设备">
          <div class="tag-box">
            <div v-for="(v,i) in tagList"
             class="tag-item"
             :style="{backgroundColor:getColor(v.state),borderColor:getColor(v.state)}"
             @click="clickTag" :key="i">
              {{v.name+i}}
            </div>
          </div>
          <ul class="legend">
            <li v-for="v in legend" :key="v.type">
              <span :style="{background:v.color}"></span>
              {{v.type}}
            </li>
          </ul>
        </van-panel>
      </div>
      <!--   基本信息   -->
      <div class="card">
        <van-panel >
            <template #header>
              <span></span>
            </template>
          <div class="panel-box">
            <van-cell title="组织机构" :value="selectedUser.userName"></van-cell>
            <van-cell title="监控主机" :value="getDictLabel(selectedUser.type,'out_in_type')"></van-cell>
            <van-cell title="通道号" :value="selectedUser.idCard"></van-cell>
            <van-cell title="计划存储天数" :value="selectedUser.idCard"></van-cell>
            <van-cell title="上报日期" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM')"></van-cell>
            <van-cell title="检查日期" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM')"></van-cell>

            <van-cell title="计划时间" >
              <template #label>
                <van-cell title="1" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM HH:mm')"></van-cell>
                <van-cell title="2" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM HH:mm')"></van-cell>
                <van-cell title="3" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM HH:mm')"></van-cell>
              </template>
            </van-cell>

            <van-cell title="丢失时间" >
              <template #label>
                <van-cell title="1" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM HH:mm')"></van-cell>
                <van-cell title="2" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM HH:mm')"></van-cell>
                <van-cell title="3" :value="dayjs(selectedUser.arrivalTime).format('YYYY-DD-MM HH:mm')"></van-cell>
              </template>
            </van-cell>


          </div>
          <div class="big-btn-box" >
            <van-button  type="info" size="large" @click="onSubmit">生成运维单</van-button>
          </div>
        </van-panel>
      </div>

    </div>
  </div>
</template>

<script>

import DateCell from "@/components/dateCell/index.vue";
import Uploader from "@/components/upload/gxuploader.vue";
import {formatDate} from "@/filters/filter";
import {mapGetters} from "vuex";
import {imgUrl} from "@/utils";
import { ImagePreview } from 'vant'
import {userDetails, userDepart} from './api'
import dayjs from 'dayjs'
export default {
  components: {Uploader, DateCell},
  data(){
    return {
      legend:[
        {
          type:'正常',
          color:'#009240',
        },
        {
          type:'运维',
          color:'#FFA500',
        },
        {
          type:'异常',
          color:'#D7000F',
        }
      ],
      tagList:[
        {
          name:'通道',
          state:1,
        },
        {
          name:'通道',
          state:3,
        },
        {
          name:'通道',
          state:2,
        },
        {
          name:'通道',
          state:1,
        },
        {
          name:'通道',
          state:3,
        },
        {
          name:'通道',
          state:2,
        },
        {
          name:'通道',
          state:1,
        },
        {
          name:'通道',
          state:3,
        },
        {
          name:'通道',
          state:2,
        },
        {
          name:'通道',
          state:1,
        },
        {
          name:'通道',
          state:3,
        },
        {
          name:'通道',
          state:2,
        },
        {
          name:'通道',
          state:1,
        },
        {
          name:'通道',
          state:3,
        },
        {
          name:'通道',
          state:2,
        },
      ],
      maxData:new Date(),
      minDate:null,
      visitId:null,
      userList:[],
      selectedUser:{},
      prop:{
        label:'userName',
        value:'id'
      },
      formData:{
        arrivalTime:null,
        departureTime:null,
      },
      dicts:['out_in_approve_status','out_in_type','letter_id_type']
    }
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary']),
  },
  created(){
    this.visitId = this.$route.query.id;
    this.getUserInfo();
  },
  methods:{
    imgUrl,formatDate,
    getColor(s){
      if(s ===1){
        return '#009240';
      }
      if(s ===2){
        return '#D7000F';
      }
      if(s===3){
        return '#FFA500';
      }
    },
    clickTag(){

    },
    onSubmit(){
      this.$router.replace({
        name:'addOrder',
        path:'/addOrder',
      });
    },
    getUserInfo(){
      userDetails(this.visitId).then(res=>{
        let checkImage = res.data.checkImage.split(',');
        let imgFile = res.data.imgFile.split(',');
        let letterFile = [];
        if(res.data.letterFile && res.data.letterFile.length > 0){
            letterFile = res.data.letterFile.map(v=>{
            return JSON.parse(v)
          })
        }
        this.selectedUser = res.data;
        this.selectedUser.checkImage = checkImage;
        this.selectedUser.imgFile = imgFile;
        this.selectedUser.letterFile = letterFile;
        //设置最小时间
        let minDate = this.selectedUser.arrivalTime;
        this.minDate = new Date(minDate);
      })
    },
    previewFile(file){
      this.openFilePreview(file);
    },
    preView(val) {
      if(Array.isArray(val)){
        let arr = val.map(v=>{
          return imgUrl(v);
        })
        ImagePreview(arr);
      }else {
        ImagePreview([imgUrl(val)]);
      }
    },
  }
}
</script>
<style lang="scss">
.record-detail{
  .van-card{
    padding: 20px;
  }
  .card-cell-box{
    width: 70%;
    .van-cell{
      padding: 10px;
      &::after{
        left:10px;
        right:10px;
      }
    }
    .van-cell__title{
      flex:.25;
    }
    .van-cell__value{
      flex:.75;
    }
  }
}
</style>
<style scoped lang="scss">
.record-detail{
  height: 100%;
  overflow: hidden;
}
.page-container{
  height: calc(100vh - 94px);
  overflow: auto;
  padding: 20px;

}
.tag-box{
   padding: 20px;
   display:  grid;
   grid-template-columns: repeat(4, 1fr);
  .tag-item{
    width: 130px;
    height: 70px;
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 18px;
    background-color: #009dff;
    border:1px solid #009dff;
    color:#fff;
    padding:10px;
    border-radius: 10px;
    &:hover{
      color: #009dff;
      background-color:#fff!important;
    }
  }
}
.flex-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  >span{
    margin: 0 20px;
  }
}
.card{
  margin-bottom: 20px;
  box-shadow: 0 10px 10px #eaeaea;
}
.card:last-child{
  margin-bottom: 0;
}
.panel-box{
  -padding:0 20px;
}
.panel-box-item{
  height: 36px;
  line-height: 36px;
}
.item-label{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}
.item-value{
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.upload-box{
  padding: 20px 30px;
  display: flex;
  >span{
    display: inline-block;
    height: 160px;
    width: 200px;
    line-height: 160px;
    font-size: 28px;
    color:#999;
    >i{
      font-style: normal;
      color: #ee0a24;
    }
  }
  .required::before{
    content: '*';
    color: #ee0a24;
    position: absolute;
    left: 14px;
  }
}
.goods-card{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  .card-img-box{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    >img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
}
.big-btn-box{
  padding: 20px;
}
.file-box{
  width: 70%;
  display: flex;
  justify-content: flex-end;
  color:#008cd6;
}
.nfc-img {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 0 10px;
  position: relative;
  > img {
    width: 100%;
    height: 100%;
    border: none;
  }
  > span {
    position: absolute;
    padding: 0 10px;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #eaeaea;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
    height: 30px;
  }
}
</style>