no message

src/api/event.ts

@@ -6,4 +6,31 @@ export function getActiveEventList() {
         url: '/api/event_management/event/notice_bar',
         method: 'get'
     });
+}
+
+// 获取事件列表
+export function getEventList(params) {
+    return request({
+        url: '/api/event_management/event/list',
+        method: 'get',
+        params: params
+    });
+}
+
+// 开始指挥事件
+export function startEvent(data) {
+    return request({
+        url: '/api/event_management/event/start',
+        method: 'post',
+        data: data
+    });
+}
+
+// 关闭事件
+export function closeEvent(data) {
+    return request({
+        url: '/api/event_management/event/close',
+        method: 'post',
+        data: data
+    });
 }

src/views/event/CloseEventDialog.vue

@@ -0,0 +1,161 @@
+<template>
+    <van-popup
+        v-model:show="visible"
+    >
+    <van-form @submit="on_submit">
+        <div class="van-doc-block__title">结束指挥</div>
+        <van-cell-group inset>
+            <van-field
+                v-model="form.event_title"
+                label="事件名称"
+                readonly 
+                :rules="[{ required: true, message: '请填写事件名称'  }]"
+            />
+            <van-field
+                v-model="form.event_level_text"
+                is-link
+                readonly
+                label="事件等级"
+                placeholder="选择事件等级"
+                @click="show_event_level_picker = true"
+            />
+            <van-field
+                v-model="form.deaths"
+                label="死亡人数"
+                placeholder="填写死亡人数"
+                :rules="[{ required: true, message: '请填写死亡人数'  }]"
+            />
+            <van-field
+                v-model="form.injuries"
+                label="受伤人数"
+                placeholder="填写受伤人数"
+                :rules="[{ required: true, message: '请填写受伤人数'  }]"
+            />
+            <van-field
+                v-model="form.missing"
+                label="失联人数"
+                placeholder="填写失联人数"
+                :rules="[{ required: true, message: '请填写失联人数'  }]"
+            />
+        </van-cell-group>
+        <div style="margin: 16px;display: flex;
+            flex-direction: row;
+            justify-content: flex-end;">
+            <div style="display: flex;        flex-direction: row;  justify-content: space-between;">
+                <van-button type="primary" native-type="submit" style="margin-right:10px;">确定</van-button>
+                <van-button @click="closeDialog">取消</van-button>
+            </div>
+        </div>
+    </van-form>    
+</van-popup>
+
+<van-popup v-model:show="show_event_level_picker" round position="bottom">
+        <van-picker
+            :columns="opt_event_level"
+            @cancel="show_event_level_picker = false"
+            @confirm="on_event_level_confirm"
+        /></van-popup>
+
+        <div class="van-doc-block__title">开始指挥</div>
+    
+
+</template>
+
+<script lang="ts" setup>
+import {getCurrentInstance, reactive, ref, toRefs, watch, defineEmits} from 'vue';
+import { closeEvent } from "@/api/event";
+import { showSuccessToast, showFailToast  } from 'vant';
+
+const proxy = getCurrentInstance()?.proxy;
+const { mm_event_level } = toRefs<any>(proxy?.useDict( 'mm_event_level' ));
+
+const opt_event_level = [
+    { text: '一般', value: '1' },
+    { text: '较大', value: '2' },
+    { text: '重大', value: '3' },
+    { text: '特别重大', value: '4' },
+    { text: '其他', value: '0' },
+];
+
+
+interface Form {
+    event_id: string;
+    event_title: string;
+    event_level: string;
+    event_level_text: string,
+    deaths: string;
+    injuries: string;
+    missing: string;
+}
+interface Props {
+    modelValue: boolean;
+    data: Form;
+}
+
+const form = ref<Form>({
+    event_id: '',
+    event_title: '',
+    event_level: '',
+    event_level_text: '',
+    deaths: '',
+    injuries: '',
+    missing: ''
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false
+});
+
+const emits = defineEmits(['update:modelValue']);
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      form.value = props.data;
+      opt_event_level.forEach((n)=> {
+        if(n.value == form.value.event_level) {
+            form.value.event_level_text = n.text;
+        }
+      })
+    }
+    visible.value = props.modelValue;
+  }
+);
+
+const visible = ref(false);
+const show_event_level_picker = ref(false)
+
+const on_event_level_confirm = ({ selectedOptions }) => {
+    console.log(selectedOptions[0]);
+    show_event_level_picker.value = false;
+    form.value.event_level_text = selectedOptions[0].text;
+    form.value.event_level = selectedOptions[0].value;
+};
+
+
+const on_submit = () => {
+    console.log('on_submit');
+    closeEvent({ eventId: form.value.event_id, ...form.value }).then((res) => {
+        // showSuccessToast(res.msg);
+        closeDialog()
+      }).catch((err) => {
+        showFailToast(err.msg);
+      });
+};
+
+const closeDialog = () => {
+  emits('update:modelValue', false);
+};
+
+</script>
+
+<style lang="scss" scoped>
+.van-doc-block__title {
+    color: var(--van-doc-text-color-4);
+    margin: 0px;
+    padding: 32px 16px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 32px
+}
+</style>

