Project-Annex/operationSupport/src/views/workbench/index.vue

<template>
    <div class="workbench">
        <!-- 头部开始部分 -->
        <div class="header">
            <ul>
                <li style="background: linear-gradient(135deg, #488fff 0%, #65dcff 100%)" @click="goPath('/communityManagement')">
                    <!-- <router-link to="sc-operation/propertyManagement/inform.vue" tag="a" target="_blank"> -->
                    <div class="header-left">
                        <div class="header-left-top">
                            <div class="header-icon"></div>
                            <div>社区</div>
                        </div>
                    </div>
                    <div class="header-number">{{ houseData.communityTotal }}</div>
                    <div class="header-right">
                        <img src="../../assets/img/img_shequ.png" alt="" />
                    </div>
                    <!-- </router-link> -->
                </li>
                <li style="background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%)" @click="goPath('/buildingManagement')">
                    <div class="header-left">
                        <div class="header-left-top">
                            <div class="header-icon"></div>
                            <div>楼栋</div>
                        </div>
                    </div>
                    <div class="header-number">{{ houseData.buildingTotal }}</div>
                    <div class="header-right">
                        <img src="../../assets/img/img_loudong.png" alt="" />
                    </div>
                </li>
                <li style="background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%)" @click="goPath('/housingManagement')">
                    <div class="header-left">
                        <div class="header-left-top">
                            <div class="header-icon"></div>
                            <div>房屋</div>
                        </div>
                    </div>
                    <div class="header-number">{{ houseData.houseTotal }}</div>
                    <div class="header-right">
                        <img src="../../assets/img/img_fangwu.png" alt="" />
                    </div>
                </li>
                <li style="background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%)" @click="goPath('/shopManagement')">
                    <div class="header-left">
                        <div class="header-left-top">
                            <div class="header-icon"></div>
                            <div>商铺</div>
                        </div>
                    </div>
                    <div class="header-number">{{ houseData.shopsTotal }}</div>
                    <div class="header-right">
                        <img src="../../assets/img/img_shangpu.png" alt="" />
                    </div>
                </li>
                <li style="background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%)" @click="goPath('/ownerManagement/index')">
                    <div class="header-left">
                        <div class="header-left-top">
                            <div class="header-icon"></div>
                            <div>住户</div>
                        </div>
                    </div>
                    <div class="header-number">{{ houseData.residentTotal }}</div>
                    <div class="header-right">
                        <img src="../../assets/img/img_zhuhu.png" alt="" />
                    </div>
                </li>
            </ul>
        </div>
        <!-- 头部结束部分 -->

        <!-- 中间开始部分 -->
        <div class="center">
            <div class="center-left">
                <div class="center-left-text">快速操作</div>
                <ul>
                    <!-- <li @click="goPath('/communityManagement/pageJump/AddOrEdit')"> -->
                    <li @click="goPath('/communityManagement', true)">
                        <div>
                            <img src="../../assets/img/icon_shequ.png" alt="" />
                        </div>
                        <span>添加社区</span>
                    </li>
                    <li @click="goPath('/buildingManagement', true)">
                        <div>
                            <img src="../../assets/img/icon_loudong.png" alt="" />
                        </div>
                        <span>添加楼栋</span>
                    </li>
                    <li @click="goPath('/housingManagement', true)">
                        <div>
                            <img src="../../assets/img/icon_fangwu.png" alt="" />
                        </div>
                        <span>添加房屋</span>
                    </li>
                    <li @click="goPath('/shopManagement', true)">
                        <div>
                            <img src="../../assets/img/icon_shangpu.png" alt="" />
                        </div>
                        <span>添加商铺</span>
                    </li>
                    <li @click="goPath('/ownerManagement/index', true)">
                        <div>
                            <img src="../../assets/img/icon_zhuhu.png" alt="" />
                        </div>
                        <span>添加住户</span>
                    </li>
                </ul>
            </div>
            <div class="center-left center-right">
                <div class="center-left-text">待处理事项</div>
                <ul>
                    <li @click="goPath('/ownerManagement/ownerReview/index')">
                        <div>
                            <div class="header-left">
                                <div class="header-left-top">
                                    <div class="header-icon center-icon"></div>
                                    <div class="center-right-text">待审核业主</div>
                                </div>
                            </div>
                            <div class="header-number center-number">{{ pendData.ownerReviewedTotal }}</div>
                            <div class="center-right-image">
                                <div></div>
                            </div>
                        </div>
                    </li>
                    <li @click="goPath('/propertyManagement/index')">
                        <div>
                            <div class="header-left">
                                <div class="header-left-top">
                                    <div class="header-icon center-icon"></div>
                                    <div class="center-right-text">待处理投诉</div>
                                </div>
                            </div>
                            <div class="header-number center-number">{{ pendData.complaintsTotal }}</div>
                            <div class="center-right-image">
                                <div></div>
                            </div>
                        </div>
                    </li>
                    <li @click="goPath('/workOrdersManagement')">
                        <div>
                            <div class="header-left">
                                <div class="header-left-top">
                                    <div class="header-icon center-icon"></div>
                                    <div class="center-right-text">待处理工单</div>
                                </div>
                            </div>
                            <div class="header-number center-number">{{ pendData.workOrderTotal }}</div>
                            <div class="center-right-image">
                                <div></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 中间结束部分 -->

        <!-- 底部开始部分 -->
        <div class="footer">
            <div class="footer-left">
                <div class="footer-left-text">
                    <div>社区公告</div>
                    <div @click="goPath('/propertyManagement/inform')">查看更多&nbsp;></div>
                </div>
                <ul v-if="informData.length > 0">
                    <li v-for="(item, index) in informData" :key="index" @click="goPath('/propertyManagement/inform', true, item.id)">
                        <div class="footer-content">
                            <div>[{{ item.title }}]</div>
                            <div v-html="item.content"></div>
                        </div>
                        <div>{{ item.pubDate }}</div>
                    </li>
                </ul>
                <div v-else class="no-data">暂无公告</div>
            </div>
            <div class="footer-left" style="margin-right: 0">
                <div class="footer-left-text">
                    <div>告警信息</div>
                    <div @click="goPath('/alarmManagement/details')">查看更多&nbsp;></div>
                </div>
                <div v-if="warnData.length > 0">
                    <ul>
                        <li @click="goPath('/alarmManagement/details', true)" v-for="(item, index) in warnData" :key="index">
                            <div class="footer-content">
                                <div>[{{ item.name }}]</div>
                                <div>{{ item.alarmContent }}</div>
                            </div>
                            <div>{{ item.alarmStartTime }}</div>
                        </li>
                    </ul>
                </div>
                <div v-else class="no-data">暂无告警信息</div>
            </div>
        </div>
        <!-- 底部结束部分 -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            houseData: [],
            warnData: [],
            informData: [],
            pendData: []
        };
    },

    created() {
        this.getHouseData();
        this.getWarnData();
        this.getInformData();
        this.getPendData();
    },

    methods: {
        // 获取待处理事项
        getPendData() {
            this.$http.get('/sc-community-web/Workbench/pendingMatters').then((res) => {
                if (res.status == 0) {
                    this.pendData = res.data;
                } else {
                    this.$message.warning('获取待处理事项失败');
                }
            });
        },
        // 获取房屋信息
        getHouseData() {
            this.$http.get('/sc-community-web/Workbench/totalHouseInfo').then((res) => {
                if (res.status == 0) {
                    this.houseData = res.data;
                } else {
                    this.$message.warning('获取房屋信息失败');
                }
            });
        },
        // 获取告警信息
        getWarnData() {
            this.$http.get('/sc-community-web/Workbench/getWaringInfo').then((res) => {
                if (res.status == 0) {
                    this.warnData = res.data;
                } else {
                    this.$message.warning('获取告警信息失败');
                }
            });
        },

        // 获取通知信息
        getInformData() {
            this.$http.get('/sc-community-web/Workbench/getNoticeInfo').then((res) => {
                if (res.status == 0) {
                    let data = res.data;
                    this.informData = data;
                } else {
                    this.$message.warning('获取通知信息失败');
                }
            });
        },
        // 跳转的路径
        goPath(path, showDialog, id) {
            let routeData = this.$router.resolve({
                path: path,
                query: {
                    showDialog: showDialog,
                    id: id
                }
            });
            window.open(routeData.href, '_blank');
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>