Merge pull request #4 from nowcastsystem/weijian

Weijian

mock/user.js

@@ -26,7 +26,7 @@ const users = {
 export default [
   // user login
   {
-    url: '/user/login',
+    url: '/user/loogin',
     type: 'post',
     response: config => {
       const { username } = config.body
@@ -80,5 +80,17 @@ export default [
         data: 'success'
       }
     }
+  },
+
+  // plot prediction graph
+  {
+    url: '/testpredict',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        token: 'success'
+      }
+    }
   }
 ]

src/api/user.js

@@ -3,6 +3,7 @@ import request from '@/utils/request'
 export function login(data) {
   return request({
     url: '/user/login',
+    baseURL: 'http://localhost:8010',
     method: 'post',
     data
   })
@@ -12,6 +13,7 @@ export function getInfo(token) {
   return request({
     url: '/user/info',
     method: 'get',
+    authorization: token,
     params: { token }
   })
 }
@@ -27,8 +29,9 @@ export function sendAnalyzeRequest(token) {
   return request({
     url: '/testpredict',
     method: 'get',
-    baseURL: 'http://localhost:8888',
+    // baseURL: 'http://localhost:8010',
-    params: { token }
+    // authorization: token,
+    // params: { token }
   })
 }
 
@@ -36,7 +39,8 @@ 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 }
   })
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -21,6 +21,7 @@
         class="nest-menu"
       />
     </el-submenu>
+<!--     <button type="button" class="btn btn-outline-light" style="margin-left: 5px" @click="addNewTask">+</button> -->
   </div>
 </template>
 
@@ -57,6 +58,12 @@ export default {
     return {}
   },
   methods: {
+    // addNewTask() {
+    //   this.item.children.push({
+    //     name: "Task 2",
+    //     path: ""
+    //   })
+    // },
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
@@ -67,6 +74,7 @@ export default {
           return true
         }
       })
+      // console.log(showingChildren)
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {

src/layout/components/Sidebar/index.vue

@@ -15,6 +15,7 @@
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
+    
   </div>
 </template>
 

src/layout/index.vue

@@ -5,7 +5,7 @@
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
-        <tags-view v-if="needTagsView" />
+        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
 <!--       <right-panel v-if="showSettings">

src/router/index.js

@@ -73,13 +73,13 @@ export const constantRoutes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/uploader',
+    redirect: '/vueUploader',
     children: [
       {
         path: 'vueUploader',
         component: () => import('@/views/VueUploader/index'),
-        name: 'VueUploader',
+        name: 'Task',
-        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+        meta: { title: 'Task', icon: 'documentation', affix: true }
       }
     ]
   },
@@ -91,8 +91,37 @@ export const constantRoutes = [
       {
         path: 'vueUploader',
         component: () => import('@/views/VueUploader/index'),
-        name: 'VueUploader',
+        name: 'Task',
-        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+        meta: { title: 'Task', icon: 'documentation', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/plot',
+    hidden: true,
+    component: Layout,
+
+    children: [
+      {
+        path: 'plot',
+        component: () => import('@/views/plot/plot'),
+        name: 'plot',
+        meta: { title: 'plot' }
+      }
+    ]
+  },
+  {
+    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' }
       }
     ]
   },

src/utils/request.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 500000 // request timeout
+  timeout: 5000 // request timeout
 })
 
 // request interceptor

src/views/VueUploader/components/taskList.vue

