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

<template>
    <van-search v-model="search_keyword" placeholder="请输入事件标题/事件地点" />

    <van-dropdown-menu>
        <van-dropdown-item title="类型" v-model="evnt_type" :options="opt_event_type" />
        <van-dropdown-item title="等级" v-model="event_level" :options="opt_event_level" />
        <van-dropdown-item title="状态" v-model="event_status" :options="opt_event_status" />
    </van-dropdown-menu>

    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">

        <div class="event-list-item" v-for="item in event_list" :key="item.id">
            <div class="item-title">
                <div class="item-title-text">
                    {{item.event_title}}
                </div>
                <div class="item-title-control">                    
                    <van-button v-if="item.event_status == '0'" type="primary" size="small" @click="handleStartEvent">开始指挥</van-button>
                    <van-button v-if="item.event_status == '1'" type="danger" size="small" @click="handleCloseEvent">结束指挥</van-button>
                </div>
            </div>
            <div class="item-data">
                <div class="item-data-label">事件类型：</div>
                <div class="item-data-value">{{item.event_type}}</div>
            </div>
            <div class="item-data">
                <div class="item-data-label">事件等级：</div>
                <div class="item-data-value">{{item.event_level}}</div>
            </div>
            <div class="item-data">
                <div class="item-data-label">事件状态：</div>
                <div class="item-data-value">{{item.event_status}}</div>
            </div>
            <div class="item-data">
                <div class="item-data-label">事发时间：</div>
                <div class="item-data-value">{{item.event_time}}</div>
            </div>
            <div class="item-data">
                <div class="item-data-label">事发地点：</div>
                <div class="item-data-value">{{item.address}}</div>
            </div>
        </div>
    </van-list>

</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant';
import { getActiveEventList } from "@/api/event";
const proxy = getCurrentInstance()?.proxy;
// const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region'));

const router = useRouter()

const evnt_type = ref('');
const event_level = ref('');
const event_status = ref('');

const search_keyword = ref('');

const opt_event_type = [
    { text: '自然灾害', value: '0' },
    { text: '事故灾害', value: '1' },
    { text: '公共卫生事件', value: '2' },
    { text: '社会安全事件', value: '2' },
];

const opt_event_level = [
    { text: '一般', value: '1' },
    { text: '较大', value: '2' },
    { text: '重大', value: '3' },
    { text: '特别重大', value: '4' },
    { text: '其他', value: '0' },
];

const opt_event_status = [
    { text: '已登记', value: '0' },
    { text: '指挥中', value: '1' },
    { text: '指挥结束', value: '2' },
    { text: '已关闭', value: '2' },
];

const event_id = ref('');
const event_list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    getList();
}

const getList = () => {
    if (refreshing.value) {
        event_list.value = [];
        refreshing.value = false;
    }

    // ....
    loading.value = false;

    event_list.value.push({
        event_title: 'XXX公交站',
        event_type: '0',
        event_level: '1',
        event_status: '0',
        event_time: '1999-1-1 10:20',
        address: '左侧路面'
    })

    event_list.value.push({
        event_title: 'XXX公交站',
        event_type: '0',
        event_level: '1',
        event_status: '1',
        event_time: '1999-1-1 10:20',
        address: '左侧路面'
    })

    event_list.value.push({
        event_title: 'XXX公交站',
        event_type: '0',
        event_level: '1',
        event_status: '2',
        event_time: '1999-1-1 10:20',
        address: '左侧路面'
    })

    if (event_list.value.length >= 1) {
        finished.value = true;
    }

}

const handleStartEvent = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认进入移动指挥（应急态）',
        })
        .then(() => {
            localStorage.setItem('mobile_control_status', "1");
            router.push("/leader/mobile_control")
        })
        .catch(() => {
            
        });
}

const handleCloseEvent = () => {

}

</script>

<style lang="scss" scoped>
.event-list-item {
    position: relative;
    margin: 8px;
    padding: 16px;
    background: #fafafa;
    .item-title {
        line-height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .item-title-text {
            font-size: 18px;
            font-weight: 600;
        }

        .item-title-control {
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }

    .item-data {
        line-height: 28px;
        display: flex;
        flex-direction: row;
        justify-content: start;

        .item-data-label {
            color: #888;
        }

        .item-data-value {
            color: #888;
        }
    }
}
</style>