@gonsin/gview 1.0.1

package/src/main.js

@@ -0,0 +1,86 @@
+/*
+ * @Author: your name
+ * @Date: 2022-04-22 09:02:09
+ * @LastEditTime: 2022-09-22 09:47:21
+ * @LastEditors: lzx lzx@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \gview\src\main.js
+ */
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import * as Api from './api/index'
+Vue.use(ElementUI);
+import jq from "jquery";
+Vue.prototype.$ = jq;
+Vue.prototype.$api = Api
+Vue.config.productionTip = false
+
+// 全局的权限列表过滤器，根据返回的列表权限
+Vue.filter('permissionFilter', function (permission) {
+  if (!permission) {
+      return true
+  }
+  let bool = false;
+  if (sessionStorage.getItem('user') != null) {
+      // 验证许可权限,传入的权限可能不止一个，所以需要以逗号分隔
+      let verificationPermission = permission.split(',')
+      // 登录成功后返回给该用户的权限列表,将传入的权限在此权限列表中挨个查抄，能找到则返回true,否则false  
+      let permissionList = JSON.parse(sessionStorage.getItem('user')).permissions
+      verificationPermission.forEach(item => {
+          if (permissionList.indexOf(item) != -1) {
+              bool = true // 说明当前权限在权限列表是存在的，即有该权限列表
+          } else {
+              bool = false
+          }
+      })
+  }
+  return bool
+})
+
+if (process.env.NODE_ENV !== 'development') {
+  let pre = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  // Vue.prototype.baseIP = window.location.origin
+  Vue.prototype.baseIP = ""
+  Vue.prototype.websocketIp = window.location.origin.replace(window.location.protocol, pre) + '/gview/websocket'
+  // Vue.prototype.assetsIP = window.location.origin
+  Vue.prototype.assetsIP = ""
+  require("@/assets/font/font.scss");
+  require("@/assets/scss/common.scss");
+  // require ("@/assets/sass/smart-lift/index.scss");
+} else {
+  //   开发环境
+  //    http   8080   ，  websocket      8989:/websocket2
+  // Vue.prototype.baseIP = 'http://192.168.2.192:8089'
+  // Vue.prototype.websocketIp = "http://192.168.2.192:8089/gview/websocket".replace('http', 'ws')
+  // Vue.prototype.baseIP = 'http://192.168.2.194:8888'
+  // Vue.prototype.websocketIp = "http://192.168.2.194:8888/gview/websocket".replace('http', 'ws')
+  Vue.prototype.baseIP = 'http://192.168.2.162:8088'
+  Vue.prototype.websocketIp = "http://192.168.2.162:8088/gview/websocket".replace('http', 'ws')
+  Vue.prototype.assetsIP = "http://update.gonsincloud.com"
+  require("@/assets/font/font_dev.scss");
+  require("@/assets/scss/common.scss");
+  // Vue.prototype.baseIP = 'http://dev.gonsincloud.com:80'
+  // Vue.prototype.websocketIp = "http://dev.gonsincloud.com:80/websocket2".replace('http','ws')
+}
+
+// 路由拦截
+router.beforeEach((to, from, next) => {
+  // next()
+  if (!sessionStorage.getItem('isTimeout') && to.name !== 'login') {
+    console.log(!sessionStorage.getItem('isTimeout'))
+    console.log(to.name)
+    console.log('拦截了')
+      next({ path: '/login' })
+  } else {
+      next()
+  }
+})
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

package/src/router.js

@@ -0,0 +1,52 @@
+/*
+ * @Author: your name
+ * @Date: 2022-04-22 09:02:09
+ * @LastEditTime: 2022-05-06 16:29:00
+ * @LastEditors: lzx lzx@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \gview\src\router.js
+ */
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+import Login from './views/Login.vue'
+Vue.use(Router)
+// 解决重复点击navmenu导航栏报错问题
+const originalPush = Router.prototype.push
+Router.prototype.push = function (location) {
+    return originalPush.call(this, location).catch(err => err)
+}
+const router = new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
+    {
+      path: '/view',
+      name: 'home',
+      component: Home
+    }
+  ]
+})
+// router.beforeEach((to, from, next) => {
+//   // console.log(from, to)
+//   console.log(123);
+//   console.log(to);
+//   // 开启进度条
+//   // NProgress.start()
+//   if (sessionStorage.getItem('user') && to.path == '/login') {
+//       router.push(from.path)
+//       next()
+//   } else {
+//       // console.log(to, from, Vue.prototype.baseIP)
+//       // LogUtils.setLog(`离开${from.name}页面`, Vue.prototype.baseIP, 1)
+//       // LogUtils.setLog(`进入${to.name}页面`, Vue.prototype.baseIP, 1)
+//       next()
+//   }
+// })
+
+export default router

package/src/store/index.js

@@ -0,0 +1,71 @@
+/*
+ * @Author: your name
+ * @Date: 2020-06-30 18:26:00
+ * @LastEditTime: 2022-06-30 11:02:15
+ * @LastEditors: lzx lzx@gonsin.cn
+ * @Description: In User Settings Edit
+ * @FilePath: \new-vue-web\src\store\index.js
+ */ 
+import Vue from "vue"
+import Vuex from "vuex"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state:{
+        isCollapse:false,
+        websocket:null,
+        unreadMessageTotal:0,   // 未读消息
+        currentMenu:{
+            path:'/',
+            label:'首页',
+            isSelected:true
+        },
+        isAdmin:false,   // 是否是管理员权限
+        floorList:[],    // 楼层列表
+        conferenceList:[],   //对应楼层会议室列表
+        allConferenceRooms:[],  // 全部的会议室列表
+        roomId:0,    // 当前楼层id，当刷新页面时，app中的获取会议列表方法会从vuex中获取roomId来获取对应楼层对应列表
+        departmentList:[],     // 部门列表 
+        conferenceCenterName:'',
+        globalSystem:{},         // 全局设置
+        equipmentList:[],   //会议设备
+        conferenceType:[],   //会议类型
+        updateData:null,//更新页面数据
+        isUpdate:false,//监听websocket是否提示要更新
+        isDropLogin:false,//是否退出登录
+    },
+    mutations:{
+        Collapse(state){
+            state.isCollapse = !state.isCollapse
+        },
+        UpdateFunction(state,model){
+            state.updateData = model
+        },
+        SetWebsocket(state,target){
+            state.websocket = target
+        },
+        SetisUpdate(state,bool){
+            state.isUpdate = bool?bool:false
+        },
+        SetisDropLogin(state,bool){
+            state.isDropLogin = bool?bool:false
+        }
+    },
+    actions:{
+        setUpdateFunction(context,model){
+            // console.log('fun:',model)
+            context.commit('UpdateFunction',model)
+        }
+        // getAsyncGlobalSystem(context,obj){
+        //     context.commit('getGlobalSystem',obj)
+        // },
+        // // 异步存储会议设备
+        // saveAsyncEquipment(context,array){
+        //     context.commit('saveEquipment',array)
+        // },
+        // saveAsyncConferenceTypeList(context,array){
+        //     context.commit('saveConferenceType',array)
+        // }
+    }
+})

package/src/utils/common.js

