Skip to content

W
web-sample
Commit e098f3dd by 谢佳平
Options

1

parent 12c28105
Showing with 25 additions and 862 deletions
.env.dev.demo
......@@ -3,15 +3,8 @@ ENTRY=./src/main.ts
VUE_APP_ROUTE_BASE=/
VUE_APP_APP_NAME=roms-cnc
VUE_APP_APP_THEME=theme_light
VUE_APP_BASE_URL=https://www.machplat.com/roms-server-cnc
VUE_APP_ROUTE_MODE=history
# 测试用url
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_LOGIN_TITLE1=设备运维管理云平台
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
VUE_APP_LOGIN_TITLE1=opcua
.env.pro.demo
......@@ -8,9 +8,5 @@ VUE_APP_BASE_URL=https://www.machplat.com/roms-server-cnc
VUE_APP_ROUTE_MODE=hash
VUE_APP_DEPLOY_MODE=normal
VUE_APP_HTML_TITLE=LKT-ROMS
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
VUE_APP_HTML_TITLE=opcua
VUE_APP_LOGIN_TITLE1=
src/component/page404.vue
......@@ -10,13 +10,11 @@
<script>
export default {
name: 'page404',
methods: {
logout() {
this.$store.commit('removeToken');
this.$router.push({name: 'login'});
},
},
setup() {
return{
}
}
};
</script>
......
src/plugin/web-toolkit.ts
......@@ -23,41 +23,12 @@ registerComponent(ComponentName.Tip);
registerComponent(ComponentName.ErrChannel);
registerComponent(ComponentName.Empty);
AxiosInterceptConfig.requestPartFunc = function(config) {
if (!(config.data instanceof FormData)) {
const data = Qs.parse(config.data);
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);
RouteInterceptConfig.beforePartFunc = async function (to: Route, from: Route, next: any) {
if (to.name !== from.name) {
NProgress.start();
}
};
// RouteInterceptConfig.beforePartFunc = function (to: Route, from: Route, next: any){
// if (to.name !== from.name && process.env.VUE_APP_REQUEST_MODE !== 'display') {
// NProgress.start();
// }
// if (!storeUserInfo.token) {
// 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();
// }
to.meta.from = from.path
// 初始化err-msg-channel
submitErrChanel('');
next();
}
\ No newline at end of file
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 = [
{
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: '/',
name: 'index',
redirect: 'index-page',
component: () => import('../views/main/index.vue'),
children: [
...indexChildren,
{
path: '*',
name: '404_child',
component: () => import('../component/page404.vue'),
meta: { authDisabled: true },
},
],
component: () => import('../views/server/index.vue'),
meta: {
CName: 'web',
},
},
{
path: '*',
......@@ -115,5 +13,4 @@ export const routes = [
component: () => import('../component/page404.vue'),
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/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>
<div v-loading="loading">
demo1
<div class="flex" style="height:100vh">
<div style="width:30%;background-color:#eeeeee">设备</div>
<div>设备点位</div>
</div>
</div>
</template>
<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