完善写法，避免重复请求

src/api/collectionbox.js

@@ -71,12 +71,3 @@ export function checkDeviceInternalCode(params) {
    params
  })
}
/*  查询服务器名字 */
export function queryServer(params) {
  return request({
    url: '/ajax/server/qo',
    method: 'get',
    params
  })
}

src/api/sensor.js

@@ -71,13 +71,3 @@ export function checkDeviceInternalCode(params) {
    params
  })
}
/*  查询采集盒名字 */
export function queryServer(params) {
  return request({
    url: '/ajax/device/qo',
    method: 'get',
    params
  })
}

src/api/server.js

@@ -71,12 +71,3 @@ export function checkDeviceInternalCode(params) {
    params
  })
}
/*  查询服务器名字 */
export function queryServer(params) {
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}

src/router/index.js

@@ -1,18 +1,11 @@
import Vue from 'vue'
import Router from 'vue-router'
// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
/** note: submenu only apppear when children.length>=1
*   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
**/
/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length

src/utils/queryBase.js

@@ -0,0 +1,138 @@
/**
 * Created by luyanan on 18/8/27.
 * bridge、server、device
 */
/* eslint-disable one-var */
import request from '@/utils/request'
var $req = {
  get: function(url, data, sh, eh) {
    request({
      method: 'get',
      url: url,
      params: data
    }).then(res => {
      sh(res)
    }).catch(err => {
      console.log(err)
      eh(err)
    })
  }
}
var objCache = {
  bridge: {},
  server: {},
  device: {}
}
var objHcache = {
  bridge: {},
  server: {},
  device: {}
}
var objCacheHandler = {
  bridge: function(id) {
    var hc = objHcache.bridge[id]
    $req.get('/ajax/bridge/qo?id=' + id, null, function(data) {
      delete objHcache.bridge[id]
      if (data.success) {
        objCache.bridge[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      } else {
        for (let i = 0; i < hc.length; ++i) {
          hc[i](false)
        }
      }
    }, function() {
      for (let i = 0; i < hc.length; ++i) {
        hc[i](false)
      }
    })
  },
  server: function(id) {
    var hc = objHcache.server[id]
    $req.get('/ajax/server/qo?id=' + id, null, function(data) {
      delete objHcache.server[id]
      if (data.success) {
        objCache.server[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      } else {
        for (let i = 0; i < hc.length; ++i) {
          hc[i](false)
        }
      }
    }, function() {
      for (let i = 0; i < hc.length; ++i) {
        hc[i](false)
      }
    })
  },
  device: function(id) {
    var hc = objHcache.device[id]
    $req.get('/ajax/device/qo?id=' + id, null, function(data) {
      delete objHcache.device[id]
      if (data.success) {
        objCache.device[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      } else {
        for (let i = 0; i < hc.length; ++i) {
          hc[i](false)
        }
      }
    }, function() {
      for (let i = 0; i < hc.length; ++i) {
        hc[i](false)
      }
    })
  }
}
var cacheModel = {
  getBridge: function(id, handler) {
    var data = objCache.bridge[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.bridge[id]) {
        objHcache.bridge[id].push(handler)
      } else {
        objHcache.bridge[id] = []
        objHcache.bridge[id].push(handler)
        objCacheHandler.bridge(id)
      }
    }
  },
  getServer: function(id, handler) {
    var data = objCache.server[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.server[id]) {
        objHcache.server[id].push(handler)
      } else {
        objHcache.server[id] = []
        objHcache.server[id].push(handler)
        objCacheHandler.server(id)
      }
    }
  },
  getDevice: function(id, handler) {
    var data = objCache.device[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.device[id]) {
        objHcache.device[id].push(handler)
      } else {
        objHcache.device[id] = []
        objHcache.device[id].push(handler)
        objCacheHandler.device(id)
      }
    }
  }
}
export default cacheModel

src/utils/queryInfo.js

@@ -1,5 +1,6 @@
/**
 * Created by luyanan on 18/8/23.
 * All information about bridges
 */
/* eslint-disable one-var */
import request from '@/utils/request'

src/utils/request.js

