wanda-bm-guide/src/views/homepage/index.vue

<template>
    <main class='homepage'>
        <section class='homepage-cards-content'>
            <div class='cards-item' v-for='(item , index) in cardsList' :key='index' :style='itemStyle(item)'>
                <h4>{{item.smsxtname}}</h4>
                <div class='equipment-list' v-if='item.assetTypeList'>
                    <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.assetTypeList' :key="index">
                        <div class='equip-name'>
                            <h5>{{equip.category_name}}</h5>
                            <div class='exception-number' v-if='equip.is_exception_num'>{{equip.is_exception_num}}</div>
                        </div>
                        <section>
                            <div class='equip-statis'>
                                <span class='equip-number'>{{equip.asset_num}}</span>
                                <span class='equip-unit'>台</span>
                            </div>
                            <div>
                                <em v-if='false'>维保中</em>
                            </div>
                        </section>
                    </div>
                </div>
                <div v-else class="empty-content"   style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div>
                <div v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" class="alert-list" @click="navToGanttPage(item)">
                    <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
                        <img v-if="option.total"  :src="srcList[option.type][option.level]" > 
                        <div  class="content" v-if="option.total">
                            <p class="line">
                                <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
                                <span><em :style="{color:item.level == 1? '#646C73': item.level == 2 ? '#E07A04 ' :'#C13830'}">{{option.unfinished}}</em>/<em>{{option.total}}</em></span>
                            </p>
                            <p class='desc'>当月未完成/总任务</p>
                        </div>
                    </div>
                </div>
                <div v-else class='empty-content'>暂无数据</div>
            </div>
        </section>
        <section class='homepage-nav-list'>
            <nav>
                <div class='main-title'>
                    <span>重点关注事项</span>
                    <a @click='navToFocusItem'>更多</a>
                </div>
                <div class='table'>
                    <div class='row table-header'>
                        <article>日期</article>
                        <article>政府部门</article>
                        <article>记录事项</article>
                    </div>
                    <div class='table-body'>
                        <div class='row' v-for='(item , index) in itemsList' :key='index'>
                            <article>{{item.createdate}}</article>
                            <article>{{item.department}}</article>
                            <article>{{item.recordsx}}</article>
                        </div>
                    </div>
                </div>
            </nav>
            <nav>
                <div class='main-title'>
                    <span>说明书更新记录</span>
                    <a @click='navToIntroduce'>更多</a>
                </div>
                <div class='table'>
                    <div class='row table-header'>
                        <article>日期</article>
                        <article>事项类型</article>
                        <article>更新内容</article>
                    </div>
                    <div class='table-body'>
                        <div class='row' v-for='(item , index) in changeList' :key='index'>
                            <article>{{item.changedate}}</article>
                            <article>{{item.type}}</article>
                            <article>{{item.content || '--'}}</article>
                        </div>
                    </div>
                </div>
            </nav>
        </section>
    </main>
</template>