src/views/event/StartEventDialog.vue

@@ -0,0 +1,137 @@
+<template>
+    <van-popup
+        v-model:show="visible"
+    >
+    <van-form @submit="on_submit">
+        <div class="van-doc-block__title">开始指挥</div>
+        <van-cell-group inset>
+            <van-field
+                v-model="form.event_title"
+                label="事件名称"
+                readonly 
+                :rules="[{ required: true, message: '请填写事件名称'  }]"
+            />
+            <van-field
+                v-model="form.event_level_text"
+                is-link
+                readonly
+                label="事件等级"
+                placeholder="选择事件等级"
+                @click="show_event_level_picker = true"
+            />
+        </van-cell-group>
+        <div style="margin: 16px;display: flex;
+            flex-direction: row;
+            justify-content: flex-end;">
+            <div style="display: flex;        flex-direction: row;  justify-content: space-between;">
+                <van-button type="primary" native-type="submit" style="margin-right:10px;">确定</van-button>
+                <van-button @click="closeDialog">取消</van-button>
+            </div>
+        </div>
+    </van-form>    
+</van-popup>
+
+<van-popup v-model:show="show_event_level_picker" round position="bottom">
+        <van-picker
+            :columns="opt_event_level"
+            @cancel="show_event_level_picker = false"
+            @confirm="on_event_level_confirm"
+        /></van-popup>
+
+        <div class="van-doc-block__title">开始指挥</div>
+    
+
+</template>
+
+<script lang="ts" setup>
+import {getCurrentInstance, reactive, ref, toRefs, watch, defineEmits} from 'vue';
+import { startEvent } from "@/api/event";
+import { showSuccessToast, showFailToast  } from 'vant';
+
+const proxy = getCurrentInstance()?.proxy;
+const { mm_event_level } = toRefs<any>(proxy?.useDict( 'mm_event_level' ));
+
+const opt_event_level = [
+    { text: '一般', value: '1' },
+    { text: '较大', value: '2' },
+    { text: '重大', value: '3' },
+    { text: '特别重大', value: '4' },
+    { text: '其他', value: '0' },
+];
+
+
+interface Form {
+    event_id: string;
+    event_title: string;
+    event_level: string;
+    event_level_text: string
+}
+interface Props {
+    modelValue: boolean;
+    data: Form;
+}
+
+const form = ref<Form>({
+    event_id: '',
+    event_title: '',
+    event_level: '',
+    event_level_text: ''
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false
+});
+
+const emits = defineEmits(['update:modelValue']);
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      form.value = props.data;
+      opt_event_level.forEach((n)=> {
+        if(n.value == form.value.event_level) {
+            form.value.event_level_text = n.text;
+        }
+      })
+    }
+    visible.value = props.modelValue;
+  }
+);
+
+const visible = ref(false);
+const show_event_level_picker = ref(false)
+
+const on_event_level_confirm = ({ selectedOptions }) => {
+    console.log(selectedOptions[0]);
+    show_event_level_picker.value = false;
+    form.value.event_level_text = selectedOptions[0].text;
+    form.value.event_level = selectedOptions[0].value;
+};
+
+
+const on_submit = () => {
+    console.log('on_submit');
+    startEvent({ eventId: form.value.event_id, ...form.value }).then((res) => {
+        // showSuccessToast(res.msg);
+        closeDialog()
+      }).catch((err) => {
+        showFailToast(err.msg);
+      });
+};
+
+const closeDialog = () => {
+  emits('update:modelValue', false);
+};
+
+</script>
+
+<style lang="scss" scoped>
+.van-doc-block__title {
+    color: var(--van-doc-text-color-4);
+    margin: 0px;
+    padding: 32px 16px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 32px
+}
+</style>

