front 1.0

DAPlatform-front/build/webpack.base.conf.js

@@ -40,7 +40,7 @@ module.exports = {
   },
   module: {
     rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      // ...(config.dev.useEslint ? [createLintingRule()] : []),
       {
         test: /\.vue$/,
         loader: 'vue-loader',

DAPlatform-front/package-lock.json

@@ -485,6 +485,32 @@
         "postcss-value-parser": "^3.2.3"
       }
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6384,6 +6410,11 @@
       "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -7028,8 +7059,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",

DAPlatform-front/package.json

@@ -11,7 +11,9 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "element-ui": "^2.13.1",
+    "js-cookie": "^2.2.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

DAPlatform-front/src/App.vue

 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+<!--    <img src="./assets/logo.png">-->
     <router-view/>
   </div>
 </template>
@@ -16,8 +16,9 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  /*text-align: center;*/
   color: #2c3e50;
-  margin-top: 60px;
+  /*margin-top: 60px;*/
+  height: 100%;
 }
 </style>

DAPlatform-front/src/api/PersonAPI.js

+import axios from '../assets/js/axios'
+
+var staticMethods = {
+  getAllData ({ commit, state }, id) { // 得到指定文章详情
+    return axios.Get({
+      url: 'get_data',
+      params: {
+        id: id
+      },
+      callback: (res) => {
+        return res
+      }
+    })
+  },
+  addData (data) {
+    let _data = new FormData()
+    _data.append('a','a')
+    return axios.Post({
+      url: 'add_data/',
+      params: {
+        data: _data
+      },
+      callback: (res) => {
+        return res
+      }
+    })
+  }
+}
+
+function PersonAPI () {
+  return Object.freeze(Object.assign(
+    {},
+    staticMethods
+  ))
+}
+
+Object.assign(PersonAPI, staticMethods)
+export default PersonAPI

DAPlatform-front/src/assets/css/common.css

+body,html{
+  height: 100%;
+}
+*{
+  margin: 0;
+  box-sizing: border-box;
+}

DAPlatform-front/src/assets/js/axios.js

+import axios from 'axios'
+import getUrl from './getPath'
+
+export default {
+  Get: (config) => {
+    return axios({
+      method: 'get',
+      url: getUrl(config.url),
+      params: config.params
+    }).then((res) => {
+      stateDetection(res)
+      return config.callback && config.callback(res)
+    })
+  },
+  Post: (config) => {
+    return axios({
+      method: 'post',
+      url: getUrl(config.url),
+      data: config.params.data,
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRFToken': getCookie('csrftoken')
+      }
+    }).then((res) => {
+      stateDetection(res)
+      return config.callback && config.callback(res)
+    })
+  }
+}
+
+// 状态检测
+let stateDetection = (data, callback) => {
+    let status = data.status_code
+    switch (status) {
+        case 102:
+            break
+        case 103:
+            alert(data.content)
+            break
+        case 404:
+            window.location.href = data.url
+            break
+    }
+}
+
+function getCookie (name) {
+  var cookieValue = null;
+  if (document.cookie && document.cookie !== '') {
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+      var cookie = cookies[i].trim();
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) === (name + '=')) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+}

DAPlatform-front/src/assets/js/getPath.js

+export default function getUrl (str) {
+  let url = 'http://127.0.0.1:8000/backend/' + str
+  return url
+}

DAPlatform-front/src/components/HelloWorld.vue

@@ -80,11 +80,6 @@
         </a>
       </li>
     </ul>
-<el-radio-group v-model="radio">
-    <el-radio :label="3">备选项</el-radio>
-    <el-radio :label="6">备选项</el-radio>
-    <el-radio :label="9">备选项</el-radio>
-  </el-radio-group>
   </div>
 </template>
 
@@ -93,7 +88,7 @@ export default {
   name: 'HelloWorld',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App', radio: 3
+      msg: 'Welcome to Your Vue.js App'
     }
   }
 }

DAPlatform-front/src/components/Home.vue

+<template>
+  <div class="home">
+    <el-table
+    :data="tableData"
+  >
+      <el-table-column
+        prop="date"
+        label="日期"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="sex"
+        label="性别">
+      </el-table-column>
+    </el-table>
+    <el-form :inline="true" :model="formData" ref="formData">
+      <el-form-item
+        label="姓名"
+        :rules="{required: true, message: '请输入姓名', trigger: 'blur'}"
+      >
+        <el-input v-model="formData.name"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="性别"
+        :rules="{required: true, message: '请输入性别', trigger: 'blur'}"
+      >
+        <el-input v-model="formData.sex"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitData(formData)">提交</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" @click="select_local_files">Add Files</el-button>
+    <input id="invisible_file_input" type="file" style="display: none;" multiple="multiple" accept=".jpg,.jpeg,.png,.bmp" @change="add_local_files"/>
+
+    <div v-for="(item,index) in via_img_metadata" @click="jump_to_image(index)">{{item.filename}}</div>
+    <div id="img_box"></div>
+
+  </div>
+
+</template>
+
+<script>
+import PersonAPI from '../api/PersonAPI'
+import axios from 'axios'
+import Cookies from 'js-cookie'
+
+export default {
+  name: 'Home',
+  data () {
+    return {
+      tableData: [],
+      formData: {
+        name: '',
+        sex: ''
+      },
+      via_img_metadata: {},  // data structure to store loaded images metadata
+      via_img_fileref: {},  // reference to local images selected by using browser file selector
+      via_image_id_list: [],
+      via_image_filename_list: [],
+      via_img_count: 0,
+      fileList: {}
+    }
+  },
+  created () {
+    this.getData(1)
+  },
+  methods: {
+    select_local_files: function(){
+      document.getElementById('invisible_file_input').click()
+    },
+    add_local_files: function(event){
+      let select_local_files = event.target.files
+      let new_img_index_list = []
+      this.fileList = select_local_files
+      for (let i = 0; i < select_local_files.length; i++) {
+        let filetype =select_local_files[i].type.substr(0, 5)
+        if (filetype === 'image') {
+          let filename = select_local_files[i].name
+          let size = select_local_files[i].size
+          let img_id1 = this._via_get_image_id(filename, size)
+          let img_id2  = this._via_get_image_id(filename, -1);
+          let img_id = img_id1
+          if (this.via_img_metadata.hasOwnProperty(img_id1) || this.via_img_metadata.hasOwnProperty(img_id2)) {
+            if(this.via_img_metadata.hasOwnProperty(img_id2)) {
+              img_id = img_id2
+            }
+            this.via_img_fileref[img_id] =select_local_files[i]
+            if (this.via_img_metadata[img_id].size === -1 ) {
+             this. via_img_metadata[img_id].size = size;
+            }
+
+          } else {
+            img_id = this.project_add_new_file(filename, size)
+            this.via_img_fileref[img_id] =select_local_files[i]
+            new_img_index_list.push(this.via_image_id_list.indexOf(img_id))
+          }
+        } else {
+          console.log('其它类型文件！')
+        }
+      }
+      if(this.via_img_metadata) {
+        if(new_img_index_list.length) {
+          //显示new_img_index_list[0]
+          this._via_show_img(new_img_index_list[0])
+        } else {
+          // show original image
+        }
+      } else {
+        // 没有增加新文件
+      }
+
+    },
+    project_add_new_file: function (filename, size, file_id){
+      var img_id = file_id;
+      if ( typeof(img_id) === 'undefined' ) {
+        if ( typeof(size) === 'undefined' ) {
+          size = -1;
+        }
+        img_id = this._via_get_image_id(filename, size);
+      }
+
+      if (!this.via_img_metadata.hasOwnProperty(img_id) ) {
+        this.$set(this.via_img_metadata,img_id,new file_metadata(filename, size))
+        this.via_image_id_list.push(img_id);
+        this.via_image_filename_list.push(filename);
+        this.via_img_count += 1;
+      }
+      return img_id;
+    },
+    _via_get_image_id: function (filename, size) {
+      if ( typeof(size) === 'undefined' ) {
+        return filename;
+      } else {
+        return filename + size;
+      }
+    },
+    getObjectURL: function (file) {
+      console.log(file)
+      let url = null ;
+      if (window.createObjectURL!=undefined) { // basic
+        url = window.createObjectURL(file) ;
+      }else if (window.webkitURL!=undefined) { // webkit or chrome
+        url = window.webkitURL.createObjectURL(file) ;
+      }else if (window.URL!=undefined) { // mozilla(firefox)
+        url = window.URL.createObjectURL(file) ;
+      }
+      return url ;
+    },
+    _via_show_img: function (img_index) {
+      let img_id = this.via_image_id_list[img_index]
+      let url = this.getObjectURL(this.via_img_fileref[img_id])
+      let bimg = document.createElement('img')
+      bimg.setAttribute('src',url)
+      document.getElementById('img_box').append(bimg)
+    },
+    jump_to_image: function (img_id) {
+      console.log(this.via_image_id_list.indexOf(img_id))
+      this._via_show_img(this.via_image_id_list.indexOf(img_id))
+    },
+    getData: function ({ commit, state }, id) { // 得到指定文章详情
+      PersonAPI.getAllData({ commit, state }, id).then(result => {
+        this.tableData = result.data
+      })
+    },
+    submitData: function (formData) {
+      this.$refs.formData.validate((valid) => {
+        if (valid) {
+          this.addData()
+        } else {
+          return false
+        }
+      })
+    },
+    addData: function () {
+      axios.get('http://127.0.0.1:8000/backend/add_data/').then(() => {
+        PersonAPI.addData(this.formData).then(result => {
+          if (result.data) {
+            console.log('post成功')
+          } else {
+            console.log('post失败')
+          }
+        })
+      })
+
+    }
+  }
+}
+
+function file_metadata(filename, size) {
+  this.filename = filename;
+  this.size     = size;         // file size in bytes
+  this.regions  = [];           // array of file_region()
+  this.file_attributes = {};    // image attributes
+}
+</script>
+
+<style scoped>
+  #img_box >>> img{
+    visibility: hidden;
+  }
+</style>

