mirror of https://gitee.com/pnoker/dc3-web.git
# Conflicts: # package.json # src/App.vue # src/api/user.js # src/config/permission.js # src/config/website.js # src/main.js # src/router/router.js # src/store/getters.js # src/store/modules/common.js # src/store/modules/user.js # src/store/store.js # src/util/auth.js # src/util/date.js # src/util/store.js # src/util/util.js # src/util/validate.jspull/1/head
pnoker
6 years ago
commit
641de2fabb
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 422 B After Width: | Height: | Size: 422 B |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,204 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
|
||||||
|
export const driverApi = {
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/driver/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
list: (driver) => request({
|
||||||
|
url: '/device_api/manager/driver/list',
|
||||||
|
method: 'post',
|
||||||
|
data: driver
|
||||||
|
}),
|
||||||
|
dictionary: () => request({
|
||||||
|
url: '/device_api/manager/driver/dictionary',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const connectInfoApi = {
|
||||||
|
add: (connectInfo) => request({
|
||||||
|
url: '/device_api/manager/connectInfo/add',
|
||||||
|
method: 'post',
|
||||||
|
data: connectInfo
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/connectInfo/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (connectInfo) => request({
|
||||||
|
url: '/device_api/manager/connectInfo/update',
|
||||||
|
method: 'post',
|
||||||
|
data: connectInfo
|
||||||
|
}),
|
||||||
|
list: (connectInfo) => request({
|
||||||
|
url: '/device_api/manager/connectInfo/list',
|
||||||
|
method: 'post',
|
||||||
|
data: connectInfo
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const profileInfoApi = {
|
||||||
|
add: (profileInfo) => request({
|
||||||
|
url: '/device_api/manager/profileInfo/add',
|
||||||
|
method: 'post',
|
||||||
|
data: profileInfo
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/profileInfo/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (profileInfo) => request({
|
||||||
|
url: '/device_api/manager/profileInfo/update',
|
||||||
|
method: 'post',
|
||||||
|
data: profileInfo
|
||||||
|
}),
|
||||||
|
list: (profileInfo) => request({
|
||||||
|
url: '/device_api/manager/profileInfo/list',
|
||||||
|
method: 'post',
|
||||||
|
data: profileInfo
|
||||||
|
}),
|
||||||
|
dictionary: () => request({
|
||||||
|
url: '/device_api/manager/profileInfo/dictionary',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const profileApi = {
|
||||||
|
add: (profile) => request({
|
||||||
|
url: '/device_api/manager/profile/add',
|
||||||
|
method: 'post',
|
||||||
|
data: profile
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/profile/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (profile) => request({
|
||||||
|
url: '/device_api/manager/profile/update',
|
||||||
|
method: 'post',
|
||||||
|
data: profile
|
||||||
|
}),
|
||||||
|
list: (profile) => request({
|
||||||
|
url: '/device_api/manager/profile/list',
|
||||||
|
method: 'post',
|
||||||
|
data: profile
|
||||||
|
}),
|
||||||
|
dictionary: () => request({
|
||||||
|
url: '/device_api/manager/profile/dictionary',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const groupApi = {
|
||||||
|
add: (group) => request({
|
||||||
|
url: '/device_api/manager/group/add',
|
||||||
|
method: 'post',
|
||||||
|
data: group
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/group/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (group) => request({
|
||||||
|
url: '/device_api/manager/group/update',
|
||||||
|
method: 'post',
|
||||||
|
data: group
|
||||||
|
}),
|
||||||
|
list: (group) => request({
|
||||||
|
url: '/device_api/manager/group/list',
|
||||||
|
method: 'post',
|
||||||
|
data: group
|
||||||
|
}),
|
||||||
|
dictionary: () => request({
|
||||||
|
url: '/device_api/manager/group/dictionary',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deviceApi = {
|
||||||
|
add: (device) => request({
|
||||||
|
url: '/device_api/manager/device/add',
|
||||||
|
method: 'post',
|
||||||
|
data: device
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/device/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (device) => request({
|
||||||
|
url: '/device_api/manager/device/update',
|
||||||
|
method: 'post',
|
||||||
|
data: device
|
||||||
|
}),
|
||||||
|
list: (device) => request({
|
||||||
|
url: '/device_api/manager/device/list',
|
||||||
|
method: 'post',
|
||||||
|
data: device
|
||||||
|
}),
|
||||||
|
dictionary: () => request({
|
||||||
|
url: '/device_api/manager/device/dictionary',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const pointApi = {
|
||||||
|
add: (point) => request({
|
||||||
|
url: '/device_api/manager/point/add',
|
||||||
|
method: 'post',
|
||||||
|
data: point
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/point/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (point) => request({
|
||||||
|
url: '/device_api/manager/point/update',
|
||||||
|
method: 'post',
|
||||||
|
data: point
|
||||||
|
}),
|
||||||
|
list: (point) => request({
|
||||||
|
url: '/device_api/manager/point/list',
|
||||||
|
method: 'post',
|
||||||
|
data: point
|
||||||
|
}),
|
||||||
|
dictionary: () => request({
|
||||||
|
url: '/device_api/manager/point/dictionary',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const pointInfoApi = {
|
||||||
|
add: (pointInfo) => request({
|
||||||
|
url: '/device_api/manager/pointInfo/add',
|
||||||
|
method: 'post',
|
||||||
|
data: pointInfo
|
||||||
|
}),
|
||||||
|
delete: (id) => request({
|
||||||
|
url: '/device_api/manager/pointInfo/delete/' + id,
|
||||||
|
method: 'post'
|
||||||
|
}),
|
||||||
|
update: (pointInfo) => request({
|
||||||
|
url: '/device_api/manager/pointInfo/update',
|
||||||
|
method: 'post',
|
||||||
|
data: pointInfo
|
||||||
|
}),
|
||||||
|
list: (pointInfo) => request({
|
||||||
|
url: '/device_api/manager/pointInfo/list',
|
||||||
|
method: 'post',
|
||||||
|
data: pointInfo
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const scheduleApi = {
|
||||||
|
update: (schedule) => request({
|
||||||
|
url: '/device_api/manager/schedule/update',
|
||||||
|
method: 'post',
|
||||||
|
data: schedule
|
||||||
|
}),
|
||||||
|
list: (schedule) => request({
|
||||||
|
url: '/device_api/manager/schedule/list',
|
||||||
|
method: 'post',
|
||||||
|
data: schedule
|
||||||
|
})
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
.el-scrollbar__view {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-scrollbar__wrap {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
.login-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: radial-gradient(circle, #fff, #1296DB);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-wrapper-left {
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
width: 500px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: -1px 5px 10px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-wrapper-right {
|
||||||
|
margin: 0 auto 0 0;
|
||||||
|
width: 500px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
|
.el-input-group__append {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-left,
|
||||||
|
.login-border {
|
||||||
|
position: relative;
|
||||||
|
min-height: 500px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-left {
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #55b5e5;
|
||||||
|
color: #fff;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-left .img {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-time {
|
||||||
|
position: absolute;
|
||||||
|
left: 25px;
|
||||||
|
top: 25px;
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 200;
|
||||||
|
opacity: 0.9;
|
||||||
|
font-size: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-left .title {
|
||||||
|
margin-top: 60px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-border {
|
||||||
|
border-left: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-main {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 65%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-main > h3 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-main > p {
|
||||||
|
color: #76838f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-menu {
|
||||||
|
margin-top: 40px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-submit {
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
background: none;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #1296DB;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 30px;
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
input {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
text-indent: 5px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1px solid rgb(235, 237, 242);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__prefix {
|
||||||
|
i {
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-code {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-code-img {
|
||||||
|
margin-top: 2px;
|
||||||
|
width: 100px;
|
||||||
|
height: 38px;
|
||||||
|
background-color: #fdfdfd;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-indent: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card_base">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<slot/>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "base-card"
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.card_base {
|
||||||
|
padding: 2px 3px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.el-card {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card_title">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<div slot="header">
|
||||||
|
<span>{{title}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "title-card",
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.card_title {
|
||||||
|
padding: 2px 3px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.el-card {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__header {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
.error {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
height: 360px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 430px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #1296DB;
|
||||||
|
font-size: 72px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 72px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: black;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 28px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,465 @@
|
|||||||
|
<template>
|
||||||
|
<div class="waves">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class ShaderProgram {
|
||||||
|
constructor(holder, options = {}) {
|
||||||
|
options = Object.assign(
|
||||||
|
{
|
||||||
|
antialias: false,
|
||||||
|
depthTest: false,
|
||||||
|
mousemove: false,
|
||||||
|
autosize: true,
|
||||||
|
side: "front",
|
||||||
|
vertex: `
|
||||||
|
precision highp float;
|
||||||
|
attribute vec4 a_position;
|
||||||
|
attribute vec4 a_color;
|
||||||
|
uniform float u_time;
|
||||||
|
uniform vec2 u_resolution;
|
||||||
|
uniform vec2 u_mousemove;
|
||||||
|
uniform mat4 u_projection;
|
||||||
|
varying vec4 v_color;
|
||||||
|
void main() {
|
||||||
|
gl_Position = u_projection * a_position;
|
||||||
|
gl_PointSize = (10.0 / gl_Position.w) * 100.0;
|
||||||
|
v_color = a_color;
|
||||||
|
}`,
|
||||||
|
fragment: `
|
||||||
|
precision highp float;
|
||||||
|
uniform sampler2D u_texture;
|
||||||
|
uniform int u_hasTexture;
|
||||||
|
varying vec4 v_color;
|
||||||
|
void main() {
|
||||||
|
if ( u_hasTexture == 1 ) {
|
||||||
|
gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);
|
||||||
|
} else {
|
||||||
|
gl_FragColor = v_color;
|
||||||
|
}
|
||||||
|
}`,
|
||||||
|
onUpdate: () => {
|
||||||
|
},
|
||||||
|
onResize: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
options
|
||||||
|
);
|
||||||
|
const uniforms = Object.assign(
|
||||||
|
{
|
||||||
|
time: {
|
||||||
|
type: "float",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
hasTexture: {
|
||||||
|
type: "int",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
resolution: {
|
||||||
|
type: "vec2",
|
||||||
|
value: [0, 0]
|
||||||
|
},
|
||||||
|
projection: {
|
||||||
|
type: "mat4",
|
||||||
|
value: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
options.uniforms
|
||||||
|
);
|
||||||
|
const buffers = Object.assign(
|
||||||
|
{
|
||||||
|
position: {
|
||||||
|
size: 3,
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
size: 4,
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
options.buffers
|
||||||
|
);
|
||||||
|
const camera = Object.assign(
|
||||||
|
{
|
||||||
|
fov: 60,
|
||||||
|
near: 1,
|
||||||
|
far: 10000,
|
||||||
|
aspect: 1,
|
||||||
|
z: 100,
|
||||||
|
perspective: true
|
||||||
|
},
|
||||||
|
options.camera
|
||||||
|
);
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
const gl = canvas.getContext("webgl", {
|
||||||
|
antialias: options.antialias
|
||||||
|
});
|
||||||
|
if (!gl) return false;
|
||||||
|
this.count = 0;
|
||||||
|
this.gl = gl;
|
||||||
|
this.canvas = canvas;
|
||||||
|
this.camera = camera;
|
||||||
|
this.holder = holder;
|
||||||
|
this.onUpdate = options.onUpdate;
|
||||||
|
this.onResize = options.onResize;
|
||||||
|
this.data = {};
|
||||||
|
holder.appendChild(canvas);
|
||||||
|
this.createProgram(options.vertex, options.fragment);
|
||||||
|
this.createBuffers(buffers);
|
||||||
|
this.createUniforms(uniforms);
|
||||||
|
this.updateUniforms();
|
||||||
|
this.createTexture(options.texture);
|
||||||
|
gl.enable(gl.BLEND);
|
||||||
|
gl.enable(gl.CULL_FACE);
|
||||||
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
|
||||||
|
gl[options.depthTest ? "enable" : "disable"](gl.DEPTH_TEST);
|
||||||
|
if (options.autosize)
|
||||||
|
window.addEventListener("resize", () => this.resize(), false);
|
||||||
|
this.resize();
|
||||||
|
this.update = this.update.bind(this);
|
||||||
|
this.time = {
|
||||||
|
start: performance.now(),
|
||||||
|
old: performance.now()
|
||||||
|
};
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
resize() {
|
||||||
|
const holder = this.holder;
|
||||||
|
const canvas = this.canvas;
|
||||||
|
const gl = this.gl;
|
||||||
|
const width = (this.width = holder.offsetWidth);
|
||||||
|
const height = (this.height = holder.offsetHeight);
|
||||||
|
const aspect = (this.aspect = width / height);
|
||||||
|
const dpi = (this.dpi = devicePixelRatio);
|
||||||
|
canvas.width = width * dpi;
|
||||||
|
canvas.height = height * dpi;
|
||||||
|
canvas.style.width = 100 + "%";
|
||||||
|
canvas.style.height = 100 + "%";
|
||||||
|
gl.viewport(0, 0, width * dpi, height * dpi);
|
||||||
|
this.uniforms.resolution = [width, height];
|
||||||
|
this.uniforms.projection = this.setProjection(aspect);
|
||||||
|
this.onResize(width, height, dpi);
|
||||||
|
}
|
||||||
|
|
||||||
|
setProjection(aspect) {
|
||||||
|
const camera = this.camera;
|
||||||
|
if (camera.perspective) {
|
||||||
|
camera.aspect = aspect;
|
||||||
|
const fovRad = camera.fov * (Math.PI / 180);
|
||||||
|
const f = Math.tan(Math.PI * 0.5 - 0.5 * fovRad);
|
||||||
|
const rangeInv = 1.0 / (camera.near - camera.far);
|
||||||
|
const matrix = [
|
||||||
|
f / camera.aspect,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
f,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
(camera.near + camera.far) * rangeInv,
|
||||||
|
-1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
camera.near * camera.far * rangeInv * 2,
|
||||||
|
0
|
||||||
|
];
|
||||||
|
matrix[14] += camera.z;
|
||||||
|
matrix[15] += camera.z;
|
||||||
|
return matrix;
|
||||||
|
} else {
|
||||||
|
return [
|
||||||
|
2 / this.width,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-2 / this.height,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
-1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
1
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createShader(type, source) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const shader = gl.createShader(type);
|
||||||
|
gl.shaderSource(shader, source);
|
||||||
|
gl.compileShader(shader);
|
||||||
|
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||||
|
return shader;
|
||||||
|
} else {
|
||||||
|
gl.deleteShader(shader);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createProgram(vertex, fragment) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const vertexShader = this.createShader(gl.VERTEX_SHADER, vertex);
|
||||||
|
const fragmentShader = this.createShader(gl.FRAGMENT_SHADER, fragment);
|
||||||
|
const program = gl.createProgram();
|
||||||
|
gl.attachShader(program, vertexShader);
|
||||||
|
gl.attachShader(program, fragmentShader);
|
||||||
|
gl.linkProgram(program);
|
||||||
|
if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||||
|
gl.useProgram(program);
|
||||||
|
this.program = program;
|
||||||
|
} else {
|
||||||
|
gl.deleteProgram(program);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createUniforms(data) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const uniforms = (this.data.uniforms = data);
|
||||||
|
const values = (this.uniforms = {});
|
||||||
|
Object.keys(uniforms).forEach(name => {
|
||||||
|
const uniform = uniforms[name];
|
||||||
|
uniform.location = gl.getUniformLocation(this.program, "u_" + name);
|
||||||
|
Object.defineProperty(values, name, {
|
||||||
|
set: value => {
|
||||||
|
uniforms[name].value = value;
|
||||||
|
this.setUniform(name, value);
|
||||||
|
},
|
||||||
|
get: () => uniforms[name].value
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setUniform(name, value) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const uniform = this.data.uniforms[name];
|
||||||
|
uniform.value = value;
|
||||||
|
switch (uniform.type) {
|
||||||
|
case "int": {
|
||||||
|
gl.uniform1i(uniform.location, value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "float": {
|
||||||
|
gl.uniform1f(uniform.location, value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "vec2": {
|
||||||
|
gl.uniform2f(uniform.location, ...value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "vec3": {
|
||||||
|
gl.uniform3f(uniform.location, ...value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "vec4": {
|
||||||
|
gl.uniform4f(uniform.location, ...value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "mat2": {
|
||||||
|
gl.uniformMatrix2fv(uniform.location, false, value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "mat3": {
|
||||||
|
gl.uniformMatrix3fv(uniform.location, false, value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "mat4": {
|
||||||
|
gl.uniformMatrix4fv(uniform.location, false, value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUniforms() {
|
||||||
|
const uniforms = this.data.uniforms;
|
||||||
|
Object.keys(uniforms).forEach(name => {
|
||||||
|
const uniform = uniforms[name];
|
||||||
|
this.uniforms[name] = uniform.value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createBuffers(data) {
|
||||||
|
const buffers = (this.data.buffers = data);
|
||||||
|
const values = (this.buffers = {});
|
||||||
|
Object.keys(buffers).forEach(name => {
|
||||||
|
const buffer = buffers[name];
|
||||||
|
buffer.buffer = this.createBuffer("a_" + name, buffer.size);
|
||||||
|
Object.defineProperty(values, name, {
|
||||||
|
set: data => {
|
||||||
|
buffers[name].data = data;
|
||||||
|
this.setBuffer(name, data);
|
||||||
|
if (name === "position") this.count = buffers.position.data.length / 3;
|
||||||
|
},
|
||||||
|
get: () => buffers[name].data
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createBuffer(name, size) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const program = this.program;
|
||||||
|
const index = gl.getAttribLocation(program, name);
|
||||||
|
const buffer = gl.createBuffer();
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||||
|
gl.enableVertexAttribArray(index);
|
||||||
|
gl.vertexAttribPointer(index, size, gl.FLOAT, false, 0, 0);
|
||||||
|
return buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
setBuffer(name, data) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const buffers = this.data.buffers;
|
||||||
|
if (name == null && !gl.bindBuffer(gl.ARRAY_BUFFER, null)) return;
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers[name].buffer);
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
|
||||||
|
}
|
||||||
|
|
||||||
|
createTexture(src) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const texture = gl.createTexture();
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
gl.texImage2D(
|
||||||
|
gl.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.UNSIGNED_BYTE,
|
||||||
|
new Uint8Array([0, 0, 0, 0])
|
||||||
|
);
|
||||||
|
this.texture = texture;
|
||||||
|
if (src) {
|
||||||
|
this.uniforms.hasTexture = 1;
|
||||||
|
this.loadTexture(src);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadTexture(src) {
|
||||||
|
const gl = this.gl;
|
||||||
|
const texture = this.texture;
|
||||||
|
const textureImage = new Image();
|
||||||
|
textureImage.onload = () => {
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
gl.texImage2D(
|
||||||
|
gl.TEXTURE_2D,
|
||||||
|
0,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.RGBA,
|
||||||
|
gl.UNSIGNED_BYTE,
|
||||||
|
textureImage
|
||||||
|
);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||||
|
};
|
||||||
|
textureImage.src = src;
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
const gl = this.gl;
|
||||||
|
const now = performance.now();
|
||||||
|
const elapsed = (now - this.time.start) / 5000;
|
||||||
|
this.time.old = now;
|
||||||
|
this.uniforms.time = elapsed;
|
||||||
|
if (this.count > 0) {
|
||||||
|
gl.drawArrays(gl.POINTS, 0, this.count);
|
||||||
|
}
|
||||||
|
this.onUpdate();
|
||||||
|
requestAnimationFrame(this.update);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "BgAnimation",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const pointSize = 1.5;
|
||||||
|
new ShaderProgram(
|
||||||
|
document.querySelector(".waves"), {
|
||||||
|
texture: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v0wLRAAAAJHRSTlMAC/goGvDhmwcExrVjWzrm29TRqqSKenRXVklANSIUE8mRkGpv+HOfAAABCElEQVQ4y4VT13LDMAwLrUHteO+R9f/fWMfO6dLaPeKVEECRxOULWsEGpS9nULDwia2Y+ALqUNbAWeg775zv+sA4/FFRMxt8U2FZFCVWjR/YrH4/H9sarclSKdPMWKzb8VsEeHB3m0shkhVCyNzeXeAQ9Xl4opEieX2QCGnwGbj6GMyjw9t1K0fK9YZunPXeAGsfJtYjwzxaBnozGGorYz0ypK2HzQSYx1y8DgSRo2ewOiyh2QWOEk1Y9OrQV0a8TiBM1a8eMHWYnRMy7CZ4t1CmyRkhSUvP3gRXyHOCLBxNoC3IJv//ZrJ/kxxUHPUB+6jJZZHrpg6GOjnqaOmzp4NDR48OLxn/H27SRQ08S0ZJAAAAAElFTkSuQmCC",
|
||||||
|
uniforms: {
|
||||||
|
size: {type: "float", value: pointSize},
|
||||||
|
field: {type: "vec3", value: [0, 0, 0]},
|
||||||
|
speed: {type: "float", value: 5}
|
||||||
|
},
|
||||||
|
vertex: `
|
||||||
|
#define M_PI 3.1415926535897932384626433832795
|
||||||
|
precision highp float;
|
||||||
|
attribute vec4 a_position;
|
||||||
|
attribute vec4 a_color;
|
||||||
|
uniform float u_time;
|
||||||
|
uniform float u_size;
|
||||||
|
uniform float u_speed;
|
||||||
|
uniform vec3 u_field;
|
||||||
|
uniform mat4 u_projection;
|
||||||
|
varying vec4 v_color;
|
||||||
|
void main() {
|
||||||
|
vec3 pos = a_position.xyz;
|
||||||
|
pos.y += (
|
||||||
|
cos(pos.x / u_field.x * M_PI * 8.0 + u_time * u_speed) +
|
||||||
|
sin(pos.z / u_field.z * M_PI * 8.0 + u_time * u_speed)
|
||||||
|
) * u_field.y;
|
||||||
|
gl_Position = u_projection * vec4( pos.xyz, a_position.w );
|
||||||
|
gl_PointSize = ( u_size / gl_Position.w ) * 100.0;
|
||||||
|
v_color = a_color;
|
||||||
|
}`,
|
||||||
|
fragment: `
|
||||||
|
precision highp float;
|
||||||
|
uniform sampler2D u_texture;
|
||||||
|
varying vec4 v_color;
|
||||||
|
void main() {
|
||||||
|
gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord);
|
||||||
|
}`,
|
||||||
|
onResize(w, h, dpi) {
|
||||||
|
const position = [], color = [];
|
||||||
|
const width = 400 * (w / h), depth = 500, height = 3, distance = 3;
|
||||||
|
for (let x = 0; x < width; x += distance) {
|
||||||
|
for (let z = 0; z < depth; z += distance) {
|
||||||
|
position.push(-width / 2 + x, -30, -depth / 2 + z);
|
||||||
|
color.push(
|
||||||
|
1,
|
||||||
|
//1 - (x / width),
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
//0.5 + (x / width) * 0.5,
|
||||||
|
z / depth
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.uniforms.field = [width, height, depth];
|
||||||
|
this.buffers.position = position;
|
||||||
|
this.buffers.color = color;
|
||||||
|
this.uniforms.size = (h / 400) * pointSize * dpi;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waves {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,47 +1,18 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
import axios from './config/axios'
|
||||||
|
import VueAxios from 'vue-axios'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import router from './router/router'
|
import router from './router/router'
|
||||||
import store from './store/store'
|
import store from './store/store'
|
||||||
//Element UI
|
|
||||||
import Element from 'element-ui'
|
|
||||||
import './plugins/element/element.js'
|
import './plugins/element/element.js'
|
||||||
//Axios
|
import './config/permission';
|
||||||
import axios from './router/axios'
|
|
||||||
import VueAxios from 'vue-axios'
|
|
||||||
//Util
|
|
||||||
import './config/permission'
|
|
||||||
import './config/error'
|
|
||||||
import i18n from './lang'
|
|
||||||
import {loadStyle} from './util/util'
|
|
||||||
import * as urls from './config/env'
|
|
||||||
import {iconfontUrl, iconfontVersion} from './config/env'
|
|
||||||
import './styles/common.scss';
|
|
||||||
import basicContainer from './components/basic-container/main'
|
|
||||||
|
|
||||||
Vue.use(router);
|
|
||||||
Vue.use(VueAxios, axios);
|
Vue.use(VueAxios, axios);
|
||||||
Vue.use(Element, {
|
|
||||||
i18n: (key, value) => i18n.t(key, value)
|
|
||||||
});
|
|
||||||
|
|
||||||
//注册全局容器
|
|
||||||
Vue.component('basicContainer', basicContainer);
|
|
||||||
|
|
||||||
// 加载相关url地址
|
|
||||||
Object.keys(urls).forEach(key => {
|
|
||||||
Vue.prototype[key] = urls[key];
|
|
||||||
});
|
|
||||||
|
|
||||||
// 动态加载阿里云字体库
|
|
||||||
iconfontVersion.forEach(ele => {
|
|
||||||
loadStyle(iconfontUrl.replace('$key', ele));
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
i18n,
|
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|||||||
@ -1,8 +1,19 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
import Element from 'element-ui'
|
import Element from 'element-ui'
|
||||||
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
|
||||||
import 'element-ui/lib/theme-chalk/index.css';
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
import './element-variables.scss'
|
import './element-variables.scss'
|
||||||
|
|
||||||
Vue.use(Element, {locale})
|
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
||||||
|
import GeminiScrollbar from 'vue-gemini-scrollbar'
|
||||||
|
import baseCard from '@/components/card/base-card'
|
||||||
|
import titleCard from '@/components/card/title-card'
|
||||||
|
import Avue from '@smallwei/avue'
|
||||||
|
import '@smallwei/avue/lib/index.css'
|
||||||
|
|
||||||
|
Vue.use(Element, {locale});
|
||||||
|
Vue.use(Avue);
|
||||||
|
Vue.use(GeminiScrollbar);
|
||||||
|
|
||||||
|
Vue.component('base-card', baseCard);
|
||||||
|
Vue.component('title-card', titleCard);
|
||||||
|
|||||||
@ -0,0 +1,42 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
redirect: '/404'
|
||||||
|
}, {
|
||||||
|
name: 'login',
|
||||||
|
path: '/login',
|
||||||
|
meta: {
|
||||||
|
isAuth: false
|
||||||
|
},
|
||||||
|
component: () => import('@/views/login/Login')
|
||||||
|
}, {
|
||||||
|
name: 'index',
|
||||||
|
path: '/',
|
||||||
|
redirect: '/home',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '404',
|
||||||
|
path: '/404',
|
||||||
|
meta: {
|
||||||
|
isAuth: false
|
||||||
|
},
|
||||||
|
component: () => import('@/components/error/404')
|
||||||
|
|
||||||
|
}, {
|
||||||
|
name: '403',
|
||||||
|
path: '/403',
|
||||||
|
meta: {
|
||||||
|
isAuth: false
|
||||||
|
},
|
||||||
|
component: () => import('@/components/error/403')
|
||||||
|
}, {
|
||||||
|
name: '500',
|
||||||
|
path: '/500',
|
||||||
|
meta: {
|
||||||
|
isAuth: false
|
||||||
|
},
|
||||||
|
component: () => import('@/components/error/500')
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
import Index from '@/views/layout/Layout'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: '/home',
|
||||||
|
component: Index,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'home',
|
||||||
|
path: '/home',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/home/Home')
|
||||||
|
}, {
|
||||||
|
name: 'driver',
|
||||||
|
path: '/driver',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/driver/Driver')
|
||||||
|
}, {
|
||||||
|
name: 'connect',
|
||||||
|
path: '/connect',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/connect/Connect')
|
||||||
|
}, {
|
||||||
|
name: 'attribute',
|
||||||
|
path: '/attribute',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/attribute/Attribute')
|
||||||
|
}, {
|
||||||
|
name: 'profile',
|
||||||
|
path: '/profile',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/profile/Profile')
|
||||||
|
}, {
|
||||||
|
name: 'point',
|
||||||
|
path: '/point',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/point/Point')
|
||||||
|
}, {
|
||||||
|
name: 'group',
|
||||||
|
path: '/group',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/group/Group')
|
||||||
|
}, {
|
||||||
|
name: 'device',
|
||||||
|
path: '/device',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/device/Device')
|
||||||
|
}, {
|
||||||
|
name: 'config',
|
||||||
|
path: '/config',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/config/Config')
|
||||||
|
}, {
|
||||||
|
name: 'schedule',
|
||||||
|
path: '/schedule',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/schedule/Schedule')
|
||||||
|
}, {
|
||||||
|
name: 'now',
|
||||||
|
path: '/now',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/Now')
|
||||||
|
}, {
|
||||||
|
name: 'history',
|
||||||
|
path: '/history',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/History')
|
||||||
|
}, {
|
||||||
|
name: 'alarm',
|
||||||
|
path: '/alarm',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/Alarm')
|
||||||
|
}, {
|
||||||
|
name: 'video',
|
||||||
|
path: '/video',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/Video')
|
||||||
|
}, {
|
||||||
|
name: 'about',
|
||||||
|
path: '/about',
|
||||||
|
meta: {
|
||||||
|
isAuth: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/About')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -1,28 +1,5 @@
|
|||||||
const getters = {
|
const getters = {
|
||||||
nav: state => state.state.nav,
|
|
||||||
|
|
||||||
tag: state => state.tags.tag,
|
|
||||||
language: state => state.common.language,
|
|
||||||
website: state => state.common.website,
|
|
||||||
userInfo: state => state.user.userInfo,
|
|
||||||
colorName: state => state.common.colorName,
|
|
||||||
themeName: state => state.common.themeName,
|
|
||||||
isShade: state => state.common.isShade,
|
|
||||||
isCollapse: state => state.common.isCollapse,
|
|
||||||
keyCollapse: (state, getters) => getters.screen > 1 ? getters.isCollapse : false,
|
|
||||||
screen: state => state.common.screen,
|
|
||||||
isLock: state => state.common.isLock,
|
|
||||||
isFullScren: state => state.common.isFullScren,
|
|
||||||
lockPasswd: state => state.common.lockPasswd,
|
|
||||||
tagList: state => state.tags.tagList,
|
|
||||||
tagWel: state => state.tags.tagWel,
|
|
||||||
token: state => state.user.token,
|
token: state => state.user.token,
|
||||||
roles: state => state.user.roles,
|
|
||||||
permission: state => state.user.permission,
|
|
||||||
menu: state => state.user.menu,
|
|
||||||
menuAll: state => state.user.menuAll,
|
|
||||||
logsList: state => state.logs.logsList,
|
|
||||||
logsLen: state => state.logs.logsList.length || 0,
|
|
||||||
logsFlag: (state, getters) => getters.logsLen === 0
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default getters
|
export default getters
|
||||||
@ -1,92 +1,10 @@
|
|||||||
import {getStore, removeStore, setStore} from '../../util/store'
|
import website from '@/config/website'
|
||||||
import website from '../../config/website'
|
|
||||||
|
|
||||||
const common = {
|
const common = {
|
||||||
|
|
||||||
state: {
|
state: {
|
||||||
language: getStore({name: 'language'}) || 'zh',
|
|
||||||
isCollapse: false,
|
|
||||||
isFullScren: false,
|
|
||||||
isShade: false,
|
|
||||||
screen: -1,
|
|
||||||
isLock: getStore({name: 'isLock'}) || false,
|
|
||||||
showTag: true,
|
|
||||||
showDebug: true,
|
|
||||||
showCollapse: true,
|
|
||||||
showSearch: true,
|
|
||||||
showLock: true,
|
|
||||||
showFullScren: true,
|
|
||||||
showTheme: true,
|
|
||||||
showMenu: true,
|
|
||||||
showColor: true,
|
|
||||||
colorName: getStore({name: 'colorName'}) || '#409EFF',
|
|
||||||
themeName: getStore({name: 'themeName'}) || 'theme-default',
|
|
||||||
lockPasswd: getStore({name: 'lockPasswd'}) || '',
|
|
||||||
website: website,
|
website: website,
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {}
|
||||||
SET_LANGUAGE: (state, language) => {
|
|
||||||
state.language = language
|
|
||||||
setStore({
|
|
||||||
name: 'language',
|
|
||||||
content: state.language
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_SHADE: (state, active) => {
|
|
||||||
state.isShade = active;
|
|
||||||
},
|
|
||||||
SET_COLLAPSE: (state) => {
|
|
||||||
state.isCollapse = !state.isCollapse;
|
|
||||||
},
|
|
||||||
SET_FULLSCREN: (state) => {
|
|
||||||
state.isFullScren = !state.isFullScren;
|
|
||||||
},
|
|
||||||
SET_LOCK: (state) => {
|
|
||||||
state.isLock = true;
|
|
||||||
setStore({
|
|
||||||
name: 'isLock',
|
|
||||||
content: state.isLock,
|
|
||||||
type: 'session'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_SCREEN: (state, screen) => {
|
|
||||||
state.screen = screen;
|
|
||||||
},
|
|
||||||
SET_COLOR_NAME: (state, colorName) => {
|
|
||||||
state.colorName = colorName;
|
|
||||||
setStore({
|
|
||||||
name: 'colorName',
|
|
||||||
content: state.colorName,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_THEME_NAME: (state, themeName) => {
|
|
||||||
state.themeName = themeName;
|
|
||||||
setStore({
|
|
||||||
name: 'themeName',
|
|
||||||
content: state.themeName,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_LOCK_PASSWD: (state, lockPasswd) => {
|
|
||||||
state.lockPasswd = lockPasswd;
|
|
||||||
setStore({
|
|
||||||
name: 'lockPasswd',
|
|
||||||
content: state.lockPasswd,
|
|
||||||
type: 'session'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
CLEAR_LOCK: (state) => {
|
|
||||||
state.isLock = false;
|
|
||||||
state.lockPasswd = '';
|
|
||||||
removeStore({
|
|
||||||
name: 'lockPasswd',
|
|
||||||
type: 'session'
|
|
||||||
});
|
|
||||||
removeStore({
|
|
||||||
name: 'isLock',
|
|
||||||
type: 'session'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default common
|
export default common
|
||||||
@ -1,200 +1,46 @@
|
|||||||
import {removeToken, setToken} from '../../util/auth'
|
import {getStore, setStore} from '@/util/store'
|
||||||
import {getStore, setStore} from '../../util/store'
|
import {setToken} from '@/util/auth'
|
||||||
import {isURL, validatenull} from '../../util/validate'
|
import {checkTokenValid, generateToken} from '@/api/user'
|
||||||
import {deepClone} from '../../util/util'
|
|
||||||
import website from '../../config/website'
|
|
||||||
import {getButtons, getMenu, getTopMenu, getUserInfo, loginByUsername, logout, refeshToken} from '../../api/user'
|
|
||||||
|
|
||||||
function addPath(ele, first) {
|
|
||||||
const menu = website.menu;
|
|
||||||
const propsConfig = menu.props;
|
|
||||||
const propsDefault = {
|
|
||||||
label: propsConfig.label || 'name',
|
|
||||||
path: propsConfig.path || 'path',
|
|
||||||
icon: propsConfig.icon || 'icon',
|
|
||||||
children: propsConfig.children || 'children'
|
|
||||||
}
|
|
||||||
const icon = ele[propsDefault.icon];
|
|
||||||
ele[propsDefault.icon] = validatenull(icon) ? menu.iconDefault : icon;
|
|
||||||
const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0;
|
|
||||||
if (!isChild) ele[propsDefault.children] = [];
|
|
||||||
if (!isChild && first && !isURL(ele[propsDefault.path])) {
|
|
||||||
ele[propsDefault.path] = ele[propsDefault.path] + '/index'
|
|
||||||
} else {
|
|
||||||
ele[propsDefault.children].forEach(child => {
|
|
||||||
addPath(child);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = {
|
const user = {
|
||||||
state: {
|
state: {
|
||||||
userInfo: getStore({name: 'userInfo'}) || [],
|
userInfo: getStore({name: 'userInfo'}) || [],
|
||||||
permission: getStore({name: 'permission'}) || {},
|
|
||||||
roles: [],
|
|
||||||
menu: getStore({name: 'menu'}) || [],
|
|
||||||
menuAll: [],
|
|
||||||
token: getStore({name: 'token'}) || '',
|
token: getStore({name: 'token'}) || '',
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
//根据用户名登录
|
GenerateToken({commit}, user) {
|
||||||
LoginByUsername({commit}, userInfo) {
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
loginByUsername(userInfo.tenantId, userInfo.username, userInfo.password, userInfo.type).then(res => {
|
generateToken(user).then(res => {
|
||||||
const data = res.data.data;
|
const data = res.data;
|
||||||
commit('SET_TOKEN', data.accessToken);
|
commit('SET_USER', user);
|
||||||
commit('SET_USERIFNO', data);
|
|
||||||
commit('DEL_ALL_TAG');
|
|
||||||
commit('CLEAR_LOCK');
|
|
||||||
resolve();
|
|
||||||
}).catch(error => {
|
|
||||||
reject(error);
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
GetButtons({commit}) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
getButtons().then(res => {
|
|
||||||
const data = res.data.data;
|
|
||||||
commit('SET_PERMISSION', data);
|
|
||||||
resolve();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//根据手机号登录
|
|
||||||
LoginByPhone({commit}, userInfo) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
loginByUsername(userInfo.phone, userInfo.code).then(res => {
|
|
||||||
const data = res.data.data;
|
|
||||||
commit('SET_TOKEN', data);
|
commit('SET_TOKEN', data);
|
||||||
commit('DEL_ALL_TAG');
|
|
||||||
commit('CLEAR_LOCK');
|
|
||||||
resolve();
|
resolve();
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
GetUserInfo({commit}) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getUserInfo().then((res) => {
|
|
||||||
const data = res.data.data;
|
|
||||||
commit('SET_ROLES', data.roles);
|
|
||||||
resolve(data);
|
|
||||||
}).catch(err => {
|
|
||||||
reject(err);
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//刷新token
|
|
||||||
RefeshToken({state, commit}) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
refeshToken(state.refeshToken).then(res => {
|
|
||||||
const data = res.data.data;
|
|
||||||
commit('SET_TOKEN', data);
|
|
||||||
resolve(data);
|
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error);
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 登出
|
CheckTokenValid(body) {
|
||||||
LogOut({commit}) {
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
logout().then(() => {
|
checkTokenValid(body).then(() => {
|
||||||
commit('SET_TOKEN', '')
|
resolve();
|
||||||
commit('SET_MENU', [])
|
|
||||||
commit('SET_ROLES', [])
|
|
||||||
commit('DEL_ALL_TAG');
|
|
||||||
commit('CLEAR_LOCK');
|
|
||||||
removeToken()
|
|
||||||
resolve()
|
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
//注销session
|
|
||||||
FedLogOut({commit}) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
commit('SET_TOKEN', '')
|
|
||||||
commit('SET_MENU', [])
|
|
||||||
commit('SET_ROLES', [])
|
|
||||||
commit('DEL_ALL_TAG');
|
|
||||||
commit('CLEAR_LOCK');
|
|
||||||
removeToken()
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
GetTopMenu() {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
getTopMenu().then((res) => {
|
|
||||||
const data = res.data.data || []
|
|
||||||
resolve(data)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//获取系统菜单
|
|
||||||
GetMenu({commit, dispatch}, parentId) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
getMenu(parentId).then((res) => {
|
|
||||||
const data = res.data.data
|
|
||||||
let menu = deepClone(data);
|
|
||||||
menu.forEach(ele => {
|
|
||||||
addPath(ele, true);
|
|
||||||
})
|
|
||||||
commit('SET_MENU', menu)
|
|
||||||
dispatch('GetButtons');
|
|
||||||
resolve(menu)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_TOKEN: (state, token) => {
|
SET_TOKEN: (state, token) => {
|
||||||
setToken(token)
|
setToken(token);
|
||||||
state.token = token;
|
state.token = token;
|
||||||
setStore({name: 'token', content: state.token, type: 'session'})
|
setStore({name: 'token', content: state.token, type: 'session'})
|
||||||
},
|
},
|
||||||
SET_USERIFNO: (state, userInfo) => {
|
SET_USER: (state, userInfo) => {
|
||||||
state.userInfo = userInfo;
|
state.userInfo = userInfo;
|
||||||
setStore({name: 'userInfo', content: state.userInfo})
|
setStore({name: 'userInfo', content: state.userInfo})
|
||||||
},
|
|
||||||
SET_MENU: (state, menu) => {
|
|
||||||
state.menu = menu
|
|
||||||
setStore({name: 'menu', content: state.menu, type: 'session'})
|
|
||||||
},
|
|
||||||
SET_MENU_ALL: (state, menuAll) => {
|
|
||||||
state.menuAll = menuAll;
|
|
||||||
},
|
|
||||||
SET_ROLES: (state, roles) => {
|
|
||||||
state.roles = roles;
|
|
||||||
},
|
|
||||||
SET_PERMISSION: (state, permission) => {
|
|
||||||
let result = [];
|
|
||||||
|
|
||||||
function getCode(list) {
|
|
||||||
list.forEach(ele => {
|
|
||||||
if (typeof (ele) === 'object') {
|
|
||||||
const chiildren = ele.children;
|
|
||||||
const code = ele.code;
|
|
||||||
if (chiildren) {
|
|
||||||
getCode(chiildren)
|
|
||||||
} else {
|
|
||||||
result.push(code);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
getCode(permission);
|
|
||||||
state.permission = {};
|
|
||||||
result.forEach(ele => {
|
|
||||||
state.permission[ele] = true;
|
|
||||||
});
|
|
||||||
setStore({name: 'permission', content: state.permission, type: 'session'})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
}
|
|
||||||
export default user
|
export default user
|
||||||
|
|||||||
@ -1,15 +1,16 @@
|
|||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
const TokenKey = 'x-access-token'
|
|
||||||
|
const TokenKey = 'x-access-token';
|
||||||
const inFifteenMinutes = new Date(new Date().getTime() + 120 * 60 * 1000);
|
const inFifteenMinutes = new Date(new Date().getTime() + 120 * 60 * 1000);
|
||||||
|
|
||||||
export function getToken() {
|
export function getToken() {
|
||||||
return Cookies.get(TokenKey)
|
return Cookies.get(TokenKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setToken(token) {
|
export function setToken(token) {
|
||||||
return Cookies.set(TokenKey, token, { expires: inFifteenMinutes })
|
return Cookies.set(TokenKey, token, {expires: inFifteenMinutes});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function removeToken() {
|
export function removeToken() {
|
||||||
return Cookies.remove(TokenKey)
|
return Cookies.remove(TokenKey);
|
||||||
}
|
}
|
||||||
@ -1,5 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<h1>This is an about page</h1>
|
<h1>This is an about page</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home">
|
|
||||||
<img alt="Vue logo" src="../assets/logo.png">
|
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container view">
|
|
||||||
<el-row class="operator">
|
|
||||||
<el-button icon="el-icon-search" circle></el-button>
|
|
||||||
<el-button type="success" icon="el-icon-plus" circle></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
||||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
||||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row class="page">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,5 +1,109 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about">
|
<base-card>
|
||||||
<h1>This is an about page</h1>
|
<avue-crud :option="option"
|
||||||
</div>
|
:data="data"
|
||||||
|
ref="crud"
|
||||||
|
v-model="form"
|
||||||
|
@row-del="rowDel"
|
||||||
|
@row-update="handleRowUpdate"
|
||||||
|
@row-save="handleRowSave"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@search-reset="searchReset">
|
||||||
|
<template slot="menuLeft">
|
||||||
|
<el-button type="danger"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
plain>删 除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {},
|
||||||
|
query: {},
|
||||||
|
page: {
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
name: '张三',
|
||||||
|
sex: '男',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '王五',
|
||||||
|
sex: '女',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '赵六',
|
||||||
|
sex: '男',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}],
|
||||||
|
option: {
|
||||||
|
tip: false,
|
||||||
|
tree: true,
|
||||||
|
border: true,
|
||||||
|
index: true,
|
||||||
|
viewBtn: true,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '姓名',
|
||||||
|
prop: 'name',
|
||||||
|
search: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入部门名称",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '性别',
|
||||||
|
prop: 'sex'
|
||||||
|
}, {
|
||||||
|
label: "日期",
|
||||||
|
prop: "date",
|
||||||
|
type: "date",
|
||||||
|
format: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
valueFormat: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 增加按钮
|
||||||
|
handleRowSave(row, done, loading) {
|
||||||
|
this.data.splice(0, 0, row);
|
||||||
|
done(); // 关闭表单
|
||||||
|
loading(); // 按钮停止加载
|
||||||
|
},
|
||||||
|
// 修改按钮
|
||||||
|
handleRowUpdate(row, index, done, loading) {
|
||||||
|
this.data.splice(index, 1, row);
|
||||||
|
done(); // 关闭表单
|
||||||
|
loading(); // 按钮停止加载
|
||||||
|
},
|
||||||
|
// 删除按钮
|
||||||
|
rowDel(row, index) {
|
||||||
|
this.$confirm('是否删除该条信息？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.data.splice(index, 1);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container view">
|
|
||||||
<el-row class="operator">
|
|
||||||
<el-button icon="el-icon-search" circle></el-button>
|
|
||||||
<el-button type="success" icon="el-icon-plus" circle></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
||||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
||||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row class="page">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container view">
|
|
||||||
<el-row class="operator">
|
|
||||||
<el-button icon="el-icon-search" circle></el-button>
|
|
||||||
<el-button type="success" icon="el-icon-plus" circle></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
||||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
||||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row class="page">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container view">
|
|
||||||
<el-row class="operator">
|
|
||||||
<el-button icon="el-icon-search" circle></el-button>
|
|
||||||
<el-button type="success" icon="el-icon-plus" circle></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
||||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
||||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="device_list">
|
|
||||||
<el-card class="box-card" shadow="hover">
|
|
||||||
<div slot="header" class="clearfix">
|
|
||||||
<span>设备名称</span>
|
|
||||||
<el-button class="el-icon-more" style="float: right; padding: 3px 0" type="text"/>
|
|
||||||
</div>
|
|
||||||
<div v-for="o in 4" :key="o" class="text item">
|
|
||||||
{{'列表内容 ' + o }}
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card class="box-card" shadow="hover">
|
|
||||||
<div slot="header" class="clearfix">
|
|
||||||
<span>设备名称</span>
|
|
||||||
<el-button class="el-icon-more" style="float: right; padding: 3px 0" type="text"/>
|
|
||||||
</div>
|
|
||||||
<div v-for="o in 4" :key="o" class="text item">
|
|
||||||
{{'列表内容 ' + o }}
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
</el-row>
|
|
||||||
<el-row class="page">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-card {
|
|
||||||
width: 480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {driverApi, profileInfoApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'displayName',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 显示名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的显示名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的显示名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '属性',
|
||||||
|
prop: 'name',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 属性名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的属性名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的属性名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '类型',
|
||||||
|
prop: 'type',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: 'string',
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '字符串',
|
||||||
|
value: 'string'
|
||||||
|
}, {
|
||||||
|
label: '整数',
|
||||||
|
value: 'int'
|
||||||
|
}, {
|
||||||
|
label: '双精度浮点数',
|
||||||
|
value: 'double'
|
||||||
|
}, {
|
||||||
|
label: '浮点数',
|
||||||
|
value: 'float'
|
||||||
|
}, {
|
||||||
|
label: '长整数',
|
||||||
|
value: 'long'
|
||||||
|
}, {
|
||||||
|
label: '开关量',
|
||||||
|
value: 'boolean'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择连接属性类型',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '默认',
|
||||||
|
prop: 'value',
|
||||||
|
span: 12
|
||||||
|
}, {
|
||||||
|
label: '所属驱动',
|
||||||
|
prop: 'driverId',
|
||||||
|
span: 24,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'select',
|
||||||
|
filterable: true,
|
||||||
|
searchFilterable: true,
|
||||||
|
dicData: [],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属驱动',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 200,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.driver();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
profileInfoApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
driver() {
|
||||||
|
driverApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('driverId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
profileInfoApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return profileInfoApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
profileInfoApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,235 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {deviceApi, pointApi, pointInfoApi, profileInfoApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '属性',
|
||||||
|
prop: 'profileInfoId',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 8,
|
||||||
|
type: 'tree',
|
||||||
|
dicData: [],
|
||||||
|
defaultExpandAll: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择属性',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '内容',
|
||||||
|
prop: 'value',
|
||||||
|
span: 12
|
||||||
|
}, {
|
||||||
|
label: '所属设备',
|
||||||
|
prop: 'deviceId',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 8,
|
||||||
|
type: 'tree',
|
||||||
|
dicData: [],
|
||||||
|
defaultExpandAll: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属设备',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '所属位号',
|
||||||
|
prop: 'pointId',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 8,
|
||||||
|
type: 'tree',
|
||||||
|
dicData: [],
|
||||||
|
defaultExpandAll: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属位号',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 200,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.device();
|
||||||
|
this.point();
|
||||||
|
this.profileInfo();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
pointInfoApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
device() {
|
||||||
|
deviceApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('deviceId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
point() {
|
||||||
|
pointApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('pointId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
profileInfo() {
|
||||||
|
profileInfoApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('profileInfoId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
pointInfoApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return pointInfoApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
pointInfoApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {connectInfoApi, driverApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'displayName',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 显示名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的显示名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的显示名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '属性',
|
||||||
|
prop: 'name',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 属性名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的属性名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的属性名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '类型',
|
||||||
|
prop: 'type',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: 'string',
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '字符串',
|
||||||
|
value: 'string'
|
||||||
|
}, {
|
||||||
|
label: '整数',
|
||||||
|
value: 'int'
|
||||||
|
}, {
|
||||||
|
label: '双精度浮点数',
|
||||||
|
value: 'double'
|
||||||
|
}, {
|
||||||
|
label: '浮点数',
|
||||||
|
value: 'float'
|
||||||
|
}, {
|
||||||
|
label: '长整数',
|
||||||
|
value: 'long'
|
||||||
|
}, {
|
||||||
|
label: '开关量',
|
||||||
|
value: 'boolean'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择连接属性类型',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '默认',
|
||||||
|
prop: 'value',
|
||||||
|
span: 12
|
||||||
|
}, {
|
||||||
|
label: '所属驱动',
|
||||||
|
prop: 'driverId',
|
||||||
|
span: 24,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'select',
|
||||||
|
filterable: true,
|
||||||
|
searchFilterable: true,
|
||||||
|
dicData: [],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属驱动',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 200,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.driver();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
connectInfoApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
driver() {
|
||||||
|
driverApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('driverId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
connectInfoApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return connectInfoApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
connectInfoApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,263 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {deviceApi, groupApi, profileApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '设备',
|
||||||
|
prop: 'name',
|
||||||
|
span: 24,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 5,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 设备名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的设备名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的设备名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '编码',
|
||||||
|
prop: 'code',
|
||||||
|
width: 300,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 5,
|
||||||
|
disabled: true
|
||||||
|
}, {
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
width: 80,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 4,
|
||||||
|
disabled: true,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: 2,
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '离线',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
label: '在线',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
label: '维护',
|
||||||
|
value: 2
|
||||||
|
}, {
|
||||||
|
label: '故障',
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
label: '失效',
|
||||||
|
value: 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '所属模板',
|
||||||
|
prop: 'profileId',
|
||||||
|
search: true,
|
||||||
|
searchSpan: 5,
|
||||||
|
type: 'tree',
|
||||||
|
dicData: [],
|
||||||
|
defaultExpandAll: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择使用模板',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '所属分组',
|
||||||
|
prop: 'groupId',
|
||||||
|
width: 150,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 5,
|
||||||
|
type: 'select',
|
||||||
|
filterable: true,
|
||||||
|
searchFilterable: true,
|
||||||
|
dicData: [],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属分组',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 200,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.group();
|
||||||
|
this.profile();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
deviceApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
group() {
|
||||||
|
groupApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('groupId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
profile() {
|
||||||
|
profileApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('profileId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
deviceApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return deviceApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
deviceApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {driverApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
addBtn: false,
|
||||||
|
viewBtn: true,
|
||||||
|
editBtn: false,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'name',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6
|
||||||
|
}, {
|
||||||
|
label: '服务',
|
||||||
|
prop: 'serviceName',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6
|
||||||
|
}, {
|
||||||
|
label: '主机',
|
||||||
|
prop: 'host',
|
||||||
|
width: 180,
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6
|
||||||
|
}, {
|
||||||
|
label: '端口',
|
||||||
|
prop: 'port',
|
||||||
|
width: 100,
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 300,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
driverApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return driverApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
driverApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {groupApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '分组',
|
||||||
|
prop: 'name',
|
||||||
|
span: 24,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 24,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 分组名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的分组名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的分组名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
groupApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
groupApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return groupApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
groupApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-col :span="9">
|
||||||
|
<title-card title="设备在线统计">
|
||||||
|
<div id="c1"/>
|
||||||
|
</title-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<title-card title="设备状态统计">
|
||||||
|
<div id="c2"/>
|
||||||
|
</title-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="9">
|
||||||
|
<title-card title="设备分组统计">
|
||||||
|
<div id="c3"/>
|
||||||
|
</title-card>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<div id="device-map"/>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {PointLayer, Scene} from '@antv/l7';
|
||||||
|
import {GaodeMap} from '@antv/l7-maps';
|
||||||
|
import G2 from '@antv/g2';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const data1 = [
|
||||||
|
{year: '1991', value: 3},
|
||||||
|
{year: '1992', value: 4},
|
||||||
|
{year: '1993', value: 3.5},
|
||||||
|
{year: '1994', value: 5},
|
||||||
|
{year: '1995', value: 4.9},
|
||||||
|
{year: '1996', value: 6},
|
||||||
|
{year: '1997', value: 7},
|
||||||
|
{year: '1998', value: 9},
|
||||||
|
{year: '1999', value: 13}
|
||||||
|
];
|
||||||
|
const chart1 = new G2.Chart({
|
||||||
|
container: 'c1',
|
||||||
|
forceFit: true,
|
||||||
|
height: 300,
|
||||||
|
padding: [20, 20, 20, 20]
|
||||||
|
});
|
||||||
|
chart1.source(data1);
|
||||||
|
chart1.scale('value', {
|
||||||
|
min: 0
|
||||||
|
});
|
||||||
|
chart1.scale('year', {
|
||||||
|
range: [0, 1]
|
||||||
|
});
|
||||||
|
chart1.tooltip({
|
||||||
|
crosshairs: {
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart1.line().position('year*value');
|
||||||
|
chart1.point().position('year*value')
|
||||||
|
.size(4)
|
||||||
|
.shape('circle')
|
||||||
|
.style({
|
||||||
|
stroke: '#fff',
|
||||||
|
lineWidth: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
chart1.render();
|
||||||
|
|
||||||
|
const data2 = [
|
||||||
|
{item: '事例一', count: 40, percent: 0.4},
|
||||||
|
{item: '事例二', count: 21, percent: 0.21},
|
||||||
|
{item: '事例三', count: 17, percent: 0.17},
|
||||||
|
{item: '事例四', count: 13, percent: 0.13},
|
||||||
|
{item: '事例五', count: 9, percent: 0.09}
|
||||||
|
];
|
||||||
|
const chart2 = new G2.Chart({
|
||||||
|
container: 'c2',
|
||||||
|
forceFit: true,
|
||||||
|
height: 300,
|
||||||
|
padding: [20, 20, 20, 20]
|
||||||
|
});
|
||||||
|
chart2.source(data2, {
|
||||||
|
percent: {
|
||||||
|
formatter: val => {
|
||||||
|
val = (val * 100) + '%';
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart2.coord('theta', {
|
||||||
|
radius: 0.75
|
||||||
|
});
|
||||||
|
chart2.tooltip({
|
||||||
|
showTitle: false,
|
||||||
|
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
||||||
|
});
|
||||||
|
chart2.intervalStack()
|
||||||
|
.position('percent')
|
||||||
|
.color('item')
|
||||||
|
.label('percent', {
|
||||||
|
formatter: (val, item) => {
|
||||||
|
return item.point.item + ': ' + val;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.tooltip('item*percent', (item, percent) => {
|
||||||
|
percent = percent * 100 + '%';
|
||||||
|
return {
|
||||||
|
name: item,
|
||||||
|
value: percent
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.style({
|
||||||
|
lineWidth: 1,
|
||||||
|
stroke: '#fff'
|
||||||
|
});
|
||||||
|
chart2.render();
|
||||||
|
|
||||||
|
const data3 = [
|
||||||
|
{year: '1951 年', sales: 38},
|
||||||
|
{year: '1952 年', sales: 52},
|
||||||
|
{year: '1956 年', sales: 61},
|
||||||
|
{year: '1957 年', sales: 145},
|
||||||
|
{year: '1958 年', sales: 48},
|
||||||
|
{year: '1959 年', sales: 38},
|
||||||
|
{year: '1960 年', sales: 38},
|
||||||
|
{year: '1962 年', sales: 38}
|
||||||
|
];
|
||||||
|
const chart3 = new G2.Chart({
|
||||||
|
container: 'c3',
|
||||||
|
forceFit: true,
|
||||||
|
height: 300,
|
||||||
|
padding: [20, 20, 20, 20]
|
||||||
|
});
|
||||||
|
chart3.source(data3);
|
||||||
|
chart3.scale('sales', {
|
||||||
|
tickInterval: 20
|
||||||
|
});
|
||||||
|
chart3.interval().position('year*sales');
|
||||||
|
chart3.render();
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'device-map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
pitch: 0,
|
||||||
|
style: 'light',
|
||||||
|
center: [121.410765, 31.256735],
|
||||||
|
zoom: 14.83
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
scene.addImage(
|
||||||
|
'00',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||||
|
);
|
||||||
|
scene.addImage(
|
||||||
|
'01',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
|
||||||
|
);
|
||||||
|
scene.addImage(
|
||||||
|
'02',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||||
|
);
|
||||||
|
const imageLayer = new PointLayer()
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'longitude',
|
||||||
|
y: 'latitude'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.shape('name', ['00', '01', '02'])
|
||||||
|
.size(20);
|
||||||
|
scene.addLayer(imageLayer);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#device-map {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<el-col :span="4" class="header_item">
|
||||||
|
<img class="logo" src="/images/logo/logo.png">
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16" class="header_item">
|
||||||
|
<el-menu class="menu"
|
||||||
|
:default-active="this.$route.path"
|
||||||
|
mode="horizontal"
|
||||||
|
:router=true>
|
||||||
|
<el-menu-item index="/home"><span class="el-icon-menu"/>首页</el-menu-item>
|
||||||
|
<el-menu-item index="/driver">驱动</el-menu-item>
|
||||||
|
<el-menu-item index="/connect">连接</el-menu-item>
|
||||||
|
<el-menu-item index="/attribute">属性</el-menu-item>
|
||||||
|
<el-menu-item index="/profile">模板</el-menu-item>
|
||||||
|
<el-menu-item index="/point">位号</el-menu-item>
|
||||||
|
<el-menu-item index="/group">分组</el-menu-item>
|
||||||
|
<el-menu-item index="/device">设备</el-menu-item>
|
||||||
|
<el-menu-item index="/config">配置</el-menu-item>
|
||||||
|
<el-menu-item index="/schedule">任务</el-menu-item>
|
||||||
|
<!--<el-menu-item index="/now">实时</el-menu-item>
|
||||||
|
<el-menu-item index="/history">历史</el-menu-item>
|
||||||
|
<el-menu-item index="/video">视频</el-menu-item>
|
||||||
|
<el-menu-item index="/alarm">报警</el-menu-item>
|
||||||
|
<el-menu-item index="/setting">设置</el-menu-item>
|
||||||
|
<el-menu-item index="/about">关于</el-menu-item>-->
|
||||||
|
</el-menu>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2" class="header_item">
|
||||||
|
<el-badge :value="12" :max="99" class="badge_item" type="primary">
|
||||||
|
<span class="span_small" @click="handleMessage">消息</span>
|
||||||
|
</el-badge>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2" class="header_item">
|
||||||
|
<el-dropdown class="avatar_item" @command="handleCommand">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<el-avatar>
|
||||||
|
<img src="/images/common/avatar.png">
|
||||||
|
</el-avatar>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="profile">个人信息</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="help">帮助</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
<span class="span_small avatar">管理员</span>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<GeminiScrollbar>
|
||||||
|
<router-view/>
|
||||||
|
</GeminiScrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleMessage() {
|
||||||
|
this.$message('click on message');
|
||||||
|
},
|
||||||
|
handleCommand(command) {
|
||||||
|
this.$message('click on item ' + command);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 1366px;
|
||||||
|
min-height: 768px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
color: #2c3e50;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
border-bottom: 1px solid #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_item {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 60px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu .el-menu-item {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge_item {
|
||||||
|
top: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span_small {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span_small.avatar {
|
||||||
|
margin: 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar_item {
|
||||||
|
top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
top: 60px;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 4px 1px 4px 4px;
|
||||||
|
position: absolute;
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="login-wrapper-left animated bounceInDown">
|
||||||
|
<div class="login-left">
|
||||||
|
<img class="img" src="/images/logo/logo-white.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<particles/>
|
||||||
|
<div class="login-wrapper-right animated bounceInDown">
|
||||||
|
<div class="login-border">
|
||||||
|
<div class="login-main">
|
||||||
|
<h4 class="login-title">
|
||||||
|
登录 DC3 Web UI
|
||||||
|
</h4>
|
||||||
|
<el-form class="login-form"
|
||||||
|
status-icon
|
||||||
|
:rules="loginRules"
|
||||||
|
ref="loginForm"
|
||||||
|
:model="loginForm"
|
||||||
|
label-width="0">
|
||||||
|
<el-form-item prop="name">
|
||||||
|
<el-input size="small"
|
||||||
|
@keyup.enter.native="handleLogin"
|
||||||
|
v-model="loginForm.name"
|
||||||
|
auto-complete="off"
|
||||||
|
placeholder="请输入用户名">
|
||||||
|
<i slot="prefix" class="el-icon-user"/>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input size="small"
|
||||||
|
@keyup.enter.native="handleLogin"
|
||||||
|
:type="passwordType"
|
||||||
|
v-model="loginForm.password"
|
||||||
|
auto-complete="off"
|
||||||
|
placeholder="请输入密码">
|
||||||
|
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
|
||||||
|
<i slot="prefix" class="el-icon-lock"/>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary"
|
||||||
|
size="small"
|
||||||
|
@click.native.prevent="handleLogin"
|
||||||
|
class="login-submit">登录
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import particles from "@/components/particles/particles";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "login",
|
||||||
|
components: {particles},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loginForm: {
|
||||||
|
name: "pnoker",
|
||||||
|
password: "dc3dc3dc3"
|
||||||
|
},
|
||||||
|
loginRules: {
|
||||||
|
name: [
|
||||||
|
{required: true, message: "请输入用户名", trigger: "blur"}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{required: true, message: "请输入密码", trigger: "blur"},
|
||||||
|
{min: 1, message: "密码长度最少为6位", trigger: "blur"}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
passwordType: "password"
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showPassword() {
|
||||||
|
this.passwordType === ""
|
||||||
|
? (this.passwordType = "password")
|
||||||
|
: (this.passwordType = "");
|
||||||
|
},
|
||||||
|
handleLogin() {
|
||||||
|
this.$refs.loginForm.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
const loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '登录中,请稍后。。。',
|
||||||
|
spinner: "el-icon-loading"
|
||||||
|
});
|
||||||
|
this.$store.dispatch("GenerateToken", this.loginForm).then(() => {
|
||||||
|
this.$router.push({path: '/'});
|
||||||
|
setTimeout(() => loading.close(), 500);
|
||||||
|
}).catch(() => {
|
||||||
|
loading.close()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "~@/assets/styles/login.scss";
|
||||||
|
</style>
|
||||||
@ -0,0 +1,383 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {pointApi, profileApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '位号',
|
||||||
|
prop: 'name',
|
||||||
|
width: 220,
|
||||||
|
span: 16,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 位号名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的位号名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的位号名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '类型',
|
||||||
|
prop: 'type',
|
||||||
|
width: 120,
|
||||||
|
span: 8,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 4,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: 'string',
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '字符串',
|
||||||
|
value: 'string'
|
||||||
|
}, {
|
||||||
|
label: '整数',
|
||||||
|
value: 'int'
|
||||||
|
}, {
|
||||||
|
label: '双精度浮点数',
|
||||||
|
value: 'double'
|
||||||
|
}, {
|
||||||
|
label: '浮点数',
|
||||||
|
value: 'float'
|
||||||
|
}, {
|
||||||
|
label: '长整数',
|
||||||
|
value: 'long'
|
||||||
|
}, {
|
||||||
|
label: '开关量',
|
||||||
|
value: 'boolean'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择位号数据类型',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '读/写',
|
||||||
|
prop: 'rw',
|
||||||
|
width: 100,
|
||||||
|
span: 8,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 4,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: 0,
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '只读',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
label: '只写',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
label: '读写',
|
||||||
|
value: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择位号读写类型',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '累计标识',
|
||||||
|
prop: 'accrue',
|
||||||
|
width: 100,
|
||||||
|
span: 8,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 4,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: false,
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '累计',
|
||||||
|
value: true
|
||||||
|
}, {
|
||||||
|
label: '不累计',
|
||||||
|
value: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择位号是否为累计数据',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '值',
|
||||||
|
prop: 'value',
|
||||||
|
width: 100,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12,
|
||||||
|
disabled: true,
|
||||||
|
value: '--'
|
||||||
|
}, {
|
||||||
|
label: '最小值',
|
||||||
|
prop: 'minimum',
|
||||||
|
width: 100,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12,
|
||||||
|
value: -999999,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
pattern: /^-?(([0-9]*(\.[0-9]{1,3})$)|([0-9]+$))/,
|
||||||
|
message: '请输入 正确格式的最小值'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '最大值',
|
||||||
|
prop: 'maximum',
|
||||||
|
width: 100,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12,
|
||||||
|
value: 999999,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
pattern: /^-?(([0-9]*(\.[0-9]{1,3})$)|([0-9]+$))/,
|
||||||
|
message: '请输入 正确格式的最大值'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '倍数',
|
||||||
|
prop: 'multiple',
|
||||||
|
width: 80,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12,
|
||||||
|
value: 1,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 倍数',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^-?(([0-9]*(\.[0-9]{1,3})$)|([0-9]+$))/,
|
||||||
|
message: '请输入 正确格式的倍数'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '基值',
|
||||||
|
prop: 'base',
|
||||||
|
width: 80,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12,
|
||||||
|
value: 0,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
pattern: /^-?(([0-9]*(\.[0-9]{1,3})$)|([0-9]+$))/,
|
||||||
|
message: '请输入 正确格式的基值'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '格式',
|
||||||
|
prop: 'format',
|
||||||
|
width: 80,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12,
|
||||||
|
value: '%.3f',
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 格式',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '单位',
|
||||||
|
prop: 'unit',
|
||||||
|
width: 80,
|
||||||
|
span: 8,
|
||||||
|
searchSpan: 12
|
||||||
|
}, {
|
||||||
|
label: '所属模板',
|
||||||
|
prop: 'profileId',
|
||||||
|
width: 220,
|
||||||
|
span: 24,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'tree',
|
||||||
|
dicData: [],
|
||||||
|
defaultExpandAll: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属模板',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 200,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.profile();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
pointApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
profile() {
|
||||||
|
profileApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('profileId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
pointApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return pointApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
pointApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-save="listAdd"
|
||||||
|
@row-del="listDelete"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {driverApi, profileApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '模板',
|
||||||
|
prop: 'name',
|
||||||
|
span: 24,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 12,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 模板名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
min: 2,
|
||||||
|
max: 32,
|
||||||
|
message: '请输入 2~32 位字长的模板名称',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
|
||||||
|
message: '请输入 正确格式的模板名称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '公/私有',
|
||||||
|
prop: 'share',
|
||||||
|
width: 100,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: true,
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '公有',
|
||||||
|
value: true
|
||||||
|
}, {
|
||||||
|
label: '私有',
|
||||||
|
value: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择模板共享类型',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '所属驱动',
|
||||||
|
prop: 'driverId',
|
||||||
|
search: true,
|
||||||
|
searchSpan: 6,
|
||||||
|
type: 'select',
|
||||||
|
filterable: true,
|
||||||
|
searchFilterable: true,
|
||||||
|
dicData: [],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择所属驱动',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 200,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.driver();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
profileApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
driver() {
|
||||||
|
driverApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('driverId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listAdd(row, done, loading) {
|
||||||
|
profileApi.add(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listDelete(row) {
|
||||||
|
this.$confirm('是否删除该条数据？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return profileApi.delete(row.id);
|
||||||
|
}).then(() => {
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
profileApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="listOption"
|
||||||
|
:data="listData"
|
||||||
|
:page="page"
|
||||||
|
:table-loading="loading"
|
||||||
|
ref="crud"
|
||||||
|
v-model="listForm"
|
||||||
|
@on-load="list"
|
||||||
|
@row-update="listUpdate"
|
||||||
|
@search-reset="searchReset"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {deviceApi, scheduleApi} from '@/api/manager'
|
||||||
|
import {successMessage} from "@/util/util";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: {},
|
||||||
|
listForm: {},
|
||||||
|
listData: [],
|
||||||
|
listOption: {
|
||||||
|
tip: false,
|
||||||
|
index: true,
|
||||||
|
stripe: true,
|
||||||
|
border: true,
|
||||||
|
addBtn: false,
|
||||||
|
viewBtn: true,
|
||||||
|
delBtn: false,
|
||||||
|
height: 664,
|
||||||
|
align: 'center',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '任务',
|
||||||
|
prop: 'name',
|
||||||
|
span: 12,
|
||||||
|
disabled: true
|
||||||
|
}, {
|
||||||
|
label: '所属设备',
|
||||||
|
prop: 'deviceId',
|
||||||
|
span: 12,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 16,
|
||||||
|
disabled: true,
|
||||||
|
type: 'tree',
|
||||||
|
dicData: [],
|
||||||
|
defaultExpandAll: true
|
||||||
|
}, {
|
||||||
|
label: '表达式',
|
||||||
|
prop: 'cornExpression',
|
||||||
|
span: 18,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入 调度表达式',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
span: 6,
|
||||||
|
width: 80,
|
||||||
|
search: true,
|
||||||
|
searchSpan: 8,
|
||||||
|
type: 'select',
|
||||||
|
searchFilterable: true,
|
||||||
|
value: 2,
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '停止',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
label: '启动',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
label: '暂停',
|
||||||
|
value: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择状态',
|
||||||
|
trigger: 'click'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '备注',
|
||||||
|
prop: 'description',
|
||||||
|
width: 300,
|
||||||
|
span: 24,
|
||||||
|
type: 'textarea',
|
||||||
|
overHidden: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
max: 380,
|
||||||
|
message: '最多输入380个字符',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: '修改日期',
|
||||||
|
prop: 'updateTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}, {
|
||||||
|
label: '创建日期',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 155,
|
||||||
|
span: 12,
|
||||||
|
disabled: true,
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
page: {
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.device();
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
list(page) {
|
||||||
|
this.loading = true;
|
||||||
|
scheduleApi.list(Object.assign({
|
||||||
|
page: {
|
||||||
|
current: page.currentPage,
|
||||||
|
size: page.pageSize
|
||||||
|
}
|
||||||
|
}, this.query)).then(res => {
|
||||||
|
const data = res.data;
|
||||||
|
this.page.total = data.total;
|
||||||
|
this.listData = data.records;
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
device() {
|
||||||
|
deviceApi.dictionary().then(res => {
|
||||||
|
this.listOption.column[this.$refs.crud.findColumnIndex('deviceId')].dicData = res.data;
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
listUpdate(row, index, done, loading) {
|
||||||
|
scheduleApi.update(row).then(() => {
|
||||||
|
loading();
|
||||||
|
this.list(this.page);
|
||||||
|
successMessage();
|
||||||
|
}).finally(() => {
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshChange() {
|
||||||
|
this.list(this.page);
|
||||||
|
},
|
||||||
|
currentChange(page) {
|
||||||
|
this.page.currentPage = page;
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
},
|
||||||
|
searchChange(params, done) {
|
||||||
|
this.query = params;
|
||||||
|
this.list(this.page);
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
searchReset() {
|
||||||
|
this.query = {};
|
||||||
|
this.list(this.page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
@ -1,5 +1,33 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
publicPath: './',
|
publicPath: './',
|
||||||
lintOnSave: true,
|
lintOnSave: true,
|
||||||
productionSourceMap: false
|
productionSourceMap: false,
|
||||||
}
|
devServer: {
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8400',
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true,
|
||||||
|
pathRewrite: {
|
||||||
|
'^/api': ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'/user_api': {
|
||||||
|
target: 'http://dc3-auth:8300',
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true,
|
||||||
|
pathRewrite: {
|
||||||
|
'^/user_api': ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'/device_api': {
|
||||||
|
target: 'http://dc3-manager:8400',
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true,
|
||||||
|
pathRewrite: {
|
||||||
|
'^/device_api': ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in new issue