完善task

server/app.js

@@ -2,7 +2,7 @@
  * @Author: ygy
  * @Date: 2018-03-14 19:40:01
  * @Last Modified by: ygy
- * @Last Modified time: 2018-03-14 20:27:07
+ * @Last Modified time: 2018-03-16 14:43:33
  */
 const Koa = require('koa');
 const send = require('koa-send');
@@ -35,12 +35,10 @@ if (process.env.NODE_ENV === 'production') {
 app.use(bodyParser());
 
 // add nunjucks as view:
-app.use(
-  templating('views', {
-    noCache: true, //in production ENV,noCache should be changed to false.
-    watch: true
-  })
-);
+app.use(templating('views', {
+  noCache: true, //in production ENV,noCache should be changed to false.
+  watch: true
+}));
 
 app.use(async (ctx, next) => {
   if (ctx.path.indexOf('/dist') !== -1) {
@@ -49,6 +47,8 @@ app.use(async (ctx, next) => {
     });
   } else if (ctx.path === '/private') {
     await ctx.render('private.html');
+  } else if (ctx.path === '/') {
+    await ctx.render('index.html');
   } else {
     await next();
   }
@@ -62,7 +62,7 @@ app.use(router());
 
 const schedule = require('node-schedule');
 
-const j = schedule.scheduleJob({ dayOfWeek: 3, second: 0 }, function() {
+const j = schedule.scheduleJob({ hour: 16 }, function() {
   console.log('执行任务开始');
   task.runTiming();
   console.log('执行任务结束');

server/filter/index.js

-
 const userDao = require('../dao/userDAO');
 
-const checkLogin = async(ctx, next) => {
+const checkLogin = async (ctx, next) => {
   //首页、登录、注册页面不需要判断登录
-  if (ctx.request.url === '/' ||
+  if (
+    ctx.request.url === '/' ||
     ctx.request.url === '/user/signin' ||
     ctx.request.url === '/user/signup' ||
     ctx.request.url === '/api/upload4Sword' ||
@@ -12,14 +12,15 @@ const checkLogin = async(ctx, next) => {
   ) {
     await next();
   } else {
+    console.log('1213')
     const wdata = ctx.cookies.get('wdata-oss'); //获取cookie
     if (wdata && wdata.indexOf('_') > 0) {
       const uid = wdata.split('_')[0];
       var user = await userDao.findOneById(uid);
       if (user) {
-        await next();   //如果cookie解析正确且查询到具体User，则继续中间件
+        await next(); //如果cookie解析正确且查询到具体User，则继续中间件
       } else {
-        ctx.response.redirect('/#/signin');   //否则引导至登录页面
+        ctx.response.redirect('/#/signin'); //否则引导至登录页面
       }
     } else {
       ctx.response.redirect('/#/signin');

server/nodemon.json

@@ -8,8 +8,5 @@
   "verbose": true,
   "execMap": {
     "js": "node --harmony"
-  },
-  "events": {
-    "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
   }
-}
+}
\ No newline at end of file

server/package.json

@@ -4,10 +4,10 @@
   "version": "2.0.0",
   "main": "app.js",
   "scripts": {
-    "dev": "export NODE_ENV=development&& nodemon --harmony app.js",
-    "devwin": "set NODE_ENV=development&& nodemon --harmony app.js",
+    "dev": "export NODE_ENV=development && nodemon --harmony app.js",
+    "devwin": "set NODE_ENV=development && nodemon --harmony app.js",
     "prod": "pm2 start pm2.json --env production",
-    "prodwin": "set NODE_ENV=production&& nodemon --harmony app.js"
+    "prodwin": "set NODE_ENV=production && nodemon --harmony app.js"
   },
   "keywords": [
     "koa",

server/task/index.js

@@ -2,10 +2,9 @@
  * @Author: ygy
  * @Date: 2018-03-14 19:39:46
  * @Last Modified by: ygy
- * @Last Modified time: 2018-03-14 20:21:37
+ * @Last Modified time: 2018-03-16 12:01:32
  */
 
-
 const historyService = require('../services/historyService');
 const date = require('../utils/date');
 const timing = require('./timing');
@@ -19,7 +18,7 @@ const runTiming = async () => {
     }
   ];
 
-  await timing.iterateTimes(urls, 2);
+  await timing.iterateTimes(urls, 100);
   const resultToSave = urls[0]['arr'];
 
   const total = resultToSave.reduce((item, index) => {

server/task/timing.js

@@ -18,26 +18,6 @@ const runBrowser = async (urls) => {
   browser.close();
 };
 
-/**
- * 执行页面，收集性能数据信息
- *
- * @param {*} page
- * @param {*} url
- */
-const collectTiming = async (page, url) => {
-  return await page.evaluate(url => {
-    const pt = window.performance.timing;
-
-    const { href, id } = url;
-
-    return {
-      href,
-      id,
-      allEnd: window.allEnd - pt.navigationStart
-    };
-  }, url);
-};
-
 /**
  * 打开某个页面，执行并收集数据
  *
@@ -69,6 +49,26 @@ const runPage = async (browser, url) => {
   }
 };
 
+/**
+ * 执行页面，收集性能数据信息
+ *
+ * @param {*} page
+ * @param {*} url
+ */
+const collectTiming = async (page, url) => {
+  return await page.evaluate(url => {
+    const pt = window.performance.timing;
+
+    const { href, id } = url;
+
+    return {
+      href,
+      id,
+      allEnd: window.allEnd - pt.navigationStart
+    };
+  }, url);
+};
+
 /**
  * 每个页面跑n次来获取测试数据
  *

server/views/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>闪光</title>
+  <title>守望</title>
   <link rel="shortcut icon" type="image/x-icon" href="//yun.tuiapple.com/tuia/cdn/heaven.ico">
   <link rel="stylesheet" href="//yun.tuiapple.com/tuia/tuia-advertiser/bower_components/bootstrap/dist/css/bootstrap.min.css">
 </head>

server/views/private.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>闪光</title>
+  <title>守望</title>
   <link rel="shortcut icon" type="image/x-icon" href="//yun.tuiapple.com/tuia/cdn/heaven.ico">
   <link rel="stylesheet" href="//yun.tuiapple.com/tuia/tuia-advertiser/bower_components/bootstrap/dist/css/bootstrap.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts-en.common.min.js"></script>

web/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>闪光</title>
+  <title>守望</title>
   <link rel="shortcut icon" type="image/x-icon" href="//yun.tuiapple.com/tuia/cdn/heaven.ico">
   <link rel="stylesheet" href="//yun.tuiapple.com/tuia/tuia-advertiser/bower_components/bootstrap/dist/css/bootstrap.min.css">
 </head>

web/private.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>闪光</title>
+  <title>守望</title>
   <link rel="shortcut icon" type="image/x-icon" href="//yun.tuiapple.com/tuia/cdn/heaven.ico">
   <link rel="stylesheet" href="//yun.tuiapple.com/tuia/tuia-advertiser/bower_components/bootstrap/dist/css/bootstrap.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts-en.common.min.js"></script>

web/src/containers/private/components/NavHeader.vue

+<template lang="html">
+    <el-menu :default-active="activeIndex"  mode="horizontal" router>
+      <h2 class="nav-title"><img class="logo" src="//yun.tuiapple.com/tuia/cdn/heave-logo-small.png" alt=""></h2>
+      <el-menu-item index="home">上传测试</el-menu-item>
+      <el-menu-item index="list">同步生产</el-menu-item>
+      <li class="tip-pane">
+        <span class="name">{{userName}}</span>
+        <span class="separator">|</span>
+        <a class="logout" @click="logout()"><img class="logout-img" src="//yun.tuiapple.com/tuia/cdn/logout2.png" alt=""></a>
+      </li>
+    </el-menu>
+</template>
+
+<script>
+import CookieUtil from "comcomp/utils/CookieUtil";
+export default {
+  data() {
+    const hrefArray = window.location.href.split("/");
+    const activeIndex = hrefArray[hrefArray.length - 1];
+
+    return {
+      activeIndex,
+      userName: "",
+      user: ""
+    };
+  },
+  mounted() {
+    this.fetch();
+    this.fetchUser();
+  },
+  methods: {
+    logout() {
+      CookieUtil.clearCookie("wdata-oss");
+      window.location.replace("/");
+    },
+    fetch() {
+      this.$http.get("/user/info").then(
+        response => {
+          const { data } = response.data;
+          this.userName = data;
+        },
+        error => {
+          console.log(error);
+        }
+      );
+    },
+    fetchUser() {
+      this.$http.get("/user/id").then(
+        response => {
+          const { data } = response.data;
+          this.user = data;
+        },
+        error => {
+          console.log(error);
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="css">
+.nav-title {
+  position: relative;
+  float: left;
+  margin: 8px 150px 8px 10px;
+  outline: none;
+}
+
+.el-menu {
+  padding: 0 20px;
+  background-color: #3e4756;
+}
+
+.el-menu-item {
+  font-size: 16px;
+  height: 60px !important;
+  line-height: 60px !important;
+  color: #fff !important;
+}
+.el-menu-item.is-active {
+  background-color: #363c48 !important;
+  border-bottom: 3px solid #579add !important;
+  border-bottom-color: #579add !important;
+}
+.el-menu-item:hover {
+  background-color: #363c48 !important;
+  border-bottom: 3px solid #579add !important;
+  border-bottom-color: #579add !important;
+}
+
+.name {
+  color: #fff;
+}
+.separator {
+  color: #fff;
+  margin-left: 10px;
+}
+.logout {
+  margin-left: 10px;
+}
+.tip-pane {
+  float: right;
+  height: 60px !important;
+  line-height: 60px !important;
+  outline: none;
+}
+</style>

web/src/containers/private/components/force/index.vue

+<template>
+    <div class="oss-list wrap">
+        <NavHeader></NavHeader>
+        <div class="oss-container">
+            <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" class="search-tool">
+                <el-form-item label="资源路径" prop="path" class="itemtext">
+                  <el-input type="textarea" v-model="ruleForm.path" placeholder="请输入资源路径，一行一个，回车分隔" class="texturl" :autosize="{ minRows: 20}" required></el-input>
+                </el-form-item>
+                <el-button type="primary" @click="_submitForm('ruleForm')" icon="search" size="small" class='submit'>提交</el-button>
+               <div class='tip'>此过程较慢，请耐心等待</div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import NavHeader from '../NavHeader.vue';
+import { Message, Loading } from 'element-ui';
+import DateUtil from 'comcomp/utils/DateUtil.js';
+
+var checkUrl = (rule, value, callback) => {
+    let regexp = new RegExp(/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/);
+    var arr=value.split("\n")
+    const valArr = arr.map(item => {return regexp.test(item)});
+    if (valArr.indexOf(false)!== -1) {
+        callback(new Error('url格式不正确'));
+    } else {
+        callback();
+    }
+};
+export default {
+
+    data() {
+        return {
+            ruleForm: {
+                path: ''
+            },
+            rules: {
+                path: [
+                    { validator: checkUrl, message: '格式不正确',required: true,trigger: 'blur' }
+                ]
+            },
+            tableData: [],
+            domainPrefix: null
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        _submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    　　console.log(valid);
+                    this.refresh();
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        refresh() {
+            this.fetch(this.ruleForm.path);
+        },
+        fetch(path = '') {
+            const loadingInstance = Loading.service({ fullscreen: true });
+
+            this.$http.post('/cdn/flush', { urls: path }, {
+                emulateJSON: true
+            }).then((response) => {
+                const {
+                    success,
+                    code
+                } = response.data;
+
+                if (code === 0) {
+                   this.$message.success('刷新成功');
+                } else {
+                    console.log(desc);
+                }
+                loadingInstance.close();
+            }, (error) => {
+                console.log(error)
+                loadingInstance.close();
+            });
+        }
+    },
+    components: {
+        NavHeader
+    }
+}
+</script>
+
+<style scoped>
+
+.search-tool {
+  float: left;
+  margin-left: 100px;
+  margin-top: 20px;
+  width: 900px;
+}
+.itemtext {
+  width: 750px;
+}
+.texturl {
+    width: 350% !important;
+}
+.submit {
+    margin-left: 20px;
+}
+.tip {
+    margin-top: 20px;
+    color:#409EFF;
+}
+</style>

web/src/containers/private/components/history/Index.vue

+<template>
+    <div class="oss-list wrap">
+        <NavHeader></NavHeader>
+
+        <div class="oss-container">
+            <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" class="search-tool">
+                <el-form-item label="路径" prop="path">
+                    <el-input v-model="ruleForm.path" placeholder="请输入路径" size="small"></el-input>
+                </el-form-item>
+                <el-button type="primary" @click="_submitForm('ruleForm')" icon="search" size="small">搜索</el-button>
+            </el-form>
+            <el-table :data="tableData" highlight-current-row @current-change="_currentChange" stripe style="width: 100%" height="800">
+                <el-table-column prop="name" label="文件名" width="150">
+                </el-table-column>
+                <el-table-column prop="path" label="路径">
+                </el-table-column>
+                <el-table-column prop="path" label="复制" width="65">
+                    <template slot-scope="scope">
+                        <el-tooltip class="item" effect="light" :enterable="false" content="点击复制完整路径" placement="top-start">
+                            <button class="btn" data-clipboard-snippet="" v-bind:data-clipboard-text="domainPrefix + scope.row.path">
+                                <img class="clippy" width="13" src="//yun.duiba.com.cn/tuia/cdn/clippy.svg">
+                            </button>
+                        </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="type" label="类型" width="125">
+                </el-table-column>
+                <el-table-column prop="action" label="操作类型" width="100">
+                </el-table-column>
+                <el-table-column prop="owner" label="操作者" width="100">
+                </el-table-column>
+                <el-table-column prop="createdAt" label="操作时间" width="200">
+                </el-table-column>
+            </el-table>
+
+            <el-pagination @size-change="_sizeChange" @current-change="_pageChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import NavHeader from '../NavHeader.vue';
+import { Message, Loading } from 'element-ui';
+import Clipboard from 'clipboard';
+import DateUtil from 'comcomp/utils/DateUtil.js';
+
+let clipboard;
+
+export default {
+    data() {
+        return {
+            ruleForm: {
+                path: ''
+            },
+            rules: {
+                path: [
+                    { min: 0, max: 99, message: '不超过99', trigger: 'blur' }
+                ]
+            },
+            currentPage: 1,
+            pageSize: 20,
+            totalCount: 0,
+            tableData: [],
+            domainPrefix: null
+        }
+    },
+    mounted() {
+        this.refresh();
+        this.getPrefix();
+
+        clipboard = new Clipboard('.btn');
+        clipboard.on('success', (e) => {
+            this.$message('已复制到剪贴板');
+            e.clearSelection();
+        });
+
+        clipboard.on('error', (e) => {
+            this.$message.error('复制失败');
+        });
+    },
+    beforeDestroy() {
+        clipboard.destroy();
+    },
+    methods: {
+        _currentChange(val) {
+            this.currentRow = val;
+        },
+        _submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log(this.ruleForm.path);
+                    this.currentPage = 1;
+                    this.refresh();
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        _pageChange(val) {
+            this.currentPage = val;
+            this.refresh();
+        },
+        _sizeChange(val) {
+            this.pageSize = val;
+            this.refresh();
+        },
+        refresh() {
+            this.fetch(this.currentPage, this.pageSize, this.ruleForm.path);
+        },
+        getPrefix() {
+          this.$http.get('/oss/prefix?env=online', {}, {
+            emulateJSON: true
+          }).then((response) => {
+            this.domainPrefix = response.data.prefix + '/';
+          }, (error) => {
+            console.log(error)
+          });
+        },
+        fetch(currentPage, pageSize, path = '') {
+            const loadingInstance = Loading.service({ fullscreen: true });
+
+            this.$http.get('/history/list', { params: { currentPage, pageSize, path } }, {
+                emulateJSON: true
+            }).then((response) => {
+                const {
+                    data,
+                    code,
+                    totalCount,
+                    desc
+                } = response.data;
+
+                if (code === 0) {
+                    data.map((item) => {
+                        const format = 'yyyy/MM/dd hh:mm:ss';
+                        item.createdAt = DateUtil.dateFormat(item.createdAt, format);
+                        return item;
+                    });
+                } else {
+                    console.log(desc);
+                }
+
+                this.totalCount = totalCount;
+                this.tableData = data;
+                loadingInstance.close();
+            }, (error) => {
+                console.log(error)
+                loadingInstance.close();
+            });
+        }
+    },
+    components: {
+        NavHeader
+    }
+}
+</script>
+
+<style>
+.el-pagination {
+    float: right;
+    margin-top: 20px;
+}
+.search-tool {
+  float: right;
+}
+</style>

web/src/containers/private/components/index/DirTree.vue

+<template lang="html">
+  <div class="oss-container">
+    <div class="row oss-path">
+      <div class="col-sm-12">
+        <div class="current-path">
+          当前路径:
+        </div>
+        <ul>
+          <li class="inline">
+            <a @click="_rootClick()">root</a>
+          </li>
+          <li class="inline" v-for="dir in path.split('/').filter((item)=>{ return !!item;})">
+           <i class="el-icon-arrow-right el-icon--left"></i><a @click="_pathClick(dir)">{{dir ? dir : ''}}&nbsp;</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="row mar-top-30">
+      <div class="col-sm-6">
+        <div class="row current-path">
+          <span class="col-sm-4">
+            <NewFolder :prop="pathObj" :cbRefresh="fetch"> </NewFolder>
+          </span>
+        </div>
+        <div class="row">
+          <span class="col-sm-6">名称</span>
+          <span class="col-sm-2">大小</span>
+          <span class="col-sm-4">最后修改</span>
+        </div>
+        <ul id="list">
+          <li class="oss-item row" v-for="dir in dirs">
+            <a class="col-sm-6 dir-name" @click="_enterDir(dir)"><img class="folder" width="16" src="//yun.dui88.com/tuia/cdn/folder.svg">{{dir.replace('/', '')}}</a>
+            <span class="col-sm-2">-</span>
+            <span class="col-sm-4">-</span>
+          </li>
+          <li class="oss-item row" v-for="file in files">
+            <span class="col-sm-6 file-name"><i class="el-icon-document el-icon--left"></i>{{file}}</span>
+            <span class="col-sm-2">
+                <el-tooltip class="item" effect="light" :enterable="false" content="点击复制路径" placement="top-start">
+                    <button class="btn copy-urls-btn" v-bind:data-clipboard-text="domainPrefix + path.replace('/', '') + file">
+                        <img class="clippy" width="14" src="//yun.duiba.com.cn/tuia/cdn/clippy.svg">
+                    </button>
+                </el-tooltip>
+            </span>
+            <span class="col-sm-4">-</span>
+          </li>
+        </ul>
+      </div>
+      <div class="col-sm-6">
+        <my-upload
+          class="upload-demo"
+          ref="upload"
+          action="/oss/upload"
+          :drag="true"
+          :multiple="true"
+          :data="pathObj"
+          :on-preview="_preview"
+          :on-remove="_remove"
+          :before-upload="_beforeUpload"
+          :on-success="_uploadSuccess"
+          :file-list="fileList"
+          :auto-upload="false">
+          <el-button slot="trigger" icon="el-icon-view" type="primary" size="small">选取文件</el-button>
+          <el-button slot="uploadstart" style="margin-left: 10px;" icon="el-icon-upload" type="success" @click="_submitUpload" size="small">上传到服务器</el-button>
+          <div slot="tip" class="el-upload__tip">不支持文件夹上传</div>
+        </my-upload>
+        <br>
+        <p>已上传文件URL：</p>
+        <ul>
+          <li v-for="file in uploadedFiles">
+            <div><i class="el-icon-document"></i> <span>{{file.name}}</span></div>
+            <div><span style="color:#1D8CE0;padding:0 10px;">{{domainPrefix + file.response.path}}</span>
+            <el-tooltip class="item" effect="light" :enterable="false" content="点击复制完整路径" placement="top-start">
+                <button class="btn copy-urls-btn" v-bind:data-clipboard-text="domainPrefix + file.response.path">
+                    <img class="clippy" width="12" src="//yun.duiba.com.cn/tuia/cdn/clippy.svg">
+                </button>
+            </el-tooltip></div>
+          </li>
+        </ul>
+        <!--<button id="copy-uploadUrls" class="el-button el-button--success is-plain el-button--small copy-urls-btn" v-bind:data-clipboard-text="uploadedUrls">
+            复制最近上传的URL
+        </button>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NewFolder from './NewFolder.vue';
+import {
+  Loading
+} from 'element-ui';
+import URLUtil from 'comcomp/utils/URLUtil.js';
+import Clipboard from 'clipboard';
+import MyUpload from 'comcomp/upload/index.vue';
+
+let clipboard;
+let hash;
+
+const SLASH = '/';
+
+function findPrefix(dir, path) {
+  return path.split(dir)[0];
+};
+
+export default {
+  data() {
+    hash = window.location.hash.split('?')[0];
+    const paramPath = URLUtil.getParameterByName('path', window.location.hash);
+    const path = decodeURIComponent(paramPath ? paramPath : SLASH);
+    console.log(paramPath);
+    return {
+      dirs: [],
+      files: [],
+      path,
+      fileList: [],
+      pathObj: {},
+      uploadedUrls: [],
+      uploadedFiles: [],
+      domainPrefix: null
+    }
+  },
+  mounted() {
+    this.fetch(this.path);
+    this.getPrefix();
+
+    clipboard = new Clipboard('.copy-urls-btn');
+    clipboard.on('success', (e) => {
+      this.$message('已复制到剪贴板');
+      this.$refs.upload.clearFiles();
+      e.clearSelection();
+    });
+
+    clipboard.on('error', (e) => {
+        this.$message.error('复制失败');
+    });
+
+  },
+  beforeDestroy() {
+    clipboard.destroy();
+  },
+  methods: {
+    _enterDir(dir) {
+      this.path = this.path + dir;
+
+      this.fetch(this.path);
+    },
+    _pathClick(dir) {
+      const prefix = findPrefix(dir, this.path);
+
+      this.path = prefix + dir + SLASH;
+
+      this.fetch(this.path);
+    },
+    _rootClick() {
+      this.path = SLASH;
+
+      this.fetch(this.path);
+    },
+    _submitUpload(e) {
+      e.stopPropagation();
+      this.$refs.upload.submit();
+    },
+    _remove(file, fileList) {
+      console.log(file, fileList);
+    },
+    _preview(file) {
+      console.log(file);
+    },
+    _beforeUpload(file) {},
+    _uploadSuccess(response, file, fileList) {
+      //等所有上传完成
+      const filters = fileList.filter(item => {
+        return item.status === 'success' || item.status === 'error';
+      });
+      if (filters.length !== fileList.length) {
+        return;
+      }
+
+      const uploadedUrls = filters.map((item) => {
+        return item.response.path;
+      });
+      this.uploadedFiles = filters;
+      console.log(filters);
+      this.uploadedUrls = uploadedUrls;
+      this.fetch(this.path);
+      console.log(this.fileList)
+    },
+    getPrefix() {
+      this.$http.get('/oss/prefix?env=test', {}, {
+        emulateJSON: true
+      }).then((response) => {
+        this.domainPrefix = response.data.prefix + '/';
+      }, (error) => {
+        console.log(error)
+      });
+    },
+    fetch(path) {
+      console.log(path);
+      const loadingInstance = Loading.service({
+        fullscreen: true
+      });
+
+      window.location.hash = `${hash}?path=${path}`;
+
+      this.pathObj = {
+        path
+      };
+      this.$http.get('/oss/list', {
+        params: {
+          path
+        }
+      }, {
+        emulateJSON: true
+      }).then((response) => {
+        const {
+          dirs,
+          files
+        } = response.data;
+        this.dirs = dirs;
+        this.files = files;
+        loadingInstance.close();
+      }, (error) => {
+        console.log(error)
+        loadingInstance.close();
+      });
+    }
+  },
+  components: {
+    NewFolder,
+    MyUpload
+  }
+}
+</script>
+
+<style lang="css">
+a {
+  cursor: pointer;
+}
+
+.inline {
+  display: inline;
+  margin: 0 0px;
+}
+
+.oss-item {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f2f6fd;
+}
+
+.file-name i{
+  font-size: 16px;
+}
+
+#copy-uploadUrls {
+  margin-top: 10px;
+}
+.current-path {
+  margin-bottom: 8px;
+}
+.folder {
+  margin-right: 5px;
+  position: relative;
+  top: -2px;
+}
+.el-upload-dragger {
+  overflow: auto !important;
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+  cursor: auto !important;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  background-color: transparent !important;
+}
+.el-upload-dragger:hover {
+  border-color: transparent !important;
+}
+</style>

web/src/containers/private/components/Index.vue → web/src/containers/private/components/index/Index.vue

 <template lang="html">
     <div class="wrap" @drop.prevent @dragover.prevent @dragleave.prevent>
+      <NavHeader></NavHeader>
       <DirTree></DirTree>
     </div>
 </template>
 
 <script>
+import NavHeader from '../NavHeader.vue'
 import DirTree from './DirTree.vue'
 
 export default {
@@ -12,6 +14,7 @@ export default {
         msg: 'OSS文件管理'
     }),
     components: {
+        NavHeader,
         DirTree
     }
 }

web/src/containers/private/components/index/NewFolder.vue

+<template>
+    <div>
+        <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus" size="small">新建文件夹</el-button>
+
+        <el-dialog title="新建文件夹" :visible.sync="dialogFormVisible">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+                <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
+                    <el-input v-model="ruleForm.name" placeholder="请输入文件夹名称" auto-complete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="primary" @click="_new('ruleForm')">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['prop', 'cbRefresh'],
+    data() {
+        const validateName = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('必填项'));
+            } else if (!value.match(/^[0-9a-zA-Z]{1,10}$/)) {
+                callback(new Error('1-10字，数字和字母'));
+            } else {
+                callback();
+            }
+        };
+
+        return {
+            dialogFormVisible: false,
+            ruleForm: {
+                name: ''
+            },
+            rules: {
+                name: [
+                    { validator: validateName, trigger: 'blur' }
+                ]
+            },
+            formLabelWidth: '120px'
+        };
+    },
+    methods: {
+        _new(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    this.post(this.ruleForm.name);
+                    this.dialogFormVisible = false;
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        post(name) {
+            const {
+                path
+            } = this.prop;
+
+            this.$http.post('/oss/newFolder', { name, path }).then((response) => {
+                const {
+                    dirs,
+                    files,
+                    code
+                } = response.data;
+
+                if (code === '0') {
+                  this.$message.success('创建文件夹成功');
+                  this.cbRefresh(path);
+
+                  this.dirs = dirs;
+                  this.files = files;
+                } else {
+                  this.$message.error('创建文件夹失败');
+                }
+            }, (error) => {
+                console.log(error)
+            });
+        }
+    }
+};
+</script>

web/src/containers/private/components/DirTree.vue → web/src/containers/private/components/trend/DirTree.vue

 <template lang="html">
+
+  <div>
+    <el-select v-model="value" placeholder="请选择">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
+    <el-select v-model="value2" placeholder="请选择">
+      <el-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
     <div ref="myEchart" style="width: 1200px;height:400px;"></div>
+  </div>
 </template>
 
 <script>
@@ -9,6 +28,48 @@ import axios from 'axios';
 export default {
   data() {
     return {
+      options: [
+        {
+          value: '1',
+          label: '大转盘'
+        },
+        {
+          value: '2',
+          label: '刮刮卡'
+        },
+        {
+          value: '3',
+          label: '砸彩蛋'
+        },
+        {
+          value: '4',
+          label: '卡包'
+        },
+        {
+          value: '5',
+          label: '套牛'
+        }
+      ],
+      options2: [
+        {
+          value: '1',
+          label: '首屏时间'
+        },
+        {
+          value: '2',
+          label: '白屏时间'
+        },
+        {
+          value: '3',
+          label: '自定义all'
+        },
+        {
+          value: '4',
+          label: '图片加载时间'
+        }
+      ],
+      value: '',
+      value2: '',
       chart: undefined
     };
   },

web/src/containers/private/components/trend/Index.vue

+<template lang="html">
+    <div class="wrap" @drop.prevent @dragover.prevent @dragleave.prevent>
+      <NavHeader></NavHeader>
+      <DirTree></DirTree>
+    </div>
+</template>
+
+<script>
+import DirTree from './DirTree.vue'
+import NavHeader from '../NavHeader.vue';
+
+export default {
+    data: () => ({
+        msg: 'OSS文件管理'
+    }),
+    components: {
+        DirTree,
+        NavHeader
+    }
+}
+</script>
+
+<style lang="css">
+.content {
+    padding: 20px 50px;
+}
+
+.button-group {
+    margin-bottom: 15px;
+}
+</style>

web/src/containers/private/main.js

@@ -4,7 +4,11 @@ import VueResource from 'vue-resource'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
-import Index from './components/Index.vue'
+import Index from './components/trend/Index.vue'
+
+import Todo from './components/todo/Index.vue'
+import History from './components/history/Index.vue'
+import Force from './components/force/Index.vue'
 import 'comstyle/layout.less';
 
 Vue.use(VueRouter)
@@ -16,10 +20,24 @@ const router = new VueRouter({
 	routes: [{
 		path: '/',
 		redirect: '/home'
-	},	{
-		path: '/home',
-		component: Index
-	}]
+	}, {
+    path: '/home',
+    component: Index,
+    meta: {
+    // 需要补全链接
+      shouldComplementary: true
+    }
+  },
+  {
+    path: '/list',
+    component: Todo
+  }, {
+    path: '/log',
+    component: History
+  }, {
+    path: '/force',
+    component: Force
+  }]
 })
 
 new Vue({