Merge pull request #4 from nowcastsystem/weijian

Weijian
2019-09-30 17:11:36 -05:00 · 2019-09-30 17:11:36 -05:00 · eb2282d31a
parent d3a180ea0a e1fb05b4b2
commit eb2282d31a
14 changed files with 348 additions and 75 deletions
--- a/mock/user.js
+++ b/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'
+      }
+    }
  }
 ]
--- a/src/api/user.js
+++ b/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',
-    params: { token }
+    // baseURL: 'http://localhost:8010',
+    // 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 }
  })
 }
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/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) {
--- a/src/layout/components/Sidebar/index.vue
+++ b/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>

--- a/src/layout/index.vue
+++ b/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">
--- a/src/router/index.js
+++ b/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',
-        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+        name: 'Task',
+        meta: { title: 'Task', icon: 'documentation', affix: true }
      }
    ]
  },
@ -91,8 +91,37 @@ export const constantRoutes = [
      {
        path: 'vueUploader',
        component: () => import('@/views/VueUploader/index'),
-        name: 'VueUploader',
-        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+        name: 'Task',
+        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' }
      }
    ]
  },
--- a/src/utils/request.js
+++ b/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
--- a/src/views/VueUploader/components/taskList.vue
+++ b/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>
--- a/src/views/VueUploader/index.vue
+++ b/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" })
-        this.listLoading = true
-        sendAnalyzeRequest().then(response => {
-        // console.log("success!")
-        // this.list = response.data.items
-        // this.listLoading = false
-        var token = response['token']
+        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'
+          }
+          }})

-        // 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" })
+        // 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" })
+        // }
+      // })

-          // 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>
- -->
+ -->
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/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',
-                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'
+        // }
+      ]
      })
    }
  }
--- a/src/views/login/index.vue
+++ b/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 {
--- a/src/views/plot/index.vue
+++ b/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>
--- a/src/views/plot/plot.vue
+++ b/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>
-	  <span>From: </span>
-	  <Datepicker v-model="state.from" style="display: inline-block" :bootstrap-styling="true">
-	  </Datepicker>
-	  <span>To: </span>
-	  <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>
+		<span style="font-weight: bold">You could also run the analysis on the data from the specific date range</span><br>
+		<span>From: </span>
+		<Datepicker v-model="state.from" style="display: inline-block" :bootstrap-styling="true">
+		</Datepicker>
+		<span>To: </span>
+		<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" })
 	  }
  }
 }
--- a/src/views/plotTest/plotTest.vue
+++ b/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>