epmet-work-uni/pages/statistics/modules/ProblemList/ProblemList.vue

<template>
    <view>
        <view class="tag-list">
            <view :class="'tag ' + (item.value === tabValue ? 'cur' : '')" @tap="tabChange" :data-index="item.value" v-for="(item, index) in tabList" :key="index">
                {{ item.label }}
            </view>
        </view>
        <view class="problem-list">
            <view class="problem-item" @tap="gotopage" :data-obj="item" v-if="index < 3" v-for="(item, index) in data[tabValue]" :key="index">
                <view :class="'frequency ' + (item.amount < 10 ? 'blue' : item.amount > 10 && item.amount < 20 ? 'orange' : 'purple')">
                    <view>
                        <view class="num">{{ item.amount }}</view>
                        <view class="txt">次数</view>
                    </view>
                </view>

                <view class="right-con">
                    <view class="right-con-txt">
                        {{ item.content }}
                    </view>
                    <view class="right-con-address">
                        <block v-if="tabValue === 'mobileEvent'">
                            <image src="/static/images/statistics/avatar.png" mode="widthFix" class="icon" />
                            <text class="right-con-address-txt">{{ item.mobile }}</text>
                        </block>
                        <block v-else>
                            <image src="/static/images/statistics/address.png" mode="widthFix" class="icon" />
                            <text class="right-con-address-txt">{{ item.name ? item.name : '' }} {{ item.address }}</text>
                        </block>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Tabs from '../../../../components/Tabs';
import { dwdEventReport } from '../../../../utils/statisticsApi';
const formatTime = (date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return [year, month, day].map(formatNumber).join('-');
};
const formatNumber = (n) => {
    n = n.toString();
    return n[1] ? n : '0' + n;
};
export default {
    components: {
        Tabs
    },
    data() {
        return {
            tabList: [
                {
                    label: '同地点同类型',
                    value: 'addressEvent'
                },
                {
                    label: '同区域不同类型',
                    value: 'addressMobileEvents'
                },
                {
                    label: '同一人员',
                    value: 'mobileEvent'
                }
            ],
            tabValue: 'addressEvent',
            data: {}
        };
    },
    props: {},
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            this.$emit('change', {
                detail: this.tabValue
            });
            this.getData();
        },

        tabChange({
            currentTarget: {
                dataset: { index }
            }
        }) {
            this.setData({
                tabValue: index
            });
            this.$emit('change', {
                detail: this.tabValue
            });
        },

        getData() {
            let now = new Date();
            let params = {
                queryDateStart: formatTime(new Date(now.getFullYear(), now.getMonth() - 11)),
                queryDateEnd: formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59))
            };
            dwdEventReport(params).then((res) => {
                this.setData({
                    data: res.data
                });
            });
        },

        gotopage(e) {
            console.log(e);
            let data = e.currentTarget.dataset.obj;
            if (data.content) {
                delete data.content;
            }
            uni.navigateTo({
                url: '/subpages/statistics/pages/problem/problem?type=' + this.tabValue + '&data=' + JSON.stringify(data)
            });
        }
    },
    created: function () {}
};
</script>
<style>
.tag-list {
    display: flex;
    margin: 0 -8rpx;
    justify-content: space-between;
    margin-bottom: 15px;
}
.tag-list .tag {
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    margin: 0 8rpx;
    color: #3a80e7;
    background: #f1f6ff;
    border: 1px solid #3a80e7;
    border-radius: 1000rpx;
}
.tag-list .tag.cur {
    background: #3a80e7;
    color: #ffff;
}

.problem-item {
    background: #f7f7f7;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    display: flex;
    align-items: flex-start;
    margin-top: 15px;
}

.frequency {
    width: 80rpx;
    flex: 0 0 80rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    padding: 20rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frequency .num {
    font-size: 40rpx;
}

.frequency .txt {
    font-size: 20rpx;
}
.frequency.orange {
    background: #ffebe2;
    color: #fc7031;
}
.frequency.purple {
    background: #e2e2ff;
    color: #8482f7;
}
.frequency.blue {
    background: #d3edff;
    color: #4aa2e2;
}

.right-con {
    flex: 0 0 calc(100% - 100rpx);
    width: calc(100% - 100rpx);
}

.right-con .right-con-txt {
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 84rpx;
}
.right-con-address {
    display: flex;
    align-items: center;
    margin-right: 14rpx;
    margin-top: 30rpx;
}
.right-con-address .icon {
    width: 24rpx;
    height: 30rpx;
}

.right-con-address .right-con-address-txt {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}
</style>