更新工作人员端事件管理入口

src/components/Tabbar/index.vue

@@ -83,7 +83,7 @@ watch(
           iconActive: "commandActive",
           title: "事件管理",
           to: {
-            name: "Event2"
+            name: "workerEvent"
           }
         },
         {
@@ -116,6 +116,7 @@ const getImageUrl = name => {
     .href;
 };
 onMounted(() => {
+  /*
   const mobile_control_status =
     localStorage.getItem("mobile_control_status") || "0";
   // 动态切换平时态或者应急态
@@ -129,6 +130,7 @@ onMounted(() => {
       }
     };
   }
+  */
 });
 </script>
 <style lang="scss" scoped>

src/router/routes.ts

@@ -326,8 +326,8 @@ export const workerRoute = [
       },
       {
         path: "event",
-        name: "Event2",
-        component: () => import("@/views/event/detail.vue"),
+        name: "workerEvent",
+        component: () => import("@/views/worker/eventManagement/index.vue"),
         meta: {
           title: "事件管理",
           noCache: true

src/views/worker/eventManagement/eventList.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="container">
+<!--搜索框-->
+    <van-search
+      v-model="queryParams.search_keyword"
+      class="common-search"
+      :left-icon="searchImg"
+      :right-icon="closeImg"
+      :clearable="false"
+      @search="on_search_keyword"
+      @click-right-icon.stop="on_search_cancel"
+    />
+<!--三个类型选择-->
+    <van-dropdown-menu>
+      <van-dropdown-item
+        v-model="queryParams.event_type"
+        :title="!!queryParams.event_type ? '' : '类型'"
+        :options="opt_event_type"
+        @change="change_event_type"
+      />
+      <van-dropdown-item
+        v-model="queryParams.event_level"
+        :title="!!queryParams.event_level ? '' : '等级'"
+        :options="opt_event_level"
+        @change="change_event_level"
+      />
+      <van-dropdown-item
+        v-model="queryParams.event_status"
+        :title="!!queryParams.event_status ? '' : '状态'"
+        :options="opt_event_status"
+        @change="change_event_status"
+      />
+    </van-dropdown-menu>
+
+    <van-list
+      v-model:loading="loading"
+      v-model:error="error"
+      error-text="请求失败，点击重新加载"
+      :finished="finished"
+      finished-text="没有更多事件了"
+      class="list"
+      @load="getList"
+    >
+      <div
+        v-for="(item, index) in event_list"
+        :key="item.id"
+        class="event-list-item"
+      >
+        <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"
+              @click="handleStartEvent(index)"
+            >
+              开始指挥
+            </van-button>
+            <van-button
+              v-if="item.event_status == '1'"
+              type="danger"
+              size="small"
+              @click="handleCloseEvent(item)"
+            >
+              结束指挥
+            </van-button>
+          </div>
+        </div>
+        <div class="item-content" @click="handleEventDetail(index)">
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon1" />
+              <div class="item-data-label">事件类型：</div>
+            </div>
+            <div class="item-data-value">
+              <dict-tag :options="mm_event_type" :value="item.event_type" />
+            </div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon2" />
+              <div class="item-data-label">事件等级：</div>
+            </div>
+            <div class="item-data-value">
+              <dict-tag :options="mm_event_level" :value="item.event_level" />
+            </div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon3" />
+              <div class="item-data-label">事件状态：</div>
+            </div>
+            <div class="item-data-value">
+              <dict-tag :options="mm_event_state" :value="item.event_status" />
+            </div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">事发时间：</div>
+            </div>
+            <div class="item-data-value">{{ item.event_time }}</div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon5" />
+              <div class="item-data-label">事发地点：</div>
+            </div>
+            <div class="item-data-value">{{ item.address }}</div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+    <!--
+    <StartEventDialog
+      v-model="startEventState.show"
+      :data="startEventState.form"
+      @update:model-value="onStartEventDialogClose"
+    />
+    <CloseEventDialog
+      v-model="closeEventState.show"
+      :data="closeEventState.form"
+      @update:model-value="onCloseEventDialogClose"
+    />
+    -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance, reactive, ref, toRefs, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { showConfirmDialog, showSuccessToast } from "vant";
+// import StartEventDialog from "./StartEventDialog.vue";
+// import CloseEventDialog from "./CloseEventDialog.vue";
+
+import { closeEvent, getEventList } from "@/api/event";
+import searchImg from "@/assets/images/search.png";
+import closeImg from "@/assets/images/close.png";
+
+const proxy = getCurrentInstance()?.proxy;
+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 opt_event_type = [
+  { text: "全部", value: "" },
+  { text: "自然灾害", value: "0" },
+  { text: "事故灾害", value: "1" },
+  { text: "公共卫生事件", value: "2" },
+  { text: "社会安全事件", value: "3" }
+];
+
+const opt_event_level = [
+  { text: "全部", value: "" },
+  { text: "一般", value: "1" },
+  { text: "较大", value: "2" },
+  { text: "重大", value: "3" },
+  { text: "特别重大", value: "4" },
+  { text: "其他", value: "0" }
+];
+
+const opt_event_status = [
+  { text: "全部", value: "" },
+  { text: "已登记", value: "0" },
+  { text: "指挥中", value: "1" },
+  { text: "指挥结束", value: "2" },
+  { text: "已关闭", value: "2" }
+];
+
+const current_item = ref(null);
+const event_list = ref([]);
+const total = ref(0);
+const loading = ref(false);
+const error = ref(false);
+const finished = ref(false);
+const queryParams = ref({
+  page: 0,
+  page_size: 10,
+  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 = () => {
+  queryParams.value.page = 0;
+  getList();
+};
+
+const change_event_level = () => {
+  queryParams.value.page = 0;
+  getList();
+};
+
+const change_event_status = () => {
+  queryParams.value.page = 0;
+  getList();
+};
+
+const getList = () => {
+  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;
+      } else {
+        finished.value = false;
+      }
+    })
+    .catch(() => {
+      error.value = true;
+      finished.value = false;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const startEventState = reactive({
+  show: false,
+  form: {
+    event_id: "",
+    event_title: "",
+    event_level: "",
+    event_level_text: ""
+  }
+});
+
+const closeEventState = reactive({
+  show: false,
+  form: {
+    event_id: "",
+    event_title: "",
+    event_level: "",
+    event_level_text: "",
+    deaths: "",
+    injuries: "",
+    missing: ""
+  }
+});
+
+const onStartEventDialogClose = t => {
+  startEventState.show = false;
+  console.log(startEventState.form);
+  if (t) {
+    queryParams.value.page = 0;
+    getList();
+  }
+};
+
+const onCloseEventDialogClose = t => {
+  closeEventState.show = false;
+  console.log(closeEventState.form);
+  if (t) {
+    queryParams.value.page = 0;
+    getList();
+  }
+};
+
+const onConfirm = () => {
+  showConfirmDialog({
+    title: "提示",
+    message: "确认进入移动指挥（应急态）"
+  })
+    .then(() => {
+      localStorage.setItem("mobile_control_status", "1");
+      router.push("/leader/mobile_control");
+    })
+    .catch(() => {});
+};
+
+const handleEventDetail = index => {
+  current_item.value = event_list.value[index];
+  router.push("/event/detail?event_id=" + current_item.value.event_id);
+};
+
+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 = item => {
+  showConfirmDialog({
+    title: "结束指挥",
+    message: "是否确定结束指挥？"
+  }).then(() => {
+    const params = {
+      eventId: item.value.event_id,
+      address: item.value.address,
+      latitude: item.value.latitude,
+      longitude: item.value.longitude
+    };
+    // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
+    closeEvent(params).then(() => {
+      showSuccessToast("结束指挥成功");
+      router.push("/leader/index");
+    });
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  height: calc(100vh - 102px);
+  overflow-y: auto;
+}
+.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: 16px 16px 0;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 0.5px solid #eaedf7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  &:first-child {
+    margin-top: 0;
+  }
+  .item-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 46px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    padding: 0 12px;
+    .item-title-text {
+      font-size: 16px;
+      color: #414f64;
+      font-weight: 600;
+    }
+
+    .item-title-control {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .van-button {
+      width: 73px;
+      height: 24px;
+      padding: 0;
+    }
+  }
+  .item-content {
+    padding: 0 12px 12px;
+  }
+  .item-data {
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: start;
+    line-height: 26px;
+    .item-left {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .item-data-label {
+      flex-shrink: 0;
+      color: #414f64;
+    }
+
+    .item-data-value {
+      color: #414f64;
+    }
+  }
+}
+.van-dropdown-menu {
+  :deep(.van-dropdown-menu__bar) {
+    background: transparent;
+    box-shadow: none;
+  }
+}
+.common-search {
+  :deep(.van-field__left-icon) {
+    .van-icon__image {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+.icon1 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon1.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon2 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon2.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon3 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon3.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon4 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon4.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon5 {
+  width: 16px;
+  height: 16px;
+  background: url("@/assets/images/event/icon5.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+</style>

src/views/worker/eventManagement/index.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="container">
+      <div class="tabs">
+        <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
+          <i :class="item.icon" />
+          <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="content">
+        <eventList v-if="activeIndex === 'event'" @changIndex="handleClickTab" />
+        <!--
+        <HiddenSource v-else-if="activeIndex === 'task'" />
+        <investigationRecords v-else-if="activeIndex === 'job'" />
+      -->
+      </div>
+    </div>
+  </template>
+  <script setup lang="ts">
+  import { ref } from "vue";
+  import eventList from "./eventList.vue";
+  //import HiddenSource from "./HiddenSource.vue";
+  //import dangerousSource from "./dangerousSource.vue";
+  
+  let activeIndex = ref('event');
+  let tabs = ref([
+    { id: 'event', name: '事件管理', icon: 'icon1' },
+    { id: 'task', name: '任务管理', icon: 'icon2' },
+    { id: 'job', name: '工作请示', icon: 'icon3' },
+  ]);
+  
+  // 点击tab
+  const handleClickTab = (id) => {
+    activeIndex.value = id;
+  };
+  
+  </script>
+  
+  
+  <style lang="scss" scoped>
+  .container {
+    height: calc(100vh - 55px);
+    padding-top: 12px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    .tabs {
+      height: 90px;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+      .tab {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .icon1, .icon2, .icon3, .icon4 {
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          background-color: #9d9d9d;
+        }
+        .tab-text {
+          color: #414F64;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+        .text-active {
+          color: #2C81FF;
+        }
+      }
+    }
+    .content {
+      margin-top: 10px;
+      height: calc(100vh - 180px);
+      overflow-y: auto;
+    }
+  }
+  </style>
+