xjsaas-ui/src/views/big-screen/disease-components/traffic-log.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-08 11:56:02
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-08 14:53:32
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
 * @Description: 病害巡检-交安事件日志
-->
<template>
  <div class="content">
    <!-- 搜索表单 -->
    <div class="traffic-form">
      <el-form
        :model="trafficForm"
        ref="trafficForm"
        size="small"
        :inline="true"
        label-position="left"
        label-width="5rem"
      >
        <el-form-item class="form-item" label="道路名称" prop="segmentName">
          <el-select
            v-model="trafficForm.segmentName"
            :popper-append-to-body="false"
            placeholder="请选择道路名称"
            clearable
          >
            <el-option
              v-for="item in segmentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" label="上下行" prop="inspectDirection">
          <el-select
            v-model="trafficForm.inspectDirection"
            :popper-append-to-body="false"
            placeholder="请选择"
            clearable
          >
            <el-option label="上行" value="0" />
            <el-option label="下行" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" label="公里桩" prop="stakeRange">
          <el-input
            v-model="trafficForm.stakeStart"
            placeholder="起始公里桩"
            style="width: 9rem"
            clearable
          />
          <span style="margin: 0 5px; color: #ffffff">-</span>
          <el-input
            v-model="trafficForm.stakeEnd"
            placeholder="终止公里桩"
            style="width: 9rem"
            clearable
          />
          <el-tooltip
            class="item"
            effect="dark"
            content="格式为K0000+000"
            placement="top"
          >
            <i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item class="form-item" label="事件类型" prop="equipmentType">
          <el-select
            v-model="trafficForm.equipmentType"
            :popper-append-to-body="false"
            placeholder="请选择事件类型"
            clearable
          >
            <el-option
              v-for="item in eventType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="form-item" label="事件状态" prop="state">
          <el-select
            v-model="trafficForm.state"
            :popper-append-to-body="false"
            placeholder="请选择事件状态"
            clearable
          >
            <el-option
              v-for="item in defectStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="form-btn">
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置</el-button
      >
    </div>
    <div class="traffic-title">
      <div class="emergency-type">事件类型</div>
      <div class="emergency-name">段路名称</div>
      <div class="emergency-status">事件状态</div>
      <div class="emergency-operation">操作</div>
    </div>
    <div class="traffic-table">
      <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 { emergencyData } from "@/api/xj/screen/traffic-screen";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "TrafficLog",
  components: { vueSeamlessScroll },
  props: {
    // 病害巡检中4种类型点击绑定
    bottomTipClick: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 查询表单绑定
      trafficForm: {
        // 道路名称
        segmentName: "",
        // 上下行
        inspectDirection: "",
        // 公里桩
        stakeStart: "",
        stakeEnd: "",
        // 事件类型
        equipmentType: "",
        // 事件状态
        state: "",
      },
      // 道路名称下拉数据
      segmentList: [],
      // 事件类型下拉数据
      eventType: [],
      // 事件状态下拉数据
      defectStatus: [],
      // 轮播配置
      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: {
    /* 点击搜索事件 */
    handleQuery() {},

    /* 点击重置事件 */
    resetQuery() {},

    /* 获取事件列表数据 */
    getData() {
      emergencyData().then(({ code, data }) => {
        if (code === 200) {
          this.emergencyList = data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;

  .traffic-form {
    width: calc(100% - 0.5rem);
    height: 38%;
    padding: 0.5rem;

    .form-item {
      width: 100%;

      ::v-deep .el-form-item__content {
        width: calc(100% - 5rem);

        .el-select {
          width: 100%;
        }
      }

      ::v-deep .el-form-item__label {
        color: #ffffff;
      }
    }

    ::v-deep .el-input__inner {
      color: #ffffff;
      border-color: #47536f;
      background-color: transparent;
    }

    ::v-deep .el-select {
      width: 6.5rem;

      .el-input .el-select__caret {
        line-height: 1.5rem;
      }

      .el-input--medium .el-input__inner {
        height: 1.5rem;
        background-color: transparent;
        color: #89c5e8;
        border-color: #6991cd;
      }

      .el-select-dropdown {
        background-color: #102649;
        border-color: #08204f;
        .el-scrollbar {
          .el-select-dropdown__wrap {
            .el-scrollbar__view {
              .el-select-dropdown__item:hover {
                background-color: #2b4c7e;
              }

              .el-select-dropdown__item.selected {
                background-color: #2b4c7e;
              }

              .el-select-dropdown__item.hover {
                background-color: #2b4c7e;
              }
            }

            .el-select-dropdown__list {
              background-color: #102649;
            }
          }
        }
      }
    }
  }

  .form-btn {
    height: 4%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .traffic-title {
    width: 100%;
    height: 7%;
    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% 90%;
    background-position: 50% 100%;

    .emergency-type {
      width: 30%;
    }

    .emergency-name {
      width: 30%;
    }

    .emergency-status {
      width: 30%;
    }

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

  .traffic-table {
    width: 100%;
    height: 51%;
    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>