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

<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: 15,
  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>