Skip to content

C
confucius
Commit 76ee6bb5 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent f15bb057
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 43 deletions
src/api/common/socket.js 0 → 100644
View file @ 76ee6bb5
var websock = null;
var global_callback = null;
//webSocket连接端口
var serverPort = '10086';
/**
* 初始化weosocket
*/
function initWebSocket() {
//ws地址
var wsuri = "ws://192.168.20.8:" + serverPort;
websock = new WebSocket(wsuri);
websock.onmessage = function (e) {
websocketonmessage(e);
}
websock.onclose = function (e) {
websocketclose(e);
}
websock.onopen = function () {
websocketOpen();
}
//连接发生错误的回调方法
websock.onerror = function () {
console.log("WebSocket连接发生错误");
}
}
/**
* 实际调用发送消息的方法
* @param {*} postData 参数
* @param {*} callback 回调函数
*/
function sendSock(postData, callback) {
global_callback = callback;
if (websock.readyState === websock.OPEN) {
//若是ws开启状态
websocketsend(postData)
} else if (websock.readyState === websock.CONNECTING) {
// 若是 正在开启状态，则等待1s后重新调用
setTimeout(function () {
sendSock(postData, callback);
}, 1000);
} else {
// 若未开启 ，则等待1s后重新调用
setTimeout(function () {
sendSock(postData, callback);
}, 1000);
}
}
/**
* 数据接收
*/
function websocketonmessage(e) {
global_callback(e);
}
/**
* 数据发送
* @param {*} agentData
*/
function websocketsend(agentData) {
websock.send(JSON.stringify(agentData));
}
/**
* 关闭
*/
function websocketclose(e) {
console.log("connection closed (" + e.code + ")");
}
/**
* 连接
*/
function websocketOpen(e) {
console.log("连接成功");
}
initWebSocket();
export {
sendSock
}
src/layouts/MainLayout.vue
View file @ 76ee6bb5
......@@ -9,8 +9,8 @@
{{name}}
</q-toolbar-title>
<q-tabs v-model="tab" @input="changeNavs" inline-label
style="margin:0 auto;height:60px;flex:1;justify-content: left;font-weight:bold;"
shrink stretch v-if="userInfo" active-color="primary">
style="margin:0 auto;height:60px;flex:1;justify-content: left;font-weight:bold;" shrink stretch
v-if="userInfo" active-color="primary">
<q-tab v-for="(x, i) in userInfo.MenuList" class="q-mr-md" :key="i" @click="setNavs(i)" :name="`navs_${i}`"
:label="x.MenuName" :icon="x.MenuIcon" />
</q-tabs>
......@@ -20,14 +20,14 @@
</span>
<inline-svg class="svg-icon svg-icon-primary" src="icons/svg/Code/Compiling.svg"></inline-svg>
</div>
<q-btn flat color="text-black" style="height:50px" @click="showInfo">
<q-btn flat color="text-black" style="height:50px" @click="showInfo">
<span class="text-grey q-mr-xs">Hi</span>
<span class="text-dark q-mr-md">{{(userInfo&& userInfo.AccountName? userInfo.AccountName:"")}} </span>
<q-avatar size="35px" rounded style="background:#C9F7F5" text-color="white">
<img :src="userInfo.UserIcon" v-if="userInfo&&userInfo.UserIcon">
<span v-else>{{(userInfo&& userInfo.AccountName? userInfo.AccountName.substring(0,1):"") }}</span>
</q-avatar>
</q-btn>
</q-btn>
</div>
</q-toolbar>
</q-header>
......@@ -40,7 +40,7 @@
<div class="is-show-menu-2" @click="changeLeft">
<!-- <a v-if="!IsShowLeft" title="收起"><<</a> -->
<i v-if="!IsShowLeft" class="iconfont icon-shouqi" title="收起"></i>
<i v-else class="iconfont icon-zhankai is_Show_menu_3" title="展开"></i>
<i v-else class="iconfont icon-zhankai is_Show_menu_3" title="展开"></i>
<!-- <a v-else class="is_Show_menu_3" title="展开">>></a> -->
</div>
<q-list style="width:180px;overflow:hidden">
......@@ -52,7 +52,7 @@
</q-item-section>
<q-item-section>{{x.MenuName}}</q-item-section>
</q-item>
<q-expansion-item v-else :label="x.MenuName">
<q-expansion-item v-else :label="x.MenuName">
<q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl"
v-for="(y, yi) in x.SubList" :key="yi">
<q-item-section avatar style="padding-right:0;min-width:30px;">
......@@ -83,6 +83,9 @@
} from 'vuex'
import userInfoBox from '../components/global/user-right-box'
import notify from '../components/global/notify'
// import {
// sendSock
// } from '../api/common/socket'
export default {
name: 'MainLayout',
data() {
......@@ -104,14 +107,14 @@
width: '6px',
opacity: 0.5
},
persistent:false,
persistentNotify:false,
persistent: false,
persistentNotify: false,
isExpend: false,
IsShowLeft: true,
userCenterMenuList: [], //用户中心菜单
}
},
components:{
components: {
userInfoBox,
notify
},
......@@ -167,16 +170,27 @@
if (this.userInfo && this.userInfo.MenuList) {
this.secondNavs = this.userInfo.MenuList.length > 0 ? this.userInfo.MenuList[i].SubList : []
}
this.getMsg();
},
methods: {
getMsg() {
var SendData = {
AppId: "JiaHeJiaoYu",
ClientId: "2",
};
//sendSock(SendData,this.getDataFunc)
},
getDataFunc(e) {
console.log("getDataFunc", e.data)
},
changeLeft() {
this.IsShowLeft = !this.IsShowLeft;
},
showInfo(){
this.persistent=true
showInfo() {
this.persistent = true
},
showNotify(){
this.persistentNotify=true
showNotify() {
this.persistentNotify = true
},
changeNavs(val) {
let i = val.split('_')[1]
......@@ -184,7 +198,7 @@
},
closeSaveForm() {
this.persistent = false
this.persistentNotify=false
this.persistentNotify = false
},
setNavs(val) {
//防止页面数据丢失
......@@ -202,6 +216,7 @@
<style>
@import url('~assets/css/common.css');
.full-width {
height: 100%;
}
......@@ -210,20 +225,23 @@
position: absolute;
color: #a1a4a9;
cursor: pointer;
right:75px;
bottom:7px;
z-index:999;
right: 75px;
bottom: 7px;
z-index: 999;
}
.is-show-menu-2 i{
font-size:30px;
.is-show-menu-2 i {
font-size: 30px;
}
.is_Show_menu_3{
.is_Show_menu_3 {
position: absolute;
left: 75px;
bottom:7px;
bottom: 7px;
cursor: pointer;
z-index: 10;
}
.head-bg {
/*background-image: url('~assets/images/page/top.png');
background-position: right;
......@@ -231,10 +249,12 @@
background-size: auto 100%;*/
background-color: #FFF;
}
.head-bg .q-tab__label{
.head-bg .q-tab__label {
font-weight: bold !important;
font-size: 15px;
}
.second-menu-bg {
background-image: url('~assets/images/page/left.png');
background-position: bottom;
......@@ -314,25 +334,29 @@
width: 60px;
}
}
.changeShowqidonghua {
animation: shouqidonghua 0.5s linear;
width: 60px !important;
overflow-x: hidden;
}
.wave_wrapper{
.wave_wrapper {
margin: 0px 20px 0px 0;
width: 50px;
height: 50px;
position: relative;
display:flex;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
cursor: pointer;
}
.wave_wrapper:hover{
.wave_wrapper:hover {
background-color: #f3f6f9;
}
.wave_wrapper .dona {
position: absolute;
width: 50%;
......@@ -343,26 +367,29 @@
border-radius: 50%;
z-index: 2;
}
.wave_wrapper span.wave_scale {
animation: wave_scale 2s both infinite;
animation: wave_scale 2s both infinite;
}
@keyframes wave_scale {
0% {
transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 1;
}
50% {
transform: translate3d(-41px, -41px, 0px) scale(10, 10);
-webkit-transform: scale(2.5, 2.5);
opacity: 0;
}
100% {
transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 0;
}
0% {
transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 1;
}
50% {
transform: translate3d(-41px, -41px, 0px) scale(10, 10);
-webkit-transform: scale(2.5, 2.5);
opacity: 0;
}
100% {
transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-webkit-transform: scale(1, 1);
opacity: 0;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment