yjdp-web/src/views/routineCommandMap/LeftSection/index.vue

<template>
  <div class="left-section">
    <div class="card">
      <div class="card-header">
        <div>综合值守</div>
      </div>
      <div class="card-content">
        <div style="line-height: 60px">值班时间：{{ comprehensiveDutyState.data.time }}</div>
        <div style="line-height: 60px">带班领导：{{ comprehensiveDutyState.data.classLeader }}</div>
        <div style="line-height: 60px">值班时间：{{ comprehensiveDutyState.data.operatorOnDuty }}</div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <div>巡查消息</div>
        <div class="more" @click="showInspectionNewsState">查看更多</div>
      </div>
      <div class="card-content">
        <table class="table">
          <thead>
            <tr class="tr">
              <td v-for="(item, index) in inspectionNewsState.columns" :key="index" class="td">{{ item.label }}</td>
            </tr>
          </thead>
          <tr v-for="(item, index) in inspectionNewsState.listData" :key="index" class="tr">
            <td class="td">{{ item.name }}</td>
            <td class="td">{{ item.type }}</td>
            <td class="td">{{ item.address }}</td>
            <td class="td">{{ item.time }}</td>
            <td class="td">{{ item.result }}</td>
            <td class="td">{{ item.img }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="card" style="height: 820px">
      <div class="card-header">
        <div>事件接报</div>
        <div class="more" @click="showMoreEventManageList">查看更多</div>
      </div>
      <div class="card-content" style="height: 100%">
        <table class="table">
          <thead>
            <tr class="tr">
              <td v-for="(item, index) in eventManageState.columns" :key="index" class="td">{{ item.label }}</td>
            </tr>
          </thead>
          <tr v-for="(item, index) in eventList" :key="index" class="tr">
            <td class="td">
              <div @click="handleView(item.event_id)">{{ item.event_title }}</div>
            </td>
            <td class="td">
              <dict-tag :options="mm_event_type" :value="item.event_type" />
            </td>
            <td class="td">{{ item.address }}</td>
            <td class="td">{{ item.event_time }}</td>
            <td class="td">
              <dict-tag :options="mm_event_state" :value="item.event_status" />
            </td>
            <td class="td">
              <div v-if="item.event_status === '0' || item.event_status === '1' || item.event_status === '2' || item.event_status === '3'" class="flex">
                <div @click="enterCommand(item)">进入指挥</div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <!--巡查消息弹窗-->
  <Dialog v-model="inspectionNewsState.showListDialog" title="巡查消息列表" width="70%"></Dialog>
  <!--事件接报弹窗-->
  <EventManage v-model="eventManageState.showListDialog" />
</template>

<script lang="ts" setup name="LeftSection">
import Dialog from '@/components/Dialog/index.vue';
import EventManage from '@/views/routineCommandMap/LeftSection/EventManage.vue';
import { ref, reactive, toRefs } from 'vue';
import { getEvent } from '@/api/duty/eventing';
import eventDetails from '../eventing/eventDetails.vue';
const eventList = ref([]);
const loading = ref(true);
const total = ref(0);
const router = useRouter();
const eventId = ref('');
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 comprehensiveDutyState = reactive({
  data: {
    // 值班时间
    time: '08:30-17:30',
    // 带班领导
    classLeader: '张珊珊',
    // 值班人员
    operatorOnDuty: '王珊珊'
  }
});
const eventDetailsState = reactive({
  show: false,
  title: ''
});
//查看事件详情
const handleView = (id: string) => {
  // 查看事件详情逻辑
  eventId.value = id;
  eventDetailsState.title = '查看事件';
  eventDetailsState.show = true;
};
// 巡查消息
const inspectionNewsState = reactive({
  showListDialog: false,
  columns: [
    { label: '巡检任务', key: 'task' },
    { label: '巡检类型', key: 'type' },
    { label: '巡检地点', key: 'address' },
    { label: '巡检时间', key: 'time' },
    { label: '巡检结果', key: 'result' },
    { label: '巡检图像', key: 'img' }
  ],
  listData: []
});
// 显示更多巡查消息
const showInspectionNewsState = () => {
  inspectionNewsState.showListDialog = true;
};

const initFormData = {
  event_id: '',
  event_title: '', // 事件标题
  event_type: '', // 事件类型
  event_status: '', // 事件状态
  address: '', // 事件地点
  event_time: '' // 上报时间
};
// 表单数据
const data = reactive({
  form: { ...initFormData },
  queryParams: {
    page: 1,
    page_size: 10
  },
  event_levelSelection: [],
  event_statusSelection: [],
  regionSelection: []
});

const { queryParams, form } = toRefs(data);
const getList = () => {
  loading.value = true;
  getEvent(queryParams.value)
    .then((res) => {
      eventList.value = res.data;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
// 事件接报
const eventManageState = reactive({
  columns: [
    { label: '事件名称', key: 'event_title' },
    { label: '事件类型', key: 'event_type' },
    { label: '地点', key: 'address' },
    { label: '上报时间', key: 'report_time' },
    { label: '事件状态', key: 'event_status' },
    { label: '操作', key: 'operate' }
  ],
  showListDialog: false,
  // showDetailDialog: false,
});
// 显示事件管理列表弹窗
const showMoreEventManageList = () => {
  eventManageState.showListDialog = true;
};
// 进入应急态界面
const enterCommand = (item) => {
  if (item) {
    // 查看事件详情逻辑
    console.log('进入指挥', item);
    router.push({
      path: '/emergencyCommandMap',
      query: { event_id: item.event_id }
    });
  }
};
// const enterCommand = () => {
//   router.push('/emergencyCommandMap');
// };

// 初始化数据
const initData = () => {
  // 综合值守数据
  comprehensiveDutyState.data = {
    time: '08:30-17:30',
    classLeader: '张珊珊',
    operatorOnDuty: '林珊珊、张珊珊'
  };
  // 巡查消息数据
  inspectionNewsState.listData = [
    { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
    { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
    { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
    { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
    { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
    { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' }
  ];
};
// 加载完成事件
onMounted(() => {
  initData();
  getList();
});
</script>

<style lang="scss" scoped>
.left-section {
  width: 1965px;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 36px;
}
.card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 26px;
  padding: 46px 69px;
  margin-bottom: 69px;
  animation-name: slide;
  .card-header {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &:last-child {
    margin-bottom: 0;
  }
  &:nth-child(1) {
    animation-duration: 0.5s; // 新增
  }
  &:nth-child(2) {
    height: 667.5px;
    animation-duration: 1s; // 新增
  }
  &:nth-child(3) {
    height: 667.5px;
    animation-duration: 1.5s; // 新增
  }
}
.table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  thead {
    .td {
      background-color: #fafafa;
      border: 5px solid #ebebeb;
    }
  }
  .tr {
    .td {
      width: auto;
      font-size: 28px;
      padding: 10px 5px;
      border-bottom: 5px solid #ebebeb;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.more {
  color: #1890ff;
  cursor: pointer;
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  80% {
    transform: translateX(92px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>