Merge branch 'weijian' of https://github.com/nowcastsystem/ForecastingAdmin
This commit is contained in:
Z
commit
1605b0525d
|
|
@ -53,7 +53,6 @@
|
|||
"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",
|
||||
|
|
@ -94,8 +93,10 @@
|
|||
"chalk": "2.4.2",
|
||||
"chokidar": "2.1.5",
|
||||
"connect": "3.6.6",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export function sendAnalyzeRequest(token) {
|
|||
return request({
|
||||
url: '/testpredict',
|
||||
method: 'get',
|
||||
baseURL: 'http://localhost:8010',
|
||||
baseURL: 'http://localhost:8888',
|
||||
params: { token }
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,16 +8,16 @@
|
|||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
<right-panel v-if="showSettings">
|
||||
<!-- <right-panel v-if="showSettings">
|
||||
<settings />
|
||||
</right-panel>
|
||||
</right-panel> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightPanel from '@/components/RightPanel'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import { AppMain, Navbar, Settings, Sidebar} from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
|
|
@ -29,7 +29,6 @@ export default {
|
|||
RightPanel,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*
|
||||
|
|
@ -73,18 +73,19 @@ export const constantRoutes = [
|
|||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
redirect: '/uploader',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||
path: 'vueUploader',
|
||||
component: () => import('@/views/VueUploader/index'),
|
||||
name: 'VueUploader',
|
||||
meta: { title: 'VueUploader', icon: 'documentation', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/uploader',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -101,29 +102,16 @@ export const constantRoutes = [
|
|||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'analyzing',
|
||||
component: () => import('@/views/Analyzing/analyzing'),
|
||||
path: 'haha',
|
||||
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',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -136,6 +124,7 @@ export const constantRoutes = [
|
|||
},
|
||||
{
|
||||
path: '/guide',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/guide/index',
|
||||
children: [
|
||||
|
|
@ -170,6 +159,7 @@ export const constantRoutes = [
|
|||
export const asyncRoutes = [
|
||||
{
|
||||
path: '/permission',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/permission/page',
|
||||
alwaysShow: true, // will always show the root menu
|
||||
|
|
@ -212,6 +202,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/icon',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -231,6 +222,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/example',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
|
|
@ -263,6 +255,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/tab',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -276,6 +269,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/error',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'ErrorPages',
|
||||
|
|
@ -301,6 +295,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/error-log',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -314,6 +309,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/excel',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
|
|
@ -351,6 +347,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/zip',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
|
|
@ -368,6 +365,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/pdf',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/pdf/index',
|
||||
children: [
|
||||
|
|
@ -387,6 +385,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/theme',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -400,6 +399,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: '/clipboard',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
@ -413,6 +413,7 @@ export const asyncRoutes = [
|
|||
|
||||
{
|
||||
path: 'external-link',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Layout from '@/layout'
|
|||
|
||||
const chartsRouter = {
|
||||
path: '/charts',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'Charts',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Layout from '@/layout'
|
|||
|
||||
const componentsRouter = {
|
||||
path: '/components',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'ComponentDemo',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Layout from '@/layout'
|
|||
|
||||
const nestedRouter = {
|
||||
path: '/nested',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/nested/menu1/menu1-1',
|
||||
name: 'Nested',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Layout from '@/layout'
|
|||
|
||||
const tableRouter = {
|
||||
path: '/table',
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
redirect: '/table/complex-table',
|
||||
name: 'Table',
|
||||
|
|
|
|||
|
|
@ -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: 5000 // request timeout
|
||||
timeout: 500000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<!-- <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'
|
||||
|
|
@ -21,15 +23,19 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,296 +1,309 @@
|
|||
<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" />
|
||||
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 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>
|
||||
</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 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 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 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 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" style="height: 400px">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Cropper from 'cropperjs'
|
||||
import ImageCompressor from '@xkeshi/image-compressor'
|
||||
|
|
@ -300,7 +313,7 @@ import { sendAnalyzeRequest } from '@/api/user'
|
|||
// import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
export default {
|
||||
components: {
|
||||
FileUpload
|
||||
FileUpload,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -319,12 +332,12 @@ export default {
|
|||
thread: 3,
|
||||
name: 'file',
|
||||
postAction: '/upload/post',
|
||||
putAction: 'http://localhost:8010/uploader',
|
||||
putAction: 'http://localhost:8888/uploader',
|
||||
headers: {
|
||||
'X-Csrf-Token': 'xxxx'
|
||||
'X-Csrf-Token': 'xxxx',
|
||||
},
|
||||
data: {
|
||||
'_csrf_token': 'xxxxxx'
|
||||
'_csrf_token': 'xxxxxx',
|
||||
},
|
||||
autoCompress: 1024 * 1024,
|
||||
uploadAuto: false,
|
||||
|
|
@ -333,11 +346,11 @@ export default {
|
|||
show: false,
|
||||
name: '',
|
||||
type: '',
|
||||
content: ''
|
||||
content: '',
|
||||
},
|
||||
editFile: {
|
||||
show: false,
|
||||
name: ''
|
||||
name: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -348,12 +361,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
|
||||
}
|
||||
const cropper = new Cropper(this.$refs.editImage, {
|
||||
autoCrop: false
|
||||
let cropper = new Cropper(this.$refs.editImage, {
|
||||
autoCrop: false,
|
||||
})
|
||||
this.editFile = {
|
||||
...this.editFile,
|
||||
|
|
@ -368,7 +381,7 @@ export default {
|
|||
this.addData.type = ''
|
||||
this.addData.content = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
inputFilter(newFile, oldFile, prevent) {
|
||||
|
|
@ -392,7 +405,7 @@ export default {
|
|||
const imageCompressor = new ImageCompressor(null, {
|
||||
convertSize: Infinity,
|
||||
maxWidth: 512,
|
||||
maxHeight: 512
|
||||
maxHeight: 512,
|
||||
})
|
||||
imageCompressor.compress(newFile.file)
|
||||
.then((file) => {
|
||||
|
|
@ -407,7 +420,7 @@ export default {
|
|||
// Create a blob field
|
||||
// 创建 blob 字段
|
||||
newFile.blob = ''
|
||||
const URL = window.URL || window.webkitURL
|
||||
let URL = window.URL || window.webkitURL
|
||||
if (URL && URL.createObjectURL) {
|
||||
newFile.blob = URL.createObjectURL(newFile.file)
|
||||
}
|
||||
|
|
@ -469,12 +482,12 @@ export default {
|
|||
this.editFile.show = false
|
||||
return
|
||||
}
|
||||
const data = {
|
||||
name: this.editFile.name
|
||||
let data = {
|
||||
name: this.editFile.name,
|
||||
}
|
||||
if (this.editFile.cropper) {
|
||||
const binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
|
||||
const arr = new Uint8Array(binStr.length)
|
||||
let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
|
||||
let arr = new Uint8Array(binStr.length)
|
||||
for (let i = 0; i < binStr.length; i++) {
|
||||
arr[i] = binStr.charCodeAt(i)
|
||||
}
|
||||
|
|
@ -491,7 +504,7 @@ export default {
|
|||
this.alert('Your browser does not support')
|
||||
return
|
||||
}
|
||||
const input = this.$refs.upload.$el.querySelector('input')
|
||||
let input = this.$refs.upload.$el.querySelector('input')
|
||||
input.directory = true
|
||||
input.webkitdirectory = true
|
||||
this.directory = true
|
||||
|
|
@ -509,8 +522,8 @@ export default {
|
|||
this.alert('Your browser does not support')
|
||||
return
|
||||
}
|
||||
const file = new window.File([this.addData.content], this.addData.name, {
|
||||
type: this.addData.type
|
||||
let file = new window.File([this.addData.content], this.addData.name, {
|
||||
type: this.addData.type,
|
||||
})
|
||||
this.$refs.upload.add(file)
|
||||
},
|
||||
|
|
@ -539,6 +552,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -550,6 +564,7 @@ export default {
|
|||
}
|
||||
.example-full .btn-group:hover > .dropdown-menu {
|
||||
visibility: visible;
|
||||
|
||||
}
|
||||
.example-full label.dropdown-item {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -605,8 +620,10 @@ export default {
|
|||
padding: 0;
|
||||
}
|
||||
.example-full {
|
||||
height: auto;
|
||||
padding-left: 5;
|
||||
padding-right: 5;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-backdrop {
|
||||
z-index: -1;
|
||||
|
|
@ -619,6 +636,7 @@ export default {
|
|||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- <template>
|
||||
<div class="app-container">
|
||||
<ul>
|
||||
|
|
@ -706,6 +724,11 @@ 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;
|
||||
|
|
@ -733,4 +756,4 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
|
|||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
-->
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue