tsg-app/pages/skInfo/detail/tzcs.vue

<template>
    <view class="basic-box">
        <view class="basic-data-select">
            <uni-data-select v-model="selectValue" :localdata="range" @change="selectChage" :clear="false">
            </uni-data-select>
        </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>
</template>
<script>
    import selectData from "../../staticData"
    const gmObj = {
        "1": "大 (1)型",
        "2": "大 (2)型",
        "3": "中型",
        "4": "小 (1)型",
        "5": "小 (2)型",
        "9": "其他",
    }

    const qdObj = {
        1: "Ⅰ",
        2: "Ⅱ",
        3: "Ⅲ",
        4: "Ⅳ",
        5: "VI ",
    }
    export default {
        props: {
            skInfo: {
                type: Object,
                default: {}
            },
            value:{
              type: String,
              default:''
            }

        },
        data() {
            return {
                list: selectData[0],
                range: [{
                        value: 0,
                        text: "水库"
                    },
                    {
                        value: 1,
                        text: "主坝"
                    },
                    {
                        value: 2,
                        text: "副坝"
                    },
                    {
                        value: 3,
                        text: "溢洪道"
                    },
                    {
                        value: 4,
                        text: "灌溉发电洞"
                    },
                    {
                        value: 5,
                        text: "放空洞"
                    },
                    {
                        value: 6,
                        text: "拦洪坝"
                    },
                    {
                        value: 7,
                        text: "防汛道路"
                    }
                ],
                selectValue: 0,
                keyObj: {}
            }
        },
        methods: {
            selectChage(e) {
                console.log("e",e);
                this.selectValue = e
                this.list = selectData[e]
                if (e == 0) {
                    this.keyObj = this.skInfo;
                }else{
                    this.getOtherData()
                } 
                // else if (e == 1 || e == 2 || e == 6) {
                //     this.getDbData(e)
                // } else if (e == 3) {
                //     this.getyhdData()
                // } else if (e == 4 || e == 5) {
                //     this.getfdData(e)
                // } else {
                //     this.getfxdData(e)
                // }
            },
    

               async getOtherData() {
                try {
                    const {
                        data
                    } = await uni.$http.get('/gunshiApp/tsg/attResBuilding/info')
                    if (data.code == 200) {
                        this.keyObj = data.data
                    }
                } catch (error) {

                }
            },

            // 主坝，副坝，拦洪坝
            async getDbData(e) {
                try {
                    const {
                        data
                    } = await uni.$http.post('/gunshiApp/tsg/attDamBase/list')
                    if (data.code == 200) {
                        if (e == 1) {
                            this.keyObj = data.data.find(item => item.isMain == 1)
                        } else if (e == 2) {
                            this.keyObj = data.data.find(item => item.isMain == 0)
                        } else {
                            this.keyObj = data.data.find(item => item.isMain == 2)
                        }
                    }
                } catch (error) {

                }
            },
            // 溢洪道
            async getyhdData(e) {
                try {
                    const {
                        data
                    } = await uni.$http.post('/gunshiApp/tsg/attSpillwayBase/list')
                    if (data.code == 200) {
                        this.keyObj = data.data[0]
                    }
                } catch (error) {

                }
            },
            // 灌溉发电洞 放空洞
            async getfdData(e) {
                try {
                    const params = e == 5 ? 1 : 2;
                    const {
                        data
                    } = await uni.$http.get('/gunshiApp/tsg/resTunnel/list',{type:params})
                    if (data.code == 200) {
                        this.keyObj = data.data[0]
                    }
                } catch (error) {

                }
            },
            // 防汛道路
            async getfxdData(e) {
                try {
                    const {
                        data
                    } = await uni.$http.post('/gunshiApp/tsg/resFloodRoad/list')
                    if (data.code == 200) {
                        this.keyObj = data.data[0]
                    }
                } catch (error) {

                }
            }
        },
        computed: {
            tableData() {
                return this.list.map(item => {
                    if (item.key == "engScal") {
                        this.keyObj[item.key] = gmObj[this.skInfo[item.key]]
                    }
                    if (item.key == "seismicIntensity") {
                        this.keyObj[item.key] = qdObj[this.skInfo[item.key]]
                    }
                    return {
                        name: item.name,
                        value: this.keyObj[item.key]
                    }
                })
            }
        },
        mounted() {
            this.keyObj = this.skInfo;
            if(this.value){
              this.selectChage(this.value - 0)
            }
        },

    }
</script>
<style lang="scss">
    .basic-box {
        display: flex;
        flex-direction: column;

    }

    .basic-data-select {
        width: 40%;
        margin-top: 10px;
        margin-left: auto;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .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
        }
    }
</style>