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

whyczyk

2021-08-04 2d322febd77ba39d8ecbe1ffd3424cd0496812b9

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

 package-lock.json

Diff too large

 src/assets/images/new.png

 src/assets/js/api.js

@@ -27,7 +27,7 @@
}

export const uKeyLogin = (username, password, uKeyId) => {
    console.log(username+password+uKeyId);
    console.log(username + password + uKeyId);
    return axios({
        method: "post",
        url: `LoginAction_login4UKey?uinf.UName=${username}&uinf.Upassword=${md5(password)}&uinf.UId=0&uinf.UKey_ID=${uKeyId}`,
@@ -419,4 +419,15 @@
        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"
                     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-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">
                    <iframe :name="item.name" :src="item.src" width="100%" height="100%" frameborder="0"
                            scrolling="no"></iframe>
                        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>
@@ -35,209 +27,221 @@
</template>

<script>
import PageHeader from '../components/PageHeader.vue';
import PageMenu from '../components/PageMenu.vue';
import ProgressBar from 'vuejs-progress-bar';
import HdwDialog from "@/components/HdwDialog";
import PagesThreeHome from '@/pages/dataTest/threeHome';
import {
    checkUserLogin
} from '@/assets/js/api'
    import PageHeader from '../components/PageHeader.vue';
    import PageMenu from '../components/PageMenu.vue';
    import ProgressBar from 'vuejs-progress-bar';
    import HdwDialog from "@/components/HdwDialog";
    import PagesThreeHome from '@/pages/dataTest/threeHome';
    import marqueeLeft from "@/components/marqueeLeft ";
    import {
        checkUserLogin,
        getAllRealAlarm
    } from '@/assets/js/api'

let timer;
export default {
    components: {
        PageHeader,
        PageMenu,
        PagesThreeHome,
        HdwDialog,
    },
    data() {
        return {
            acTabs: 'index',
            tabs: [
                {
    let timer;
    export default {
        components: {
            PageHeader,
            PageMenu,
            PagesThreeHome,
            HdwDialog,
            marqueeLeft
        },
        data() {
            return {
                newItems: [],
                acTabs: 'index',
                tabs: [{
                    label: '首页',
                    name: 'index',
                    src: '#/index',
                    closable: false,
                },
            ],
            drawer: false,
            timer: '',
            hdwDialog: false,
            areas: [],
            socket: "",
            path: 'ws://localhost:8919/fg/websocket/loginCheck'
        }
    },
    watch: {
        acTabs: {
            handler(name) {  // 监测tab激活的位置
                // 存储激活的sessionStorage
                sessionStorage.setItem('acTabs', name);
            },
            immediate: true,
        },
        '$store.state.ukey.isIn'(isIn) {
            if(!isIn) {
                this.$router.push("/login");
                }, ],
                drawer: false,
                timer: '',
                hdwDialog: false,
                areas: [],
                socket: "",
                path: 'ws://localhost:8919/fg/websocket/loginCheck'
            }
        }
    },
    methods: {
        removeTab(targetName) {
            let tabs = this.tabs;
            let activeName = this.acTabs;
        },
        watch: {
            acTabs: {
                handler(name) { // 监测tab激活的位置
                    // 存储激活的sessionStorage
                    sessionStorage.setItem('acTabs', name);
                },
                immediate: true,
            },
            '$store.state.ukey.isIn'(isIn) {
                if (!isIn) {
                    this.$router.push("/login");
                }
            }
        },
        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;

            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.acTabs = activeName;
                this.tabs = tabs.filter(tab => tab.name !== targetName);
            },
            changeTab(menu) {
                let tabs = this.tabs;
                // 检测name是否已经存在tabs内
                let notIn = true;
                tabs.forEach(item => {
                    if (item.name == menu.name) {
                        notIn = false;
                    }
                });
            }

            this.acTabs = activeName;
            this.tabs = tabs.filter(tab => tab.name !== targetName);
        },
        changeTab(menu) {
            let tabs = this.tabs;
            // 检测name是否已经存在tabs内
            let notIn = true;
            tabs.forEach(item => {
                if (item.name == menu.name) {
                    notIn = false;
                // 不在, 添加menu到tabs中
                if (notIn) {
                    tabs.push(menu);
                }
            });
            // 不在, 添加menu到tabs中
            if (notIn) {
                tabs.push(menu);
            }

            // 设置激活的导航
            this.acTabs = menu.name;
        },
        // 处理从子iframe中获取到的指令
        handleMessage(msg) {
            switch (msg.cmd) {
                // 同步页面的指令
                case 'syncPage':
                    this.syncPage(msg.params);
                    break;
                case 'showDialog':
                    this.hdwDialog = false;
                    this.$nextTick(()=>{
                        this.showDialog(msg.params);
                    });
                    break;
            }
        },
        // 同步页面
        syncPage(params) {
            let tabs = this.tabs;
            let menu = params.pageInfo;
            // 检测name是否已经存在tabs内
            let notIn = true;
            let index = -1;
            tabs.forEach((item, flag) => {
                // 页面是否已经打开
                if (item.name == menu.name) {
                    notIn = false;
                    index = flag;
                // 设置激活的导航
                this.acTabs = menu.name;
            },
            // 处理从子iframe中获取到的指令
            handleMessage(msg) {
                switch (msg.cmd) {
                    // 同步页面的指令
                    case 'syncPage':
                        this.syncPage(msg.params);
                        break;
                    case 'showDialog':
                        this.hdwDialog = false;
                        this.$nextTick(() => {
                            this.showDialog(msg.params);
                        });
                        break;
                }
            });
            // 不在, 添加menu到tabs中
            if (notIn) {
                tabs.push(menu);
            } else {        // 页面已存在，并刷新页面
                tabs.splice(index, 1);
                this.$nextTick(() => {
                    tabs.splice(index, 0, menu);
            },
            // 同步页面
            syncPage(params) {
                let tabs = this.tabs;
                let menu = params.pageInfo;
                // 检测name是否已经存在tabs内
                let notIn = true;
                let index = -1;
                tabs.forEach((item, flag) => {
                    // 页面是否已经打开
                    if (item.name == menu.name) {
                        notIn = false;
                        index = flag;
                    }
                });
            }
                // 不在, 添加menu到tabs中
                if (notIn) {
                    tabs.push(menu);
                } else { // 页面已存在，并刷新页面
                    tabs.splice(index, 1);
                    this.$nextTick(() => {
                        tabs.splice(index, 0, menu);
                    });
                }

            // 设置激活的导航
            this.acTabs = menu.name;
        },
        showDialog(params) {
            switch(params.dialog) {
                case 'hdwDialog':
                    this.areas = params.pageInfo;
                    this.hdwDialog = true;
                    break;
            }
        },
        checkUserLogin() {
            checkUserLogin().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code === 1) {
                    alert(rs.msg);
                    this.$router.push('/login');
                } else {
                // 设置激活的导航
                this.acTabs = menu.name;
            },
            showDialog(params) {
                switch (params.dialog) {
                    case 'hdwDialog':
                        this.areas = params.pageInfo;
                        this.hdwDialog = true;
                        break;
                }
            },
            checkUserLogin() {
                checkUserLogin().then(res => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.code === 1) {
                        alert(rs.msg);
                        this.$router.push('/login');
                    } else {
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            this.checkUserLogin();
                        }, 3000);
                    }
                }).catch(error => {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        this.checkUserLogin();
                    }, 3000);
                }
            }).catch(error => {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    this.checkUserLogin();
                }, 3000);
            })
                })
            },
        },
    },
    mounted() {
        // 启动用户互斥登录模块
        this.checkUserLogin();
        // 监听来自子iframe的指令
        window.addEventListener('message', (msg) => {
            // 处理数据
            this.handleMessage(msg.data);
        });
    },
    destroyed() {
        mounted() {
            // 启动用户互斥登录模块
            this.checkUserLogin();
            // 监听来自子iframe的指令
            window.addEventListener('message', (msg) => {
                // 处理数据
                this.handleMessage(msg.data);
            });
            this.getAllRealAlarm()
            setInterval(() => {
                this.getAllRealAlarm()
            }, 4000)
        },
        destroyed() {

        }
    }
}
</script>

<style scoped lang="less">
.flex-layout {
    display: flex;
    height: 100%;
    box-sizing: border-box;
}
    .flex-layout {
        display: flex;
        height: 100%;
        box-sizing: border-box;
    }

.page-home-content {
    position: relative;
    height: 100%;
}
    .page-home-content {
        position: relative;
        height: 100%;
    }

.tab-menu-left {
    position: absolute;
    box-sizing: border-box;
    width: 48px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    z-index: 1;
}
    .tab-menu-left {
        position: absolute;
        box-sizing: border-box;
        width: 48px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        z-index: 1;
    }

.no-selected {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .no-selected {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.show-drawer {
    transform: translateX(360px);
}
</style>


    .show-drawer {
        transform: translateX(360px);
    }
</style>