smart-grp-nof-web/src/views/system/visualized/yjxx/index.vue

<template >
<div class="yjxx">
            <div class="title">预警信息</div>
            <div class="dataShow">
              <ul class="outUl">
                <li style="color: #26dec5">预警信息</li>
                <li style="color: #26dec5">预警点</li>
                <li style="color: #26dec5">监测时间</li>
              </ul>
              <vue-seamless-scroll
                :data="tableData"
                :class-option="classOption"
                class="scroll"
                id="yjxxScroll"
              >
                <ul
                  class="DataList_top inUl"
                  v-for="(item, index) in tableData"
                  :key="index"
                >
                  <li class="DataList_left">
                    <span
                      style="
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background: rgb(38, 222, 197);
                        display: inline-block;

                        margin-right: 5px;
                      "
                    ></span
                    >{{ item.alarmRemark }}
                  </li>
                  <li class="DataList_left">
                    {{ item.deviceName }}
                  </li>
                  <li class="DataList_left">
                    {{ item.alarmTime }}
                  </li>
                </ul>
              </vue-seamless-scroll>
            
            </div>
          </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from "echarts";
import api from "@/api";
export default {
  components: {
    vueSeamlessScroll,
   
  },
    data(){
        return{
          tableData:[
            
          ]
        }
    },
    computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        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: 0, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
    methods:{
       //预警信息
    getWarnInfo(code) {
      let params = {
        labelCode: code,
        orgCode: localStorage.getItem("orgCode"),

        pageSize: 5,
      };
      api.warnInfo(params).then((res) => {
        console.log(res, "预警信息");
        if(res.code==200){
          this.tableData=res.data
        }
       
      });
    },
        
    },
    created(){
    
       // this.getWarnInfo()
  
   
       
    }
}

</script>
<style lang="scss" scoped>

      .yjxx {
        height: 100%;
        width: 21%;
        background: url("../../../../assets/images/bigScreen/tempBorder.png")
          no-repeat;
        background-size: 100% 100%;
        .title {
          height: 37px;
          line-height: 37px;
          margin-left: 10px;
          color: #fff;
          font-weight: 600;
        }
        .dataShow {
        padding-top: 10px;
      }
      }

      .outUl {
    display: flex;

    justify-content: space-around;
    //   padding: 7px 0;
    color: #ccc;
    font-weight: bolder;

    li {
      display: flex;

      justify-content: space-around;
      text-align: center;
      width: 27%;
      font-size: 14px;
    }
    li:nth-child(3) {
      width: 46%;
    }
    //   // li:nth-child(1) {
    //   //   width: 24%;
    //   // }
  }
  .inUl {
    display: flex;

    justify-content: space-around;

    li {
      line-height: 29px;
      text-align: center;
      width: 27%;
      font-size: 12px;
      color: rgb(204, 236, 232);
      // color:rgb(29, 221, 196);
    }

    li:nth-child(3) {
      width: 46%;
    }
  }
  #yjxxScroll {
  height: 140px;
  overflow: hidden;
}
    
    
   
  
</style>