yjdp-web/src/views/routineCommandMap/RightSection/EventReport/index.vue

<template>
  <div class="event-container">
    <div class="container-header">
      <div class="common-title-box">事件接报</div>
      <div class="more" @click="showMoreEventManageList">查看更多&nbsp;&nbsp;>></div>
    </div>
    <!-- 表格组件 -->
    <div class="common-table">
      <div class="table-header">
        <div class="td">事发地点</div>
        <div class="td">事件类型</div>
        <div class="td">事件标题</div>
        <div class="td">事发时间</div>
        <div class="td">事发状态</div>
        <div class="td">操作</div>
      </div>
      <div v-for="(item, index) in eventList" :key="index" class="tr">
        <div class="td">
          <div class="address-box">
            <i class="address-icon" />
            <div class="address-text" :title="item.address">{{ item.address }}</div>
          </div>
        </div>
        <div class="td">
          <dict-tag
            :class="['0', '1'].includes(item.event_type) ? 'primary-tag' : 'success-tag'"
            :options="mm_event_type"
            :value="item.event_type"
            :title="typeContent(mm_event_type, item.event_type)"
            style="width: 250px; text-align: center"
          />
        </div>
        <div class="td text1" @click="handleShowDetail(item)">{{ item.event_title }}</div>
        <div class="td">{{ item.event_time }}</div>
        <div class="td">
          <dict-tag :class="getEventStatusClass(item.event_status)" :options="mm_event_state" :value="item.event_status" />
        </div>
        <div class="td">
          <div v-if="item.event_status === '0'" class="btn-box" @click="enterCommand(item)">
            <i class="start-icon" />
            <div class="gradient-text3">开始指挥</div>
          </div>
          <div v-else-if="item.event_status === '1'" class="btn-box" @click="enterCommand(item)">
            <i class="start-icon" />
            <div class="gradient-text3">进入指挥</div>
          </div>
          <div v-else-if="['2', '3'].includes(item.event_status)" class="btn-box">
            <i class="record-icon" />
            <div class="gradient-text3">指挥记录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--事件接报弹窗-->
  <EventManage v-model="eventManageState.showListDialog" :flag="flag" />
  <EventDetail v-if="eventDetailStatus.show" v-model="eventDetailStatus.show" :eventId="eventDetailStatus.id" :title="eventDetailStatus.title" />
</template>

<script lang="ts" setup name="EventReport">
import { reactive, ref, toRefs } from 'vue';
import { getEvent } from '@/api/duty/eventing';
import EventManage from './EventManage.vue';
import EventDetail from './EventDetail.vue';

const props = defineProps({
  flag: Boolean
});
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 queryParams = reactive({
  page: 1,
  page_size: 7
});
// 事件接报
const eventManageState = reactive({
  showListDialog: false
});
const eventList = ref([]);
const eventDetailStatus = reactive({
  show: false,
  title: '',
  id: ''
});
const handleShowDetail = (item) => {
  eventDetailStatus.title = item.event_title;
  eventDetailStatus.id = item.event_id;
  eventDetailStatus.show = true;
};
const getList = () => {
  getEvent(queryParams).then((res) => {
    eventList.value = res.data;
  });
};
getList();
// 显示事件管理列表弹窗
const showMoreEventManageList = () => {
  eventManageState.showListDialog = true;
};
// 进入应急态界面
const enterCommand = (item) => {
  if (item) {
    // 查看事件详情逻辑
    router.push({
      path: props.flag ? '/emergencyCommandMap' : '/emergencyCommandMap2',
      query: { event_id: item.event_id }
    });
  }
};

const getEventStatusClass = (value) => {
  let className = 'tag4';
  if (value === '0') {
    className = 'tag1';
  } else if (value === '1') {
    className = 'tag2';
  } else if (value === '2') {
    className = 'tag3';
  }
  return className;
};

const typeContent = (arrayInfo, index) => {
  let temp = '';
  for (let i = 0; i < arrayInfo.length; i++) {
    if (arrayInfo[i].value === index) {
      temp = arrayInfo[i].label;
      break;
    }
  }
  return temp;
};
</script>

<style lang="scss" scoped>
.event-container {
  .container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .more {
      font-size: 36px;
      color: #00e8ff;
      white-space: nowrap;
      cursor: pointer;
    }
  }
  .common-table .td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: unset;
    text-align: left;
    &:nth-child(1) {
      width: 305px;
    }
    &:nth-child(2) {
      min-width: 300px;
      width: 300px;
      flex: unset;
    }
    &:nth-child(3) {
      width: 610px;
      max-width: 610px;
      min-width: 0;
    }
    &:nth-child(4) {
      width: 400px;
    }
    &:nth-child(5) {
      width: 200px;
    }
    &:nth-child(6) {
      width: 250px;
    }
  }
  .text1 {
    color: #00e8ff;
    cursor: pointer;
  }
  .address-box {
    display: flex;
    align-items: center;
    .address-icon {
      min-width: 46px;
      width: 46px;
      height: 53px;
      background: url('@/assets/images/routineCommandMap/eventReport/address.png') no-repeat;
      margin-right: 8px;
    }
    .address-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.primary-tag {
  border: 3px solid #247dff;
  background-color: rgba(36, 125, 255, 0.2);
  border-radius: 8px;
  color: #9cc3ff;
  padding: 8px 12px;
}
.success-tag {
  border: 3px solid #00fde7;
  background-color: rgba(0, 253, 232, 0.2);
  border-radius: 8px;
  color: #a9faf4;
  padding: 8px 12px;
}
.tag1 {
  background-color: #38c95a;
  border-radius: 8px;
  padding: 12px;
  display: inline-block;
}
.tag2 {
  background-color: #ff2b34;
  border-radius: 8px;
  padding: 12px;
  display: inline-block;
}
.tag3 {
  background-color: #247dff;
  border-radius: 8px;
  padding: 12px;
  display: inline-block;
}
.tag4 {
  background-color: #3e5185;
  border-radius: 8px;
  padding: 12px;
  display: inline-block;
}
.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .start-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url('@/assets/images/routineCommandMap/eventReport/start.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 8px;
  }
  .record-icon {
    display: inline-block;
    width: 46px;
    height: 50px;
    background: url('@/assets/images/routineCommandMap/eventReport/record.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 8px;
  }
}
.common-table {
  .table-header {
    width: 1848px;
  }
  .tr {
    width: 1848px;
  }
}
</style>