Skip to content

W
web-sample
Commit e098f3dd by 谢佳平
Options

1

parent 12c28105
Showing with 24 additions and 1231 deletions
.env.dev.demo
...@@ -3,15 +3,8 @@ ENTRY=./src/main.ts ...@@ -3,15 +3,8 @@ ENTRY=./src/main.ts
VUE_APP_ROUTE_BASE=/ VUE_APP_ROUTE_BASE=/
VUE_APP_APP_NAME=roms-cnc VUE_APP_APP_NAME=roms-cnc
VUE_APP_APP_THEME=theme_light VUE_APP_APP_THEME=theme_light
VUE_APP_BASE_URL=https://www.machplat.com/roms-server-cnc
VUE_APP_ROUTE_MODE=history VUE_APP_ROUTE_MODE=history
# 测试用url # 测试用url
VUE_APP_TEST_BASE_URL=https://www.machplat.com/roms-server-cnc VUE_APP_TEST_BASE_URL=https://www.machplat.com/roms-server-cnc
#VUE_APP_TEST_BASE_URL=http://192.168.0.105:10100/roms-server-cnc
VUE_APP_HTML_TITLE=LKT-Project VUE_APP_HTML_TITLE=LKT-Project
VUE_APP_LOGIN_TITLE1=设备运维管理云平台 VUE_APP_LOGIN_TITLE1=opcua
VUE_APP_LOGIN_TITLE2=LKT-Project
VUE_APP_TITLE_LG=https://roms-cnc.oss-cn-hangzhou.aliyuncs.com/logos/logow1.png
VUE_APP_LOGIN_LG=https://roms-cnc.oss-cn-hangzhou.aliyuncs.com/logos/lkt_logo2.png
VUE_APP_LOGIN_SCHEMA=cnc
.env.pro.demo
...@@ -8,9 +8,5 @@ VUE_APP_BASE_URL=https://www.machplat.com/roms-server-cnc ...@@ -8,9 +8,5 @@ VUE_APP_BASE_URL=https://www.machplat.com/roms-server-cnc
VUE_APP_ROUTE_MODE=hash VUE_APP_ROUTE_MODE=hash
VUE_APP_DEPLOY_MODE=normal VUE_APP_DEPLOY_MODE=normal
VUE_APP_HTML_TITLE=LKT-ROMS VUE_APP_HTML_TITLE=opcua
VUE_APP_LOGIN_TITLE1=设备运维管理云平台 VUE_APP_LOGIN_TITLE1=
VUE_APP_LOGIN_TITLE2=LKT-ROMS
VUE_APP_TITLE_LG=https://roms-cnc.oss-cn-hangzhou.aliyuncs.com/logos/logow1.png
VUE_APP_LOGIN_LG=https://roms-cnc.oss-cn-hangzhou.aliyuncs.com/logos/lkt_logo2.png
VUE_APP_LOGIN_SCHEMA=cnc
src/component/page404.vue
...@@ -10,13 +10,11 @@ ...@@ -10,13 +10,11 @@
<script> <script>
export default { export default {
name: 'page404', setup() {
methods: { return{
logout() {
this.$store.commit('removeToken'); }
this.$router.push({name: 'login'}); }
},
},
}; };
</script> </script>
......
src/plugin/web-toolkit.ts
...@@ -23,41 +23,12 @@ registerComponent(ComponentName.Tip); ...@@ -23,41 +23,12 @@ registerComponent(ComponentName.Tip);
registerComponent(ComponentName.ErrChannel); registerComponent(ComponentName.ErrChannel);
registerComponent(ComponentName.Empty); registerComponent(ComponentName.Empty);
AxiosInterceptConfig.requestPartFunc = function(config) { RouteInterceptConfig.beforePartFunc = async function (to: Route, from: Route, next: any) {
if (!(config.data instanceof FormData)) { if (to.name !== from.name) {
const data = Qs.parse(config.data); NProgress.start();
data.token = storeUserInfo.token;
data._schema = process.env.VUE_APP_LOGIN_SCHEMA;
config.data = Qs.stringify(data);
} else {
config.data.append('token', storeUserInfo.token as any);
config.data.append('_schema', process.env.VUE_APP_LOGIN_SCHEMA);
} }
}; to.meta.from = from.path
// RouteInterceptConfig.beforePartFunc = function (to: Route, from: Route, next: any){ // 初始化err-msg-channel
// if (to.name !== from.name && process.env.VUE_APP_REQUEST_MODE !== 'display') { submitErrChanel('');
// NProgress.start(); next();
// } }
// if (!storeUserInfo.token) { \ No newline at end of file
// storeUserInfo.token="local"
// storeUserInfo.user = {
// id: 0,
// username: '管理员',
// name: '管理员',
// role:{
// department:{
// id: DepartmentAdmin
// }
// }
// } as any
// // initStoreUserInfo();
// }
// // 初始化err-msg-channel
// submitErrChanel('');
// // 指定默认第一个路由
// // if (to.name === storePageMenuOption.indexName) {
// // const menu = getMainRoute();
// // if (menu) { next(menu); }
// // }
// next();
// }
src/router/routes.ts
import { PRIVILEGE } from '@/types/privilege';
const demo1 = {
path: '/demo1',
name: 'index-page',
alias: "",
component: () => import('../views/demo1/demo1.vue'),
meta: {
// privileges: [PRIVILEGE.USER_MNG, PRIVILEGE.USER_LIST],
CName: 'Demo1-subtitle',
parentCName: 'Demo1',
},
};
const demo2 = {
path: '/demo2',
name: 'demo2',
component: () => import('../views/demo2/demo2.vue'),
meta: {
CName: 'Demo2-subtitle',
parentCName: 'Demo2',
},
};
const demo3 = {
path: '/demo3',
name: 'demo3',
component: () => import('../views/demo3/demo3.vue'),
meta: {
CName: 'Demo3-subtitle',
parentCName: 'Demo3',
},
};
const mobiledemo1 = {
path: '/mobile/mobiledemo1',
name: 'mobiledemo1',
component: () => import('../views-mobile/demo1.vue'),
meta: {
title: 'demo1',
authDisabled:true,
},
};
//手机端
const mobiledemo2 = {
path: '/mobile/mobiledemo2',
name: 'mobiledemo2',
component: () => import('../views-mobile/demo2.vue'),
meta: {
title: 'demo2',
authDisabled:true,
},
};
const mobiledemo3 = {
path: '/mobile/mobiledemo3',
name: 'mobiledemo3',
component: () => import('../views-mobile/demo3.vue'),
meta: {
title: 'demo3',
authDisabled:true,
},
};
const mobiledemo4 = {
path: '/mobile/mobiledemo4',
name: 'mobiledemo4',
component: () => import('../views-mobile/demo4.vue'),
meta: {
title: 'demo4',
authDisabled:true,
},
};
// 按顺序 用于菜单的排列
const indexChildren = [
demo1,
demo2,
demo3
];
export const routes = [ export const routes = [
{ {
path: '/login',
name: 'login',
component: () => import('../views/login.vue'),
meta: { authDisabled: true },
},
{
path: '/mobile',
name: 'mobile-index',
// redirect: {name:"mobile-login"},
component: () => import('../views-mobile/index.vue'),
children: [
mobiledemo1,mobiledemo2,mobiledemo3,mobiledemo4
],
meta: { authDisabled: false },
},
{
path: '/', path: '/',
name: 'index', name: 'index',
redirect: 'index-page', component: () => import('../views/server/index.vue'),
component: () => import('../views/main/index.vue'), meta: {
children: [ CName: 'web',
...indexChildren,
{
path: '*',
name: '404_child',
component: () => import('../component/page404.vue'),
meta: { authDisabled: true },
}, },
],
}, },
{ {
path: '*', path: '*',
...@@ -115,5 +13,4 @@ export const routes = [ ...@@ -115,5 +13,4 @@ export const routes = [
component: () => import('../component/page404.vue'), component: () => import('../component/page404.vue'),
meta: { authDisabled: true }, meta: { authDisabled: true },
}, },
]; ];
src/views-mobile/demo1.vue deleted 100644 → 0
<template>
<div v-loading="loading">
demo1
</div>
</template>
<script lang="ts">
import { ref, onMounted, set, watch} from '@vue/composition-api';
import {router} from '@/main';
import {Toast} from 'vant';
export default {
setup() {
const loading = ref<boolean>(false);
onMounted(function() {
});
return{
loading,
};
},
};
</script>
<style lang="scss" scoped>
</style>
src/views-mobile/demo2.vue deleted 100644 → 0
<template>
<div v-loading="loading">
demo2
</div>
</template>
<script lang="ts">
import { ref, onMounted, set, watch} from '@vue/composition-api';
import {router} from '@/main';
import {Toast} from 'vant';
export default {
setup() {
const loading = ref<boolean>(false);
onMounted(function() {
});
return{
loading,
};
},
};
</script>
<style lang="scss" scoped>
</style>
src/views-mobile/demo3.vue deleted 100644 → 0
<template>
<div v-loading="loading">
demo3
</div>
</template>
<script lang="ts">
import { ref, onMounted, set, watch} from '@vue/composition-api';
import {router} from '@/main';
import {Toast} from 'vant';
export default {
setup() {
const loading = ref<boolean>(false);
onMounted(function() {
});
return{
loading,
};
},
};
</script>
<style lang="scss" scoped>
</style>
src/views-mobile/demo4.vue deleted 100644 → 0
<template>
<div v-loading="loading">
demo4
</div>
</template>
<script lang="ts">
import { ref, onMounted, set, watch} from '@vue/composition-api';
import {router} from '@/main';
import {Toast} from 'vant';
export default {
setup() {
const loading = ref<boolean>(false);
onMounted(function() {
});
return{
loading,
};
},
};
</script>
<style lang="scss" scoped>
</style>
src/views-mobile/index.vue deleted 100644 → 0
<template>
<div v-loading="loading" style="height: 100vh;">
<div class="header flex center" >
XXXXXX系统
</div>
<router-view class="body" />
<div class="bottom flex between" >
<div :class="(router.currentRoute.name==='mobiledemo1'?'active':'')+' flex column center'" @click="routeTo('mobiledemo1')">
<i class="iconfont icon-shijian"></i>
<div>demo1</div>
</div>
<div :class="(router.currentRoute.name==='mobiledemo2'?'active':'')+' flex column center'" @click="routeTo('mobiledemo2')">
<i class="iconfont icon-shijian"></i>
<div>demo2</div>
</div>
<div :class="(router.currentRoute.name==='mobiledemo3'?'active':'')+' flex column center'" @click="routeTo('mobiledemo3')">
<i class="iconfont icon-shijian"></i>
<div>demo3</div>
</div>
<div :class="(router.currentRoute.name==='mobiledemo4'?'active':'')+' flex column center'" @click="routeTo('mobiledemo4')">
<i class="iconfont icon-shijian"></i>
<div>demo4</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, onMounted, set, watch} from '@vue/composition-api';
import {router} from '@/main';
import {storeUserInfo} from 'web-toolkit/src/case-main';
import {Toast} from 'vant';
export default {
setup() {
const loading = ref<boolean>(false);
function routeTo(name: string) {
router.push({name});
}
function back() {
router.back();
}
onMounted(function() {
console.log(router.currentRoute)
});
return{
loading,
routeTo, storeUserInfo,back,router
};
},
};
</script>
<style lang="scss" scoped>
@import "src/scss/common";
.header{
background-color: rgba(0, 21, 41, 1);;
height: 45px;
box-shadow: 0 0 3px $grey-6;
font-size: 1.3rem;
color: white;
position: relative;
}
.body{
height: calc(100vh - 45px - 50px);
overflow: scroll;
}
.bottom{
height:50px;
background-color: #fff;
.flex{
width: 18vw;
font-size: 17px;
}
i{
font-size: 1.8rem;
}
}
.active{
color: dodgerblue;
border: solid 1px dodgerblue;
background-color: rgba(30,144,255,0.2);
}
</style>
src/views/demo2/demo2.vue deleted 100644 → 0
<template>
<div v-loading="loading">
demo2
</div>
</template>
<script lang="ts">
import { ref, onMounted } from '@vue/composition-api';
export default {
setup() {
const loading = ref<boolean>(false);
return{
loading,
};
},
};
</script>
<style lang="scss">
</style>
src/views/demo3/demo3.vue deleted 100644 → 0
<template>
<div v-loading="loading">
demo3
</div>
</template>
<script lang="ts">
import { ref, onMounted } from '@vue/composition-api';
export default {
setup() {
const loading = ref<boolean>(false);
return{
loading,
};
},
};
</script>
<style lang="scss">
</style>
src/views/login.vue deleted 100644 → 0
<template>
<div class="flex column center login" v-loading="loading">
<div class="login-body vivify popIn flex center column">
<div class="login-head flex column center align-center">
<div class="title1">{{loginTitle1}}</div>
<div v-if="loginTitle2" class="title2">{{loginTitle2}}</div>
</div>
<div class="inner flex center align-center around">
<div class="left">
<img src="../assets/u90.png">
</div>
<div class="flex column right">
<div class="flex center">
<img :src="loginLogo"/>
</div>
<el-form
label-position="left" label-width="70px"
class="flex column around" ref="formRef" :model="form" :rules="rule">
<el-form-item prop="username" label="账户：">
<el-input v-model="form.username" autofocus autocomplete="off" placeholder="用户名" @keyup.enter.native="login($refs.formRef)" />
</el-form-item>
<el-form-item prop="pwd" label="密码：">
<el-input type="password" autocomplete="off" v-model="form.pwd" placeholder="密 码" @keyup.enter.native="login($refs.formRef)" />
</el-form-item>
<kit-err-channel id="login" style="margin-bottom: 5px" />
<el-form-item>
<el-button type="primary" @click="login($refs.formRef)">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
<div class="login-support">技术支持：杭州领克信息科技有限公司</div>
</div>
</template>
<script lang="ts">
import { ref, Ref, onMounted } from '@vue/composition-api';
import { ElForm } from 'element-ui/types/form';
import { useLoading } from 'web-toolkit/src/service';
import { postService, storeUserInfo, updateStoreUserInfo, submitErrChanel, pushMsgErr } from 'web-toolkit/src/case-main';
import {loginTitle1, loginTitle2, loginLogo, schema} from '@/config';
import {router} from '@/main';
import { Route } from 'vue-router';
import {assert} from 'web-toolkit/src/utils/index';
import {Login} from '@/dao/userDao';
export default {
setup() {
const loading = ref(false);
const form = ref({ username: '', pwd: '' });
const formRef: Ref<ElForm|null> = ref(null);
const rule = {
username: {
required: true,
message: '请填写用户名',
trigger: 'none',
},
pwd: [{
required: true,
message: '请填写密码',
trigger: 'none',
}, {
type: 'string',
min: 6,
message: '密码长度不能小于6位',
trigger: 'none',
}],
};
async function login() {
const valid = await (formRef.value as ElForm).validate();
assert(valid);
submitErrChanel('login');
const data = await Login({
...form.value,
schema,
});
updateStoreUserInfo(data as any);
// 设置登录后回到登录前页面
// @ts-ignore
const redirect: Route = {
name: 'index',
query: {},
};
if (
storeUserInfo.redirect &&
storeUserInfo.redirect.name &&
storeUserInfo.redirect.name !== 'notFound' &&
storeUserInfo.redirect.name !== 'login'
) {
redirect.name = storeUserInfo.redirect.name;
redirect.query = storeUserInfo.redirect.query;
}
// @ts-ignore
storeUserInfo.redirect = redirect;
router.push(redirect as any);
}
return {
formRef, loginTitle1, loginTitle2, loginLogo,
loading, form, rule, login: useLoading(loading, login),
};
},
};
</script>
<style lang="scss" scoped>
.login{
background: url("../assets/bg.jpg") no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
min-height: 600px;
}
.login-body {
width: 90vw;
height: 90vh;
min-height: 400px;
.login-head{
color: white;
.title1{
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.title2{
font-size: 1.8rem;
margin-bottom: 2rem;
}
}
.inner{
width: 100%;
max-height: 600px;
max-width: 1000px;
background: white;
padding: 2rem 2rem;
box-shadow: 3px 3px 10px rgba($color: #000, $alpha: .5);
border-radius: 10px;
font-size: 1rem;
.left{
img{
height: 40vh;
}
}
.right{
width: 300px;
img{
height: 3.8rem;
width: auto;
margin-bottom: 3rem;
}
.el-input{
width: 230px;
}
.el-button{
width: 230px;
font-weight: 600;
margin: 0 auto;
}
}
}
}
.login-support{
/*margin-top: 3vh;*/
color: #fff;
width: 100%;
font-weight: 700;
font-size: 1.1rem;
text-align: center;
}
</style>
src/views/main/Menu.vue deleted 100644 → 0
<template>
<el-menu
activeTextColor="#00d0FF"
textColor="white"
:unique-opened="true"
:backgroundColor="bgColor"
mode="vertical"
:default-active="active"
@select="routeTo">
<template v-for="(item, index) of storePageMenu">
<el-menu-item
v-if="item.name && contains(item.privileges)"
:key="index"
:index="item.name">
<i :class="'iconfont ' + item.icon"/>
<span class="title">{{ item.title }}</span>
</el-menu-item>
<el-submenu
v-if="!item.name && item.children && item.children.length > 0 && contains(item.privileges)"
popper-class="my-el-menu-popper"
:key="index"
:index="item.title">
<template slot="title">
<i :class="'iconfont '+item.icon"/>
<span class="title">{{ item.title }}</span>
</template>
<el-menu-item
class="item"
v-for="(child, i) of menuItemFilter(item.children)"
:key="i"
:index="child.name"
v-text="child.cTitle"/>
</el-submenu>
</template>
</el-menu>
</template>
<script lang="ts">
import { ref, onMounted, computed, watch } from '@vue/composition-api';
import {checkPrivilege, storePageMenu, storeUserInfo, storeCurrentRoute} from 'web-toolkit/src/case-main';
import {router} from '@/main';
export default {
props: {
bgColor: {
type: String,
default: 'center',
},
},
setup() {
const active = computed(() => {
if (storeCurrentRoute.meta) {
return (storeCurrentRoute.meta as any).parentName || storeCurrentRoute.name;
} else if (storeCurrentRoute.name) {
return storeCurrentRoute.name;
}
return undefined;
});
function menuItemFilter(itemChildren: any[]) {
return itemChildren.filter((child) => contains(child.privileges));
}
function routeTo(name: string) {
router.push({ name });
}
function contains(privileges: any[]) {
if (!storeUserInfo.user) { return false; }
const all = storeUserInfo.user.role.privileges;
return checkPrivilege(all, privileges);
}
return{
storePageMenu, storeCurrentRoute,
menuItemFilter,
routeTo,
contains,
active,
};
},
};
</script>
<style scoped lang="scss">
.el-menu {
border-right: 0;
height: 100%;
i{
margin-right: 10px;
}
}
</style>
src/views/main/Navbar.vue deleted 100644 → 0
<template>
<div class="header theme flex between">
<div class="brand flex align-center center" style="color: white">
<!-- <img :src="titleLogo" style="height: 20px; margin-right: 5px" /> -->
<span>{{loginTitle2}}</span>
<!-- <span>设备运维管理云平台</span> -->
</div>
<div class="header-menu-wrapper flex center">
</div>
<!-- <lkt-header-side class="header-side"/> -->
</div>
</template>
<script lang="ts">
import LktHeaderSide from './header-side.vue';
import LktMenu from './Menu.vue';
import {loginTitle1, loginTitle2, loginLogo, titleLogo} from '@/config';
export default {
components: {
LktHeaderSide, LktMenu,
},
setup() {
return{
loginTitle2, loginTitle1, loginLogo, titleLogo,
};
},
};
</script>
<style scoped lang="scss">
.brand{
height: 60px;
width: 200px;
color: $header-title-font;
font-weight: 600;
cursor: default;
// background-color: $header-title;
background-color: #23479C;
&.vertical {
border-color: transparent;
}
span{
font-size: 1.2rem;
}
}
.header {
background-color: $background-main;
min-width: 800px;
height: 60px;
&.horizontal > * {
// background-color: $header-title;
background-color: #23479C;
border: none;
}
.header-menu-wrapper{
border-bottom: 1px solid $grey-4;
width: calc(100vw - 200px - 30vw);
background-color: white;
}
.header-side{
width: 30vw;
border-bottom: 1px solid $grey-4;
background-color: white;
}
}
</style>
src/views/main/header-side.vue deleted 100644 → 0
<template>
<div class="theme flex center end align-center">
<el-popover
class="msg-panel"
placement="bottom"
width="600"
trigger="click">
<template>
<div style="min-height: 10vh;max-height:70vh;overflow-y: auto;">
<div class="msg" v-if="listQdt.length>0">
<el-divider >
<span class="title">产品质保</span>
<el-button style="display: inline-block;margin-left: 5px" type="primary" plain size="mini" @click="router.push({name:'analysisGuarantee'})">前往</el-button>
</el-divider>
<div class="flex between" style="color:grey">
<div style="margin-left: 30%">设备编号</div>
<div style="margin-right: 18px">质保日期</div>
</div>
<div class="flex between item hover" v-for="msg in listQdt" :key="msg.id">
<div>{{msg.id}}</div>
<div style="color: orangered">{{msg.extend.qualityDt | date}}</div>
</div>
</div>
<div class="msg" v-if="listOrder.length>0">
<el-divider >
<span class="title">工单延误</span>
<el-button style="display: inline-block;margin-left: 5px" type="primary" plain size="mini" @click="router.push({name:'orderDelay'})">前往</el-button>
</el-divider>
<div class="flex" style="color:grey">
<div style="width: 25%;text-align: center">工单编号</div>
<div style="width: 30%;text-align: center">设备编号</div>
<div style="width: 20%;text-align: center">运维人员</div>
<div style="width: 22%;text-align: center">截止时间</div>
</div>
<div class="flex between item hover" v-for="msg in listOrder" :key="msg.id">
<div style="width: 25%">{{msg.no}}</div>
<div style="width: 30%">{{msg.device.id}}</div>
<div style="width: 20%">{{msg.staff.name}}</div>
<div style="width: 22%;color: orangered">{{msg.dt.slice(0,-3)}}</div>
</div>
</div>
<div v-if="msgLength===0" class="no-msg">暂无提醒信息</div>
</div>
</template>
<el-badge class="header-alarm" slot="reference" :value="msgLength"><i class="icon-chatlist iconfont"/></el-badge>
</el-popover>
<el-popover
class="msg-panel"
placement="bottom"
width="500"
trigger="click">
<template>
<div style="min-height: 10vh;overflow-y: auto;">
<el-row v-for="(key) in Object.keys(alarmsMsg)" :key="key" type="flex" justify="start" align="top" class="alarm-device">
<span class="alarm-device-name">{{alarmsMsg[key].name}}</span>
<div class="flex column alarm-message">
<div class="hover flex between" v-for="(b, index) in alarmsMsg[key].alarm" :key="index">
<div>
<el-tag type="danger" size="small" v-if="b.type==='serious'">严重</el-tag>
<el-tag type="warning" size="small" v-else>警告</el-tag>
</div>
<div class="message" :title="b.msg === undefined ? '无描述' : b.msg">
{{ b.msg === undefined ? '无描述' : b.msg }}
</div>
<span class="no-message" @click="noMessage(b.id)">不再提醒</span>
</div>
</div>
</el-row>
<div v-if="alarmsLength === 0" class="no-msg">暂无设备报警</div>
</div>
</template>
<el-badge class="header-alarm" slot="reference" :value="alarmsLength"><i class="icon-warning iconfont"/></el-badge>
</el-popover>
<el-dropdown @command="handleCmdOfUser" class="user-panel" trigger="click">
<img class="user-avatar" src="../../assets/head.png"/>
<el-dropdown-menu slot="dropdown" class="flex column center around">
<img class="user-avatar" src="../../assets/head.png" />
<span class="user-name">{{ storeUserInfo.user ? storeUserInfo.user.name : '' }}</span>
<div class="user-actions flex center around">
<el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
<el-dropdown-item command="updateInfo">修改信息</el-dropdown-item>
</div>
<el-dropdown-item command="logout"><el-button type='danger' size="mini">注销用户</el-button></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<kit-dialog-simple
:modal="modalUpdatePwd"
:confirm="updatePwd"
width="30%">
<div slot="title">修改登录密码</div>
<el-form
style="margin: 0 auto;width: 90%"
:model="modalUpdatePwd.params"
ref="form"
label-position="left" label-width="100px">
<el-form-item
label="旧密码" prop="oldPwd"
:rules="[{required: true, message: '密码不能为空', trigger: 'blur'},{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}]">
<el-input type="password" v-model="modalUpdatePwd.params.oldPwd"/>
</el-form-item>
<el-form-item
label="新密码" prop="newPwd"
:rules="[{required: true, message: '密码不能为空',trigger: 'blur'},{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}]">
<el-input type="password" v-model="modalUpdatePwd.params.newPwd"/>
</el-form-item>
<el-form-item
label="确认密码" prop="pwdCheck"
:rules="[{required: true, validator: validatePassCheck, trigger: 'blur'},{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'none'}]">
<el-input type="password" v-model="modalUpdatePwd.params.pwdCheck"/>
</el-form-item>
</el-form>
</kit-dialog-simple>
<kit-dialog-simple
:modal="modalUpdateInfo"
:confirm="updateInfo"
width="30%">
<div slot="title">修改账户信息</div>
<el-form
style="margin: 0 auto;width: 90%"
:model="modalUpdateInfo.params"
ref="formInfo"
label-position="left" label-width="100px">
<el-form-item label="用户名：">
{{storeUserInfo.user.username}}
</el-form-item>
<el-form-item label="姓 名：" prop="name"
:rules="[{required: true, message: '请填写性名', trigger: 'blur'}]">
<el-input v-model="modalUpdateInfo.params.name"/>
</el-form-item>
<el-form-item label="手机号：" prop="phone"
:rules="[{required: true, message:'请填写手机号', trigger: 'blur'}]">
<el-input v-model="modalUpdateInfo.params.phone"/>
</el-form-item>
</el-form>
</kit-dialog-simple>
</div>
</template>
<script lang="ts">
import { ref, Ref, reactive, onMounted, onUnmounted } from '@vue/composition-api';
import {postService, rmStoreUserInfo, updateStoreUserInfo} from 'web-toolkit/src/case-main';
import { sleep } from 'web-toolkit/src/utils';
import {useLoading, useLoadingDirect} from 'web-toolkit/src/service';
import {router} from '@/main';
import {Message} from 'element-ui';
import {ElForm} from 'element-ui/types/form';
import {storeUserInfo} from 'web-toolkit/src/case-main';
export default {
setup() {
const loading = ref(false);
const over = ref(false);
const alarms = ref([]);
const alarmsMsg = ref({});
const alarmsLength = ref(0);
const modalUpdatePwd = ref<any>({
visible: false,
loading: false,
flag: '',
params: {
oldPwd: undefined,
newPwd: undefined,
pwdCheck: undefined,
},
});
const modalUpdateInfo = ref<any>({
visible: false,
loading: false,
flag: '',
params: {
id: undefined,
name: undefined,
phone: undefined,
},
});
const form: Ref<ElForm|null> = ref(null);
const formInfo: Ref<ElForm|null> = ref(null);
const count = ref(0);
const listQdt: Ref<any[]> = ref([]);
const listOrder: Ref<any[]> = ref([]);
const msgLength: Ref<number> = ref(0);
function validatePassCheck(rule: any, value: string, callback: (...arg: any[]) => any) {
if (value === '' || value === undefined) {
callback(new Error('请再次输入密码'));
} else if (value !== modalUpdatePwd.value.params.newPwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
async function noMessage(id: number) {
// await postService(urlMap.alarm_record_confirm.url, { id });
// query();
}
async function handleCmdOfUser(cmd: string) {
switch (cmd) {
case 'logout':
// await postService(urlMap.logout.url);
rmStoreUserInfo();
router.push({name: 'login'});
break;
case 'updatePwd':
modalUpdatePwd.value.visible = true;
if (form.value) { (form.value as ElForm).clearValidate(); }
break;
case 'updateInfo':
// const {data: {user: u}} = await postService(urlMap.user_info.url);
// @ts-ignore
modalUpdateInfo.value.params.name = storeUserInfo.user!.name;
// @ts-ignore
modalUpdateInfo.value.params.phone = storeUserInfo.user!.phone;
modalUpdateInfo.value.visible = true;
if (formInfo.value) { (formInfo.value as ElForm).clearValidate(); }
break;
}
}
async function updatePwd() {
// const valid = await (form.value as ElForm).validate();
// if (!valid) {
// Message.error('请填写完整');
// return;
// }
// const data = await postService(urlMap.pwd_update.url, modalUpdatePwd.params);
// if (data.catchHandled) {
// return;
// }
// Message.success('修改成功');
// (form.value as ElForm).resetFields();
// modalUpdatePwd.visible = false;
}
async function updateInfo() {
// const valid = await (formInfo.value as ElForm).validate();
// if (!valid) {
// Message.error('请填写完整');
// return;
// }
// const {result} = await postService(urlMap.user_update_info.url, {
// id: modalUpdateInfo.params.id,
// name: modalUpdateInfo.params.name,
// phone: modalUpdateInfo.params.phone,
// });
// if (result === 1) {
// Message.success('修改成功');
// // @ts-ignore
// storeUserInfo.user.name = modalUpdateInfo.params.name;
// // @ts-ignore
// storeUserInfo.user.phone = modalUpdateInfo.params.phone;
// // @ts-ignore
// updateStoreUserInfo(storeUserInfo);
// modalUpdateInfo.visible = false;
// }
}
onMounted(async () => {
});
onUnmounted(() => {
over.value = true;
count.value = 0;
});
async function query() {
}
return{
storeUserInfo, router,
over,
alarms,
alarmsMsg,
alarmsLength,
modalUpdatePwd,
modalUpdateInfo,
form,
formInfo,
validatePassCheck,
noMessage,
handleCmdOfUser,
updatePwd: useLoadingDirect(modalUpdatePwd, updatePwd),
updateInfo: useLoading(loading, updateInfo),
query, listQdt, listOrder, msgLength,
};
},
};
</script>
<style scoped lang="scss">
.header-alarm {
font-size: 15px;
cursor: pointer;
}
.user-avatar {
height: 35px;
border-radius: 50%;
overflow: hidden;
cursor:pointer;
}
.user-name {
line-height: 35px;
}
.user-actions {
height: 40px;
}
.hover {
padding: 3px 5px;
margin: 3px 3px 6px 3px;
transition: all .2s;
border-radius: 3px;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: $blue-2;
}
}
.alarm-device{
border-bottom: 1px solid #bcbcbc;
padding: 5px;
.alarm-device-name {
margin-top: 3px;
background-color: #00afff;
min-width: 110px;
color: #fff;
height: 25px;
line-height: 25px;
text-align: center;
border-radius: 3px;
}
&:last-child {
border: none;
}
.alarm-message {
width: 100%;
.no-message {
font-size: .8rem;
color: #0ae;
width: 4rem;
cursor: pointer;
}
.message {
padding: 0 5px;
width: 50%;
text-align: center;
}
}
}
.icon-chatlist{
font-size: 30px;
color: #00aaee;
}
.icon-warning{
font-size: 28px;
color: $icon-warning
}
.user-panel{
padding-left: 4vw;
padding-right: 2rem;
}
.msg-panel{
padding-left: 4rem;
}
.no-msg{
text-align: center;
width: 100%;
margin-top: 1rem;
color: grey;
font-size: 1rem
}
.msg{
.title{
color: #00aaee;
}
}
</style>
src/views/main/index.vue deleted 100644 → 0
<template>
<div class="layout">
<lkt-navbar class="header"/>
<lkt-menu class="vertical-menu" bgColor="#23479C"/>
<div class="main">
<el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
<el-breadcrumb-item v-for="(item, index) of path" :key="item.cname">
<span v-if="!item.isLink" :class="index" class="bread-title">{{ item.cname }}</span>
<span v-else-if="index === path.length - 1" class="bread-title bread-title--last">{{ item.cname }}</span>
<router-link v-else class="bread-title bread-title--link" :to="item.route.path">{{ item.cname }}</router-link>
</el-breadcrumb-item>
</el-breadcrumb>
<router-view class="page--inner"/>
</div>
<!-- <div class="page flex" :style="{ height: 'calc(100% - 60px)'}">-->
<!-- <lkt-menu class="vertical-menu" bgColor="#02213F"/>-->
<!-- <div class="main" :style="{ width: 'calc(100% - 200px)'}">-->
<!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">-->
<!-- <el-breadcrumb-item v-for="(item, index) of path" :key="item.cname">-->
<!-- <span v-if="!item.isLink" :class="index" class="bread-title">{{ item.cname }}</span>-->
<!-- <span v-else-if="index === path.length - 1" class="bread-title bread-title&#45;&#45;last">{{ item.cname }}</span>-->
<!-- <router-link v-else class="bread-title bread-title&#45;&#45;link" :to="item.route.path">{{ item.cname }}</router-link>-->
<!-- </el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- <lkt-scrollbar class="page&#45;&#45;outer">-->
<!-- <router-view class="page&#45;&#45;inner"/>-->
<!-- </lkt-scrollbar>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<script lang="ts">
import LktMenu from './Menu.vue';
import LktNavbar from './Navbar.vue';
import { ref, Ref } from '@vue/composition-api';
import {router} from '@/main';
import {routes} from '@/router/routes';
export default {
components: { LktMenu, LktNavbar },
setup() {
const getRoute = (cname: string, searchedRoutes: any = routes): any => {
for (const route of searchedRoutes) {
if (route.meta && route.meta.CName === cname) {
return route;
}
if (route.children) {
const target = getRoute(cname, route.children);
if (target) {
return target;
}
}
}
};
const resolveRouteMeta = (cname: string | void): PathItem[] => {
if (!cname) {
return [];
}
const route = getRoute(cname);
return [...resolveRouteMeta(route ? route.meta.parentCName : undefined), {
cname,
isLink: !!(route && !route.children),
route,
}];
};
const path: Ref<PathItem[]> = ref(resolveRouteMeta(router.currentRoute.meta.CName));
router.afterEach((to, from) => {
path.value = resolveRouteMeta(to.meta.CName);
});
return { path };
},
};
interface PathItem {
cname: string;
isLink: boolean;
route?: any;
}
</script>
<style lang="scss" scoped>
.header{
position: fixed;
top: 0;
width: 100vw;
z-index: 2000;
}
.vertical-menu {
/*margin-top: 60px;*/
width: 200px;
height: calc(100% - 60px);
position: fixed;
left: 0;
top: 60px;
bottom: 0;
z-index: 1500;
overflow-y: scroll;
// 滚动条消失
&::-webkit-scrollbar { width: 0 !important }
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.main {
margin: 60px 0 0 200px;
padding: 10px;
width: calc(100% - 200px);
.bread{
padding-top: 5px;
padding-bottom: 10px;
height: 30px;
.bread-title {
color: $normal-text;
cursor: default;
}
.bread-title--link {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
.bread-title--last {
color: $active;
}
}
/*> .page--outer {*/
/* height: calc(100% - 30px);*/
/*}*/
}
.layout {
height: calc(100% - 60px);
background-color: $background-main;
}
.page--inner > *:not(*[class^=el-]):not(*[class^=lkt-]) {
min-width: 1040px;
}
html{
height: 100%;
}
</style>
src/views/demo1/demo1.vue → src/views/server/index.vue
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
demo1 <div class="flex" style="height:100vh">
<div style="width:30%;background-color:#eeeeee">设备</div>
<div>设备点位</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
......
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