diff --git a/.eslintignore b/.eslintignore
index e6529fc0..51525879 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,4 @@ build/*.js
src/assets
public
dist
+src
diff --git a/package.json b/package.json
index 3cb592c3..81fad796 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
"dropzone": "5.5.1",
"echarts": "4.2.1",
"element-ui": "2.7.0",
+ "eslint": "^6.3.0",
"file-saver": "2.0.1",
"fuse.js": "3.4.4",
"jquery": "^3.4.1",
@@ -93,10 +94,8 @@
"chalk": "2.4.2",
"chokidar": "2.1.5",
"connect": "3.6.6",
- "eslint": "5.15.3",
- "eslint-plugin-vue": "5.2.2",
+ "eslint-plugin-vue": "^5.2.3",
"html-webpack-plugin": "3.2.0",
- "husky": "1.3.1",
"lint-staged": "8.1.5",
"mockjs": "1.0.1-beta3",
"node-sass": "^4.9.0",
diff --git a/src/api/user.js b/src/api/user.js
index 45c13b4d..de6a6c82 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -27,7 +27,7 @@ export function sendAnalyzeRequest(token) {
return request({
url: '/testpredict',
method: 'get',
- baseURL: 'http://localhost:8888',
+ baseURL: 'http://localhost:8010',
params: { token }
})
}
diff --git a/src/router/index.js b/src/router/index.js
index 110c0554..03e0093b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,7 +12,7 @@ import chartsRouter from './modules/charts'
import tableRouter from './modules/table'
import nestedRouter from './modules/nested'
-/**
+/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
@@ -101,13 +101,27 @@ export const constantRoutes = [
component: Layout,
children: [
{
- path: 'haha',
- component: ()=>import('@/views/Analyzing/analyzing'),
+ path: 'analyzing',
+ component: () => import('@/views/Analyzing/analyzing'),
name: 'analyze',
meta: { title: 'analyzing' }
}
]
},
+ {
+ path: '/plot',
+ //hidden: true,
+ component: Layout,
+
+ children: [
+ {
+ path: 'plot',
+ component: () => import('@/views/plot/index'),
+ name: 'plot',
+ meta: { title: 'plot' }
+ }
+ ]
+ },
{
path: '/documentation',
component: Layout,
diff --git a/src/views/Analyzing/analyzing.vue b/src/views/Analyzing/analyzing.vue
index 6e162789..b1afc890 100644
--- a/src/views/Analyzing/analyzing.vue
+++ b/src/views/Analyzing/analyzing.vue
@@ -1,14 +1,12 @@
<!-- <template>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
- <span>hhahahahahahah</span>
</div>
</template>
-
<script>
export default {
-
+
data () {
return {
msg: 'Hey Nic Raboy'
@@ -23,19 +21,15 @@
<h1>Analyzing....</h1>
</div>
</template>
-
+
<script>
- import Circle9 from 'vue-loading-spinner/src/components/Circle9'
-
- export default {
- name: 'analyze',
- components: {
- Circle9
- }
-
+import Circle9 from 'vue-loading-spinner/src/components/Circle9'
+export default {
+ name: 'Analyze',
+ components: {
+ Circle9
}
-
-
+}
</script>
<style scoped>
diff --git a/src/views/VueUploader/index.vue b/src/views/VueUploader/index.vue
index 705d4a5c..e634e537 100644
--- a/src/views/VueUploader/index.vue
+++ b/src/views/VueUploader/index.vue
@@ -1,309 +1,296 @@
<template>
-<div class="example-full">
- <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>
- <h1 id="example-title" class="example-title">Data Uploader</h1>
+ <div class="example-full">
+ <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption">
+ <i class="fa fa-cog" aria-hidden="true" />
+ Options
+ </button>
+ <h1 id="example-title" class="example-title">Data Uploader</h1>
- <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
- <h3>Drop files to upload</h3>
- </div>
- <div class="upload" v-show="!isOption">
- <div class="table-responsive">
- <table class="table table-hover">
- <thead>
- <tr>
- <th>#</th>
- <th>Thumb</th>
- <th>Name</th>
- <th>Size</th>
- <th>Speed</th>
- <th>Status</th>
- <th>Action</th>
- </tr>
- </thead>
- <tbody>
- <tr v-if="!files.length">
- <td colspan="7">
- <div class="text-center p-5">
- <h4>Drop files anywhere to upload<br/>or</h4>
- <label :for="name" class="btn btn-lg btn-primary">Select Files</label>
- </div>
- </td>
- </tr>
- <tr v-for="(file, index) in files" :key="file.id">
- <td>{{index}}</td>
- <td>
- <img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
- <span v-else>No Image</span>
- </td>
- <td>
- <div class="filename">
- {{file.name}}
- </div>
- <div class="progress" v-if="file.active || file.progress !== '0.00'">
- <div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
- </div>
- </td>
- <td>{{file.size | formatSize}}</td>
- <td>{{file.speed | formatSize}}</td>
-
- <td v-if="file.error">{{file.error}}</td>
- <td v-else-if="file.success">success</td>
- <td v-else-if="file.active">active</td>
- <td v-else></td>
- <td>
- <div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
- Action
- </button>
- <div class="dropdown-menu">
- <a :class="{'dropdown-item': true, disabled: file.active || file.success || file.error === 'compressing'}" href="#" @click.prevent="file.active || file.success || file.error === 'compressing' ? false : onEditFileShow(file)">Edit</a>
- <a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
-
- <a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
- <a class="dropdown-item" href="#" v-else-if="file.error && file.error !== 'compressing' && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
- <a :class="{'dropdown-item': true, disabled: file.success || file.error === 'compressing'}" href="#" v-else @click.prevent="file.success || file.error === 'compressing' ? false : $refs.upload.update(file, {active: true})">Upload</a>
-
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
+ <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
+ <h3>Drop files to upload</h3>
+ </div>
+ <div v-show="!isOption" class="upload">
+ <div class="table-responsive">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Thumb</th>
+ <th>Name</th>
+ <th>Size</th>
+ <th>Speed</th>
+ <th>Status</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-if="!files.length">
+ <td colspan="7">
+ <div class="text-center p-5">
+ <h4>Drop files anywhere to upload<br>or</h4>
+ <label :for="name" class="btn btn-lg btn-primary">Select Files</label>
</div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="example-foorer">
- <div class="footer-status float-right">
- Drop: {{$refs.upload ? $refs.upload.drop : false}},
- Active: {{$refs.upload ? $refs.upload.active : false}},
- Uploaded: {{$refs.upload ? $refs.upload.uploaded : true}},
- Drop active: {{$refs.upload ? $refs.upload.dropActive : false}}
- </div>
- <div class="btn-group">
- <file-upload
- class="btn btn-primary dropdown-toggle"
- :post-action="postAction"
- :put-action="putAction"
- :extensions="extensions"
- :accept="accept"
- :multiple="multiple"
- :directory="directory"
- :size="size || 0"
- :thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
- :headers="headers"
- :data="data"
- :drop="drop"
- :drop-directory="dropDirectory"
- :add-index="addIndex"
- v-model="files"
- @input-filter="inputFilter"
- @input-file="inputFile"
- ref="upload">
- <i class="fa fa-plus"></i>
- Select
- </file-upload>
- <div class="dropdown-menu">
- <label class="dropdown-item" :for="name">Add files</label>
- <a class="dropdown-item" href="#" @click="onAddFolader">Add folder</a>
- <a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a>
- </div>
- </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
- </button>
- <button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest">
- Analyze
- </button>
- <button type="button" class="btn btn-danger" v-else @click.prevent="$refs.upload.active = false">
- <i class="fa fa-stop" aria-hidden="true"></i>
- Stop Upload
- </button>
- </div>
- </div>
-
-
-
-
-
- <div class="option" v-show="isOption">
- <div class="form-group">
- <label for="accept">Accept:</label>
- <input type="text" id="accept" class="form-control" v-model="accept">
- <small class="form-text text-muted">Allow upload mime type</small>
- </div>
- <div class="form-group">
- <label for="extensions">Extensions:</label>
- <input type="text" id="extensions" class="form-control" v-model="extensions">
- <small class="form-text text-muted">Allow upload file extension</small>
- </div>
- <div class="form-group">
- <label>PUT Upload:</label>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="radio" name="put-action" id="put-action" value="" v-model="putAction"> Off
- </label>
- </div>
- <div class="form-check">
- <label class="form-check-label">
- <input class="form-check-input" type="radio" name="put-action" id="put-action" value="/upload/put" v-model="putAction"> On
- </label>
- </div>
- <small class="form-text text-muted">After the shutdown, use the POST method to upload</small>
- </div>
- <div class="form-group">
- <label for="thread">Thread:</label>
- <input type="number" max="5" min="1" id="thread" class="form-control" v-model.number="thread">
- <small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small>
- </div>
- <div class="form-group">
- <label for="size">Max size:</label>
- <input type="number" min="0" id="size" class="form-control" v-model.number="size">
- </div>
- <div class="form-group">
- <label for="minSize">Min size:</label>
- <input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize">
- </div>
- <div class="form-group">
- <label for="autoCompress">Automatically compress:</label>
- <input type="number" min="0" id="autoCompress" class="form-control" v-model.number="autoCompress">
- <small class="form-text text-muted" v-if="autoCompress > 0">More than {{autoCompress | formatSize}} files are automatically compressed</small>
- <small class="form-text text-muted" v-else>Set up automatic compression</small>
- </div>
-
- <div class="form-group">
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" id="add-index" class="form-check-input" v-model="addIndex"> Start position to add
- </label>
- </div>
- <small class="form-text text-muted">Add a file list to start the location to add</small>
- </div>
-
- <div class="form-group">
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" id="drop" class="form-check-input" v-model="drop"> Drop
- </label>
- </div>
- <small class="form-text text-muted">Drag and drop upload</small>
- </div>
- <div class="form-group">
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" id="drop-directory" class="form-check-input" v-model="dropDirectory"> Drop directory
- </label>
- </div>
- <small class="form-text text-muted">Not checked, filter the dragged folder</small>
- </div>
- <div class="form-group">
- <div class="form-check">
- <label class="form-check-label">
- <input type="checkbox" id="upload-auto" class="form-check-input" v-model="uploadAuto"> Auto start
- </label>
- </div>
- <small class="form-text text-muted">Automatically activate upload</small>
- </div>
- <div class="form-group">
- <button type="button" class="btn btn-primary btn-lg btn-block" @click.prevent="isOption = !isOption">Confirm</button>
- </div>
- </div>
-
-
-
-
-
- <div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}"></div>
- <div :class="{modal: true, fade: true, show: addData.show}" id="modal-add-data" tabindex="-1" role="dialog">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title">Add data</h5>
- <button type="button" class="close" @click.prevent="addData.show = false">
- <span>×</span>
- </button>
- </div>
- <form @submit.prevent="onAddData">
- <div class="modal-body">
- <div class="form-group">
- <label for="name">Name:</label>
- <input type="text" class="form-control" required id="name" placeholder="Please enter a file name" v-model="addData.name">
- <small class="form-text text-muted">Such as <code>filename.txt</code></small>
- </div>
- <div class="form-group">
- <label for="type">Type:</label>
- <input type="text" class="form-control" required id="type" placeholder="Please enter the MIME type" v-model="addData.type">
- <small class="form-text text-muted">Such as <code>text/plain</code></small>
- </div>
- <div class="form-group">
- <label for="content">Content:</label>
- <textarea class="form-control" required id="content" rows="3" placeholder="Please enter the file contents" v-model="addData.content"></textarea>
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" @click.prevent="addData.show = false">Close</button>
- <button type="submit" class="btn btn-primary">Save</button>
- </div>
- </form>
- </div>
- </div>
- </div>
-
-
-
-
-
-
- <div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}"></div>
- <div :class="{modal: true, fade: true, show: editFile.show}" id="modal-edit-file" tabindex="-1" role="dialog">
- <div class="modal-dialog modal-lg" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title">Edit file</h5>
- <button type="button" class="close" @click.prevent="editFile.show = false">
- <span>×</span>
- </button>
- </div>
- <form @submit.prevent="onEditorFile">
- <div class="modal-body">
- <div class="form-group">
- <label for="name">Name:</label>
- <input type="text" class="form-control" required id="name" placeholder="Please enter a file name" v-model="editFile.name">
- </div>
- <div class="form-group" v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'">
- <label>Image: </label>
- <div class="edit-image">
- <img :src="editFile.blob" ref="editImage" />
- </div>
-
- <div class="edit-image-tool">
- <div class="btn-group" role="group">
- <button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(-90)" title="cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true"></i></button>
- <button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(90)" title="cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true"></i></button>
+ </td>
+ </tr>
+ <tr v-for="(file, index) in files" :key="file.id">
+ <td>{{ index }}</td>
+ <td>
+ <img v-if="file.thumb" :src="file.thumb" width="40" height="auto">
+ <span v-else>No Image</span>
+ </td>
+ <td>
+ <div class="filename">
+ {{ file.name }}
</div>
- <div class="btn-group" role="group">
- <button type="button" class="btn btn-primary" @click="editFile.cropper.crop()" title="cropper.crop()"><i class="fa fa-check" aria-hidden="true"></i></button>
- <button type="button" class="btn btn-primary" @click="editFile.cropper.clear()" title="cropper.clear()"><i class="fa fa-remove" aria-hidden="true"></i></button>
+ <div v-if="file.active || file.progress !== '0.00'" class="progress">
+ <div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{ file.progress }}%</div>
+ </div>
+ </td>
+ <td>{{ file.size | formatSize }}</td>
+ <td>{{ file.speed | formatSize }}</td>
+
+ <td v-if="file.error">{{ file.error }}</td>
+ <td v-else-if="file.success">success</td>
+ <td v-else-if="file.active">active</td>
+ <td v-else />
+ <td>
+ <div class="btn-group">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
+ Action
+ </button>
+ <div class="dropdown-menu">
+ <a :class="{'dropdown-item': true, disabled: file.active || file.success || file.error === 'compressing'}" href="#" @click.prevent="file.active || file.success || file.error === 'compressing' ? false : onEditFileShow(file)">Edit</a>
+ <a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
+
+ <a v-if="file.active" class="dropdown-item" href="#" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
+ <a v-else-if="file.error && file.error !== 'compressing' && $refs.upload.features.html5" class="dropdown-item" href="#" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
+ <a v-else :class="{'dropdown-item': true, disabled: file.success || file.error === 'compressing'}" href="#" @click.prevent="file.success || file.error === 'compressing' ? false : $refs.upload.update(file, {active: true})">Upload</a>
+
+ <div class="dropdown-divider" />
+ <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="example-foorer">
+ <div class="footer-status float-right">
+ Drop: {{ $refs.upload ? $refs.upload.drop : false }},
+ Active: {{ $refs.upload ? $refs.upload.active : false }},
+ Uploaded: {{ $refs.upload ? $refs.upload.uploaded : true }},
+ Drop active: {{ $refs.upload ? $refs.upload.dropActive : false }}
+ </div>
+ <div class="btn-group">
+ <file-upload
+ ref="upload"
+ v-model="files"
+ class="btn btn-primary dropdown-toggle"
+ :post-action="postAction"
+ :put-action="putAction"
+ :extensions="extensions"
+ :accept="accept"
+ :multiple="multiple"
+ :directory="directory"
+ :size="size || 0"
+ :thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
+ :headers="headers"
+ :data="data"
+ :drop="drop"
+ :drop-directory="dropDirectory"
+ :add-index="addIndex"
+ @input-filter="inputFilter"
+ @input-file="inputFile"
+ >
+ <i class="fa fa-plus" />
+ Select
+ </file-upload>
+ <div class="dropdown-menu">
+ <label class="dropdown-item" :for="name">Add files</label>
+ <a class="dropdown-item" href="#" @click="onAddFolader">Add folder</a>
+ <a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a>
+ </div>
+ </div>
+ <button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-success" @click.prevent="$refs.upload.active = true">
+ <i class="fa fa-arrow-up" aria-hidden="true" />
+ Start Upload
+ </button>
+ <button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-warning" @click.prevent="onSendAnalyzeRequest">
+ Analyze
+ </button>
+ <button v-else type="button" class="btn btn-danger" @click.prevent="$refs.upload.active = false">
+ <i class="fa fa-stop" aria-hidden="true" />
+ Stop Upload
+ </button>
+ </div>
+ </div>
+
+ <div v-show="isOption" class="option">
+ <div class="form-group">
+ <label for="accept">Accept:</label>
+ <input id="accept" v-model="accept" type="text" class="form-control">
+ <small class="form-text text-muted">Allow upload mime type</small>
+ </div>
+ <div class="form-group">
+ <label for="extensions">Extensions:</label>
+ <input id="extensions" v-model="extensions" type="text" class="form-control">
+ <small class="form-text text-muted">Allow upload file extension</small>
+ </div>
+ <div class="form-group">
+ <label>PUT Upload:</label>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value=""> Off
+ </label>
+ </div>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value="/upload/put"> On
+ </label>
+ </div>
+ <small class="form-text text-muted">After the shutdown, use the POST method to upload</small>
+ </div>
+ <div class="form-group">
+ <label for="thread">Thread:</label>
+ <input id="thread" v-model.number="thread" type="number" max="5" min="1" class="form-control">
+ <small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small>
+ </div>
+ <div class="form-group">
+ <label for="size">Max size:</label>
+ <input id="size" v-model.number="size" type="number" min="0" class="form-control">
+ </div>
+ <div class="form-group">
+ <label for="minSize">Min size:</label>
+ <input id="minSize" v-model.number="minSize" type="number" min="0" class="form-control">
+ </div>
+ <div class="form-group">
+ <label for="autoCompress">Automatically compress:</label>
+ <input id="autoCompress" v-model.number="autoCompress" type="number" min="0" class="form-control">
+ <small v-if="autoCompress > 0" class="form-text text-muted">More than {{ autoCompress | formatSize }} files are automatically compressed</small>
+ <small v-else class="form-text text-muted">Set up automatic compression</small>
+ </div>
+
+ <div class="form-group">
+ <div class="form-check">
+ <label class="form-check-label">
+ <input id="add-index" v-model="addIndex" type="checkbox" class="form-check-input"> Start position to add
+ </label>
+ </div>
+ <small class="form-text text-muted">Add a file list to start the location to add</small>
+ </div>
+
+ <div class="form-group">
+ <div class="form-check">
+ <label class="form-check-label">
+ <input id="drop" v-model="drop" type="checkbox" class="form-check-input"> Drop
+ </label>
+ </div>
+ <small class="form-text text-muted">Drag and drop upload</small>
+ </div>
+ <div class="form-group">
+ <div class="form-check">
+ <label class="form-check-label">
+ <input id="drop-directory" v-model="dropDirectory" type="checkbox" class="form-check-input"> Drop directory
+ </label>
+ </div>
+ <small class="form-text text-muted">Not checked, filter the dragged folder</small>
+ </div>
+ <div class="form-group">
+ <div class="form-check">
+ <label class="form-check-label">
+ <input id="upload-auto" v-model="uploadAuto" type="checkbox" class="form-check-input"> Auto start
+ </label>
+ </div>
+ <small class="form-text text-muted">Automatically activate upload</small>
+ </div>
+ <div class="form-group">
+ <button type="button" class="btn btn-primary btn-lg btn-block" @click.prevent="isOption = !isOption">Confirm</button>
+ </div>
+ </div>
+
+ <div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}" />
+ <div id="modal-add-data" :class="{modal: true, fade: true, show: addData.show}" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Add data</h5>
+ <button type="button" class="close" @click.prevent="addData.show = false">
+ <span>×</span>
+ </button>
+ </div>
+ <form @submit.prevent="onAddData">
+ <div class="modal-body">
+ <div class="form-group">
+ <label for="name">Name:</label>
+ <input id="name" v-model="addData.name" type="text" class="form-control" required placeholder="Please enter a file name">
+ <small class="form-text text-muted">Such as <code>filename.txt</code></small>
+ </div>
+ <div class="form-group">
+ <label for="type">Type:</label>
+ <input id="type" v-model="addData.type" type="text" class="form-control" required placeholder="Please enter the MIME type">
+ <small class="form-text text-muted">Such as <code>text/plain</code></small>
+ </div>
+ <div class="form-group">
+ <label for="content">Content:</label>
+ <textarea id="content" v-model="addData.content" class="form-control" required rows="3" placeholder="Please enter the file contents" />
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" @click.prevent="addData.show = false">Close</button>
+ <button type="submit" class="btn btn-primary">Save</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+
+ <div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}" />
+ <div id="modal-edit-file" :class="{modal: true, fade: true, show: editFile.show}" tabindex="-1" role="dialog">
+ <div class="modal-dialog modal-lg" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Edit file</h5>
+ <button type="button" class="close" @click.prevent="editFile.show = false">
+ <span>×</span>
+ </button>
+ </div>
+ <form @submit.prevent="onEditorFile">
+ <div class="modal-body">
+ <div class="form-group">
+ <label for="name">Name:</label>
+ <input id="name" v-model="editFile.name" type="text" class="form-control" required placeholder="Please enter a file name">
+ </div>
+ <div v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'" class="form-group">
+ <label>Image: </label>
+ <div class="edit-image">
+ <img ref="editImage" :src="editFile.blob">
+ </div>
+
+ <div class="edit-image-tool">
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-primary" title="cropper.rotate(-90)" @click="editFile.cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true" /></button>
+ <button type="button" class="btn btn-primary" title="cropper.rotate(90)" @click="editFile.cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true" /></button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-primary" title="cropper.crop()" @click="editFile.cropper.crop()"><i class="fa fa-check" aria-hidden="true" /></button>
+ <button type="button" class="btn btn-primary" title="cropper.clear()" @click="editFile.cropper.clear()"><i class="fa fa-remove" aria-hidden="true" /></button>
+ </div>
</div>
</div>
</div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" @click.prevent="editFile.show = false">Close</button>
- <button type="submit" class="btn btn-primary">Save</button>
- </div>
- </form>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" @click.prevent="editFile.show = false">Close</button>
+ <button type="submit" class="btn btn-primary">Save</button>
+ </div>
+ </form>
+ </div>
</div>
</div>
- </div>
-</div>
+ </div>
</template>
-
<script>
import Cropper from 'cropperjs'
import ImageCompressor from '@xkeshi/image-compressor'
@@ -313,7 +300,7 @@ import { sendAnalyzeRequest } from '@/api/user'
// import 'bootstrap/dist/css/bootstrap.min.css'
export default {
components: {
- FileUpload,
+ FileUpload
},
data() {
return {
@@ -332,12 +319,12 @@ export default {
thread: 3,
name: 'file',
postAction: '/upload/post',
- putAction: 'http://localhost:8888/uploader',
+ putAction: 'http://localhost:8010/uploader',
headers: {
- 'X-Csrf-Token': 'xxxx',
+ 'X-Csrf-Token': 'xxxx'
},
data: {
- '_csrf_token': 'xxxxxx',
+ '_csrf_token': 'xxxxxx'
},
autoCompress: 1024 * 1024,
uploadAuto: false,
@@ -346,11 +333,11 @@ export default {
show: false,
name: '',
type: '',
- content: '',
+ content: ''
},
editFile: {
show: false,
- name: '',
+ name: ''
}
}
},
@@ -361,12 +348,12 @@ export default {
this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' })
}
if (newValue) {
- this.$nextTick(function () {
+ this.$nextTick(function() {
if (!this.$refs.editImage) {
return
}
- let cropper = new Cropper(this.$refs.editImage, {
- autoCrop: false,
+ const cropper = new Cropper(this.$refs.editImage, {
+ autoCrop: false
})
this.editFile = {
...this.editFile,
@@ -381,7 +368,7 @@ export default {
this.addData.type = ''
this.addData.content = ''
}
- },
+ }
},
methods: {
inputFilter(newFile, oldFile, prevent) {
@@ -405,7 +392,7 @@ export default {
const imageCompressor = new ImageCompressor(null, {
convertSize: Infinity,
maxWidth: 512,
- maxHeight: 512,
+ maxHeight: 512
})
imageCompressor.compress(newFile.file)
.then((file) => {
@@ -420,7 +407,7 @@ export default {
// Create a blob field
// 创建 blob 字段
newFile.blob = ''
- let URL = window.URL || window.webkitURL
+ const URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.blob = URL.createObjectURL(newFile.file)
}
@@ -482,12 +469,12 @@ export default {
this.editFile.show = false
return
}
- let data = {
- name: this.editFile.name,
+ const data = {
+ name: this.editFile.name
}
if (this.editFile.cropper) {
- let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
- let arr = new Uint8Array(binStr.length)
+ const binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
+ const arr = new Uint8Array(binStr.length)
for (let i = 0; i < binStr.length; i++) {
arr[i] = binStr.charCodeAt(i)
}
@@ -504,7 +491,7 @@ export default {
this.alert('Your browser does not support')
return
}
- let input = this.$refs.upload.$el.querySelector('input')
+ const input = this.$refs.upload.$el.querySelector('input')
input.directory = true
input.webkitdirectory = true
this.directory = true
@@ -522,8 +509,8 @@ export default {
this.alert('Your browser does not support')
return
}
- let file = new window.File([this.addData.content], this.addData.name, {
- type: this.addData.type,
+ const file = new window.File([this.addData.content], this.addData.name, {
+ type: this.addData.type
})
this.$refs.upload.add(file)
},
@@ -552,7 +539,6 @@ export default {
}
}
-
</script>
<style>
@@ -633,7 +619,6 @@ export default {
}
</style>
-
<!-- <template>
<div class="app-container">
<ul>
@@ -721,11 +706,6 @@ export default {
import 'vue-upload-component/dist/vue-upload-component.part.css'
@import "vue-upload-component/dist/vue-upload-component.part.css"
-
-
-
-
-
.file-uploads {
overflow: hidden;
position: relative;
@@ -753,4 +733,4 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
opacity: 0;
}
</style>
- -->
\ No newline at end of file
+ -->
diff --git a/src/views/plot/index.vue b/src/views/plot/index.vue
new file mode 100644
index 00000000..a33371af
--- /dev/null
+++ 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>