DAPlatform-front/src/components/Layout.vue

+<template>
+  <div class="layout">
+    <el-container>
+    <el-header>
+      <TopNavBar class="top-nav-bar"></TopNavBar>
+    </el-header>
+    <el-container>
+        <sidebar class="sidebar"></sidebar>
+      <el-main>
+          <main-view class="main-view"></main-view>
+      </el-main>
+    </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+  import MenuBar from './ToolBar'
+  import Sidebar from './Sidebar'
+  import MainView from './MainView'
+  import TopNavBar from './TopNavBar'
+  export default {
+    name: "Layout",
+    components: {
+      TopNavBar,
+      menuBar: MenuBar,
+      sidebar: Sidebar,
+      mainView: MainView
+    },
+  }
+</script>
+
+<style scoped>
+  .layout {
+    height: 100%;
+    overflow: hidden;
+  }
+  .top-nav-bar  {
+    top: 0;
+    left: 0;
+  }
+  .main{
+    margin-top: 40px;
+    height: calc(100% - 40px);
+  }
+  .sidebar{
+    position: fixed;
+    top: 105px;
+    left: 0;
+    bottom: 0;
+    width: 260px;
+  }
+  .main-view{
+    position: fixed;
+    top: 105px;
+    bottom: 20px;
+    left: 280px;
+    right: 20px;
+    width: 100%;
+    height: 100%;
+  }
+</style>

DAPlatform-front/src/components/MainView.vue

+<template>
+    <div class="img-view">
+<!--      <div id="img-box">-->
+<!--
+      </div>-->
+      <img v-for="item in image_list" :src="item.url" :id="item.id" class="img-item" />
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "MainView",
+      data(){
+        return{
+          via_img_fileref: {},
+          image_list: [],
+        }
+      },
+      mounted(){
+        let _this = this
+        this.bus.$on('change-image-list', function (result) {
+          _this.via_img_fileref = result
+        })
+        this.bus.$on('add-image-list', function (result) {
+          let image_obj
+          let i
+          for (i = 0; i < result.length; i++) {
+            image_obj = new img_obj()
+            image_obj.url =_this.getObjectURL(_this.via_img_fileref[result[i]])
+            image_obj.id = result[i]
+            _this.image_list.push(image_obj)
+          }
+        })
+        this.bus.$on('show-img', function (img_id) {
+          _this.$nextTick(() => {
+            _this.img_list_remove_all_active_class()
+            _this.img_add_visible_class(img_id)
+          })
+
+        })
+      },
+      methods:{
+        img_list_remove_all_active_class: function () {
+            let imgs = document.getElementById('img-box').childNodes
+            let j
+            for (j = 0; j < imgs.length; j++) {
+              imgs[j].classList.remove('visible')
+            }
+        },
+        img_add_visible_class: function (img_id) {
+          // image显示
+          document.getElementById(img_id).classList.add('visible')
+        },
+        getObjectURL: function (file) {
+          let url = null ;
+          if (window.createObjectURL!=undefined) { // basic
+            url = window.createObjectURL(file) ;
+          }else if (window.webkitURL!=undefined) { // webkit or chrome
+            url = window.webkitURL.createObjectURL(file) ;
+          }else if (window.URL!=undefined) { // mozilla(firefox)
+            url = window.URL.createObjectURL(file) ;
+          }
+          return url ;
+        },
+      }
+    }
+    function img_obj(url, id) {
+      this.url = url
+      this.id = id
+    }
+</script>
+
+<style scoped>
+  .img-view {
+    padding: 10px;
+  }
+  #img-box {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+  }
+  #img-box >>> img{
+    visibility: hidden;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  #img-box >>> .img-item.visible{
+    visibility: visible;
+  }
+
+</style>

DAPlatform-front/src/components/Sidebar.vue

