xytSk-App/pages/skInfo/detail/basicInfo.vue

<template>
    <view class="project-cotent">
      
        <view class="project-basic">
            <view class="project-loc">
            <text style="opacity:0.5">工程位置：{{skInfo.resLoc}}</text>
           </view>
        </view>
        <view class="project-des" >
            <view v-for="(item,index) in tableData" :key="index" :style="index % 2 == 0 ? 'width:50%;':'width:50%;'">
               <view style="display:flex;align-items:center;margin:15px 0px;">
                 <view class="circle-dot"></view>
                <view class="label-name">
                    <text style="opacity:0.5;text-align: center;">{{item.name}}</text>
                    <text>{{item.value||"-"}}</text>
                </view>
               </view>
            </view>
        </view>
        <view class="total-des">
            <view style="opacity:0.5">工程概况：</view>
            <view>{{skInfo.projOverview}}</view>
        </view>
    </view>
</template>
<script>
import moment from 'moment'
const gmObj = {
    "1":"大 (1)型",
    "2":"大 (2)型",
    "3":"中型",
    "4":"小 (1)型",
    "5":"小 (2)型",
    "9":"其他",
}
const bxObj = {
    1:"是",
    0:"否",
}
export default {
    props:{
        skInfo:{
            type:Object,
             default:{}
        }
       
    },
    data() {
        return {
            list:[
                {
                name:"注册登记号",
                key:"regSn"
               },
                {
                name:"所在河流(水系)名称",
                key:"rvName"
               },
                {
                name:"水库模型",
                key:"engScal"
               },
               {
                name:"设计灌溉面积(亩)",
                key:'designIrrArea'
               },
               {
                name:"受益人口(人)",
                key:"feedPop"
               },
               {
                name:"是否病险",
                key:"isDanger"
               },
               {
                name:"开工日期",
                key:"startDate"
               },
               {
                name:"竣工日期",
                key:"compDate"
               },
            ]
        }
    },
    computed:{
        tableData(){  
            return this.list.map(item=>{
                if(item.key == "engScal"){
                    this.skInfo[item.key] = gmObj[this.skInfo[item.key]]
                }
                if(item.key == "isDanger"){
                    this.skInfo[item.key] = bxObj[this.skInfo[item.key]]
                }
                if(item.key == "startDate"){
                    this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
                }
                 if(item.key == "compDate"){
                    this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
                }
                return {
                    name:item.name,
                    value:this.skInfo[item.key]
                }
            })
        }
    }
}
</script>
<style lang="scss">
    .project-cotent{
        padding: 0px 3px;
        background-color: #f7f7f7;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        .project-basic{
            background-color: #ffffff;
            padding: 5px;
            margin: 5px 0;
        }
         .project-des {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #f2f2f2;
        background-color: #ffffff;
        padding: 0 10px;
        max-height: calc(100vh - 190px);
        overflow: auto;

        .circle-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #409eff;
            margin-left: 10px;
        }

        .label-name {
            display: flex;
            flex-direction: column;
            align-items: center;

            flex: 1
        }
    }
    }
    .total-des{
        margin-top: 10px;
         background-color: #ffffff;
         padding: 10px;
    }
</style>