yjxp-web/src/views/leader/index.vue

<template>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="n in banners" :key="n">
        <img :src="n" />
      </van-swipe-item>
    </van-swipe>
    <van-search v-model="search_keyword" placeholder="请输入内容" />
    <van-notice-bar
        @click="handleNoticeBar"
        v-show="noticeBarState.show"
        left-icon="volume-o"
        scrollable
        mode="closeable"
        :text="noticeBarState.event_title"
        />

    <van-grid :column-num="2">
        <van-grid-item icon="photo-o" text="工作审批" />
        <van-grid-item icon="photo-o" text="信息接报" />
        <van-grid-item icon="photo-o" text="在线点名" />
        <van-grid-item icon="photo-o" text="事件管理" to="/event/index" />
    </van-grid>

    <div class="app_panel">
        <van-sidebar :v-model="0">
            <van-sidebar-item title="综合应用" />
        </van-sidebar>

        <div class="app_panel_row">
            <div class="app_panel_row_left">
                <div>自然灾害<br/>风险检测</div>
            </div>
            <div class="app_panel_row_right">
                <van-grid :column-num="3">
                    <van-grid-item icon="photo-o" text="灾害检测" />
                    <van-grid-item icon="photo-o" text="大风灾害" />
                    <van-grid-item icon="photo-o" text="森林火灾" />
                    <van-grid-item icon="photo-o" text="台风实况" />
                    <van-grid-item icon="photo-o" text="水文检测" />
                </van-grid>
            </div>
        </div>

        <div class="app_panel_row">
            <div class="app_panel_row_left">
                <div>应急事件<br/>场景应急</div>
            </div>
            <div class="app_panel_row_right">
                <van-grid :column-num="3">
                    <van-grid-item icon="photo-o" text="自然灾害" />
                    <van-grid-item icon="photo-o" text="事故灾难" />
                    <van-grid-item icon="photo-o" text="城市事件" />
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { getActiveEventList } from "@/api/event";

const downLoadApi = import.meta.env.VITE_BASE_API + import.meta.env.VITE_BASE_DOWNLOAD_API;

const search_keyword = ref('');

const banners = ref([
    downLoadApi + 'banner_1.png',
    downLoadApi + 'banner_2.png',
]);

const noticeBarState = reactive({
    show: false,
    event_id: '',
    event_title: ''
})

const handleNoticeBar = () => {
    console.log(noticeBarState.event_title);
}

onMounted(() => {
    getActiveEventList().then((res) => {
        if(res.data.event_id != noticeBarState.event_id) {
            noticeBarState.show = true
            noticeBarState.event_id = res.data.event_id;
            noticeBarState.event_title = res.data.event_title;
        }
        
    }).catch((err)=> {
        noticeBarState.show = false
        noticeBarState.event_id = '';
        noticeBarState.event_title = '';
    })
})
</script>

<style lang="scss" scoped>

.app_panel {
    padding:8px 8px 0 8px;

    .app_panel_row {
        display: flex;
        flex-direction: row;
        justify-content: start;
        margin-bottom: 8px;

        .app_panel_row_left {
            width:140px;
            font-size: 12px;
            display: inline-flex;
            padding: 2px 8px;
            justify-content: center;
            align-items: center;
            background: #efefef;
        }

        .app_panel_row_right {
            width:calc(100vh - 140px - 20px);
        }
    }

}
</style>