<script>
import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
import moment from 'moment'
export default {
    data() {
        return {
            cardsList: [],
            itemsList: [],
            changeList: [],
            srcList: {
                0: {
                    1: require('../../assets/images/icons/edit_blue_b.png'), //1.正常（蓝色） 2.警告（黄色） 3.严重（红色）
                    2: require('../../assets/images/icons/edit_yellow_b.png'),
                    3: require('../../assets/images/icons/edit_red_b.png')
                },
                1: {
                    1: require('../../assets/images/icons/fix_blue_b.png'),
                    2: require('../../assets/images/icons/fix_yellow_b.png'),
                    3: require('../../assets/images/icons/fix_red_b.png')
                },
                2: {
                    1: require('../../assets/images/icons/search_blue_b.png'),
                    2: require('../../assets/images/icons/search_yellow_b.png'),
                    3: require('../../assets/images/icons/search_red_b.png')
                }
            }
        }
    },
    mounted() {
        this.testAjax()
        this.getItemsQuery()
        this.getInstructionList()
    },
    methods: {
        /**
         *  点击跳转进入综合事项管理页面
         */
        navToFocusItem () {
            this.$router.push({path:"./other", query:{module:'comprehensive'}})
        },
        /**
         *  点击跳转进入 分析|报表 说明书更新记录页面
         */
        navToIntroduce () {
            this.$router.push({path:"./analysis", query:{module:'specification'}})
        },
        itemStyle (option) {
            let num = 0
            if (option.assetTypeList) {
                option.assetTypeList.forEach(item=>{
                    if (typeof item.is_exception_num === "number") {
                        num +=  item.is_exception_num
                    }
                })
            }
            if (option.rptGlsmsStatisticsList) {
                option.rptGlsmsStatisticsList.forEach(option => {
                    if (typeof option.unfinished === "number") {
                        num +=  option.unfinished
                    }
                })
            }
            if (num > 0) {
                return {
                    borderLeft:"3px solid #EF6B66"
                }
            }
        },
        navToInnerPage (item, equip) {
            this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.id, module:'core'}})
        },
         
        /**
         * 跳转到甘特图详情页
         */
        navToGanttPage (item) {
            this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, module:'gantt'}})
        },
        //TODO plazaId目前是写死的 后期需要更换成用户对应的ID
        testAjax() {
            let params = {
                getParams: {
                    plazaId: 1000423
                }
            }
            getCardList(params).then(res => {
                if (res.result == 'success') {
                    let result = res.data
                    if (result && Array.isArray(result)) {
                        this.cardsList = result
                    }
                }
            })
        },
        /**
         * 获取说明书变更记录
         */
        getInstructionList() {
            let params = {
                getParams: {
                    plazaId: 1000423,
                    page: 1,
                    size: 10
                }
            }

            getChangeList(params).then(res => {
                if (res.result == 'success') {
                    let result = res.data
                    result.forEach(item => {
                        item.changedate = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
                        if (item.objtype === 0) {
                            item.type = '专维'
                        } else if (item.objtype === 1) {
                            item.type = '维保'
                        } else if (item.objtype === 2) {
                            item.type = '第三方检测'
                        } else {
                            item.type = '重点关注'
                        }
                    })

                    if (result && Array.isArray(result)) {
                        this.changeList = result
                    }
                }
            })
        },
        getItemsQuery() {
            let params = {
                getParams: {
                    // department=部门 //部门
                    startDate: '20200208000000', //开始时间
                    endDate: '20200608000000', //结束时间
                    plazaId: 1000423, //广场id 必填
                    page: 1, //页数
                    size: 10 //条数
                    // "orderBy":字段名,1;//排序，1正序，0，倒序
                    // keyword=关键字1:字段名11,字段名12;关键字2:字段名21,字段名22;//模糊查询参数
                }
            }
            getQueryList(params).then(res => {
                moment().format('YYYY.MM.DD HH:mm')
                if (res.result == 'success') {
                    if (res.data && Array.isArray(res.data)) {
                        res.data.forEach(item => {
                            item.createdate = moment.unix(item.createdate / 1000).format('YYYY.MM.DD')
                        })
                        this.itemsList = res.data
                    }
                }
            })
        }
    }
}
</script>

