zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add plotting function

This commit is contained in:
weijianli 2019-09-29 11:04:51 -05:00
parent e2d02adffc
commit e1fb05b4b2
7 changed files with 216 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
mock/user.js
View File

@ -80,5 +80,17 @@ export default [
data: 'success'
}
}
},
// plot prediction graph
{
url: '/testpredict',
type: 'get',
response: _ => {
return {
code: 20000,
token: 'success'
}
}
}
]

10
src/api/user.js
View File

@ -3,7 +3,7 @@ import request from '@/utils/request'
export function login(data) {
return request({
url: '/user/login',
baseURL: 'http://localhost:8888',
baseURL: 'http://localhost:8010',
method: 'post',
data
})
@ -29,9 +29,9 @@ export function sendAnalyzeRequest(token) {
return request({
url: '/testpredict',
method: 'get',
baseURL: 'http://localhost:8888',
authorization: token,
params: { token }
// baseURL: 'http://localhost:8010',
// authorization: token,
// params: { token }
})
}
@ -39,7 +39,7 @@ export function sendAnalyzeOnDateRequest(token, fromDate, toDate) {
return request({
url: '/predictOnDate',
method: 'get',
baseURL: 'http://localhost:8888',
baseURL: 'http://localhost:8010',
authorization: token,
params: { token, fromDate, toDate }
})

15
src/router/index.js
View File

@ -110,6 +110,21 @@ export const constantRoutes = [
}
]
},
{
path: '/plotTest',
hidden: true,
component: Layout,
props: true,
children: [
{
path: 'plotTest',
component: () => import('@/views/plotTest/plotTest'),
props: true,
name: 'plotTest',
meta: { title: 'plotTest', icon: 'chart' }
}
]
},
{
path: '/analyzing',
hidden: true,

44
src/views/VueUploader/index.vue
View File

@ -531,25 +531,33 @@ export default {
},
onSendAnalyzeRequest() {
this.$router.push({ name: "analyze" })
this.listLoading = true
sendAnalyzeRequest().then(response => {
// console.log("success!")
// this.list = response.data.items
// this.listLoading = false
var token = response['token']
// if the response from the server indicating that it's running the analysis, then redirect to a loading view
if (token == 'success') {
this.$router.push({ name: "plot" })
// sendAnalyzeRequest().then(response => {
// this.list = response.data.items
// this.listLoading = false
// }
var k = [100, 120, 161, 134, 105, 160, 165,190,200]
this.$router.push({ name: "plotTest", params: {
past: {
yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
xAxisData: ['2019-7-13', '2019-7-14', '2019-7-15', '2019-7-16', '2019-7-17', '2019-7-18', '2019-7-19', '2019-7-20','2019-7-21','2019-7-22'] ,
label: 'Past',
colorPicked: '#999997'
},
future: {
yAxisData: [260, 230, 270, 285, 295, 300, 310,330],
xAxisData: ['2019-8-13', '2019-8-14', '2019-8-15', '2019-8-16', '2019-8-17', '2019-8-18', '2019-8-19', '2019-8-20'] ,
label: 'Future',
colorPicked: '#519e19'
}
})
}})
// this.$router.push({ name: "analyze" })
// this.listLoading = true
// sendAnalyzeRequest().then(response => {
// var token = response['token']
//
// // if the response from the server indicating that it's running the analysis, then redirect to a loading view
// if (token == 'success') {
// this.$router.push({ name: "plot" })
// }
// })
}
}
}

58
src/views/dashboard/admin/components/LineChart.vue
View File

@ -5,6 +5,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
require('echarts/theme/vintage')
import resize from './mixins/resize'
export default {
@ -61,10 +62,10 @@ export default {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({ expectedData, actualData } = {}) {
setOptions({ xAxisData, yAxisData, label, colorPicked} = {}) {
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: xAxisData,
boundaryGap: false,
axisTick: {
show: false
@ -90,44 +91,45 @@ export default {
}
},
legend: {
data: ['expected', 'actual']
data: [label]
},
series: [{
name: 'expected', itemStyle: {
name: label, itemStyle: {
normal: {
color: '#FF005A',
color: colorPicked,
lineStyle: {
color: '#FF005A',
width: 2
color: colorPicked,
width: 3
}
}
},
smooth: true,
type: 'line',
data: expectedData,
data: yAxisData,
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
// {
// name: 'actual',
// smooth: true,
// type: 'line',
// itemStyle: {
// normal: {
// color: '#3888fa',
// lineStyle: {
// color: '#3888fa',
// width: 3
// },
// areaStyle: {
// color: '#f3f8ff'
// }
// }
// },
// data: actualData,
// animationDuration: 2800,
// animationEasing: 'quadraticOut'
// }
]
})
}
}

7
src/views/login/index.vue
View File

@ -3,7 +3,7 @@
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<div class="title-container">
<h3 class="title">Login Form</h3>
<h3 class="title">Magics Brain Login</h3>
</div>
<el-form-item prop="username">
@ -47,7 +47,7 @@
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
<div style="position:relative">
<!-- <div style="position:relative">
<div class="tips">
<span>Username : admin</span>
<span>Password : any</span>
@ -60,7 +60,7 @@
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
Or connect with
</el-button>
</div>
</div> -->
</el-form>
<el-dialog title="Or connect with" :visible.sync="showDialog">
@ -170,6 +170,7 @@ export default {
this.loading = false
})
.catch(() => {
alert("Password is incorrect")
this.loading = false
})
} else {

121
src/views/plotTest/plotTest.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div>
<div class="dashboard-editor-container">
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<!-- <line-chart :chart-data="{xAxisData, yAxisData, label}" /> -->
<h2>History Plot</h2>
<line-chart :chart-data="past" />
<h2>Prediction Plot</h2>
<line-chart :chart-data="future" />
</el-row>
</div>
<div>
</div>
</div>
</template>
<script>
import LineChart from '@/views/dashboard/admin/components/LineChart'
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from '@/views/dashboard/admin/components/PanelGroup'
import RaddarChart from '@/views/dashboard/admin/components/RaddarChart'
import PieChart from '@/views/dashboard/admin/components/PieChart'
import BarChart from '@/views/dashboard/admin/components/BarChart'
import TransactionTable from '@/views/dashboard/admin/components/TransactionTable'
import TodoList from '@/views/dashboard/admin/components/TodoList'
import BoxCard from '@/views/dashboard/admin/components/BoxCard'
import router from '@/router'
const lineChartData = {
newVisitis: {
xAxisData: [120, 82, 91, 154, 162, 140, 145,230],
yAxisData: ['120', '82', '91', '154', '162', '140', '145','230'],
label: 'Future'
},
}
export default {
name: 'DashboardAdmin',
components: {
GithubCorner,
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart,
TransactionTable,
TodoList,
BoxCard
},
props: {
past: {
xAxisData: {
default: [120, 82, 91, 154, 162, 140, 145,230]
},
yAxisData: {
default: ['a', 'x', 'c', 'd', 'e', 'f', 'g', 'h']
},
label: {
default: 'Future'
},
colorPicked: {
default: '#999997'
}
},
future: {
xAxisData: {
default: [120, 82, 91, 154, 162, 140, 145,230]
},
yAxisData: {
default: ['a', 'x', 'c', 'd', 'e', 'f', 'g', 'h']
},
label: {
default: 'Future'
},
colorPicker: {
default: '#999997'
}
}
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>