easydo-ops/src/views/home/index.vue

<template>
    <el-main class="home-container">
        <el-card class="home-top" shadow="never">
            <el-row justify="space-between">
                <el-col :md="12" :xs="24">
                    <img src="img/logo.png">
                    <div class="app-name">{{ $CONFIG.APP_NAME }}</div>
                </el-col>
                <el-col :md="10" :xs="24">
                    <p>{{ day }}</p>
                    <div class="app-time"><span>{{ time }}</span>{{ week }}</div>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="home-menu" shadow="never">
            <template #header>设备预警</template>

            <el-row :gutter="40">
                <el-col :md="6" :xs="24" v-for="item in equipmentItem" :key="item.name">
                    <div class="menu-item" @click="$router.push(item.path)">
                        <sc-iconify :icon="item.meta.icon" size="26"></sc-iconify>
                        <div class="menu-item__tooltip"><scTooltip :content="item.title"></scTooltip></div>
                        <el-badge :value="36" :max="99"></el-badge>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="home-menu data-mock-card" shadow="never">
            <template #header>数据管理
                <el-input v-model="queryName" clearable placeholder="输入名称"></el-input>
            </template>
        
            <el-row v-if="$store.state.project.projectId" v-loading="loading" :gutter="40">
                <el-col v-if="!acceptItem.length" :xs="24">
                    <el-empty description="暂无应用项">
                        <el-button type="primary" @click="$router.push('/project/maintenance')">维护应用项</el-button>
                    </el-empty>
                </el-col>

                <el-col v-else :md="6" :xs="24" v-for="item in filterAcceptItem" :key="item.id">
                    <div :class="['menu-item', item.beginTime && 'has-time']" @click="formatAcceptRoute(item.name) && $router.push(formatAcceptRoute(item.name).path)">
                        <div class="menu-item__content">
                            <sc-iconify :icon="XEUtils.get(formatAcceptRoute(item.name), 'meta.icon')" size="26"></sc-iconify>
                            <div class="menu-item__tooltip"><scTooltip :content="item.name"></scTooltip></div>
                        </div>
                        <div v-if="item.beginTime" class="diagnosis">{{ $TOOL.dateFormat(item.beginTime, "YY.M.D") }}<span>-{{ item.endTime && $TOOL.dateFormat(item.endTime, "YY.M.D") || "至今" }}</span></div>
                    </div>
                    <div class="tags-bottom">
                        <!-- 新增标签 -->
                        <el-scrollbar height="36px">
                            <el-tag v-for="(tagItem, tagIndex) in XEUtils.get(diagnosisDic, `${XEUtils.get(formatAcceptRoute(item.name), 'name')}`, [])" :key="tagIndex" :type="tagItem.type" effect="plain" round>{{ tagItem.name }}</el-tag>
                        </el-scrollbar>
                    </div>
                </el-col>
            </el-row>

            <!-- 全部项目展示dataMock路由 -->
            <el-row v-else :gutter="40">
                <el-col :md="6" :xs="24" v-for="item in filterDataMock" :key="item.id">
                    <div class="menu-item" @click="$router.push(item.path)">
                        <div class="menu-item__content">
                            <sc-iconify :icon="XEUtils.get(item, 'meta.icon')" size="26"></sc-iconify>
                            <div class="menu-item__tooltip"><scTooltip :content="item.title"></scTooltip></div>
                        </div>
                    </div>
                    <div class="tags-bottom">
                        <!-- 新增标签 -->
                        <el-scrollbar height="36px">
                            <el-tag v-for="(tagItem, tagIndex) in XEUtils.get(diagnosisDic, item.name, [])" :key="tagIndex" :type="tagItem.type" effect="plain" round>{{ tagItem.name }}</el-tag>
                        </el-scrollbar>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </el-main>
</template>

<script setup>
import XEUtils from "xe-utils";
import API from "@/api";
import STORE from "@/store";
import TOOL from "@/utils/tool";
import userRoutes from "@/config/route";
import { diagnosisDic } from "./main"; // 诊断对象

const day = ref("");
const time = ref("");
const week = ref("");

// 数据管理与模拟路由
const queryName = ref("");
const loading = ref(false);
const acceptItem = ref([]);
const dataMockRoute = ref(XEUtils.map(XEUtils.get(userRoutes.find(item => item.name == "dataMock"), "children", []), item => ({ ...item, title: XEUtils.last(XEUtils.get(item, "meta.title", "").split("-")) })));
const formatAcceptRoute = name => XEUtils.find(dataMockRoute.value, item => item.title == name);
const filterAcceptItem = computed(() => XEUtils.filter(acceptItem.value, item => item.name.includes(queryName.value)));
const filterDataMock = computed(() => XEUtils.filter(dataMockRoute.value, item => item.title.includes(queryName.value)));



// 设备预警 --> 路由
const equipmentItem = ref(XEUtils.map(XEUtils.get(userRoutes.find(item => item.name == "equipment"), "children", []), item => ({ ...item, title: XEUtils.last(XEUtils.get(item, "meta.title", "").split("-")) })));

const showTime = () => {
    day.value = TOOL.dateFormat(new Date(), "YYYY年MM月DD日");
    time.value = TOOL.dateFormat(new Date(), "HH:mm:ss");
    week.value = TOOL.dateFormat(new Date(), "dddd");
}

const projectChange = projectId => {
    projectId && getItems(projectId);
    if (!projectId) {
        acceptItem.value = [];
    }
}

const getItems = projectId => {
    // 先查询当前项目的应用项
    loading.value = true;
    API.project.info.bindItem.get({ projectId }).then(res => {
        loading.value = false;
        const sortArr = XEUtils.orderBy(XEUtils.get(res, "data", []), [["item.itemCategory", "asc"], ["item.createTime", "asc"]]);
        acceptItem.value = XEUtils.map(sortArr, item => ({ ...item, name: XEUtils.get(item, "item.acceptItem", "") }));
    }).catch(() => loading.value = false);
    // 再查询每一项应用项的诊断结果
}

onMounted(() => {
    showTime();
    setInterval(() => showTime(), 1000);
});
watch(() => STORE.state.project.projectId, value => projectChange(value), { immediate: true });
</script>

<style lang="scss" scoped>
.home-container {
    height: 100%;padding: calc(var(--el-main-padding) + 15px);background:#f5f7f9;

    .el-card {
        background: transparent;margin-bottom: 0;border: none;
        :deep(.el-card__header) {display: flex;align-items: center;padding: 22px 0 10px;background: transparent;border-bottom: none;font-size: 20px;}
        .el-input, .el-select {width: 180px;margin-left: 10px;}
    }

    .home-menu :deep(.el-card__body) {padding: 0;
        .el-col {margin-bottom: 20px;}
        .el-dropdown {width: 100%;}
        .menu-item {cursor: pointer;position: relative;display: flex;align-items: center;width: calc(100% - 2px);padding: 25px;background-color: #fff;border-radius: 10px;font-size: 16px;}
        .menu-item:hover {box-shadow: 1px 0 #dbdbdb, 0 1px #dbdbdb, 1px 1px #dbdbdb, 1px 0 #dbdbdb inset, 0 1px #dbdbdb inset;}
        .sc-iconify-icon {margin-right: 20px;color: var(--el-color-primary);}
        .menu-item__tooltip {display: flex;width: calc(100% - 26px - 20px);}
        .el-badge {position: absolute;right: 5px;top: 5px;}
        .tags-bottom {margin-top: 10px;white-space: nowrap;overflow-x: auto;}
        .el-tag + .el-tag {margin-left: 6px;}
    }

    .data-mock-card :deep(.el-card__body) .menu-item {
        flex-direction: column;align-items: unset;padding: 25px;
        .menu-item__content {display: flex;align-items: center;}
        .diagnosis {margin-top: 13px;line-height: 1;font-size: 12px;color: #999;}
    }
    .data-mock-card :deep(.el-card__body) .menu-item.has-time {padding: 15px 25px 10px;}

    .home-top {
        padding: 12px;background: linear-gradient(to right, #8E54E9, #4776E6);border-radius: 15px;color: #fff;
        .el-col {display: flex;flex-direction: column;justify-content: center;}
        .el-col:first-child {align-items: center;}
        .el-col img {width: 80px;}
        .el-col .app-name {margin-top: 15px;font-size: 30px;font-weight: 700;}
        .el-col p {margin: 8px 0 4px;font-size: 25px;font-weight: 400;opacity: 0.7;}
        .el-col .app-time {font-size: 20px;font-weight: 700;}
        .el-col .app-time span {display: inline-block;width: 240px;font: 50px calculator-all;letter-spacing: 12px;}
    }
}

@media (max-width: 992px) {
    .home-container .home-top .el-col:first-child {align-items: unset;}
    .home-container .home-top .el-col + .el-col {margin-top: 20px;}
}
</style>