底部滚动告警信息功能添加

whyczyk

2021-08-04 2d322febd77ba39d8ecbe1ffd3424cd0496812b9

底部滚动告警信息功能添加

 package-lock.json

Diff too large

 src/assets/images/new.png

 src/assets/js/api.js

@@ -418,5 +418,16 @@
        method: "post",
        url: "MapOutlineAction!getAll",
        data: 'json=' + JSON.stringify(data),
    });
}

/**
 * 查询所有告警信息
 * 参数
 */
export const getAllRealAlarm = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_dataAction!getRealAlarm",
    });
}

 src/components/marqueeLeft .vue

New file
@@ -0,0 +1,177 @@
<template>
  <div class="my-outbox">
    <div class="my-inbox" ref='box' @mouseover="clearTimer" @mouseout="moveLeft">
      <div class="my-list" v-for="(item,index) in listData" :key='index' ref='list' @click="clickItem(item)">
        <span v-if="item.isNew">最新</span>
        <img src="../assets/images/new.png" class="img" v-if="item.isNew">
        {{item.stationname}}在{{item.alm_start_time}}出现了{{item.alarmname}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'my-marquee-left',
    props: {
      sendVal: Array
    },
    data() {
      return {
        // 定时器标识
        nowTime: null,
        // 每一个内容的宽度
        disArr: [],
        startDis: 0,
        listData: []
      }
    },
    watch: {
      'sendVal': {
        handler(val) {
          if (val.length > 0) {
            this.listData = JSON.parse(JSON.stringify(val))
            var item = this.$refs.list
            var arr = []
            // 因为设置的margin值一样，所以取第一个就行。
            var margin = 0
            if (item && item.length > 0) {
              margin = this.getMargin(item[0])
            }
            if (this.listData.length > 0) {
              this.listData.map((jtem, i) => {
                var nowStamp = new Date().getTime();
                var inputDate = Date.parse(jtem.alm_start_time); //输入时间戳 
                if ((nowStamp - inputDate) < 60 * 5 * 1000) {
                  jtem.isNew = true
                } else {
                  jtem.isNew = false
                }
                arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
              })
            }
            this.disArr = arr
            this.moveLeft()
          }
        },
        immediate: true,
      },
    },
    mounted() {

    },
    beforeDestroy() {
      // 页面关闭清除定时器
      clearInterval(this.nowTime)
      // 清除定时器标识
      this.nowTime = null
    },
    methods: {
      clickItem(val) {
        console.log(val)
        if (val.alarmtype) {
          //电池实时告警
          window.parent.postMessage({
            cmd: "syncPage",
            params: {
              pageInfo: {
                label: "电池实时告警",
                name: "batteryrTimequery",
                src: "#/batteryrTimequery",
                closable: true
              }
            }
          }, "*");
        } else {
          //电源实时告警
          window.parent.postMessage({
            cmd: "syncPage",
            params: {
              pageInfo: {
                label: "电源实时告警",
                name: "powerRealtimeInfo",
                src: "#/powerRealtimeInfo",
                closable: true
              }
            }
          }, "*");
        }
      },
      clearTimer() {
        // 页面关闭清除定时器
        clearInterval(this.nowTime)
        // 清除定时器标识
        this.nowTime = null
      },
      // 获取margin属性
      getMargin(obj) {
        var marg = window.getComputedStyle(obj, null)['margin-right']
        marg = marg.replace('px', '')
        return Number(marg) // 强制转化成数字
      },
      // 移动的方法
      moveLeft() {
        var that = this
        var outbox = this.$refs.box
        // 页面关闭清除定时器
        clearInterval(this.nowTime)
        // 清除定时器标识
        this.nowTime = null
        // 初始位置
        this.nowTime = setInterval(() => {
          this.startDis -= 0.5
          if (Math.abs(this.startDis) > Math.abs(that.disArr[0])) {
            // 每次移动完一个元素的距离，就把这个元素的宽度
            that.disArr.push(that.disArr.shift())
            // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
            that.listData.push(that.listData.shift())
            this.startDis = 0
          }
          if (outbox) {
            // 每次都让盒子移动指定的距离
            outbox.style = `transform: translateX(${this.startDis}px)`
          }
        }, 1000 / 60)
      }
    }
  }
</script>

<style scoped>
  .my-outbox {
    /*color: #D7BC8D;*/
    overflow: hidden;
    color: #FFFFFF;
    height: 35px;
    /*background: #422b02;*/

  }

  .my-inbox {
    white-space: nowrap;

  }

  .my-list {
    margin-right: 25px;
    display: inline-block;
    font-size: 0.3rem;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
  }

  .my-list .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 28px;
  }

  .my-uname {
    /*color: #FF8900;*/
    color: #FFFFFF;
  }
</style>

 src/pages/home.vue

@@ -1,32 +1,24 @@
<template>
    <flex-layout class="page-home">
        <page-header
            slot="header"
            :class="{'show-drawer': drawer}"
            @handle-message="handleMessage"></page-header>
        <page-header slot="header" :class="{'show-drawer': drawer}" @handle-message="handleMessage"></page-header>
        <div class="page-home-content" :class="{'show-drawer': drawer}">
            <div class="tab-menu-left" @click="drawer=true">
                <i class="el-icon-s-operation"></i>
            </div>
            <el-tabs v-model="acTabs" type="border-card"
                     @tab-remove="removeTab"
            <el-tabs v-model="acTabs" type="border-card" @tab-remove="removeTab"
                     class="no-selected full-height add-m-menu flex-layout el-home-tabs">
                <el-tab-pane v-for="item in tabs" :key="item.name"
                             :label="item.label" :name="item.name" :closable="item.closable">
                <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name"
                    :closable="item.closable">
                    <iframe :name="item.name" :src="item.src" width="100%" height="100%" frameborder="0"
                            scrolling="no"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-drawer
            title="我是标题"
            :withHeader="false"
            :visible.sync="drawer"
            size="360px"
            direction="ltr">
            <page-menu
                :ac-tabs="acTabs"
                @select="changeTab"></page-menu>
        <div slot="footer">
            <marqueeLeft :sendVal="newItems"></marqueeLeft>
        </div>
        <el-drawer title="我是标题" :withHeader="false" :visible.sync="drawer" size="360px" direction="ltr">
            <page-menu :ac-tabs="acTabs" @select="changeTab"></page-menu>
        </el-drawer>
        <hdw-dialog :visible.sync="hdwDialog">
            <pages-three-home v-if="hdwDialog" :areas="areas"></pages-three-home>
@@ -40,8 +32,10 @@
import ProgressBar from 'vuejs-progress-bar';
import HdwDialog from "@/components/HdwDialog";
import PagesThreeHome from '@/pages/dataTest/threeHome';
    import marqueeLeft from "@/components/marqueeLeft ";
import {
    checkUserLogin
        checkUserLogin,
        getAllRealAlarm
} from '@/assets/js/api'

let timer;
@@ -51,18 +45,18 @@
        PageMenu,
        PagesThreeHome,
        HdwDialog,
            marqueeLeft
    },
    data() {
        return {
                newItems: [],
            acTabs: 'index',
            tabs: [
                {
                tabs: [{
                    label: '首页',
                    name: 'index',
                    src: '#/index',
                    closable: false,
                },
            ],
                }, ],
            drawer: false,
            timer: '',
            hdwDialog: false,
@@ -86,6 +80,14 @@
        }
    },
    methods: {
            getAllRealAlarm() {
                getAllRealAlarm().then((res) => {
                    let resData = JSON.parse(res.data.result)
                    this.newItems = resData.data
                }).catch((err) => {
                    console.log(err)
                });
            },
        removeTab(targetName) {
            let tabs = this.tabs;
            let activeName = this.acTabs;
@@ -199,6 +201,10 @@
            // 处理数据
            this.handleMessage(msg.data);
        });
            this.getAllRealAlarm()
            setInterval(() => {
                this.getAllRealAlarm()
            }, 4000)
    },
    destroyed() {

@@ -239,5 +245,3 @@
    transform: translateX(360px);
}
</style>