<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-21 10:12:55
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-30 16:58:54
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
 * @Description: 交安事件大屏-交安突发事件
-->

<template>
  <div class="content">
    <div class="emergency-top">
      <div class="emergency-type">事件类型</div>
      <div class="emergency-name">段路名称</div>
      <div class="emergency-status">事件状态</div>
      <div class="emergency-operation">操作</div>
    </div>
    <div class="emergency-bottom">
      <vue-seamless-scroll
        class="vue-scroll"
        :class-option="defaultOption"
        :data="emergencyList"
      >
        <div
          class="emergency-bottom-div"
          v-for="(item, index) in emergencyList"
          :key="`emergency-${index}`"
        >
          <div class="emergency-type">{{ item.type }}</div>
          <div class="emergency-name">{{ item.segmentName }}</div>
          <div class="emergency-status"><a></a>{{ item.status }}</div>
          <div class="emergency-operation">操作</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
  
  <script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { emergencyData } from "@/api/xj/screen/traffic-screen";
export default {
  name: "TrafficEmergency",
  components: { vueSeamlessScroll },
  data() {
    return {
      // 轮播配置
      defaultOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      },
      // 事件列表
      emergencyList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /* 获取事件列表数据 */
    getData() {
      emergencyData().then(({ code, data }) => {
        if (code === 200) {
          this.emergencyList = data;
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding-top: 1rem;
  overflow: hidden;
  padding-left: 1rem;

  .emergency-top {
    height: 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    // border: 1px solid #0b7ecf;
    color: #e6fcfe;
    font-size: 0.9rem;
    padding: 0 0.5rem;
    background-image: url("../../../assets/screen/traffic/emergency-top.png");
    background-repeat: no-repeat;
    background-size: 100%;

    .emergency-type {
      width: 30%;
    }

    .emergency-name {
      width: 30%;
    }

    .emergency-status {
      width: 30%;
    }

    .emergency-operation {
      width: 10%;
    }
  }

  .emergency-bottom {
    height: calc(100% - 2rem);
    width: 100%;
    overflow: hidden;

    .emergency-bottom-div {
      height: 2rem;
      font-size: 0.8rem;
      display: flex;

      &:nth-child(2n + 1) {
        background-color: rgba(17, 52, 99, 0.3);
      }

      > div {
        margin: 0 0.3rem;
        line-height: 2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #808c9f;
      }

      .emergency-type {
        width: 27%;
      }

      .emergency-name {
        width: 27%;
      }

      .emergency-status {
        width: 27%;

        a {
          display: inline-block;
          width: 0.5rem;
          height: 0.5rem;
          margin-right: 0.5rem;
          background-color: #f7da15;
          border-radius: 0.25rem;
        }
      }

      .emergency-operation {
        width: 10%;
        color: #0d9ee2;
      }
    }
  }
}
</style>