内容提交

whychdw

2021-09-03 c0393a7b4bfd83a1de9d767063cec89ba34b1af9

内容提交

 src/assets/js/config.js

@@ -38,7 +38,12 @@
    },
    weather: {
        label: '天气预报',
        des: '平台是否显示天气预报',
        des: '启动充放电测试使用人脸识别',
        value: false,
    }
    },
    bigScreen: {
        label: '大屏数据展示',
        des: '首页显示大屏展示',
        value: true,
    },
};

 src/assets/js/tools/getPageMenu.js

@@ -1,14 +1,18 @@
import config from "@/assets/js/config";
/**
 * 获取页面信息
 * id 已经规定的不要改变
 * @returns {*[]}
 */
function getPageMenu() {
    // 首页地址
    let homeSrc = config.bigScreen.value ? "#/screen" : "#/index";

    return [
        {
            label: "首页",
            name: "index",
            src: "#/index",
            src: homeSrc,
            icon: "el-icon-s-home",
            noChild: true,
            closable: false,
@@ -19,49 +23,6 @@
            level: 1,
            disabled: true
        },
        // {
        //     label: "大屏数据监控",
        //     name: "bigScreen",
        //     src: "",
        //     icon: "el-icon-s-platform",
        //     closable: false,
        //     childrens: [{
        //         label: "大屏驾驶舱",
        //         name: "bigScreenSetting",
        //         src: "#/",
        //         target: true,
        //         closable: true
        //     }]
        // },
        // {
        //     label: "大屏数据监控",
        //     name: "bigScreen",
        //     src: "",
        //     icon: "el-icon-s-platform",
        //     closable: false,
        //     childrens: [{
        //         label: "实时监测配置",
        //         name: "bigScreenSetting",
        //         src: "#/",
        //         target: true,
        //         closable: true
        //     },
        //         {
        //             label: "电池系统监控",
        //             name: "bigScreenBatt",
        //             src: "#/screen",
        //             target: true,
        //             closable: true
        //         },
        //         {
        //             label: "电源系统监控",
        //             name: "bigScreenEle",
        //             src: "#/screen2",
        //             target: true,
        //             closable: true
        //         },
        //     ]
        // },
        {
            label: "在线监测",
            name: "testData",
@@ -143,8 +104,29 @@
                    ord: 6,
                    level: 2,
                },

                //  最大ord=6
                {
                    label: "高频开关配电柜遥测量",
                    name: "hfSwitch",
                    src: "#/hfSwitch",
                    closable: true,
                    id: 2007,
                    menuId: 2,
                    enableduse: true,
                    ord: 7,
                    level: 2,
                },
                {
                    label: "交流配电柜遥测量 ",
                    name: "GGDmeasure",
                    src: "#/GGDmeasure",
                    closable: true,
                    id: 2008,
                    menuId: 2,
                    enableduse: true,
                    ord: 8,
                    level: 2,
                },
                //  最大ord=8
            ]
        },
        {

 src/components/PageMenu.vue

@@ -3,9 +3,7 @@
</template>

<script>
import {
    isHasPermit
} from "@/assets/js/tools";
import { isHasPermit } from "@/assets/js/tools";
import getPageMenu from "@/assets/js/tools/getPageMenu";
import PageNav from "@/components/PageNav";

@@ -14,8 +12,8 @@
    props: {
        acTabs: {
            type: String,
            default: ""
        }
      default: "",
    },
    },
    data() {
        return {
@@ -24,7 +22,9 @@
    },
    methods: {
        getPageMenu() {
            this.$apis.pageSetting.getPageMenu().then(res=>{
      this.$apis.pageSetting
        .getPageMenu()
        .then((res) => {
                let rs = JSON.parse(res.data.result);
                let data = [];
                if(rs.code == 1) {
@@ -32,13 +32,15 @@
                }
                this.menus = getPageMenu();
                this.changeMenus(this.menus, data);
            }).catch(error=>{
          console.log(this.menus);
        })
        .catch((error) => {
                this.menus = getPageMenu();
                console.log(error);
            });
        },
        changeMenus(menus, list) {
            menus.forEach(menu=>{
      menus.forEach((menu) => {
                let item = "";
                for(let i=0; i<list.length; i++) {
                    if(menu.id == list[i].id) {
@@ -47,7 +49,7 @@
                    }
                }
                if(item && item.childrens) {
                    item.childrens.forEach(children=>{
          item.childrens.forEach((children) => {
                        for(let i=0; i<menu.childrens.length; i++) {
                            let item2 = menu.childrens[i];
                            if(item2.id == children.id) {
@@ -61,20 +63,19 @@
        },
        select(data) {
            if (data.name !== this.acTabs) {
                let url = window.location.hostname + ':8090/screen/index.html';
                ;
        let url = window.location.hostname + ":8090/screen/index.html";
                // let url = 'big-screen/index.html';

                if (process.env.NODE_ENV == 'dev') {
                    url = " http://localhost:8081/"
        if (process.env.NODE_ENV == "dev") {
          url = " http://localhost:8081/";
                }
                // 根据数据跳转
                if (data.target) {
                    // let activeSkin = localStorage.getItem('activeSkin');
                    // window.open(url + data.src + '?activeSkin=' + activeSkin);
                    // return;
                    let userId = sessionStorage.getItem('userId');
                    window.open(url + data.src + '?userId=' + userId);
          let userId = sessionStorage.getItem("userId");
          window.open(url + data.src + "?userId=" + userId);
                    return;
                }
                this.$emit("select", data);
@@ -86,7 +87,7 @@
    computed: {
        permitMenu() {
            let permits = this.$store.state.user.permits;
            let menus = this.menus.map(item => {
      let menus = this.menus.map((item) => {
                let tmp = {
                    label: item.label,
                    name: item.name,
@@ -97,7 +98,7 @@
                    closable: item.closable,
                };
                if (!tmp.noChild) {
                    tmp.childrens = item.childrens.filter(child => {
          tmp.childrens = item.childrens.filter((child) => {
                        if (child.permitName) {
                            return isHasPermit(child.permitName, permits);
                        } else {
@@ -107,16 +108,15 @@
                }
                return tmp;
            });
            return menus.filter(item => {
      return menus.filter((item) => {
                return item.noChild || item.childrens.length > 0;
            });
        },
    },
    mounted() {
        this.getPageMenu();
    }
  },
};
</script>

<style scoped>
</style>
<style scoped></style>

 src/global/common.js

 src/pages/home.vue

@@ -1,23 +1,48 @@
<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">
                    <iframe :name="item.name" :src="item.src" width="100%" height="100%" frameborder="0"
                        scrolling="no"></iframe>
      <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>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div slot="footer">
            <marqueeLeft :sendVal="newItems"></marqueeLeft>
        </div>
        <el-drawer title="我是标题" :withHeader="false" :visible.sync="drawer" size="360px" direction="ltr">
    <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">
@@ -27,16 +52,13 @@
</template>

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

    let timer;
    export default {
@@ -45,46 +67,46 @@
            PageMenu,
            PagesThreeHome,
            HdwDialog,
            marqueeLeft
    marqueeLeft,
        },
        data() {
    let menus = getPageMenu();

            return {
                newItems: [],
                acTabs: 'index',
                tabs: [{
                    label: '首页',
                    name: 'index',
                    src: '#/index',
                    closable: false,
                }, ],
      acTabs: "index",
      tabs: [menus[0]],
                drawer: false,
                timer: '',
      timer: "",
                hdwDialog: false,
                areas: [],
                socket: "",
                path: 'ws://localhost:8919/fg/websocket/loginCheck'
            }
      path: "ws://localhost:8919/fg/websocket/loginCheck",
    };
        },
        watch: {
            acTabs: {
                handler(name) { // 监测tab激活的位置
      handler(name) {
        // 监测tab激活的位置
                    // 存储激活的sessionStorage
                    sessionStorage.setItem('acTabs', name);
        sessionStorage.setItem("acTabs", name);
                },
                immediate: true,
            },
            '$store.state.ukey.isIn'(isIn) {
    "$store.state.ukey.isIn"(isIn) {
                if (!isIn) {
                    this.$router.push("/login");
                }
            }
    },
        },
        methods: {
            getAllRealAlarm() {
                getAllRealAlarm().then((res) => {
      getAllRealAlarm()
        .then((res) => {
                    let resData = JSON.parse(res.data.result);
                    this.newItems = resData.data;
                }).catch((err) => {
        })
        .catch((err) => {
                    console.log(err);
                });
            },
@@ -104,13 +126,13 @@
                }

                this.acTabs = activeName;
                this.tabs = tabs.filter(tab => tab.name !== targetName);
      this.tabs = tabs.filter((tab) => tab.name !== targetName);
            },
            changeTab(menu) {
                let tabs = this.tabs;
                // 检测name是否已经存在tabs内
                let notIn = true;
                tabs.forEach(item => {
      tabs.forEach((item) => {
                    if (item.name == menu.name) {
                        notIn = false;
                    }
@@ -127,10 +149,10 @@
            handleMessage(msg) {
                switch (msg.cmd) {
                    // 同步页面的指令
                    case 'syncPage':
        case "syncPage":
                        this.syncPage(msg.params);
                        break;
                    case 'showDialog':
        case "showDialog":
                        this.hdwDialog = false;
                        this.$nextTick(() => {
                            this.showDialog(msg.params);
@@ -155,7 +177,8 @@
                // 不在, 添加menu到tabs中
                if (notIn) {
                    tabs.push(menu);
                } else { // 页面已存在，并刷新页面
      } else {
        // 页面已存在，并刷新页面
                    tabs.splice(index, 1);
                    this.$nextTick(() => {
                        tabs.splice(index, 0, menu);
@@ -167,49 +190,49 @@
            },
            showDialog(params) {
                switch (params.dialog) {
                    case 'hdwDialog':
        case "hdwDialog":
                        this.areas = params.pageInfo;
                        this.hdwDialog = true;
                        break;
                }
            },
            checkUserLogin() {
                checkUserLogin().then(res => {
      checkUserLogin()
        .then((res) => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.code === 1) {
                        alert(rs.msg);
                        this.$router.push('/login');
            this.$router.push("/login");
                    } else {
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            this.checkUserLogin();
                        }, 3000);
                    }
                }).catch(error => {
        })
        .catch((error) => {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        this.checkUserLogin();
                    }, 3000);
                })
        });
            },
        },
        mounted() {
            // 启动用户互斥登录模块
            this.checkUserLogin();
            // 监听来自子iframe的指令
            window.addEventListener('message', (msg) => {
    window.addEventListener("message", (msg) => {
                // 处理数据
                this.handleMessage(msg.data);
            });
            this.getAllRealAlarm()
    this.getAllRealAlarm();
            setInterval(() => {
                this.getAllRealAlarm()
            }, 4000)
      this.getAllRealAlarm();
    }, 4000);
        },
        destroyed() {

        }
    }
  destroyed() {},
};
</script>

<style scoped lang="less">

 src/pages/screen.vue

New file
@@ -0,0 +1,71 @@
<template>
  <flex-layout no-bg>
    <div class="iframe-container" v-loading="loading">
      <iframe v-if="src" scrolling="no" frameborder="0" :src="src"></iframe>
    </div>
  </flex-layout>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      hostname: "",
      src: "",
    };
  },
  methods: {
    getActivePage() {
      this.$axios({
        methods: "get",
        url: this.url + "application/active",
        params: {
          userId: 1001,
        },
      })
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            let id = rs.data.id;
            let name = rs.data.name;
            this.src =
              this.url +
              "index.html#/exhibition?id=" +
              id +
              "&name=" +
              name +
              "&head=1";
          }
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
  },
  computed: {
    url() {
      return "http://" + this.hostname + ":8090/screen/";
    },
  },
  mounted() {
    this.hostname = location.hostname;
    this.$nextTick(() => {
      this.getActivePage();
    });
  },
  beforeDestroy() {},
};
</script>

<style scoped>
.iframe-container {
  height: 100%;
}
.iframe-container > iframe {
  width: 100%;
  height: 100%;
}
</style>

 src/router/routes.js

@@ -28,6 +28,12 @@
        component: (resolve) => require(['../pages/index.vue'], resolve)
    },
    {
        path: '/screen',
        name: 'screen',
        meta: {},
        component: (resolve) => require(['../pages/screen.vue'], resolve)
    },
    {
        path: "/three-home",
        name: "threeHome",
        meta: {
@@ -314,13 +320,6 @@
        /* 交流配电柜遥测量 */
        meta: {},
        component: (resolve) => require(['../pages/alarmMager/GGDmeasure.vue'], resolve)
    },
    {
        name: 'DCmeasure',
        path: '/DCmeasure',
        /* 直流配电柜遥测量 */
        meta: {},
        component: (resolve) => require(['../pages/alarmMager/DCmeasure.vue'], resolve)
    },
    {
        name: 'powerAlarmTimeout',