|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 1012 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>fwq-2</title><link href="css/app.de623f0f.css" rel="preload" as="style"><link href="css/chunk-vendors.9181e156.css" rel="preload" as="style"><link href="js/app.8a80ad6a.js" rel="preload" as="script"><link href="js/chunk-vendors.eab96ded.js" rel="preload" as="script"><link href="css/chunk-vendors.9181e156.css" rel="stylesheet"><link href="css/app.de623f0f.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but fwq-2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.eab96ded.js"></script><script src="js/app.8a80ad6a.js"></script></body></html>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 413 KiB |
|
After Width: | Height: | Size: 409 KiB |
@ -0,0 +1,21 @@
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
margin-bottom: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 1012 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div :id="ip"
|
||||
style="width: 100%;height: 300px;background:white;">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'TempCharts',
|
||||
props: ['ip'],
|
||||
data () {
|
||||
return {
|
||||
tempList: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2000-06-12', 68], ['2000-06-13', 92], ['2000-06-14', 130], ['2000-06-15', 245], ['2000-06-16', 139], ['2000-06-17', 115], ['2000-06-18', 111], ['2000-06-19', 309], ['2000-06-20', 206], ['2000-06-21', 137], ['2000-06-22', 128], ['2000-06-23', 85], ['2000-06-24', 94], ['2000-06-25', 71], ['2000-06-26', 106], ['2000-06-27', 84], ['2000-06-28', 93], ['2000-06-29', 85], ['2000-06-30', 73], ['2000-07-01', 83], ['2000-07-02', 125], ['2000-07-03', 107], ['2000-07-04', 82], ['2000-07-05', 44], ['2000-07-06', 72], ['2000-07-07', 106], ['2000-07-08', 107], ['2000-07-09', 66], ['2000-07-10', 91], ['2000-07-11', 92], ['2000-07-12', 113], ['2000-07-13', 107], ['2000-07-14', 131], ['2000-07-15', 111], ['2000-07-16', 64], ['2000-07-17', 69], ['2000-07-18', 88], ['2000-07-19', 77], ['2000-07-20', 83], ['2000-07-21', 111], ['2000-07-22', 57], ['2000-07-23', 55], ['2000-07-24', 60]],
|
||||
create_time: [],
|
||||
temp: [],
|
||||
myChart: {},
|
||||
option: {
|
||||
visualMap: {
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0,
|
||||
min: 20,
|
||||
max: 120
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: '温度监测 '
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
// data: this.create_time
|
||||
data: []
|
||||
},
|
||||
yAxis: {},
|
||||
|
||||
series: {
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// data: this.temp
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCharts () {
|
||||
this.myChart = echarts.init(document.getElementById(this.ip))
|
||||
// var data = this.tempList
|
||||
// var dateList = data.map(function (item) {
|
||||
// return item[0]
|
||||
// })
|
||||
// var valueList = data.map(function (item) {
|
||||
// return item[1]
|
||||
// })
|
||||
this.option.xAxis.data = this.create_time
|
||||
this.option.series.data = this.temp
|
||||
|
||||
this.myChart.setOption(this.option)
|
||||
},
|
||||
async getTempList () {
|
||||
// const { data: res } = await this.$http.post('UserFan', { userIp: 'ip101311923' })
|
||||
const { data: res } = await this.$http.post('userFan', `userIp=${this.ip}`)
|
||||
|
||||
this.tempList = res
|
||||
this.create_time = []
|
||||
this.temp = []
|
||||
for (const i in this.tempList) {
|
||||
this.create_time.push(this.tempList[i].create_time)
|
||||
this.temp.push(this.tempList[i].temp)
|
||||
// this.option.xAxis.data.push(this.tempList[i].create_time)
|
||||
// this.option.series.data.push(this.tempList[i].temp)
|
||||
// console.log(this.option.series.data)
|
||||
}
|
||||
// console.log(this.create_time)
|
||||
// console.log(typeof (this.tempList))
|
||||
this.option.xAxis.data = this.create_time
|
||||
this.option.series.data = this.temp
|
||||
|
||||
this.myChart.setOption(this.option)
|
||||
},
|
||||
changeTemp () {
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initCharts()
|
||||
},
|
||||
created () {
|
||||
this.getTempList()
|
||||
setInterval(this.getTempList, 2000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div id="charts2" style="width: 100%;height: 300px;background:white;">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'TempCharts2',
|
||||
data () {
|
||||
return {
|
||||
x: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCharts () {
|
||||
var x = this.x
|
||||
var myChart = echarts.init(document.getElementById('charts2'))
|
||||
|
||||
var data = [['12:06:05', 40], ['12:06:06', 43], ['12:06:07', 45], ['12:06:08', 47], ['12:06:09', 50], ['12:06:10', 54], ['12:06:11', 60], ['12:06:12', 66], ['12:06:13', 70], ['12:06:14', 66], ['12:06:15', 65], ['12:06:16', 64], ['12:06:17', 60], ['12:06:18', 58], ['12:06:19', 57], ['12:06:20', 55], ['12:06:21', 54], ['12:06:22', 50], ['12:06:23', 49], ['12:06:24', 48], ['12:06:25', 47], ['12:06:26', 44], ['12:06:27', 50], ['12:06:28', 56], ['12:06:29', 60], ['12:06:30', 68], ['12:07:01', 70], ['12:07:02', 66], ['12:07:03', 65], ['12:07:04', 63], ['12:07:05', 60], ['12:07:06', 58], ['12:07:07', 56], ['12:07:08', 54], ['12:07:09', 53], ['12:07:10', 50], ['12:07:11', 47], ['12:07:12', 46], ['12:07:13', 48], ['12:07:14', 50], ['12:07:15', 54], ['12:07:16', 60], ['12:07:17', 66], ['12:07:18', 64], ['12:07:19', 60], ['12:07:20', 58], ['12:07:21', 57], ['12:07:22', 55], ['12:07:23', 53], ['12:07:24', 50]]
|
||||
var dateList = data.map(function (item) {
|
||||
return item[0]
|
||||
})
|
||||
var valueList = data.map(function (item) {
|
||||
return item[1]
|
||||
})
|
||||
var option = {
|
||||
|
||||
visualMap: {
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0,
|
||||
min: 30,
|
||||
max: 120
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: '温度监测'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: dateList
|
||||
},
|
||||
yAxis: {},
|
||||
|
||||
series: {
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: valueList
|
||||
}
|
||||
}
|
||||
myChart.setOption(option)
|
||||
|
||||
setInterval(function () {
|
||||
x = parseInt(Math.random() * (5 - (-5) + 1) + (-5), 10)
|
||||
data.shift()
|
||||
data.push(['12:07:24', 40 + x])
|
||||
dateList = data.map(function (item) {
|
||||
return item[0]
|
||||
})
|
||||
valueList = data.map(function (item) {
|
||||
return item[1]
|
||||
})
|
||||
option = {
|
||||
|
||||
visualMap: {
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0,
|
||||
min: 30,
|
||||
max: 120
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: '温度监测'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: dateList
|
||||
},
|
||||
yAxis: {},
|
||||
|
||||
series: {
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: valueList
|
||||
}
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.initCharts()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<el-container class="home-container">
|
||||
<!-- 头部区域-->
|
||||
<el-header>
|
||||
<div> 温控中心</div>
|
||||
</el-header>
|
||||
<el-container class="home-container">
|
||||
<!-- 侧边栏-->
|
||||
<el-aside
|
||||
:width="isCollapse ? '64px' : '200px'"
|
||||
style="background:#40407a;"
|
||||
>
|
||||
<div
|
||||
class="toggle-button"
|
||||
@click="toggleCollapse"
|
||||
>|||</div>
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
background-color="#40407a"
|
||||
text-color="#aaa69d"
|
||||
active-text-color="#fff"
|
||||
:default-active="activePath"
|
||||
:unique-opened="true"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
router
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>服务器管理</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
index="mainmenu"
|
||||
@click="saveNavState(item.frame_id.toString())"
|
||||
v-for="item in frameList"
|
||||
:key="item.frame_id"
|
||||
><i class="el-icon-menu"></i>
|
||||
<span>{{item.frame_name}}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<!-- <el-menu-item
|
||||
index="mainmenu"
|
||||
@click="saveNavState('mainmenu')"
|
||||
> <i class="el-icon-video-camera-solid"></i><span>数据库中心</span></el-menu-item> -->
|
||||
<el-menu-item
|
||||
index="groups"
|
||||
@click="saveNavState('groups')"
|
||||
> <i class="el-icon-video-camera-solid"></i><span>机组管理</span></el-menu-item>
|
||||
<el-menu-item
|
||||
index="users"
|
||||
@click="saveNavState('users')"
|
||||
> <i class="el-icon-video-camera-solid"></i><span>用户管理</span></el-menu-item>
|
||||
<el-menu-item
|
||||
index="list"
|
||||
@click="saveNavState('list')"
|
||||
> <i class="el-icon-video-camera-solid"></i><span>联系我们</span></el-menu-item>
|
||||
<!-- <el-menu-item index="/" ><i class="el-icon-video-camera-solid"></i><sapn>返回主页</sapn></el-menu-item> -->
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<!-- 主界面-->
|
||||
<el-main>
|
||||
<router-view :key="activePath"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
// 是否折叠
|
||||
isCollapse: false,
|
||||
activePath: 'default',
|
||||
username: '',
|
||||
loginTime: '',
|
||||
frameList: ''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout () {
|
||||
window.sessionStorage.clear()
|
||||
this.$router.push('/login')
|
||||
},
|
||||
// 展开侧边栏
|
||||
toggleCollapse () {
|
||||
this.isCollapse = !this.isCollapse
|
||||
},
|
||||
// 存储现激活地址
|
||||
saveNavState (activePath) {
|
||||
window.sessionStorage.setItem('activePath', activePath)
|
||||
this.activePath = activePath
|
||||
},
|
||||
async getFrameList () {
|
||||
const { data: res } = await this.$http.get('/frame/list')
|
||||
this.frameList = res.data
|
||||
console.log(res.data)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getFrameList()
|
||||
// console.log(this.roleList)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.home-container {
|
||||
height: 100%;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
background: #2b5876; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(
|
||||
to right,
|
||||
#4e4376,
|
||||
#2b5876
|
||||
); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#4e4376,
|
||||
#2b5876
|
||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
justify-content: center;
|
||||
}
|
||||
.el-header {
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background: #fff;
|
||||
transition: 1s;
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background: #eaedf1;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
background: #4a5064;
|
||||
font-size: 10px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
letter-spacing: 0.3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.home-container {
|
||||
height: 100%;
|
||||
}
|
||||
el-aside {
|
||||
transition: 1s;
|
||||
}
|
||||
.el-submenu__title {
|
||||
transition: 1s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<el-table :data="tableData"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column align="center"
|
||||
prop="name"
|
||||
label="姓名">
|
||||
</el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop="mobile"
|
||||
label="电话">
|
||||
</el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop="email"
|
||||
label="电子邮箱">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tableData: [{
|
||||
name: '徐科',
|
||||
mobile: '13789489016',
|
||||
email: '1037148022@qq.com'
|
||||
}, {
|
||||
name: '张旭',
|
||||
mobile: '16604731667',
|
||||
email: '1311233155@qq.com'
|
||||
}, {
|
||||
name: '崔浩',
|
||||
mobile: '15164880142',
|
||||
email: '1837453473@qq.com'
|
||||
}, {
|
||||
name: '郭佳怡',
|
||||
mobile: '13224803150',
|
||||
email: 'gjy459gy@163.com'
|
||||
}, {
|
||||
name: '王文宇',
|
||||
mobile: '15540189913',
|
||||
email: '1037148022@qq.com'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-table {
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import ElementUI from 'element-ui'
|
||||
import './assets/css/global.css'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import axios from 'axios'
|
||||
import * as echarts from 'echarts'
|
||||
axios.defaults.baseURL = 'http://110.40.152.26:9016' // 请求跟路径
|
||||
Vue.use(ElementUI)
|
||||
Vue.prototype.$http = axios // axios的全局调用配置
|
||||
new Vue({
|
||||
router,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$echarts = echarts
|
||||
@ -0,0 +1,59 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../components/Home.vue'
|
||||
import Login from '../components/Login.vue'
|
||||
// import Menu from '../components/main/Menu.vue'
|
||||
import MyUserList from '../components/main/MyUserList.vue'
|
||||
import MyMenu from '../components/main/MyMenu.vue'
|
||||
import Users from '../components/main/users/Users.vue'
|
||||
import Groups from '../components/main/groups/Groups.vue'
|
||||
import Main from '../components/main/Main.vue'
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/home'
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: '/Main',
|
||||
component: Main,
|
||||
children: [
|
||||
{
|
||||
path: '/list',
|
||||
component: MyUserList
|
||||
},
|
||||
{
|
||||
path: '/mainmenu',
|
||||
component: MyMenu
|
||||
},
|
||||
{
|
||||
path: '/users',
|
||||
component: Users
|
||||
},
|
||||
{
|
||||
path: '/groups',
|
||||
component: Groups
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/groups'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||