<template>
  <div id="LeftBox3">
    <div class="BaoJingHeader">
      <span class="BaoJingHeaderList_span1">泵站名称</span>
      <span class="BaoJingHeaderList_span2">警情类型</span>
      <span class="BaoJingHeaderList_span3">警情描述</span>
    </div>
    <div class="BaoJingBody">
      <div
        class="BaoJingBodyList"
        v-for="(item, index) in BaoJingData"
        :key="index"
      >
        <span class="BaoJingBodyList_span1">
          <n-ellipsis style="max-width: 120px">
            {{ item.pumpName }}
          </n-ellipsis></span
        >
        <span class="BaoJingBodyList_span2">
          <n-ellipsis style="max-width: 100px">
            {{ item.alarmType }}
          </n-ellipsis></span
        >
        <span class="BaoJingBodyList_span3">
          <n-ellipsis style="max-width: 140px">
            {{ item.remarks }}
          </n-ellipsis></span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
  name: "LeftBox3",
  setup() {
    const AllData = reactive({
      //   事件及报警看板
      BaoJingData: [
        {
          pumpName: "后湖二期泵站",
          alarmType: "集水池液位",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
        {
          pumpName: "铁路桥泵站",
          alarmType: "前池液位",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
        {
          pumpName: "机场河补水泵站",
          alarmType: "系统监控",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
        {
          pumpName: "王家墩污水泵站",
          alarmType: "前池液位",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
        {
          pumpName: "铁路桥泵站",
          alarmType: "集水池液位",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
        {
          pumpName: "后湖二期泵站",
          alarmType: "前池液位",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
        {
          pumpName: "机场河补水泵站",
          alarmType: "前池液位",
          remarks: "超开泵水位超开泵水位超开泵水位",
        },
      ],
    });
    onMounted(() => {});
    return {
      ...toRefs(AllData),
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#LeftBox3 {
  width: 100%;
  height: 100%;

  .BaoJingHeader {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #47678cad;
    color: #305784;

    .BaoJingHeaderList_span1 {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      width: 120px;
      text-align: center;
    }
    .BaoJingHeaderList_span2 {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      width: 100px;
      text-align: center;
    }
    .BaoJingHeaderList_span3 {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      width: 140px;
      text-align: center;
    }
  }
  .BaoJingBody {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;

    .BaoJingBodyList {
      width: 100%;
      height: 34px;
      line-height: 34px;
      cursor: pointer;

      &:nth-child(odd) {
        background: var(--OneMap-tables-odd);
      }
      &:hover .BaoJingBodyList_span1,
      &:hover .BaoJingBodyList_span2 {
        color: #1f78f7;
      }
      &:hover .BaoJingBodyList_span3 {
        color: #ec1a5a;
      }

      .BaoJingBodyList_span1 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        width: 120px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
      }
      .BaoJingBodyList_span2 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        width: 100px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
      }
      .BaoJingBodyList_span3 {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        width: 140px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
      }
    }
  }
}
</style>