@@ -0,0 +1,96 @@
+/*
+ * @Author: lrm lrm@gonsin.cn
+ * @Date: 2022-11-04 14:59:40
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @LastEditTime: 2022-11-22 14:09:09
+ * @FilePath: \client\src\utils\common.js
+ * @Description: 
+ * 
+ * Copyright (c) 2022 by lrm lrm@gonsin.cn, All Rights Reserved. 
+ */
+/**
+ * @description: 生成唯一标识uuid
+ * @param {*} len
+ * @param {*} radix
+ * @return {*}
+ */
+export function uuid (len, radix) {
+    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
+        ""
+    );
+    var uuid = [],
+        i;
+    radix = radix || chars.length;
+    if (len) {
+        for (i = 0; i <= len; i++) {
+            uuid[i] = chars[0 | (Math.random() * radix)];
+        }
+    } else {
+        var r;
+        uuid[8] = uuid[23] = uuid[18] = uuid[23] = "-";
+        uuid[14] = "4";
+        for (i = 0; i < 36; i++) {
+            if (!uuid[i]) {
+                r = 0 | (Math.random() * 16);
+                uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+            }
+        }
+    }
+    return uuid.join("");
+}
+
+export function evalThis(exp) {
+    return eval(exp)
+}
+
+export function initSelectorTreeData(config) {
+    const { list, keyName, titleName, prentKey, parentKeyName } = config
+
+    const selector = (parentKey, arr) => {
+        const res = []
+
+        arr.forEach(item => {
+            if (item[parentKeyName] == parentKey) {
+                const children = selector(item[keyName], list)
+                const parentObj = {
+                    label: item[titleName],
+                    value: item[keyName]
+                }
+
+                if (children.length) {
+                    parentObj.children = children
+                }
+
+                res.push(parentObj)
+            }
+        })
+
+        return res
+    }
+
+    return selector(prentKey, list)
+}
+
+/**
+ * @description: 处理showIf数据
+ * @param {*} value
+ * @return {*}
+ */
+export function vFun(value) {
+    if(value === undefined){
+        return "";
+    }
+    if(value === null){
+        return "";
+    }
+    if(value === ""){
+        return "";
+    }
+    if(value === 0){
+        return 0;
+    }
+    if(value === "0"){
+        return "0";
+    }
+    return value;
+}

package/src/utils/permission.js

@@ -0,0 +1,36 @@
+/*
+ * @Author: lzx
+ * @Date: 2022-11-07 15:36:45
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @LastEditTime: 2022-11-07 16:03:14
+ * @FilePath: \client\src\utils\permission.js
+ * @Description: 
+ * 
+ * Copyright (c) 2022 by lrm lrm@gonsin.cn, All Rights Reserved. 
+ */
+
+/**
+ * @description: 权限列表过滤器方法（兼容高版本Vue不再使用过滤器的问题，将原来的过滤器提取为一个方法）
+ * @param {*} permission
+ * @return {*}
+ */
+export function permissionFilter(permission) {
+  if (!permission) {
+      return true
+  }
+  let bool = false;
+  if (sessionStorage.getItem('user') != null) {
+      // 验证许可权限,传入的权限可能不止一个，所以需要以逗号分隔
+      let verificationPermission = permission.split(',')
+      // 登录成功后返回给该用户的权限列表,将传入的权限在此权限列表中挨个查抄，能找到则返回true,否则false  
+      let permissionList = JSON.parse(sessionStorage.getItem('user')).permissions
+      verificationPermission.forEach(item => {
+          if (permissionList.indexOf(item) != -1) {
+              bool = true // 说明当前权限在权限列表是存在的，即有该权限列表
+          } else {
+              bool = false
+          }
+      })
+  }
+  return bool
+}

