内容提交

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

@@ -1,122 +1,122 @@
<template>
    <page-nav :ac-tabs="acTabs" :menus="permitMenu" @select="select"></page-nav>
  <page-nav :ac-tabs="acTabs" :menus="permitMenu" @select="select"></page-nav>
</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";

export default {
    components: {PageNav},
    props: {
        acTabs: {
            type: String,
            default: ""
  components: { PageNav },
  props: {
    acTabs: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      menus: [],
    };
  },
  methods: {
    getPageMenu() {
      this.$apis.pageSetting
        .getPageMenu()
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          let data = [];
          if (rs.code == 1) {
            data = rs.data;
          }
          this.menus = getPageMenu();
          this.changeMenus(this.menus, data);
          console.log(this.menus);
        })
        .catch((error) => {
          this.menus = getPageMenu();
          console.log(error);
        });
    },
    changeMenus(menus, list) {
      menus.forEach((menu) => {
        let item = "";
        for (let i = 0; i < list.length; i++) {
          if (menu.id == list[i].id) {
            item = list[i];
            break;
          }
        }
    },
    data() {
        return {
            menus: [],
        };
    },
    methods: {
        getPageMenu() {
            this.$apis.pageSetting.getPageMenu().then(res=>{
                let rs = JSON.parse(res.data.result);
                let data = [];
                if(rs.code == 1) {
                    data = rs.data;
                }
                this.menus = getPageMenu();
                this.changeMenus(this.menus, data);
            }).catch(error=>{
                this.menus = getPageMenu();
                console.log(error);
            });
        },
        changeMenus(menus, list) {
            menus.forEach(menu=>{
                let item = "";
                for(let i=0; i<list.length; i++) {
                    if(menu.id == list[i].id) {
                        item = list[i];
                        break;
                    }
                }
                if(item && item.childrens) {
                    item.childrens.forEach(children=>{
                        for(let i=0; i<menu.childrens.length; i++) {
                            let item2 = menu.childrens[i];
                            if(item2.id == children.id) {
                                item2.enableduse = children.enableduse;
                                break;
                            }
                        }
                    });
                }
            });
        },
        select(data) {
            if (data.name !== this.acTabs) {
                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 (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);
                    return;
                }
                this.$emit("select", data);
            } else {
                console.log("菜单已激活");
        if (item && item.childrens) {
          item.childrens.forEach((children) => {
            for (let i = 0; i < menu.childrens.length; i++) {
              let item2 = menu.childrens[i];
              if (item2.id == children.id) {
                item2.enableduse = children.enableduse;
                break;
              }
            }
        },
          });
        }
      });
    },
    computed: {
        permitMenu() {
            let permits = this.$store.state.user.permits;
            let menus = this.menus.map(item => {
                let tmp = {
                    label: item.label,
                    name: item.name,
                    src: item.src,
                    icon: item.icon,
                    noChild: item.noChild ? true : false,
                    enableduse: item.enableduse,
                    closable: item.closable,
                };
                if (!tmp.noChild) {
                    tmp.childrens = item.childrens.filter(child => {
                        if (child.permitName) {
                            return isHasPermit(child.permitName, permits);
                        } else {
                            return true;
                        }
                    });
                }
                return tmp;
            });
            return menus.filter(item => {
                return item.noChild || item.childrens.length > 0;
            });
        },
    select(data) {
      if (data.name !== this.acTabs) {
        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 (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);
          return;
        }
        this.$emit("select", data);
      } else {
        console.log("菜单已激活");
      }
    },
    mounted() {
        this.getPageMenu();
    }
  },
  computed: {
    permitMenu() {
      let permits = this.$store.state.user.permits;
      let menus = this.menus.map((item) => {
        let tmp = {
          label: item.label,
          name: item.name,
          src: item.src,
          icon: item.icon,
          noChild: item.noChild ? true : false,
          enableduse: item.enableduse,
          closable: item.closable,
        };
        if (!tmp.noChild) {
          tmp.childrens = item.childrens.filter((child) => {
            if (child.permitName) {
              return isHasPermit(child.permitName, permits);
            } else {
              return true;
            }
          });
        }
        return tmp;
      });
      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

@@ -3,7 +3,7 @@
    const_font
} from '@/assets/js/const'
//格式化时间
Date.prototype.format = function(format) {
Date.prototype.format = function (format) {
    var o = {
        "M+": this.getMonth() + 1, //month
        "d+": this.getDate(), //day
@@ -24,17 +24,17 @@
};

// 对toFixed数字保留位数二次封装（ps：toFixed返回的是字符串）
Number.prototype.toHold = function(value) {
Number.prototype.toHold = function (value) {
    var hold = this.toFixed(value);
    hold = Number(hold);
    return hold;
};

/* eslint-disable */
;(function(doc, win) {
; (function (doc, win) {
    let docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
        recalc = function () {
            let clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            let fontSize = const_font.base * (clientWidth / 1920);

 src/pages/home.vue

@@ -1,247 +1,270 @@
<template>
    <flex-layout class="page-home">
        <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-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">
            <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>
        </hdw-dialog>
    </flex-layout>
  <flex-layout class="page-home">
    <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-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"
    >
      <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>
    </hdw-dialog>
  </flex-layout>
</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 marqueeLeft from "@/components/marqueeLeft ";
    import {
        checkUserLogin,
        getAllRealAlarm
    } from '@/assets/js/api'
import PageHeader from "../components/PageHeader.vue";
import PageMenu from "../components/PageMenu.vue";
import HdwDialog from "@/components/HdwDialog";
import PagesThreeHome from "@/pages/dataTest/threeHome";
import marqueeLeft from "@/components/marqueeLeft ";
import getPageMenu from "@/assets/js/tools/getPageMenu";
import { checkUserLogin, getAllRealAlarm } from "@/assets/js/api";

    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'
let timer;
export default {
  components: {
    PageHeader,
    PageMenu,
    PagesThreeHome,
    HdwDialog,
    marqueeLeft,
  },
  data() {
    let menus = getPageMenu();

    return {
      newItems: [],
      acTabs: "index",
      tabs: [menus[0]],
      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");
      }
    },
  },
  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;
            }
        },
        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;
                            }
                        }
                    });
                }

                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);
                }

                // 设置激活的导航
                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;
                    }
                });
                // 不在, 添加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 {
                        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);
            });
            this.getAllRealAlarm()
            setInterval(() => {
                this.getAllRealAlarm()
            }, 4000)
        },
        destroyed() {

      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);
      }

      // 设置激活的导航
      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;
        }
      });
      // 不在, 添加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 {
            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);
    });
    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>

 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',