+<template>
+    <div class="sidebar-box">
+      <div>
+        <div class="img-list-title">图片列表</div>
+        <div class="img-title-list-box">
+          <div id="img-title-list">
+            <div v-for="(item,index) in via_img_metadata" @click="jump_to_image(index)" class="img-title" :id="'title-' + index">{{item.filename}}</div>
+          </div>
+        </div>
+        <div class="add-file-btn-group">
+          <el-button icon="el-icon-circle-plus" size="small" @click="select_local_files">添加本地图片</el-button>
+          <el-button icon="el-icon-circle-plus" size="small">添加URL</el-button>
+          <input id="invisible_file_input" type="file" style="display: none;" multiple="multiple" accept=".jpg,.jpeg,.png,.bmp" @change="add_local_files"/>
+        </div>
+        <div class="img-list-title">图层列表</div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "Sidebar",
+      data () {
+        return {
+          via_img_metadata: {
+          },  // data structure to store loaded images metadata
+          via_img_fileref: {},  // reference to local images selected by using browser file selector
+          via_image_id_list: [],
+          via_image_filename_list: [],
+          via_img_count: 0,
+          fileList: {}
+        }
+      },
+      mounted () {
+        let _this = this
+        this.bus.$on('pre-img',function (is_selected_id) {
+          let is_selected_index = _this.via_image_id_list.indexOf(is_selected_id)
+          let pre_index = (is_selected_index - 1 + _this.via_image_id_list.length) % _this.via_image_id_list.length
+          let pre_id = _this.via_image_id_list[pre_index]
+          _this.jump_to_image(pre_id)
+        })
+        this.bus.$on('next-img',function (is_selected_id) {
+          let is_selected_index = _this.via_image_id_list.indexOf(is_selected_id)
+          let pre_index = (is_selected_index + 1 + _this.via_image_id_list.length) % _this.via_image_id_list.length
+          let pre_id = _this.via_image_id_list[pre_index]
+          _this.jump_to_image(pre_id)
+        })
+      },
+      methods: {
+        add_local_files: function (event) {
+          let select_local_files = event.target.files
+          let new_img_id_list = []
+          this.fileList = select_local_files
+          for (let i = 0; i < select_local_files.length; i++) {
+            let filetype = select_local_files[i].type.substr(0, 5)
+            if (filetype === 'image') {
+              let filename = select_local_files[i].name
+              let size = select_local_files[i].size
+              let img_id1 = this._via_get_image_id(filename, size)
+              let img_id2  = this._via_get_image_id(filename, -1);
+              let img_id = img_id1
+              if (this.via_img_metadata.hasOwnProperty(img_id1) || this.via_img_metadata.hasOwnProperty(img_id2)) {
+                if(this.via_img_metadata.hasOwnProperty(img_id2)) {
+                  img_id = img_id2
+                }
+                this.via_img_fileref[img_id] =select_local_files[i]
+                if (this.via_img_metadata[img_id].size === -1 ) {
+                 this. via_img_metadata[img_id].size = size;
+                }
+
+              } else {
+                img_id = this.project_add_new_file(filename, size)
+                this.via_img_fileref[img_id] =select_local_files[i]
+                new_img_id_list.push(img_id)
+              }
+            } else {
+              console.log('其它类型文件！')
+            }
+          }
+          this.bus.$emit('change-image-list', this.via_img_fileref)
+          if(this.via_img_metadata) {
+            if(new_img_id_list.length) {
+              this.bus.$emit('add-image-list', new_img_id_list)
+              //显示new_img_index_list[0]
+              this._via_show_img(new_img_id_list[0])
+            } else {
+              // show original image
+            }
+          } else {
+            // 没有增加新文件
+          }
+        },
+        project_add_new_file: function (filename, size, file_id){
+          var img_id = file_id;
+          if ( typeof(img_id) === 'undefined' ) {
+            if ( typeof(size) === 'undefined' ) {
+              size = -1;
+            }
+            img_id = this._via_get_image_id(filename, size);
+          }
+
+          if (!this.via_img_metadata.hasOwnProperty(img_id) ) {
+            this.$set(this.via_img_metadata,img_id,new file_metadata(filename, size))
+            this.via_image_id_list.push(img_id);
+            this.via_image_filename_list.push(filename);
+            this.via_img_count += 1;
+          }
+          return img_id;
+        },
+        _via_get_image_id: function (filename, size) {
+          if ( typeof(size) === 'undefined' ) {
+            return filename;
+          } else {
+            return filename + size;
+          }
+        },
+        _via_show_img: function (img_id) {
+          this.bus.$emit('show-img',img_id)
+          this.$nextTick(() => {
+            // 点击图片列表，样式切换
+            this.img_title_list_remove_all_active_class()
+            this.img_title_list_add_active_class(img_id)
+          })
+        },
+        jump_to_image: function (img_id) {
+          this._via_show_img(img_id)
+        },
+        select_local_files: function () {
+          document.getElementById('invisible_file_input').click()
+        },
+        img_title_list_add_active_class: function (img_id) {
+          // 列表高亮
+          let element = document.getElementById('title-' + img_id)
+          element.classList.add('img-title-active')
+          // 当前选中列表滚动到可视区域
+          this.img_title_list_scroll_to_view(element)
+        },
+        img_title_list_remove_all_active_class: function () {
+
+            let els = document.getElementById('img-title-list').childNodes
+            let i
+            for (i = 0; i < els.length; i++) {
+              els[i].classList.remove('img-title-active')
+            }
+
+        },
+        // 图片列表根据选中元素滚动，以显示选中元素
+        img_title_list_scroll_to_view: function (element) {
+          let img_title_list_box = document.getElementsByClassName('img-title-list-box')[0]
+          let img_list_title = document.getElementsByClassName('img-list-title')[0]
+          // 该元素 距离 显示区域顶部 的距离
+          let img_title_top = element.offsetTop - img_list_title.offsetHeight - img_title_list_box.scrollTop
+          // 该元素的高度
+          let img_title_height = element.offsetHeight
+          // 显示区域的高度
+          let box_height = img_title_list_box.clientHeight
+          // 如果距离显示区域顶部的距离小于等于0，则是在显示区域上面，则向下滚动
+          if (img_title_top <= 0) {
+            // img_title_top为负值，直接加上即可
+            img_title_list_box.scrollTop += img_title_top
+          } else { //大于0，也就是在显示区域顶部的下面了
+            // 元素底部 距离 显示区域底部 的距离
+            let differ = box_height - (img_title_top + img_title_height)
+            // 距离 显示区域底部 的距离小于0，则在显示区域的底部的下面了，则向上滚动；大于等于0，则在显示区域内，不需要滚动
+            if (differ < 0) {
+              // differ为负值，要减去它
+              img_title_list_box.scrollTop -= differ
+            }
+          }
+        }
+      }
+    }
+    function file_metadata(filename, size) {
+      this.filename = filename;
+      this.size     = size;         // file size in bytes
+      this.regions  = [];           // array of file_region()
+      this.file_attributes = {};    // image attributes
+    }
+</script>
+
+<style scoped>
+  .sidebar-box{
+    border: 1px solid #c6e2ff;
+  }
+  .img-list-title{
+    line-height: 40px;
+    padding: 0 10px;
+    background: #ecf5ff;
+    border-bottom: 1px solid #c6e2ff;
+  }
+  .img-title-list-box{
+    height: 300px;
+    overflow: auto;
+    border-bottom: 1px solid #c6e2ff;
+    padding: 5px;
+  }
+  .img-title{
+    padding: 0 5px;
+    line-height: 24px;
+    border-left: 3px solid #c6e2ff;
+  }
+  .img-title:hover{
+    color: #409EFF;
+    border-color: #409EFF;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  .add-file-btn-group{
+    padding: 0 10px;
+    border-bottom: 1px solid #c6e2ff;
+  }
+  .add-file-btn-group >>> button{
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+  .img-title-active {
+    font-weight: bold;
+    border-left: 3px solid;
+  }
+</style>

DAPlatform-front/src/components/ToolBar.vue

+<template>
+    <div class="menu-box">
+      <el-button-group v-if="activeIndex1===1">
+        <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="pre_img()">上一张</el-button>
+        <el-button type="primary" size="small" @click="next_img()">下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+      </el-button-group>
+      <el-button-group v-if="activeIndex1===2">
+        <el-button type="primary" icon="el-icon" size="small" @click="on">拖动图片</el-button>
+        <el-button type="primary" icon="el-icon" size="small">多边形标注</el-button>
+        <el-button type="primary" icon="el-icon" size="small">矩形标注</el-button>
+      </el-button-group>
+      <el-button-group v-show="activeIndex1===3">
+        <el-button type="primary" icon="el-icon" size="small">打开图层</el-button>
+        <el-button type="primary" icon="el-icon" size="small">飞到坐标点</el-button>
+      </el-button-group>
+
+<!--      <el-button-group>-->
+<!--        <el-button type="success" icon="el-icon-zoom-in" size="small">放大</el-button>-->
+<!--        <el-button type="success" icon="el-icon-zoom-out" size="small">缩小</el-button>-->
+<!--      </el-button-group>-->
+<!--      <el-button type="success" icon="el-icon-download" size="small">导出</el-button>-->
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "ToolBar",
+      data(){
+        return{
+          activeIndex1:2
+        }
+      },
+      methods:{
+        pre_img: function () {
+          let is_selected = document.getElementsByClassName('visible')
+          if(is_selected.length) {
+            let is_selected_id = is_selected[0].id
+            this.bus.$emit('pre-img',is_selected_id)
+          } else {
+            console.log('请上传图片')
+          }
+
+        },
+        next_img: function () {
+          let is_selected = document.getElementsByClassName('visible')
+          if(is_selected.length) {
+            let is_selected_id = is_selected[0].id
+            this.bus.$emit('next-img', is_selected_id)
+          } else {
+            console.log('请上传图片')
+          }
+        },
+        on:function () {
+          this.activeIndex1=1
+        }
+      },
+      created () {
+        this.bus.$on("ActiveIndex",function (val) {
+          this.activeIndex1=val
+        })
+      },
+    }
+</script>
+
+<style scoped>
+  .menu-box{
+    padding: 2px 10px;
+  }
+</style>