src/views/event/index.vue

@@ -1,10 +1,10 @@
 <template>
-    <van-search v-model="search_keyword" placeholder="请输入事件标题/事件地点" />
+    <van-search v-model="queryParams.search_keyword" placeholder="请输入事件标题/事件地点" @search="on_search_keyword" @cancel="on_search_cancel" />
 
     <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-item title="类型" v-model="queryParams.evnt_type" :options="opt_event_type" @change="change_event_type" />
+        <van-dropdown-item title="等级" v-model="queryParams.event_level" :options="opt_event_level" @change="change_event_level"  />
+        <van-dropdown-item title="状态" v-model="queryParams.event_status" :options="opt_event_status" @change="change_event_status" />
     </van-dropdown-menu>
 
     <van-list
@@ -13,14 +13,14 @@
         finished-text="没有更多了"
         @load="onLoad">
 
-        <div class="event-list-item" v-for="item in event_list" :key="item.id">
+        <div class="event-list-item" v-for="(item,index) 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>
+                    <van-button v-if="item.event_status == '0'" type="primary" size="small" @click="handleStartEvent(index)">开始指挥</van-button>
+                    <van-button v-if="item.event_status == '1'" type="danger" size="small" @click="handleCloseEvent(index)">结束指挥</van-button>
                 </div>
             </div>
             <div class="item-data">
@@ -51,26 +51,26 @@
             </div>
         </div>
     </van-list>
-
+    <StartEventDialog v-model="startEventState.show" :data="startEventState.form" @update:model-value="onStartEventDialogClose"></StartEventDialog>
+    <CloseEventDialog v-model="closeEventState.show" :data="closeEventState.form" @update:model-value="onCloseEventDialogClose"></CloseEventDialog>
 </template>
 
 <script lang="ts" setup>
-import {getCurrentInstance, reactive, ref, toRefs} from 'vue';
+import {getCurrentInstance, reactive, ref, toRefs, onMounted} from 'vue';
 import { useRouter } from 'vue-router'
 import { showConfirmDialog } from 'vant';
-import { getActiveEventList } from "@/api/event";
+import { showSuccessToast, showFailToast  } from 'vant';
+import StartEventDialog from  './StartEventDialog.vue';
+import CloseEventDialog from  './CloseEventDialog.vue';
+
+import { getEventList } 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 { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
 
 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: '' },
     { text: '自然灾害', value: '0' },
     { text: '事故灾害', value: '1' },
     { text: '公共卫生事件', value: '2' },