@@ -1,14 +1,11 @@
import axios from 'axios'
import qs from 'qs'
import { comUrl } from '@/utils/index'
// import { Message } from 'element-ui'
// import store from '@/store'
// import { getSession } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
  baseURL: comUrl, // api的base_url
  // timeout: 5000 // 请求超时时间
  timeout: 5000, // 请求超时时间
  paramsSerializer: function(params) {
    return qs.stringify(params, { arrayFormat: 'repeat' })
  }
@@ -28,30 +25,11 @@ service.interceptors.request.use(config => {
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(response => {
  // response => {
  // /**
  // * code为非20000是抛错 可结合自己业务进行修改
  // */
  //   const res = response.data
  //   if (res.code !== 20000) {
  //     Message({
  //       message: res.message,
  //       type: 'error',
  //       duration: 5 * 1000
  //     })
  //     return Promise.reject('error')
  //   } else {
  //     return response.data
  //   }
  // },
  let data = response.data
  const status = response.status
  if (status === 200) {
@@ -67,13 +45,9 @@ service.interceptors.response.use(response => {
    }
    return response.data
  } else {
    // 业务异常
    console.log(response)
    return Promise.resolve(response)
  }
}, error => {
  // 系统异常(后期统一处理)
  console.log(error)
  return Promise.reject(error)
})

src/views/baseInfoManage/boxesConfig/index.vue

@@ -11,26 +11,10 @@
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="采集盒编号">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="采集盒信道数量">
        <template slot-scope="scope">
          <span>{{scope.row.channels}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="所属服务器编号">
        <template slot-scope="scope">
          <span>{{scope.row.serverName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="采集盒编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="采集盒信道数量" prop="channels"></el-table-column>
      <el-table-column min-width="150px" align="center" label="所属服务器编号" prop="serverName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息" prop="remark"></el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
@@ -89,8 +73,9 @@
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode, queryServer } from '@/api/collectionbox'
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode } from '@/api/collectionbox'
import waves from '@/directive/waves'
import queryBase from '@/utils/queryBase'
export default {
  name: 'complexTable',
  directives: {
@@ -256,19 +241,31 @@ export default {
      this.edit = ''
    },
    getList() {
      var that = this
      this.listLoading = true
      pageQueryDevice(this.listQuery).then(response => {
        const $data = response.data.data
        var hdata = { num: 1, data: $data }
        for (let i = 0; i < $data.length; i++) {
          $data[i].serverName = ''
          queryServer({ id: $data[i].serverId }).then(response => {
            $data[i].serverName = response.data.code
          hdata.num++
          const str = $data[i]
          queryBase.getServer(str.serverId, function(sc, value) {
            if (sc) {
              str.serverName = value.code
              hdata.num--
              if (hdata.num === 0) {
                that.list = hdata.data
              }
            }
          })
        }
        this.list = $data
        this.total = response.data.total
        hdata.num--
        if (hdata.num === 0) {
          that.list = hdata.data
        }
        that.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
          that.listLoading = false
        }, 1.5 * 1000)
      })
    },

src/views/baseInfoManage/sensorsConfig/index.vue

@@ -9,33 +9,13 @@
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加传感器</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
    <el-table :key='tableKey' :data="listG" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="传感器编号">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="传感器所在主缆">
        <template slot-scope="scope">
          <span>{{cableMain[scope.row.cableType]}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="传感器位置">
        <template slot-scope="scope">
          <span>{{addr[scope.row.locType]}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="所属采集盒编号">
        <template slot-scope="scope">
          <span>{{scope.row.deviceName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="传感器编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="传感器所在主缆" prop="cableType"></el-table-column>
      <el-table-column width="150px" align="center" label="传感器位置" prop="locType"></el-table-column>
      <el-table-column min-width="150px" align="center" label="所属采集盒编号" prop="deviceName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息" prop="remark"></el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
@@ -113,9 +93,10 @@
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode, queryServer } from '@/api/sensor'
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode } from '@/api/sensor'
import waves from '@/directive/waves'
import queryDict from '@/utils/queryDict'
import queryBase from '@/utils/queryBase'
export default {
  name: 'complexTable',
  directives: {
@@ -217,7 +198,7 @@ export default {
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      listG: null,
      total: null,
      listLoading: true,
      listQuery: {
@@ -240,19 +221,19 @@ export default {
  methods: {
    getDictoryData() {
      const that = this
      queryDict.applyDict('ZLLX', function(dictData) {
      queryDict.applyDict('ZLLX', function(dictData) { // 主缆
        dictData.map(item => {
          that.options.push({ value: item.code, label: item.caption })
          that.cableMain[item.code] = item.caption
        })
      }) // 主缆
      queryDict.applyDict('ZLWZ', function(dictData) {
        dictData.map(item => {
          that.options1.push({ value: item.code, label: item.caption })
          that.addr[item.code] = item.caption
        queryDict.applyDict('ZLWZ', function(dictData) { // 位置
          dictData.map(item => {
            that.options1.push({ value: item.code, label: item.caption })
            that.addr[item.code] = item.caption
          })
          that.getList()
        })
      }) // 位置
      that.getList()
      })
    },
    submitForm(formName) {
      const that = this
@@ -306,19 +287,33 @@ export default {
      this.edit = ''
    },
    getList() {
      var that = this
      this.listLoading = true
      pageQueryDevice(this.listQuery).then(response => {
        const $data = response.data.data
      pageQueryDevice(that.listQuery).then(response => {
        var $data = response.data.data
        var hdata = { num: 1, data: $data }
        for (let i = 0; i < $data.length; i++) {
          $data[i].deviceName = ''
          queryServer({ id: $data[i].deviceId }).then(response => {
            $data[i].deviceName = response.data.code
          hdata.num++
          $data[i].cableType = that.cableMain[$data[i].cableType]
          $data[i].locType = that.addr[$data[i].locType]
          const str = $data[i]
          queryBase.getDevice(str.deviceId, function(sc, value) {
            if (sc) {
              str.deviceName = value.code
              hdata.num--
              if (hdata.num === 0) {
                that.listG = hdata.data
              }
            }
          })
        }
        this.list = $data
        this.total = response.data.total
        hdata.num--
        if (hdata.num === 0) {
          that.listG = hdata.data
        }
        that.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
          that.listLoading = false
        }, 1.5 * 1000)
      })
    },

src/views/baseInfoManage/serversConfig/index.vue

@@ -11,26 +11,10 @@
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="服务器编号">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="采集盒数量">
        <template slot-scope="scope">
          <span>{{scope.row.devices}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="所属桥梁">
        <template slot-scope="scope">
          <span>{{scope.row.bridgeName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="服务器编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="采集盒数量" prop="devices"></el-table-column>
      <el-table-column min-width="150px" align="center" label="所属桥梁" prop="bridgeName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息" prop="remark"></el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
@@ -89,8 +73,9 @@
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode, queryServer } from '@/api/server'
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode } from '@/api/server'
import waves from '@/directive/waves'
import queryBase from '@/utils/queryBase'
export default {
  name: 'complexTable',
  directives: {
@@ -256,19 +241,31 @@ export default {
      this.edit = ''
    },
    getList() {
      var that = this
      this.listLoading = true
      pageQueryDevice(this.listQuery).then(response => {
        const $data = response.data.data
        var hdata = { num: 1, data: $data }
        for (let i = 0; i < $data.length; i++) {
          $data[i].bridgeName = ''
          queryServer({ id: $data[i].bridgeId }).then(response => {
            $data[i].bridgeName = response.data.shortName
          hdata.num++
          const str = $data[i]
          queryBase.getBridge(str.bridgeId, function(sc, value) {
            if (sc) {
              str.bridgeName = value.shortName
              hdata.num--
              if (hdata.num === 0) {
                that.list = hdata.data
              }
            }
          })
        }
        this.list = $data
        this.total = response.data.total
        hdata.num--
        if (hdata.num === 0) {
          that.list = hdata.data
        }
        that.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
          that.listLoading = false
        }, 1.5 * 1000)
      })
    },

src/views/layout/components/TopNavbar.vue

@@ -158,28 +158,6 @@ export default {
      cursor: pointer;
    }
  }
  .avatar-container {
    height: 50px;
    display: inline-block;
    position: absolute;
    right: 35px;
    .avatar-wrapper {
      cursor: pointer;
      position: relative;
      color: #fff;
      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
      .el-icon-caret-bottom {
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}
.drop-menu-list{
  .el-dropdown-menu__item{