@@ -0,0 +1,49 @@
+ <template>
+  <div class="dropdown float-right">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {{ this.tasks[0].name }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+      <button class="dropdown-item" type="button" v-for="task in tasks" @click="currentTask = task.name" v-text="task.name"></button>
+      <div class="dropdown-divider"></div>
+      <form class="px-4 py-3">
+        <div class="form-group">
+          <label for="exampleDropdownFormEmail1">Task Name</label>
+          <input class="form-control" id="exampleDropdownFormEmail1" v-model="newTaskName">
+        </div>
+        <button type="submit" class="btn btn-primary" @click="addNewTask()">+ Add new task</button>
+        <button type="submit" class="btn btn-danger" @click="deleteTask">- Delete task</button>
+      </form>
+    </div>
+  </div>
+</template> 
+
+<script>
+  export default {
+    data: function() {
+      return {
+        tasks: [{name: "Task 1"}],
+        currentTask: "Task 1",
+        newTaskName: "",
+      }
+    },
+
+    methods: {
+      setCurrentTask(name) {
+        this.currentTask = name
+      },
+      addNewTask() {
+        this.tasks.push({name: this.newTaskName})
+      },
+      deleteTask() {
+        this.tasks.splice(this.tasks.indexOf({name: this.newTaskName}))
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .dropdown {
+    display: inline;
+  }
+</style>

src/views/VueUploader/index.vue

@@ -1,9 +1,10 @@
 <template>
 <div class="example-full">
-  <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
+  <taskList></taskList>
+<!--   <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
     <i class="fa fa-cog" aria-hidden="true"></i>
     Options
-  </button>
+  </button> -->
   <h1 id="example-title" class="example-title">Data Uploader</h1>
 
   <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
@@ -113,7 +114,7 @@
       </div>
       <button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
         <i class="fa fa-arrow-up" aria-hidden="true"></i>
-        Start Upload 
+        Start Upload
       </button>
       <button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest">
         Analyze
@@ -309,11 +310,12 @@ import Cropper from 'cropperjs'
 import ImageCompressor from '@xkeshi/image-compressor'
 import FileUpload from 'vue-upload-component'
 import { sendAnalyzeRequest } from '@/api/user'
+import taskList from '@/views/VueUploader/components/taskList'
 // import 'bootstrap'
 // import 'bootstrap/dist/css/bootstrap.min.css'
 export default {
   components: {
-    FileUpload,
+    FileUpload, taskList
   },
   data() {
     return {
@@ -332,7 +334,7 @@ export default {
       thread: 3,
       name: 'file',
       postAction: '/upload/post',
-      putAction: 'http://localhost:8888/uploader',
+      putAction: 'http://localhost:8010/uploader',
       headers: {
         'X-Csrf-Token': 'xxxx',
       },
@@ -529,25 +531,33 @@ export default {
     },
 
     onSendAnalyzeRequest() {
-        this.$router.push({ name: "analyze" })
+        var k = [100, 120, 161, 134, 105, 160, 165,190,200]
-        this.listLoading = true
+        this.$router.push({ name: "plotTest", params: {
-        sendAnalyzeRequest().then(response => {
+          past: {
-        // console.log("success!")
+            yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
-        // this.list = response.data.items
+            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'] ,
-        // this.listLoading = false
+            label: 'Past',
-        var token = response['token']
+            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'
+          }
+          }})
 
-        // if the response from the server indicating that it's running the analysis, then redirect to a loading view
+        // this.$router.push({ name: "analyze" })
-        if (token == 'success') {
+        // this.listLoading = true
-          this.$router.push({ name: "plot" })
+        // 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" })
+        // }
+      // })
 
-          // sendAnalyzeRequest().then(response => {
-          //   this.list = response.data.items
-          //   this.listLoading = false
-
-          // }
-        }
-      })
     }
   }
 }
@@ -728,7 +738,7 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
 
 
 
- 
+
 .file-uploads {
   overflow: hidden;
   position: relative;
@@ -756,4 +766,4 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
   opacity: 0;
 }
 </style>
- -->
+ -->

src/views/dashboard/admin/components/LineChart.vue

@@ -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',
+                color: colorPicked,
-                width: 2
+                width: 3
               }
             }
           },
           smooth: true,
           type: 'line',
-          data: expectedData,
+          data: yAxisData,
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
-        },
+        }
-        {
+        // {
-          name: 'actual',
+        //   name: 'actual',
-          smooth: true,
+        //   smooth: true,
-          type: 'line',
+        //   type: 'line',
-          itemStyle: {
+        //   itemStyle: {
-            normal: {
+        //     normal: {
-              color: '#3888fa',
+        //       color: '#3888fa',
-              lineStyle: {
+        //       lineStyle: {
-                color: '#3888fa',
+        //         color: '#3888fa',
-                width: 2
+        //         width: 3
-              },
+        //       },
-              areaStyle: {
+        //       areaStyle: {
-                color: '#f3f8ff'
+        //         color: '#f3f8ff'
-              }
+        //       }
-            }
+        //     }
-          },
+        //   },
-          data: actualData,
+        //   data: actualData,
-          animationDuration: 2800,
+        //   animationDuration: 2800,
-          animationEasing: 'quadraticOut'
+        //   animationEasing: 'quadraticOut'
-        }]
+        // }
+      ]
       })
     }
   }

src/views/login/index.vue

@@ -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 {

src/views/plot/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <!-- <div class="vue-spinner">
+    <Circle9 />
+    <h1>Analyzing....</h1>
+  </div> -->
+    <iframe src="http://localhost:808" width=1300 height=600></iframe>
+</template>
+
+<script>
+import Circle9 from 'vue-loading-spinner/src/components/Circle9'
+export default {
+  name: 'plot',
+  components: {
+    Circle9
+  }
+}
+</script>
+
+<style scoped>
+	.vue-spinner{
+		margin: 100px;
+		width: 50%;
+		height: 50%;
+		/*overflow: hidden;*/
+	}
+</style>

src/views/plot/plot.vue

@@ -1,14 +1,21 @@
 <template>
 	<div>
-	  <span style="font-weight: bold">You could also run the analysis on the data from the specific date range</span><br>
+		<div>
-	  <span>From: </span>
+		<span style="font-weight: bold">You could also run the analysis on the data from the specific date range</span><br>
-	  <Datepicker v-model="state.from" style="display: inline-block" :bootstrap-styling="true">
+		<span>From: </span>
-	  </Datepicker>
+		<Datepicker v-model="state.from" style="display: inline-block" :bootstrap-styling="true">
-	  <span>To: </span>
+		</Datepicker>
-	  <Datepicker v-model="state.to" style="display: inline-block" :bootstrap-styling="true"></Datepicker>
+		<span>To: </span>
-	  <button type="button" class="btn btn-success" @click="onSendAnalyzeOnDateRequest">Apply</button>
+		<Datepicker v-model="state.to" style="display: inline-block" :bootstrap-styling="true"></Datepicker>
+		<button type="button" class="btn btn-success" @click="onSendAnalyzeOnDateRequest">Apply</button>
+		</div>
+		<div>
+		<iframe src="http://localhost:808" width=1000 height=600></iframe>
+		</div>
+		<div>
+		<button type="button" class="btn btn-secondary" @click="onBackToUpload">Back</button>
+		</div>
     </div>
-    <iframe src="http://localhost:808" width=1300 height=600></iframe>
 </template>
 
 <script>
@@ -39,6 +46,9 @@ export default {
 	          this.$router.push({ name: "plot" })
 	        }
 	    })
+	  },
+	  onBackToUpload() {
+	  	this.$router.push({ name: "Task" })
 	  }
   }
 }

src/views/plotTest/plotTest.vue

@@ -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>