DAPlatform-front/src/components/TopNavBar.vue

+<template>
+  <div>
+  <el-menu
+    class="el-menu-top"
+    mode="horizontal">
+    <el-container>
+      <el-menu-item index="1" @click="changeToolBar(1)">开始</el-menu-item>
+      <el-menu-item index="2" @click="changeToolBar(2)">标注</el-menu-item>
+      <el-menu-item index="3" @click="changeToolBar(3)">图层</el-menu-item>
+    </el-container>
+  </el-menu>
+    <el-container class="toolBar">
+      <el-button-group v-if="activeIndex1===1">
+        <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" size="small" @click="pre_img()">上一张</el-button>
+        <el-button class="tool-button"type="primary" size="small" @click="next_img()">下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+      </el-button-group>
+      <el-button-group v-if="activeIndex1===2">
+        <el-button class="tool-button"type="primary" icon="el-icon" size="small">移动图片</el-button>
+        <el-button class="tool-button"type="primary" icon="el-icon" size="small">多边形标注</el-button>
+        <el-button class="tool-button"type="primary" icon="el-icon" size="small">矩形标注</el-button>
+      </el-button-group>
+      <el-button-group v-show="activeIndex1===3">
+        <el-button class="tool-button"type="primary" icon="el-icon" size="small">打开图层</el-button>
+        <el-button class="tool-button"type="primary" icon="el-icon" size="small">飞到坐标点</el-button>
+      </el-button-group>
+    </el-container>
+  </div>
+
+</template>
+
+<script>
+
+
+
+  export default {
+    name: 'TopNavBar',
+    data () {
+      return {
+        activeIndex1: 1,
+      };
+    },
+    methods: {
+      pre_img: function () {
+        let is_selected = document.getElementsByClassName('visible')
+        if (is_selected.length) {
+          let is_selected_id = is_selected[0].id
+          this.bus.$emit('pre-img', is_selected_id)
+        } else {
+          console.log('请上传图片')
+        }
+      },
+      next_img: function () {
+        let is_selected = document.getElementsByClassName('visible')
+        if (is_selected.length) {
+          let is_selected_id = is_selected[0].id
+          this.bus.$emit('next-img', is_selected_id)
+        } else {
+          console.log('请上传图片')
+        }
+      },
+      changeToolBar(val){
+        this.activeIndex1=val
+      }
+    }
+  }
+</script>
+
+<style>
+  .top-nav-bar{
+    background-color: white;
+    text-color: #fff;
+    active-text-color: #fff
+  }
+  .toolBar{
+    margin-top: 10px;
+  }
+  .tool-button{
+    color: black;
+    background-color: aliceblue;
+    border-color: black;
+  }
+</style>

DAPlatform-front/src/main.js

@@ -5,11 +5,19 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-
-Vue.config.productionTip = false
+import axios from 'axios'
+import './assets/css/common.css'
 
 Vue.use(ElementUI)
 
+axios.interceptors.request.use((config) => {
+  config.headers['X-Requested-With'] = 'XMLHttpRequest'
+  return config
+})
+
+let eventBus = new Vue()
+Vue.prototype.bus = eventBus
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

DAPlatform-front/src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+import Home from '@/components/Home'
+import Layout from '@/components/Layout'
 
 Vue.use(Router)
 
@@ -8,8 +10,18 @@ export default new Router({
   routes: [
     {
       path: '/',
+      name: 'Layout',
+      component: Layout
+    },
+    {
+      path: '/HelloWorld',
       name: 'HelloWorld',
       component: HelloWorld
+    },
+    {
+      path: '/home',
+      name: 'Home',
+      component: Home
     }
   ]
 })