Vent-App/pages/gasreport/components/gasTask.vue

<template>
    <view class="gas-task">
        <u-collapse>
            <u-collapse-item title="一次巡检点巡检路线">
                <u-icon name="map" size="16" slot="icon"></u-icon>
                <u-cell icon="pushpin" v-for="(item, index) in firstAddressList" :key="item" :title="item"
                    :border="false"></u-cell>
            </u-collapse-item>
            <u-collapse-item title="一次巡检情况统计">
                <u-icon name="minus-circle" size="16" slot="icon"></u-icon>
                <u-cell icon="map" v-for="(ite, ind) in firstTj" :key="ind" :title="ite.address" :border="false">
                    <text slot="value" class="u-slot-value">
                        <text :class="ite.isFinish ? 'comlete-xj' : 'complete-xj-n'">{{ ite.isFinish ? '已巡检' : '未巡检'
                            }}</text>
                    </text>
                </u-cell>
            </u-collapse-item>
            <u-collapse-item title="两次巡检点巡检路线">
                <u-icon name="map" size="16" slot="icon"></u-icon>
                <u-cell icon="pushpin" v-for="(item, index) in secondAddressList" :key="item" :title="item"
                    :border="false"></u-cell>
            </u-collapse-item>
            <u-collapse-item title="两次巡检情况统计">
                <u-icon name="minus-circle" size="16" slot="icon"></u-icon>
                <u-cell icon="map" v-for="(ite, ind) in secondTj" :key="ind" :title="ite.address" :border="false">
                    <view slot="value" class="u-slot-value">
                        <view class="xj-second-tj">
                            <text class="task-text">第一次</text>
                            <text :class="ite.isFinish1 ? 'complete-xj-s' : 'complete-xj-s-n'">{{ ite.isFinish1 ? '已巡检' :
                                '未巡检' }}</text>
                        </view>
                        <view class="xj-second-tj">{{ ite.time1 || '' }}</view>
                        <view class="xj-second-tj">
                            <text class="task-text">第二次</text>
                            <text :class="ite.isFinish2 ? 'complete-xj-s' : 'complete-xj-s-n'">{{ ite.isFinish2 ? '已巡检'
                                : '未巡检' }}</text>
                        </view>
                        <view class="xj-second-tj">{{ ite.time2 || '' }}</view>
                    </view>
                </u-cell>
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<script>
export default {
    name: 'gasTask',
    props: {
        firstAddress: {
            type: String,
            default: ''
        },
        secondAddress: {
            type: String,
            default: '',
        },
        firstTj: {
            type: Array,
            default: () => {
                return []
            }
        },
        secondTj: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            firstAddressList: [],
            secondAddressList: []
        }
    },
    computed: {},
    watch: {
        firstAddress: {
            handler(newF, oldF) {
                if (newF) {
                    this.firstAddressList = newF.split('，')
                }
            },
            immediate: true
        },
        secondAddress: {
            handler(newF, oldF) {
                if (newF) {
                    this.secondAddressList = newF.split('，')
                }
            },
            immediate: true
        }
    },
    mounted() { },
    methods: {},
}
</script>

<style lang="scss" scoped>
.gas-task {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #FFF;

    .task-text {
        font-size: 12px;
        margin: 0px 10px;
    }

    .comlete-xj {
        color: rgb(59, 221, 10);
        font-size: 12px;
    }

    .complete-xj-n {
        color: rgb(241, 22, 6);
        font-size: 12px;
    }

    .xj-second-tj {
        margin-bottom: 3px;
        font-size: 12px;
    }

    .complete-xj-s {
        color: rgb(59, 221, 10);
        font-size: 12px;
        margin: 0px 10px;
    }

    .complete-xj-s-n {
        color: rgb(241, 22, 6);
        font-size: 12px;
        margin: 0px 10px;
    }
}

::v-deep .u-collapse-item__content__text {
    padding: 0px 15px !important;
}

::v-deep .u-collapse-item__content {
    overflow-y: auto !important;
}

::v-deep .u-cell__title-text {
    font-size: 14px;
}
</style>