daofu-large-screen/src/views/data-statistics/right-side/components/early-warning.vue

<!-- 预警分析 -->
<template>
  <div class="side-bg">
    <TitleC title="预警分析"></TitleC>
    <TitleD width="100">
      <div
        class="module_top_title"
        v-for="(item, index) in label"
        :key="index"
        @click="clickMenuOption(item.id)"
        :class="
          item.check == true
            ? 'module_menu_selected'
            : 'module_menu_notSelected'
        "
      >
        {{ item.title }}
      </div>
    </TitleD>
    <el-table :data="tableData" height="180" style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column prop="type" label="预警类型" align="center" width="80" />
      <el-table-column prop="info" label="预警信息" align="center">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.info"
            placement="top-start"
            popper-class="riskPool_tip"
          >
            <span>{{ scope.row.info }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="预警时间" align="center" width="140">
        <template #default="scope">
          <span class="time">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="recipient"
        label="接收人"
        align="center"
        width="70"
      >
        <template #default="scope">
          <span class="time">{{ scope.row.recipient }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="60">
        <template #default="scope">
          <span @click="clickDetails">
            <span class="pointer details">详情</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "WorkSituation",
});
</script>
<script setup lang='ts'>
const label = ref([
  { title: "防火", check: true, id: 0 },
  { title: "防汛", check: false, id: 1 },
  { title: "治安", check: false, id: 2 },
]);
const clickMenuOption = (id: any) => {
  label.value.forEach((item) => {
    item.check = false;
  });
  label.value[id].check = true;
};
const tableData = [
  {
    type: "防火",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
    recipient: "某某某",
  },
  {
    type: "防火",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
    recipient: "某某某",
  },
  {
    type: "防火",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
    recipient: "某某某",
  },
  {
    type: "防火",
    info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
    time: "2024/1/22 12:20:13",
    recipient: "某某某",
  },
];
const clickDetails = () => {};
</script>

<style lang="scss" scoped>
.time {
  font-size: 12px;
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  color: #159aff;
}
</style>
<style>
.riskPool_tip {
  max-width: 200px !important;
}
</style>