<style lang='less'>
.homepage {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 48px);
    padding: 15px;
    background: rgba(242, 245, 247, 1);
    overflow: auto;
    .homepage-cards-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        width: 75%;
        .cards-item {
            width: calc(50% - 5px);
            height: 24%;
            padding: 0.4rem;
            padding-bottom: 0;
            margin-bottom: 1rem;
            background: #fff;
            box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
            h4 {
                color: rgba(31, 36, 41, 1);
                padding: 1rem;
                font-size: 1.6rem;
                font-weight: bold;
            }
            .equipment-list {
                display: flex;
                padding:0 1rem 1.2rem;
                .equipment-item {
                    width: 33.33%;
                    padding: 0.6rem;
                    box-sizing: border-box;
                    border-radius: 4px;
                    cursor: pointer;
                    .equip-name {
                        position: relative;
                        display: inline-block;
                        h5 {
                            position: relative;
                            color: #1f2429;
                            font-size: 1.4rem;
                            em {
                                margin-left: 1rem;
                                color: #e19e51;
                                font-size: 1.2rem;
                            }
                        }
                        .exception-number {
                            position: absolute;
                            right: -20%;
                            top: -5px;
                            height: 1.6rem;
                            border-radius: 8rem;
                            padding: 0.2rem 0.4rem;
                            line-height: 1.2rem;
                            text-align: center;
                            font-size: 1.2rem;
                            color: #f54e45;
                            background: #ffe0df;
                        }
                    }
                    section {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .equip-statis {
                            .equip-number {
                                font-size: 1.8rem;
                                font-weight: bold;
                                color: rgba(31, 36, 41, 1);
                            }
                            .equip-unit {
                                color: #ccc;
                                font-size: 1.2rem;
                            }
                        }
                    }
                }
                .equipment-item:hover {
                    background: #f5f6f7;
                }
            }
            .alert-list {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                border-top: 1px solid #f5f6f7;
                height: 44%;
                border-radius: 4px;
                cursor: pointer;
                &:hover {
                    background: #f5f6f7;
                }
                .alert-item {
                    display: flex;
                    width: 33.33%;
                    align-items: center;
                    img {
                        width: 4rem;
                        height: 4rem;
                        margin:0 1rem;
                    }
                    .content {
                        border-right: 1px solid #f5f6f7;
                        padding-right: 2rem;
                        .line {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            line-height: 1;
                            span:first-child {
                                margin-right: 1rem;
                                font-size: 1.2rem;
                                color: #1f2429;
                                font-weight: bold;
                                white-space: nowrap;
                            }
                            em {
                                font-weight: normal;
                            }
                            em:first-child {
                                font-size: 1.6rem;
                                font-weight: bold;
                            }
                        }
                        .desc {
                            padding-top: 0.6rem;
                            color: #8d9399;
                            font-size: 1.2rem;
                            text-align: right;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .empty-content {
                height: 9rem;
                line-height: 9rem;
                border-top: 1px solid #f5f6f7;

                text-align: center;
                color: #8d9399;
            }
        }
    }
    .homepage-nav-list {
        width: calc(25% - 10px);
        nav:first-child {
            height: 320px;
        }
        nav:last-child {
            height: 320px;
        }
        nav {
            padding: 14px 16px;
            margin-bottom: 10px;
            background: white;
            overflow: hidden;
            box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
            .main-title {
                display: flex;
                justify-content: space-between;
                margin-bottom: 12px;
                span:first-child {
                    color: #1f2429;
                    font-weight: bold;
                    font-size: 1.4rem;
                }
            }
            .table {
                .row {
                    display: flex;
                    align-items: center;
                    padding: 6px;
                    border-bottom: 1px solid #e4e6e7;
                    article {
                        margin-right: 10px;
                    }
                    article:nth-of-type(1) {
                        width: 20%;
                    }
                    article:nth-of-type(2) {
                        width: 30%;
                        padding-left: 1.2rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    article:nth-of-type(3) {
                        width: calc(50% - 30px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
                .table-header {
                    height: 3.2rem;
                    padding: 6px;
                    line-height: 3.2rem;
                    color: #646a73;
                    font-weight: 600;
                    border-bottom: none;
                    background: #f8f9fa;
                }
                .table-body {
                    overflow: auto;
                }
            }
        }
        nav:first-child {
            height: 40%;
            .table-body {
                height: 27vh;
            }
        }
        nav:last-child {
            height: calc(60% - 12px);
            .table-body {
                height: 45vh;
            }
        }
    }
}
</style>