package/src/views/GView.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: lrm lrm@gonsin.cn
+ * @Date: 2022-11-04 15:43:17
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @LastEditTime: 2022-11-22 16:55:53
+ * @FilePath: \client\src\views\GView.vue
+ * @Description: gview 组件
+ * 
+ * Copyright (c) 2022 by lrm lrm@gonsin.cn, All Rights Reserved. 
+-->
+<template>
+  <div id="home" class="wrapper" ref="wrapper">
+        <pageHeader></pageHeader>
+        <div class="wrapper_body">
+            <div :class="['wrapper_body_left', Collapse ? '' : 'w_200']">
+                <pageMenu :menuList="menuList"></pageMenu>
+            </div>
+            <div class="wrapper_body_right" :style="'width:' + returnWidth()">
+                <div class="title">{{ data.title }}</div>
+                <div v-if="isShowTemplate" class="wrapper_body_right_flex">
+                    <templatess
+                        v-for="(item, index) in data.boards"
+                        :key="index"
+                        :board="item"
+                        :viewName="data.viewName"
+                        @changeView="changeOtherView"
+                        @refreshPage="refresh"
+                    ></templatess>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import templatess from "../components/Templatess.vue";
+import pageHeader from "../components/MyPageHeader.vue";
+import pageMenu from "../components/MyMenus.vue";
+
+import { mapState } from 'vuex'
+import { createSocket, onsendunregisterWs } from "../websocket/test";
+import * as api from '../api'
+export default {
+    name: "GView",
+    components: {
+        templatess,
+        pageHeader,
+        pageMenu,
+    },
+    computed: {
+        ...mapState({
+            Collapse: (state) => state.isCollapse,
+        })
+    },
+    data() {
+        return {
+            isShowTemplate: false,
+            data: {},
+            menuList: [],
+            wrapperRightWidth: 1920
+        }; 
+    },
+    mounted() {
+        let model = {};
+        let that = this;
+
+        that.menuList = JSON.parse(sessionStorage.getItem("menu"));
+        if(that.$route.query.props) {
+            model = JSON.parse(that.$route.query.props)
+        }
+
+        this.getView(that.$route.query.viewName,model);
+        createSocket();
+    },
+    methods: {
+    setNoticeData(data) {
+        this.$store.commit("SetisUpdate", true);
+    },
+    returnWidth() {
+        if (this.Collapse) {
+            return this.wrapperRightWidth - 64 + "px";
+        } else {
+            return this.wrapperRightWidth - 200 + "px";
+        }
+    },
+    /**
+     * @description: 获取视图内容
+     * @param {*} viewName
+     * @param {*} props
+     * @return {*}
+     */
+    getView(viewName, props) {
+        this.isShowTemplate = false;
+        props.viewName = viewName;
+        api
+            .getOneView(props)
+            .then((res) => {
+                if (res.data.state == 200) {
+                    if (res.data.data != null) {
+                        this.data = res.data.data;
+                        this.isShowTemplate = true;
+                    }
+                } else {
+                    console.log("获取不到视图内容");
+                }
+            });
+    },
+
+    //重新加载另外的view
+    changeOtherView(name){
+        this.getView(name);
+    },
+    refresh() {
+        // this.data = {};
+        // // let view = this.$route.query.view;
+        let model = {};
+        if(this.$route.query.props){
+            model = JSON.parse(this.$route.query.props)
+        }
+        this.getView(this.$route.query.viewName, model);
+    },
+    },
+    watch: {
+        $route() {
+            // let view = this.$route.query.viewName;
+            // console.log('watch');
+            // onsendunregisterWs(this.$store.state.updateData.dataId)
+            let model = {};
+            if(this.$route.query.props){
+                model = JSON.parse(this.$route.query.props)
+            }
+            this.getView(this.$route.query.viewName,model);
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+#home {
+    // width:100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    // background:red;
+    display: flex;
+    flex-direction: column;
+    // padding:0 15px 0px;
+    // background:red;
+    .title {
+        text-align: left;
+        font-size: 20px;
+        font-weight: 700;
+        color: #333333;
+        // background:#ffffff;
+        padding: 15px 15px 0;
+    }
+    .wrapper_body {
+        flex: 1;
+        // background-color: burlywood;
+        display: flex;
+        overflow: hidden;
+        .wrapper_body_left {
+            height: 100%;
+            overflow-y: scroll;
+            background-color: #ffffff;
+            &::-webkit-scrollbar {
+                width: 0;
+            }
+        }
+        .w_200 {
+            width: 200px;
+        }
+        .wrapper_body_right {
+            background-color: #f5f7f9;
+            flex: 1;
+            padding: 0 15px 0px;
+            display: flex;
+            flex-direction: column;
+            .wrapper_body_right_flex {
+                flex: 1;
+            }
+        }
+    }
+}
+</style>

package/src/views/Home.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-22 09:02:09
+ * @LastEditTime: 2022-11-07 17:31:15
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\views\Home.vue
+-->
+<template>
+    <div id="home">
+        <GView></GView>
+    </div>
+</template>
+<script>
+import GView from "./GView.vue";
+export default {
+    name: "home",
+    components: {
+        GView,
+    }
+}
+</script>
+<style lang="scss" scoped>
+
+
+</style>