@@ -78,6 +78,7 @@ const opt_event_type = [
 ];
 
 const opt_event_level = [
+    { text: '全部', value: '' },
     { text: '一般', value: '1' },
     { text: '较大', value: '2' },
     { text: '重大', value: '3' },
@@ -86,86 +87,165 @@ const opt_event_level = [
 ];
 
 const opt_event_status = [
+    { text: '全部', value: '' },
     { text: '已登记', value: '0' },
     { text: '指挥中', value: '1' },
     { text: '指挥结束', value: '2' },
     { text: '已关闭', value: '2' },
 ];
 
-const event_id = ref('');
+const current_item = ref(null);
 const event_list = ref([]);
+const total = ref(0);
 const loading = ref(false);
 const finished = ref(false);
-const refreshing = ref(false);
+const queryParams = ref({
+    page: 0,
+    page_size: 5,
+    event_type: '',
+    event_level: '',
+    event_status: '',
+    search_keyword: ''
+});
+
+const on_search_keyword = (val) => {
+    queryParams.value.search_keyword = val;
+    queryParams.value.page = 0;
+    getList();
+}
+
+const on_search_cancel = () => {
+    queryParams.value.search_keyword = '';
+    queryParams.value.page = 0;
+    getList();
+}
+
+const change_event_type = (val) => {
+    queryParams.value.event_type = val;
+    queryParams.value.page = 0;
+    getList();
+}
+
+const change_event_level = (val) => {
+    queryParams.value.event_level = val;
+    queryParams.value.page = 0;
+    getList();
+}
+
+const change_event_status = (val) => {
+    queryParams.value.event_status = val;
+    queryParams.value.page = 0;
+    getList();
+}
 
 const onLoad = () => {
     getList();
 }
 
 const getList = () => {
-    if (refreshing.value) {
-        event_list.value = [];
-        refreshing.value = false;
+    queryParams.value.page ++;
+    getEventList(queryParams.value)
+        .then((res) => {
+            var items = res.data || [];
+            total.value = res.total;
+            if(queryParams.value.page == 1) {
+                event_list.value = [];
+            }
+            items.forEach(val => {
+                event_list.value.push(val)                
+            });
+            if (queryParams.value.page_size * queryParams.value.page >= total.value) {
+                finished.value = true;
+            }
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+const startEventState=reactive({
+    show: false,
+    form: {
+        event_id: '',
+        event_title: '',
+        event_level: ''
     }
+});
 
-    // ....
-    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 closeEventState=reactive({
+    show: false,
+    form: {
+        event_id: '',
+        event_title: '',
+        event_level: ''
     }
+});
 
-}
+const onStartEventDialogClose = () => {
+    startEventState.show = false;
+    console.log(startEventState.form);
+    showSuccessToast("xxx")
+    //queryParams.value.page = 0;
+    // getList();
+};
+
+const onCloseEventDialogClose = () => {
+    closeEventState.show = false;
+    console.log(closeEventState.form);
+    showSuccessToast("xxx")
+    //queryParams.value.page = 0;
+    // getList();
+};  
 
-const handleStartEvent = () => {
+const onConfirm = () => {
     showConfirmDialog({
         title: '提示',
         message:
             '确认进入移动指挥（应急态）',
         })
         .then(() => {
+            
             localStorage.setItem('mobile_control_status', "1");
             router.push("/leader/mobile_control")
         })
         .catch(() => {
 
         });
-}
+};
 
-const handleCloseEvent = () => {
 
+const handleStartEvent = (index) => {
+    current_item.value = event_list.value[index];
+    console.log('handleStartEvent', current_item.value.event_id);
+    startEventState.form.event_id = current_item.value.event_id;
+    startEventState.form.event_title = current_item.value.event_title;
+    startEventState.form.event_level = current_item.value.event_level;
+    startEventState.show = true;
+    return false;
 }
 
+const handleCloseEvent = (index) => {
+    current_item.value = event_list.value[index];
+    console.log('handleStartEvent', current_item.value.event_id);
+    closeEventState.form.event_id = current_item.value.event_id;
+    closeEventState.form.event_title = current_item.value.event_title;
+    closeEventState.form.event_level = current_item.value.event_level;
+    closeEventState.show = true;
+    return false;
+}
+
+
 </script>
 
 <style lang="scss" scoped>
+.van-doc-block__title {
+    color: var(--van-doc-text-color-4);
+    margin: 0;
+    padding: 32px 16px 16px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px
+}
 .event-list-item {
     position: relative;
     margin: 8px;