大桥除湿系统

src/api/sensorAdmin.js

@@ -0,0 +1,80 @@
import request from '@/utils/request'
/*  添加传感器 */
export function addDevice(params) {
  return request({
    url: '/ajax/envData/transducer',
    method: 'post',
    data: params
  })
}
/*  更新传感器信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/envData/transducer/update',
    method: 'post',
    data: params
  })
}
/*  删除传感器信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/envData/transducer/delete',
    method: 'get',
    params
  })
}
/*  查询单个传感器 */
export function queryDevice(params) {
  return request({
    url: '/ajax/envData/transducer/qo',
    method: 'get',
    params
  })
}
/*  分页查询传感器 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/envData/transducer/pq',
    method: 'get',
    params
  })
}
/*  传感器所属采集盒编号列表 */
export function DeviceOfservice() {
  return request({
    url: '/ajax/envData/server/typeCode',
    method: 'get'
  })
}
/*  校验传感器编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/envData/transducer/checkCode',
    method: 'get',
    params
  })
}
/*  校验传感器内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/envData/transducer/checkSeq',
    method: 'get',
    params
  })
}
/*  所属方位 */
export function ownPosition() {
  return request({
    url: '/ajax/envData/transducer/position',
    method: 'get'
  })
}

src/api/serverAdmin.js

@@ -0,0 +1,82 @@
import request from '@/utils/request'
/*  添加服务器 */
export function addDevice(params) {
  return request({
    url: '/ajax/envData/server',
    method: 'post',
    data: params
  })
}
/*  更新服务器信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/envData/server/update',
    method: 'post',
    data: params
  })
}
/*  删除服务器信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/envData/server/delete',
    method: 'get',
    params
  })
}
/*  查询单个服务器 */
export function queryDevice(params) {
  return request({
    url: '/ajax/envData/server/qo',
    method: 'get',
    params
  })
}
/*  分页查询服务器 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/envData/server/pq',
    method: 'get',
    params
  })
}
/*  服务器所属采桥梁列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/bridge/list',
    method: 'get',
    params
  })
}
/*  校验服务器编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/envData/server/checkCode',
    method: 'get',
    params
  })
}
/*  校验服务器内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/envData/server/checkSeq',
    method: 'get',
    params
  })
}
/*  校验采集服务器ip */
export function checkIp(params) {
  return request({
    url: '/ajax/envData/server/checkIp',
    method: 'get',
    params
  })
}

src/components/Breadcrumb/index.vue

@@ -11,6 +11,7 @@
<script>
import Cookies from 'js-cookie'
import { urlParse } from '@/utils/index'
export default {
  created() {
    this.getBreadcrumb()
@@ -34,10 +35,16 @@ export default {
        }
        return item.name
      })
      if (matched.length === 2 && matched[0].name === 'odule') {
        matched = [{ path: '/bridgeHome', meta: { title: bridgeName }}].concat(matched)
      }
      const first = matched[0]
      if (first && first.name !== 'dashboard') {
        matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)
      }
      if (matched[matched.length - 1].path === '/history') {
        matched[matched.length - 1].meta.title = urlParse('title')
      }
      this.levelList = matched
    }
  }

src/components/Detection/index.vue

@@ -0,0 +1,92 @@
<template>
  <div class="tagBox">
    <div class="tagBoxContent">
      <div class="tagCard" @click="change">
        <el-card v-for="item in list" :key="item.index" style="position:relative;">
          <img :src="src(item)" class="image">
          <div class="tagCardText">
            <span>{{item.name}}</span>
          </div>
          <p style="position: absolute;top: 80px;left:100px;font-size: 24px;">{{item.lastValue}}<span style="font-size:14px;">{{unitObj[item.unit]}}</span></p>
        </el-card>
      </div>
    </div>
    <p class="tagBoxGroup">{{num}}</p>
  </div>
</template>
<script>
  export default {
    props: ['list', 'num', 'tagText', 'tx'],
    name: 'complexTable',
    data() {
      return {
        arr: {},
        unitObj: {
          '01': '℃',
          '02': '%',
          '03': 'kPa',
          '04': 'm3/h'
        }
      }
    },
    created() {
      for (let i = 0; i < this.list.length; i++) {
        this.arr[this.list[i].code] = this.list[i].unit
      }
    },
    methods: {
      change() {
        if (this.tx) {
          this.$router.push({ name: 'history', query: { id: JSON.stringify(this.arr), title: `${this.tx}${this.tagText}${this.num}历史监测` }})
        } else {
          this.$router.push({ name: 'history', query: { id: JSON.stringify(this.arr), title: `${this.tagText}${this.num}历史监测` }})
        }
      },
      src(item) {
        return `/static/${item.unit}.png`
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .tagBox {
    margin-right: 10px;
    max-width: 460px;
    .tagBoxContent {
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      .tagCard {
        max-width: 460px;
        overflow: hidden;
        cursor: pointer;
        .el-card {
          margin: 30px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 166px;
          float: left;
          .tagCardText {
            padding: 14px 0;
            text-align: center;
          }
          .image {
            width: 120px;
            height: 120px;
            display: block;
          }
        }
      }
    }
    .tagBoxGroup {
      text-align: center;
      color: #304156;
    }
  }
</style>

src/icons/svg/arefaction.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552895764699" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M267.283 596.789c1.95 0.98 3.9 0.98 5.86 0.98 11.72 0 21.48-8.789 24.41-20.51 5.86-26.369 15.63-50.779 29.3-74.22l2.93-3.9c3.9-9.771 10.74-23.44 20.51-42 9.76-18.55 33.2-57.61 70.31-117.18 37.11-59.57 79.1-121.1 125-184.57 13.67 18.55 26.37 37.11 39.061 55.66 4.88 6.84 11.72 10.74 20.51 10.74 4.88 0 9.76-1.95 13.67-4.88 11.72-7.81 14.65-23.44 6.84-34.18-18.56-28.32-38.09-56.64-58.6-84.96 0 0-0.97-0.98-1.95-1.95 0 0 0 0-0.98 0l0-0.98-4.88-3.91-0.979 0 0-0.97-0.97 0-0.98 0-0.979-0.98-0.971 0-0.979 0-0.98-0.98-0.97 0-0.98 0-0.97 0-0.979 0-0.98 0-0.97 0-0.98 0-0.979 0-0.971 0-0.979 0-0.979 0-0.971 0-0.979 0.98-0.98 0-0.97 0-0.98 0 0 0.98-0.979 0-0.97 0c0 0.97 0 0.97-0.98 0.97l-4.88 3.91-0.98 0.98-1.949 1.95c-48.831 65.43-92.78 129.88-132.811 191.41-40.04 61.52-65.43 104.49-78.13 127.93-12.7 23.43-22.46 42.96-30.27 58.59-16.6 28.32-29.3 58.589-36.14 90.82C245.793 581.17 254.583 593.859 267.283 596.789L267.283 596.789 267.283 596.789zM851.263 634.879 851.263 633.9l0-1.951c0-55.67-14.649-108.398-42.97-156.25l-0.97-0.98-5.86-10.74c-15.63-27.34-59.57-3.91-43.95 24.41 2.931 4.89 5.86 8.79 6.84 11.72l1.95 2.93c23.44 40.04 35.16 83.011 35.16 128.909l0 8.791c-2.93 35.15-32.23 62.5-67.38 62.5-35.16 0-65.431-28.32-66.41-63.48l0-3.9c0-12.699-10.74-24.42-25.39-24.42-14.65 0-25.391 11.721-25.391 24.42l0 3.9c-0.979 16.6-7.81 31.25-20.51 42.971-14.65 13.67-31.25 20.51-49.8 20.51-14.65 0-29.3-4.881-42-13.67-24.41-18.561-55.66 22.459-28.32 41.01 21.49 14.65 44.92 22.459 70.32 22.459 32.22 0 60.54-10.738 83.979-33.199 3.91-3.91 7.811-7.811 10.74-12.699 23.44 30.279 54.69 45.898 92.78 45.898 14.64 0 28.319-1.949 41.01-6.83-12.69 24.41-28.32 46.871-48.83 66.4-49.8 49.811-109.37 74.221-179.68 74.221-51.76 0-99.61-14.65-141.61-42.971-27.34-18.549-55.66 23.441-28.32 42 51.76 34.18 108.4 50.781 169.93 50.781 83.979 0 156.25-29.301 215.819-88.871 56.641-56.641 85.931-125 88.86-205.08l0-6.83L851.26 634.879 851.263 634.879zM808.293 182.73l-629.88 629.879c-20.51 23.441 12.7 58.6 36.13 35.16l628.91-629.88C867.863 196.4 832.713 161.25 808.293 182.73L808.293 182.73z" p-id="2396"></path></svg>

src/icons/svg/bridge.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552895977130" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M223.799968 525.440076c8.878964-2.919112 13.86578-10.21689 19.217484-17.028151 9.852001-7.297779 18.852595-15.568595 25.785485-25.785485h-0.121629c29.556004-19.947262 53.638674-45.976007 76.748307-72.734529 8.149186-7.541038 19.825632-11.068298 25.420596-21.650077 45.976007-36.124005 95.844162-64.098824 156.415727-57.895712 60.449935 6.203112 111.534387 35.637487 159.334838 72.36964 36.853783 28.339708 62.03112 67.504454 97.425347 96.69557 16.663262 24.690818 38.07008 35.272598 69.450529 33.204893 46.462525-3.162371 93.289939-0.729778 140.117353-0.729778 0.243259 49.746526 0.364889 99.371422 1.094667 148.996318 0.12163 10.825039-3.162371 14.473928-14.595558 14.473928-115.669795-0.364889-231.339589-0.243259-347.009383 0-10.825039 0-14.595558-2.675852-14.960447-14.109039-1.946074-49.989785-5.473334-99.97957-7.662668-149.969355-0.486519-11.798076-7.419408-19.704003-13.014372-28.461337-14.960447-23.231263-58.260601-47.435562-94.262976-37.583561-32.596745 2.554223-58.017342 16.176743-72.49127 46.705784-14.352298 13.62252-7.419408 31.380449-8.757335 47.435563-0.729778 8.270816-0.12163 16.663262-0.121629 25.055707-5.108445 3.40563-4.257038 8.514075-4.257038 13.500891l0.729778 89.39779c-2.432593 9.852001-10.33852 7.784297-17.27141 7.784298-118.710536 0.12163-237.421071-0.12163-356.131607 0.364889-12.162965 0-15.933484-3.770519-15.811854-15.690225 0.608148-49.016748 0.364889-98.033496 0.608148-147.050243 56.071267-0.243259 112.142535-0.486519 168.213802-0.973037 9.122224-0.12163 18.974225 2.432593 25.907115-6.324742z m0 0" fill="#BFBFBF" p-id="6673"></path></svg>

src/icons/svg/logout.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552978079054" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2526" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.365 956.889c-221.971 0-402.647-180.613-402.647-402.647 0-150.625 83.028-287.444 216.661-357.228 12.245-6.372 27.364-1.624 33.736 10.621s1.624 27.364-10.621 33.736c-117.077 61.1-189.797 180.988-189.797 312.871 0 194.42 158.185 352.605 352.605 352.605s352.605-158.185 352.605-352.605c0-135.319-75.469-256.582-196.856-316.432-12.37-6.122-17.493-21.116-11.37-33.486 6.122-12.432 21.116-17.43 33.486-11.37 138.693 68.409 224.782 206.852 224.782 361.351 0.062 221.971-180.551 402.584-402.584 402.584z" p-id="2527"></path><path d="M511.365 542.497c-13.807 0-24.99-11.183-24.99-24.99V88.996c0-13.807 11.245-24.99 24.99-24.99 13.807 0 25.052 11.183 25.052 24.99v428.449c-0.063 13.807-11.246 25.052-25.052 25.052z" p-id="2528"></path></svg>

src/permission.js

@@ -7,14 +7,7 @@ import queryInfo from '@/utils/queryInfo'
NProgress.configure({ showSpinner: false })// NProgress Configuration
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('1') >= 0) return true
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login', '/findPwd'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getCookiesName()) {
@@ -24,7 +17,6 @@ router.beforeEach((to, from, next) => {
    } else {
      queryInfo.queryAllInfo()
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        // console.log(5555)
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          if (res.success) {
            const roles = [res.data.type.toString()]
@@ -35,12 +27,7 @@ router.beforeEach((to, from, next) => {
          }
        })
      } else {
        // console.log(4444)
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next()
        } else {
          // console.log(777)
        }
        next()
      }
    }
  } else {
@@ -52,7 +39,6 @@ router.beforeEach((to, from, next) => {
    }
  }
})
router.afterEach(() => {
  NProgress.done() // 结束Progress
})

src/router/index.js

@@ -5,6 +5,7 @@ Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
import com from '../views/layout/com'
/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -39,7 +40,21 @@ export const constantRouterMap = [
      name: 'dashboard',
      meta: { title: '主页' }
    }]
  },
  }
]
// 实例化vue的时候只挂载constantRouter
export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMapGeneralUser = [
  {
    path: '',
    hidden: true,
@@ -86,21 +101,104 @@ export const constantRouterMap = [
            name: 'bridgeMonitor',
            component: () => import('@/views/bridgesConsole/bridgeMonitor/index'),
            meta: {
              title: '历史监测信息查询',
              roles: ['0']
              title: '历史监测信息查询'
            }
          }
        ]
      }
    ]
  },
  {
    path: '',
    name: 'account',
    component: com,
    hidden: true,
    meta: { title: '账户设置' },
    children: [
      {
        path: 'modifyData',
        name: 'modifyData',
        component: () => import('@/views/account/modifyData'),
        meta: {
          title: '修改账户资料'
        }
      },
      {
        path: 'modifyPassword',
        name: 'modifyPassword',
        component: () => import('@/views/account/modifyPassword'),
        meta: {
          title: '修改账户资料'
        }
      }
    ]
  },
  {
    path: '',
    component: com,
    name: 'odule',
    redirect: 'noredirect',
    meta: {
      title: '除湿系统',
      icon: 'arefaction',
      roles: ['0']
    },
    children: [
      {
        path: 'gasHolder',
        name: 'gasHolder',
        component: () => import('@/views/dehumidificationSystem/airClamp'),
        meta: { title: '气夹监测' }
      },
      {
        path: 'saddleRoom',
        name: 'saddleRoom',
        component: () => import('@/views/dehumidificationSystem/saddleRoom'),
        meta: { title: '鞍室监测' }
      },
      {
        path: 'anchorChamber',
        name: 'anchorChamber',
        component: () => import('@/views/dehumidificationSystem/anchorChamber'),
        meta: { title: '锚室监测' }
      },
      {
        path: 'airPreparationStation',
        name: 'airPreparationStation',
        component: () => import('@/views/dehumidificationSystem/airPreparationStation'),
        meta: { title: '空气制备站监测' }
      },
      {
        path: 'steelBoxGirder',
        name: 'steelBoxGirder',
        component: () => import('@/views/dehumidificationSystem/steelBoxGirder'),
        meta: { title: '钢箱梁监测' }
      },
      {
        path: 'history',
        hidden: true,
        name: 'history',
        component: () => import('@/views/dehumidificationSystem/history'),
        meta: { title: '历史监测' }
      },
      {
        path: 'download',
        name: 'download',
        component: () => import('@/views/dehumidificationSystem/download'),
        meta: { title: '监测数据下载' }
      }
    ]
  }, { path: '*', redirect: '/404', hidden: true }
]
export const asyncRouterMapAdmin = [
  {
    path: '',
    component: Layout,
    name: 'peoplesManage',
    meta: {
      title: '用户系统管理',
      title: '用户管理系统',
      icon: 'peoples',
      roles: ['1']
    },
@@ -117,19 +215,30 @@ export const constantRouterMap = [
  {
    path: '',
    component: Layout,
    name: 'BaseInfoManage',
    name: 'bridgeManage',
    meta: {
      title: '基础信息管理',
      icon: 'list',
      roles: ['1']
    },
    alwaysShow: false,
    children: [
      {
        path: 'bridgesInfo',
        name: 'BridgesInfo',
        component: () => import('@/views/baseInfoManage/bridgesInfo/index'),
        meta: { title: '桥梁信息管理' }
      },
        meta: { title: '桥梁信息管理', icon: 'bridge' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'BaseInfoManage',
    meta: {
      title: '声脉系统',
      icon: 'list',
      roles: ['1']
    },
    children: [
      {
        path: 'serversConfig',
        name: 'ServersConfig',
@@ -150,20 +259,28 @@ export const constantRouterMap = [
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]
// 实例化vue的时候只挂载constantRouter
export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '',
    component: Layout,
    name: 'arefactionManage',
    meta: {
      title: '除湿系统',
      icon: 'arefaction',
      roles: ['1']
    },
    children: [
      {
        path: 'serversConfigAdmin',
        name: 'serversConfigAdmin',
        component: () => import('@/views/dehumidificationSystemAdmin/serverConfig'),
        meta: { title: '采集服务器配置' }
      },
      {
        path: 'sensorAdmin',
        name: 'sensorAdmin',
        component: () => import('@/views/dehumidificationSystemAdmin/sensor'),
        meta: { title: '传感器配置' }
      }
    ]
  }, { path: '*', redirect: '/404', hidden: true }
]

src/store/modules/permission.js

@@ -1,35 +1,4 @@
import { asyncRouterMap, constantRouterMap } from '@/router'
/**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.indexOf(role) >= 0)
  } else {
    return true
  }
}
/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouterMap, roles) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}
import { asyncRouterMapAdmin, constantRouterMap, asyncRouterMapGeneralUser } from '@/router'
const permission = {
  state: {
@@ -39,7 +8,7 @@ const permission = {
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
      state.routers = [...constantRouterMap, ...routers]
    }
  },
  actions: {
@@ -48,9 +17,9 @@ const permission = {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf('1') >= 0) {
          accessedRouters = asyncRouterMap
          accessedRouters = asyncRouterMapAdmin
        } else {
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
          accessedRouters = asyncRouterMapGeneralUser
        }
        commit('SET_ROUTERS', accessedRouters)
        resolve()

src/store/modules/user.js

@@ -45,7 +45,6 @@ const user = {
              if (dataS.active) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                commit('SET_ROLES', [dataS.type.toString()])
                commit('SET_NAME', dataS.name)
                setCookiesName(dataS.name)
              }

src/utils/queryBridgeAllResource.js

@@ -0,0 +1,40 @@
import request from '@/utils/request'
const bridge = {
}
export function byBridgeAll(id, callback) {
  if (bridge[id]) {
    callback(bridge[id])
  } else {
    request({
      url: '/ajax/envData/all/byBridge',
      method: 'get',
      params: {
        active: 1,
        bridgeId: id
      }
    }).then(res => {
      if (res.success) {
        const $data = res.data
        const tranducer = $data.transducer
        bridge[id] = { server: $data.server }
        for (let i = 0; i < tranducer.length; i++) {
          const sys = tranducer[i].system
          const org = tranducer[i].organize
          if (bridge[id][sys]) {
            if (bridge[id][sys][org]) {
              bridge[id][sys][org].push(tranducer[i])
            } else {
              bridge[id][sys][org] = [tranducer[i]]
            }
          } else {
            bridge[id][sys] = {}
            bridge[id][sys][org] = [tranducer[i]]
          }
        }
      }
      callback(bridge[id])
    })
  }
}

src/views/account/modifyData.vue

@@ -0,0 +1,141 @@
<template>
  <div class="modifyBox">
    <el-form class="demo-ruleForm formBox" label-width="80px" :model="ruleForm" ref="ruleForm" :rules="formRules">
      <el-row :gutter='20'>
        <el-col :span="12">
          <el-form-item label="账 号">{{account}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户姓名">{{name}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职 位" prop="job">
            <el-input v-model="ruleForm.job" placeholder="请填写职位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在机构" prop="comp">
            <el-input v-model="ruleForm.comp" placeholder="请填写所在机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请填写联系电话" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱" prop="email">
            <el-input v-model="ruleForm.email" placeholder="请填写联系邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click.native.prevent="submitForm('ruleForm')">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import { MessageBox } from 'element-ui'
  import { getMyself, updateMyself } from '@/api/login'
  import store from '@/store'
  export default {
    data() {
      var validPhone = (rule, value, callback) => {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (value.length > 0) {
          if (!reg.test(value)) {
            callback(new Error('请输入正确的手机号码'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        account: store.getters.account,
        userid: store.getters.userid,
        name: store.getters.name,
        type: '',
        ruleForm: {
          job: '',
          comp: '',
          phone: '',
          email: ''
        },
        formRules: {
          comp: [
            { required: true, message: '所在机构不能为空', trigger: 'blur' }
          ],
          phone: [
            { trigger: 'blur', validator: validPhone }
          ],
          email: [
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      getUserSelf() {
        const id = this.userid
        getMyself({ id }).then((res) => {
          if (res.success) {
            this.ruleForm.job = res.data.job
            this.ruleForm.comp = res.data.comp
            this.ruleForm.phone = res.data.phone
            this.ruleForm.email = res.data.email
            this.type = res.data.type
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const paramsData = {
              id: this.userid,
              account: this.account,
              name: this.name,
              job: this.ruleForm.job,
              comp: this.ruleForm.comp,
              phone: this.ruleForm.phone,
              email: this.ruleForm.email,
              type: this.type
            }
            updateMyself(paramsData).then((res) => {
              if (res.success) {
                MessageBox.alert('您的信息修改成功！', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  center: true,
                  callback: action => {
                    if (action === 'confirm') {
                      this.$refs[formName].resetFields()
                    }
                  }
                })
              }
            })
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .modifyBox {
    display: flex;
    justify-content: center;
    .formBox {
      width: 900px;
      margin-top: 100px;
    }
  }
</style>

src/views/account/modifyPassword.vue

@@ -0,0 +1,98 @@
<template>
  <div class="modifyBox">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm formBox">
      <el-form-item prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" placeholder="请设置您的新密码" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" placeholder="请再次输入密码确认" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item class="el-btn-col">
        <div class="el-btn-col-box">
          <el-button type="primary" @click.native.prevent="resetPwd('ruleForm2')">确定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { changePw } from '@/api/login'
  import { MessageBox } from 'element-ui'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请设置您的新密码'))
        } else if (value.length < 6 || value.length > 24) {
          callback(new Error('密码由6-24个字符组成，区分大小写'))
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码确认'))
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致，请重新输入!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm2: {
          pass: '',
          checkPass: ''
        },
        rules2: {
          pass: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { required: true, validator: validatePass2, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      resetPwd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const newPw = this.ruleForm2.checkPass
            changePw({ newPw }).then((res) => {
              if (res.success) {
                MessageBox.alert('密码修改成功！', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  center: true,
                  callback: action => {
                    if (action === 'confirm') {
                      this.$refs[formName].resetFields()
                    }
                  }
                })
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .modifyBox {
    display: flex;
    justify-content: center;
    .formBox {
      width: 400px;
      margin-top: 100px;
    }
  }
</style>

src/views/bridgesConsole/bridgeDetail/index.vue

@@ -5,8 +5,6 @@
    <BInfoDialog03 ref="BInfoDialog03"></BInfoDialog03>
    <BInfoDialog04 ref="BInfoDialog04"></BInfoDialog04>
    <updatePersonInfo ref="updatePersonInfo"></updatePersonInfo>
    <updateLoginPwd ref="updateLoginPwd"></updateLoginPwd>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="15" :lg="18">
@@ -72,8 +70,6 @@
          <el-row :gutter="10" class="item-row">
            <el-col :span="12"><div class="grid-content" @click="queryDangerInfo">历史报警信息查询</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="queryMonitorInfo">历史监测信息查询</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="updatePersonInfo">修改个人信息</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="updateLoginPwd">修改登录密码</div></el-col>
          </el-row>
        </el-card>
      </el-col>
@@ -90,6 +86,7 @@ import queryDict from '@/utils/queryDict'
import monModel from '@/utils/timingConstruct'
import { urlParse, parseTime, isEqualArr } from '@/utils'
import { getDangerList, getSysTime, getMonitorByTime } from '@/api/bridgeInfo'
import { byBridgeAll } from '@/utils/queryBridgeAllResource'
import lineChart from '../lineChart/LineChart'
import BInfoDialog01 from './components/BInfoDialog01'
@@ -97,9 +94,6 @@ import BInfoDialog02 from './components/BInfoDialog02'
import BInfoDialog03 from './components/BInfoDialog03'
import BInfoDialog04 from './components/BInfoDialog04'
import updatePersonInfo from './components/updatePersonInfo'
import updateLoginPwd from './components/updateLoginPwd'
import DefaultPage from '@/components/DefaultPage'
export default {
@@ -110,8 +104,6 @@ export default {
    BInfoDialog02,
    BInfoDialog03,
    BInfoDialog04,
    updatePersonInfo,
    updateLoginPwd,
    DefaultPage
  },
  data() {
@@ -160,6 +152,8 @@ export default {
      that.bridgeName = Cookies.get('bridgeName')
    }
    that.getDictoryData()
    byBridgeAll(that.bridgeId, (res) => {
    })
    queryInfo.qaiCb(function() {
      if (that.bridgeId) {
        that.serverSeqArr = queryInfo.queryServers(that.bridgeId, true)
@@ -374,13 +368,6 @@ export default {
    querySensorInfo() {
      this.$refs.BInfoDialog04.queryTransList()
      this.$refs.BInfoDialog04.dialogTableVisible = true
    },
    updatePersonInfo() {
      this.$refs.updatePersonInfo.getUserSelf()
      this.$refs.updatePersonInfo.dialogTableVisible = true
    },
    updateLoginPwd() {
      this.$refs.updateLoginPwd.dialogTableVisible = true
    }
  },
  beforeDestroy() {

src/views/dashboard/other/index.vue

@@ -8,7 +8,7 @@
              <div class="card-panel-icon-wrapper">
                <div class="card-image" :style="{ backgroundImage: 'url(/data/bridge'+ item.img +')'}"></div>
              </div>
              <div class="card-panel-description">
              <div class="card-panel-description" style="text-align: center;">
                <div class="card-panel-text">桥梁名称 <span>{{item.shortName}}</span></div>
                <div class="card-panel-text" :class="item.alarmNum>0?'card-panel-text-red':''">未读报警 {{item.alarmNum ? item.alarmNum : alarmNum}}条</div>
              </div>
@@ -64,6 +64,7 @@ export default {
    ])
  },
  created() {
    console.log(this.$store)
    this.getBridgeLists()
  },
  methods: {

src/views/dehumidificationSystem/airClamp.vue

@@ -0,0 +1,417 @@
<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;">
    <h4>气夹监测系统</h4>
    <div class="filter-container" style="overflow: auto;" v-loading="loadprogress">
      <div class="airItem">
        <p class="pText">上游气夹监测</p>
        <div class="imgBox">
          <img src="/static/bridges.jpg" alt="" style="" />
          <div class="state-info Normal" @click="change(arr1,arr1obj.txt)">
            <p class="airHumidity" v-for="item in arr1" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr2,arr2obj.txt)">
            <p class="airHumidity" v-for="item in arr2" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr3,arr3obj.txt)">
            <p class="airHumidity" v-for="item in arr3" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr4,arr4obj.txt)">
            <p class="airHumidity" v-for="item in arr4" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr5,arr5obj.txt)">
            <p class="airHumidity" v-for="item in arr5" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr6,arr6obj.txt)">
            <p class="airHumidity" v-for="item in arr6" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="titlText">
            <p><span></span>进气夹</p>
            <p><span class="gass"></span>排气夹</p>
          </div>
          <div class="pukou">
            浦口侧
          </div>
          <div class="jianye">
            建邺侧
          </div>
        </div>
      </div>
      <div class="airItem">
        <p class="pText">下游气夹监测</p>
        <div class="imgBox">
          <img src="/static/bridges.jpg" alt="" style="transform:rotateY(180deg);" />
          <div class="stateNormal" @click="change(arr7,arr7obj.txt)">
            <p class="airHumidity" v-for="item in arr7" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr8,arr8obj.txt)">
            <p class="airHumidity" v-for="item in arr8" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr9,arr9obj.txt)">
            <p class="airHumidity" v-for="item in arr9" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr10,arr10obj.txt)">
            <p class="airHumidity" v-for="item in arr10" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr12,arr12obj.txt)">
            <p class="airHumidity" v-for="item in arr11" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr12,arr12obj.txt)">
            <p class="airHumidity" v-for="item in arr12" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="titlText">
            <p><span></span>进气夹</p>
            <p><span class="gass"></span>排气夹</p>
          </div>
          <div class="pukou">
            建邺侧
          </div>
          <div class="jianye">
            浦口侧
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Cookies from 'js-cookie'
  import { byBridgeAll } from '@/utils/queryBridgeAllResource'
  export default {
    name: 'complexTable',
    data() {
      return {
        saddleObj: {},
        loadprogress: true,
        bridgeId: '',
        arr1obj: {
          txt: '浦口侧上游排气夹',
          '7709': 0,
          '7710': 1,
          '7711': 2
        },
        arr1: [],
        arr2obj: {
          txt: '浦口侧上游进气夹',
          '7706': 0,
          '7707': 1,
          '7708': 2
        },
        arr2: [],
        arr3obj: {
          txt: '浦口侧上游上排气夹和上排气',
          '7535': 0,
          '7536': 1
        },
        arr3: [],
        arr4obj: {
          txt: '建邺侧上游上排气夹和上排气',
          '7531': 0,
          '7532': 1
        },
        arr4: [],
        arr5obj: {
          txt: '建邺侧上游进气夹',
          '7694': 0,
          '7695': 1,
          '7696': 2
        },
        arr5: [],
        arr6obj: {
          txt: '建邺侧上游排气夹',
          '7697': 0,
          '7698': 1,
          '7699': 2
        },
        arr6: [],
        arr7obj: {
          txt: '建邺侧下游排气夹',
          '7703': 0,
          '7704': 1,
          '7705': 2
        },
        arr7: [],
        arr8obj: {
          txt: '建邺侧下游进气夹',
          '7700': 0,
          '7701': 1,
          '7702': 2
        },
        arr8: [],
        arr9obj: {
          txt: '建邺侧下游上排气夹和上排气',
          '7533': 0,
          '7534': 1
        },
        arr9: [],
        arr10obj: {
          txt: '浦口侧下游上排气夹和上排气',
          '7537': 0,
          '7538': 1
        },
        arr10: [],
        arr11obj: {
          txt: '浦口侧下游进气夹',
          '7712': 0,
          '7713': 1,
          '7714': 2
        },
        arr12: [],
        arr12obj: {
          txt: '浦口侧下游排气夹',
          '7715': 0,
          '7716': 1,
          '7717': 2
        },
        arr11: [],
        unitObj: {
          '01': '℃',
          '02': '%',
          '03': 'kPa',
          '04': 'm3/h'
        }
      }
    },
    created() {
      this.bridgeId = Cookies.get('bridgeId')
      byBridgeAll(this.bridgeId, (res) => {
        this.loadprogress = false
        const array1 = ['', '', '']
        const array2 = ['', '', '']
        const array3 = ['', '']
        const array4 = ['', '']
        const array5 = ['', '', '']
        const array6 = ['', '', '']
        const array7 = ['', '', '']
        const array8 = ['', '', '']
        const array9 = ['', '']
        const array10 = ['', '']
        const array11 = ['', '', '']
        const array12 = ['', '', '']
        Object.keys(res['01']).forEach((key) => {
          res['01'][key].forEach((item) => {
            const code = item.code
            if (this.arr1obj[code] >= 0) {
              array1[this.arr1obj[code]] = item
            }
            if (this.arr2obj[code] >= 0) {
              array2[this.arr2obj[code]] = item
            }
            if (this.arr3obj[code] >= 0) {
              array3[this.arr3obj[code]] = item
            }
            if (this.arr4obj[code] >= 0) {
              array4[this.arr4obj[code]] = item
            }
            if (this.arr5obj[code] >= 0) {
              array5[this.arr5obj[code]] = item
            }
            if (this.arr6obj[code] >= 0) {
              array6[this.arr6obj[code]] = item
            }
            if (this.arr7obj[code] >= 0) {
              array7[this.arr7obj[code]] = item
            }
            if (this.arr8obj[code] >= 0) {
              array8[this.arr8obj[code]] = item
            }
            if (this.arr9obj[code] >= 0) {
              array9[this.arr9obj[code]] = item
            }
            if (this.arr10obj[code] >= 0) {
              array10[this.arr10obj[code]] = item
            }
            if (this.arr11obj[code] >= 0) {
              array11[this.arr11obj[code]] = item
            }
            if (this.arr12obj[code] >= 0) {
              array12[this.arr12obj[code]] = item
            }
          })
          this.arr1 = array1
          this.arr2 = array2
          this.arr3 = array3
          this.arr4 = array4
          this.arr5 = array5
          this.arr6 = array6
          this.arr7 = array7
          this.arr8 = array8
          this.arr9 = array9
          this.arr10 = array10
          this.arr11 = array11
          this.arr12 = array12
        })
      })
    },
    methods: {
      change(arr, txt) {
        const pAy = {}
        for (let i = 0; i < arr.length; i++) {
          pAy[arr[i].code] = arr[i].unit
        }
        this.$router.push({ name: 'history', query: { id: JSON.stringify(pAy), title: `${txt}历史监测` }})
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .airItem {
    border-radius: 2px;
    border: 2px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 1546px;
    margin-bottom: 10px;
    .pText {
      margin-left: 15px;
    }
    .imgBox {
      position: relative;
      .stateNormal {
        cursor: pointer;
        font-size: 14px;
        line-height: 17px;
        color: #515151;
        text-align: right;
        width: 75px;
        position: absolute;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 6px 8px 6px 0;
        border: 2px solid transparent;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        background-color: rgba(246, 250, 255, 0.8);
        &:nth-child(2) {
          top: 215px;
          left: 201px;
        }
        &:nth-child(3) {
          top: 130px;
          left: 484px;
        }
        &:nth-child(4) {
          top: 51px;
          left: 772px;
        }
        &:nth-child(5) {
          top: 51px;
          left: 1009px;
        }
        &:nth-child(6) {
          top: 132px;
          right: 290px;
        }
        &:nth-child(7) {
          top: 215px;
          right: 146px;
        }
        p {
          margin: 0;
          padding: 0;
        }
      }
      .state-info {
        cursor: pointer;
        font-size: 14px;
        line-height: 17px;
        color: #515151;
        text-align: right;
        width: 75px;
        position: absolute;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 6px 8px 6px 0;
        border: 2px solid transparent;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        background-color: rgba(246, 250, 255, 0.8);
        &:nth-child(2) {
          top: 215px;
          left: 147px;
        }
        &:nth-child(3) {
          top: 130px;
          left: 290px;
        }
        &:nth-child(4) {
          top: 51px;
          left: 458px;
        }
        &:nth-child(5) {
          top: 51px;
          left: 695px;
        }
        &:nth-child(6) {
          top: 132px;
          right: 483px;
        }
        &:nth-child(7) {
          top: 215px;
          right: 201px;
        }
        p {
          margin: 0;
          padding: 0;
        }
      }
      .titlText {
        position: absolute;
        top: 10px;
        left: 10px;
        p {
          color: #515151;
          span {
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: #00a0e9;
            border-radius: 50%;
            vertical-align: top;
            margin-right: 10px;
          }
          .gass {
            background-color: #c45995;
          }
        }
      }
      .pukou {
        position: absolute;
        top: 170px;
        height: 40px;
        width: 20px;
        left: 25px;
      }
      .jianye {
        position: absolute;
        top: 170px;
        height: 40px;
        width: 20px;
        right: 25px;
      }
    }
  }
</style>

src/views/dehumidificationSystem/airPreparationStation.vue

@@ -0,0 +1,45 @@
<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;">
    <h4>空气制备站监测系统</h4>
    <div class="contentbox" v-loading="loadprogress">
      <Detection v-for="(item,key,index) in saddleObj" :key="index" :list="item" :num="key" tagText="空气制备站"></Detection>
    </div>
  </div>
</template>
<script>
  import Detection from '@/components/Detection/index'
  import Cookies from 'js-cookie'
  import { byBridgeAll } from '@/utils/queryBridgeAllResource'
  export default {
    name: 'complexTable',
    data() {
      return {
        saddleObj: {},
        bridgeId: '',
        loadprogress: true
      }
    },
    created() {
      this.bridgeId = Cookies.get('bridgeId')
      byBridgeAll(this.bridgeId, (res) => {
        this.loadprogress = false
        this.saddleObj = res['04']
      })
    },
    components: {
      Detection
    },
    methods: {
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .contentbox {
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
  }
</style>

src/views/dehumidificationSystem/anchorChamber.vue

@@ -0,0 +1,78 @@
<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;" v-loading="loadprogress">
    <h4>锚室监测系统</h4>
      <div v-for="(itemlist,val,index) in saddleObj" :key="index" :list="itemlist">
        <h6>{{restaurants[val]}}</h6>
        <div class="contentbox">
          <Detection v-for="(item,key,index) in itemlist" :key="index" :list="item" :num="key" :tagText="restaurants[val]" tx="锚室"></Detection>
        </div>
      </div>  
    </div>
  </div>
</template>
<script>
  import Detection from '@/components/Detection/index'
  import Cookies from 'js-cookie'
  import { byBridgeAll } from '@/utils/queryBridgeAllResource'
  import { ownPosition } from '@/api/sensorAdmin'
  export default {
    name: 'complexTable',
    data() {
      return {
        saddleObj: {},
        bridgeId: '',
        restaurants: {},
        arr: [],
        loadprogress: true
      }
    },
    created() {
      this.bridgeId = Cookies.get('bridgeId')
      ownPosition().then(res => {
        if (res.success) {
          for (let i = 0; i < res.data.length; i++) {
            this.arr.push(res.data[i])
          }
        }
        byBridgeAll(this.bridgeId, (res) => {
          this.loadprogress = false
          const obj = {}
          const oFl = { '01': '上游', '02': '下游' }
          Object.keys(res['03']).forEach((key) => {
            res['03'][key].forEach((item) => {
              const index = this.arr.indexOf(item.position)
              if (obj[index + item.cableType]) {
                if (obj[index + item.cableType][key]) {
                  obj[index + item.cableType][key].push(item)
                } else {
                  obj[index + item.cableType][key] = [item]
                  this.restaurants[index + item.cableType] = `${this.arr[index]}${oFl[item.cableType]}`
                }
              } else {
                obj[index + item.cableType] = {}
                this.restaurants[index + item.cableType] = `${this.arr[index]}${oFl[item.cableType]}`
                obj[index + item.cableType][key] = [item]
              }
            })
          })
          this.saddleObj = obj
        })
      })
    },
    components: {
      Detection
    },
    methods: {
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .contentbox {
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
  }
</style>

src/views/dehumidificationSystem/download.vue

@@ -0,0 +1,55 @@
<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;">
    <h4>监测数据下载</h4>
    <div class="filter-container contentBox">
      <div>
        <el-date-picker v-model="dateTime" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-download" class="btnBox" @click.prevent="download">下载</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { turnTime } from '@/utils/index'
  import Cookies from 'js-cookie'
  export default {
    name: 'complexTable',
    data() {
      return {
        dateTime: ''
      }
    },
    created() {
    },
    methods: {
      download() {
        if (!this.dateTime) {
          this.$message.error('请先选择时间后进行数据下载')
        } else {
          const t1 = (new Date(this.dateTime[1].getTime()) - new Date(this.dateTime[0].getTime())) / 1000
          if (t1 > 6 * 60 * 60) {
            this.$message.error('时间间隔不能超过6小时')
          } else {
            const time1 = turnTime(this.dateTime[0], 'time', false)
            const time2 = turnTime(this.dateTime[1], 'time', false)
            location.href = `ajax/envDataExcel?bridgeId=${Cookies.get('bridgeId')}&bt=${time1}&et=${time2}`
          }
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .contentBox {
    display: flex;
    justify-content: center;
    .btnBox {
      margin-left: 15px;
    }
  }
</style>

src/views/dehumidificationSystem/history.vue

@@ -0,0 +1,156 @@
<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card block-group">
      <div slot="header" class="block-title">
        <span>{{alarmTit}}</span>
      </div>
      <div class="load-box" v-loading="loadprogress">
        <el-row class="line-chart-box">
          <el-col :xs="24" :sm="24" :lg="24" v-for="item in alarmList" :key="item.index">
            <lineChart :chartData="item" :historyM="historyM"></lineChart>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
  import { parseTime, turnTime } from '@/utils'
  import lineChart from './lineChart/LineChart'
  import request from '@/utils/request'
  export default {
    data() {
      return {
        historyM: true,
        alarmTit: '',
        alarmList: [],
        loadprogress: false,
        array: [],
        truObject: {}
      }
    },
    components: {
      lineChart
    },
    created() {
      this.truObject = JSON.parse(this.$route.query.id)
      Object.keys(this.truObject).forEach(res => {
        this.array.push(res)
      })
      this.alarmTit = this.$route.query.title
      this.getDustrurDetail()
    },
    methods: {
      getDustrurDetail() {
        this.loadprogress = true
        request({
          url: 'ajax/envData/history',
          method: 'get',
          params: {
            bt: this.getDate(),
            transducers: this.array
          }
        }).then(res => {
          if (res.success) {
            const $data = res.data
            const rList = []
            const rWsata = {
              tit: '',
              arr: [],
              xData: [],
              weData: [],
              seData: [],
              xInterval: 0
            }
            let sf = false
            Object.keys($data).forEach(key => {
              const rData = {
                tit: '',
                arr: [],
                xData: [],
                seData: [],
                xInterval: 0
              }
              if (this.truObject[key] === '01' || this.truObject[key] === '02') {
                if (this.truObject[key] === '01') {
                  rWsata.arr.push('温度')
                  rWsata.tit = '温度℃ '
                } else {
                  rWsata.arr.push('湿度')
                  if (rWsata.tit) {
                    rWsata.tit += '/ 湿度%'
                  } else {
                    rWsata.tit += '湿度%'
                  }
                }
                if (!sf) {
                  rList.push(rWsata)
                  sf = true
                }
              } else {
                if (this.truObject[key] === '03') {
                  rData.arr.push('压力')
                  rData.tit = '压力kPa'
                } else {
                  rData.arr.push('风量')
                  rData.tit = '风量m3/h'
                }
                rList.push(rData)
              }
              if (this.truObject[key] === '01' || this.truObject[key] === '02') {
                rWsata.xData = []
                $data[key].forEach((item, index) => {
                  if (index % 2 === 0) {
                    const startTime = parseTime(item.createTime, true, true).substr(0, 16)
                    rWsata.xData.unshift(startTime)
                    if (this.truObject[key] === '02') {
                      rWsata.weData.unshift(item.itemValue)
                    } else {
                      rWsata.seData.unshift(item.itemValue)
                    }
                  } else {
                    rWsata.xData.unshift('')
                    if (this.truObject[key] === '02') {
                      rWsata.weData.unshift(item.itemValue)
                    } else {
                      rWsata.seData.unshift(item.itemValue)
                    }
                  }
                })
              } else {
                $data[key].forEach((item, index) => {
                  if (index % 2 === 0) {
                    const startTime = parseTime(item.createTime, true, true).substr(0, 16)
                    rData.xData.unshift(startTime)
                    rData.seData.unshift(item.itemValue)
                  } else {
                    rData.xData.unshift('')
                    rData.seData.unshift(item.itemValue)
                  }
                })
              }
            })
            this.alarmList = rList
            this.loadprogress = false
          }
        })
      },
      getDate() {
        const currentTime = new Date(new Date().getTime() - 6 * 60 * 60 * 1000)
        return `${turnTime(currentTime, 'time').substr(0, 12)}00`
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container .block-group .block-title {
    justify-content: flex-start;
    span {
      margin-right: 15px;
    }
  }
</style>

src/views/dehumidificationSystem/lineChart/LineChart.vue

@@ -0,0 +1,187 @@
<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'
  export default {
    props: {
      lineColor: {
        type: Number,
        default: 0
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object
      },
      maxXcount: {
        type: Number
      },
      historyM: { // 判断是否需要坐标轴上的滚动条
        type: Boolean
      }
    },
    data() {
      return {
        lineColorNow: this.lineColor % 2 === 0 ? '#FF005A' : '#3888fa',
        chart: null
      }
    },
    mounted() {
      this.initChart()
      if (this.autoResize) {
        this.__resizeHanlder = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHanlder)
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHanlder)
      }
      this.chart.dispose()
      this.chart = null
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    methods: {
      setOptions(datastr) {
        this.chart.setOption({
          title: {
            text: datastr.tit,
            textStyle: {
              color: '#333',
              fontSize: 14
            },
            top: '0'
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 60,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          xAxis: {
            data: datastr.xData,
            max: this.maxXcount
          },
          yAxis: {
            type: 'value',
            max: 100,
            min: -90
          },
          legend: {
            data: datastr.arr
          }
        })
        if (datastr.arr.length === 2) {
          this.chart.setOption({
            series: [
              {
                name: datastr.arr[0], itemStyle: {
                  normal: {
                    color: this.lineColorNow,
                    lineStyle: {
                      color: this.lineColorNow,
                      width: 2
                    }
                  }
                },
                smooth: true,
                type: 'line',
                data: datastr.seData,
                animationDuration: 2800,
                animationEasing: 'cubicInOut'
              }, {
                name: datastr.arr[1],
                type: 'line',
                data: datastr.weData
              }
            ]
          })
        } else {
          this.chart.setOption({
            series: [
              {
                name: datastr.arr[0], itemStyle: {
                  normal: {
                    color: this.lineColorNow,
                    lineStyle: {
                      color: this.lineColorNow,
                      width: 2
                    }
                  }
                },
                smooth: true,
                type: 'line',
                data: datastr.seData,
                animationDuration: 2800,
                animationEasing: 'cubicInOut'
              }
            ]
          })
        }
        if (this.historyM) {
          this.chart.setOption({
            dataZoom: [
              {
                type: 'slider',
                start: 98,
                end: 100
              },
              {
                type: 'inside'
              }
            ]
          })
        }
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        var that = this
        setTimeout(function() {
          that.setOptions(that.chartData)
        }, 1)
      }
    }
  }
</script>

src/views/dehumidificationSystem/saddleRoom.vue

@@ -0,0 +1,45 @@
<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;">
    <h4>鞍室监测系统</h4>
    <div class="contentbox" v-loading="loadprogress">
      <Detection v-for="(item,key,index) in saddleObj" :key="index" :list="item" :num="key" tagText="鞍室"></Detection>
    </div>
  </div>
</template>
<script>
  import Detection from '@/components/Detection/index'
  import Cookies from 'js-cookie'
  import { byBridgeAll } from '@/utils/queryBridgeAllResource'
  export default {
    name: 'complexTable',
    data() {
      return {
        saddleObj: {},
        bridgeId: '',
        loadprogress: true
      }
    },
    created() {
      this.bridgeId = Cookies.get('bridgeId')
      byBridgeAll(this.bridgeId, (res) => {
        this.loadprogress = false
        this.saddleObj = res['02']
      })
    },
    components: {
      Detection
    },
    methods: {
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .contentbox {
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
  }
</style>

src/views/dehumidificationSystem/steelBoxGirder.vue

@@ -0,0 +1,45 @@
<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;">
    <h4>钢箱梁监测系统</h4>
    <div class="contentbox" v-loading="loadprogress">
      <Detection v-for="(item,key,index) in saddleObj" :key="index" :list="item" :num="key" tagText="钢箱梁"></Detection>
    </div>
  </div>
</template>
<script>
  import Detection from '@/components/Detection/index'
  import Cookies from 'js-cookie'
  import { byBridgeAll } from '@/utils/queryBridgeAllResource'
  export default {
    name: 'complexTable',
    data() {
      return {
        saddleObj: {},
        bridgeId: '',
        loadprogress: true
      }
    },
    created() {
      this.bridgeId = Cookies.get('bridgeId')
      byBridgeAll(this.bridgeId, (res) => {
        this.loadprogress = false
        this.saddleObj = res['05']
      })
    },
    components: {
      Detection
    },
    methods: {
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .contentbox {
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
  }
</style>

src/views/dehumidificationSystemAdmin/sensor.vue

@@ -0,0 +1,492 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="所属桥梁简称" v-model="listQuery.bridgeName">
      </el-input>
      <el-input style="width: 200px;" class="filter-item" placeholder="所属服务器编号" v-model="listQuery.serverCode">
      </el-input>
      <el-select v-model="listQuery.system" placeholder="请选择所属系统" style="width: 200px;">
        <el-option v-for="item in systemList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input style="width: 200px;" class="filter-item" placeholder="传感器编号" v-model="listQuery.code">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <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="listG" v-loading="listLoading" border fit highlight-current-row style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="所属桥梁简称" prop="bridgeName"></el-table-column>
      <el-table-column width="150px" align="center" label="所属服务器" prop="serverName"></el-table-column>
      <el-table-column width="150px" align="center" label="所属系统" prop="systemText"></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="seq"></el-table-column>
      <el-table-column width="150px" align="center" label="名称" prop="name"></el-table-column>
      <el-table-column width="150px" align="center" label="所属方位" prop="position"></el-table-column>
      <el-table-column width="150px" align="center" label="所属主缆" prop="cableTypeText"></el-table-column>
      <el-table-column width="150px" align="center" label="单位" prop="unitText"></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>
          <el-button v-waves size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="传感器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-position='right' status-icon>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属服务器" prop="serverId">
              <el-select v-model="ruleForm2.serverId" placeholder="请选择所属服务器">
                <el-option v-for="item in serverList" :key="item.value" :label="item.caption" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属系统" prop="system">
              <el-select v-model="ruleForm2.system" placeholder="请选择所属系统">
                <el-option v-for="item in systemList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属组" prop="organize">
              <el-select v-model="ruleForm2.organize" placeholder="请选择所属系统">
                <el-option v-for="item in 100" :key="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传感器编号" prop="code">
              <el-input placeholder="请输入传感器编号" v-model="ruleForm2.code" maxlength=10></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内部编号" prop="seq">
              <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq" maxlength=10></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input placeholder="请输入名称" v-model="ruleForm2.name" maxlength=30></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属方位" prop="position">
              <el-autocomplete class="inline-input" v-model="ruleForm2.position" :fetch-suggestions="querySearch"
                placeholder="请输入内容" @select="handleSelect">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属主缆" prop="cableType">
              <el-select v-model="ruleForm2.cableType" placeholder="请选择所属主缆">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数据单位" prop="unit">
              <el-select v-model="ruleForm2.unit" placeholder="请选择数据单位">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=500 v-model="ruleForm2.remark" rows=4></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button v-waves type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button v-waves type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo"
        :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode, ownPosition } from '@/api/sensorAdmin'
  import { queryDevice } from '@/api/serverAdmin'
  import queryBase from '@/utils/queryBase'
  import waves from '@/directive/waves'
  import queryDict from '@/utils/queryDict'
  export default {
    name: 'complexTable',
    directives: {
      waves
    },
    data() {
      var seq = (rule, value, callback) => {
        const num = /^[0-9]*$/
        if (value === '') {
          callback(new Error('请输入内部编号'))
        } else {
          if (!num.test(value)) {
            callback('请输入数字')
            return
          }
          if (this.edit) {
            checkDeviceInternalCode({ seq: value, id: this.edit, serverId: this.ruleForm2.serverId, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('内部编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          } else {
            checkDeviceInternalCode({ seq: value, serverId: this.ruleForm2.serverId, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('内部编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          }
        }
      }
      var code = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入传感器编号'))
        } else {
          if (this.edit) {
            checkDeviceCode({ code: value, id: this.edit, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('传感器编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          } else {
            checkDeviceCode({ code: value, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('传感器编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          }
        }
      }
      return {
        restaurants: [],
        cableMain: [],
        addr: [],
        options: [],
        options1: [],
        systemList: [],
        serverList: [],
        edit: '',
        unitObj: {},
        systemObj: {},
        ruleForm2: {
          organize: '',
          name: '',
          position: '',
          unit: '',
          system: '',
          code: '',
          cableType: '',
          device: '',
          seq: '',
          serverId: '',
          remark: ''
        },
        rules2: {
          serverId: [
            { required: true, message: '请选所属服务器' }
          ],
          system: [
            { required: true, message: '请选择所属系统' }
          ],
          organize: [
            { required: true, message: '请选择所属组' }
          ],
          code: [
            { required: true, validator: code, trigger: 'blur' }
          ],
          seq: [
            { required: true, validator: seq, trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          position: [
            { required: true, message: '请选择所属方位' }
          ],
          cableType: [
            { required: true, message: '请选择所属主缆', trigger: 'blur' }
          ],
          unit: [
            { required: true, message: '请选择数据单位', trigger: 'blur' }
          ]
        },
        dialogTableVisible: false,
        tableKey: 0,
        listG: [],
        total: null,
        listLoading: true,
        listQuery: {
          serverCode: '',
          bridgeName: '',
          system: '',
          code: '',
          active: 1,
          pageSize: 10,
          pageNo: 1
        }
      }
    },
    created() {
      DeviceOfservice().then(res => {
        if (res.success) {
          this.serverList = res.data
        }
      })
      this.getDictoryData()
    },
    methods: {
      querySearch(queryString, cb) {
        cb(this.restaurants)
      },
      handleSelect(item) {
        console.log(item)
      },
      getDictoryData() {
        queryDict.applyDict('CSZL', dictData => {
          dictData.map(item => {
            this.options.push({ value: item.code, label: item.caption })
            this.cableMain[item.code] = item.caption
          })
          queryDict.applyDict('CSXT', dictData => { // 系统
            dictData.map(item => {
              this.systemObj[item.code] = item.caption
              this.systemList.push({ value: item.code, label: item.caption })
              this.addr[item.code] = item.caption
            })
            queryDict.applyDict('CSDW', dictData => { // 单位
              dictData.map(item => {
                this.options1.push({ value: item.code, label: item.caption })
                this.unitObj[item.code] = item.caption
              })
              this.getList()
            })
          })
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.edit) {
              addDevice(this.ruleForm2).then(response => {
                if (response.success) {
                  this.getList()
                  setTimeout(() => {
                    this.pop('已成功添加传感器')
                  }, 1000)
                  this.resetForm('ruleForm2')
                  this.dialogTableVisible = false
                }
              }).catch(error => {
                console.log(error)
              })
            } else {
              const par = this.ruleForm2
              par.id = this.edit
              updateDevice(par).then(response => {
                if (response.success) {
                  setTimeout(() => {
                    this.pop('已成功更新传感器')
                  }, 1000)
                  this.resetForm('ruleForm2')
                  this.getList()
                  this.dialogTableVisible = false
                  this.edit = ''
                  this.ruleForm2 = {
                    organize: '',
                    name: '',
                    position: '',
                    unit: '',
                    system: '',
                    code: '',
                    cableType: '',
                    device: '',
                    seq: '',
                    serverId: '',
                    remark: ''
                  }
                }
              })
            }
          }
        })
      },
      resetForm(formName) {
        this.dialogTableVisible = false
        this.$refs[formName].resetFields()
        this.edit = ''
      },
      closed() {
        this.$refs['ruleForm2'].resetFields()
        this.edit = ''
      },
      getList() {
        this.listLoading = true
        pageQueryDevice(this.listQuery).then(response => {
          if (response.success) {
            var $data = response.data.data
            var hdata = { num: 0, data: $data }
            for (let i = 0; i < $data.length; i++) {
              hdata.num++
              $data[i].cableTypeText = this.cableMain[$data[i].cableType]
              $data[i].systemText = this.addr[$data[i].system]
              $data[i].unitText = this.unitObj[$data[i].unit]
              queryDevice({ id: $data[i].serverId }).then(res => {
                if (res.success) {
                  $data[i].serverName = res.data.code
                  queryBase.getBridge(res.data.bridgeId, (sc, value) => {
                    if (sc) {
                      $data[i].bridgeName = value.shortName
                      hdata.num--
                      if (hdata.num === 0) {
                        this.listG = $data
                      }
                    }
                  })
                }
              })
            }
            if (hdata.num === 0) {
              this.listG = hdata.data
            }
            this.total = response.data.total
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
          }
        })
      },
      handleFilter() {
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNo = val
        this.getList()
      },
      handleModifyStatus(row, status) {
        this.$confirm('确定要删除:传感器' + row.code + '吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteDevice({ id: row.id }).then(response => {
            if (response.success) {
              this.getList()
              this.pop('已成功删除该传感器')
            }
          })
        }).catch(() => {
        })
      },
      pop($par) {
        this.$confirm($par, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
          showCancelButton: false,
          center: true
        }).then(() => {
        }).catch(() => {
        })
      },
      resetTemp(row) {
        this.ruleForm2 = {
          code: row.code,
          cableType: row.cableType,
          seq: row.seq,
          serverId: row.serverId,
          name: row.name,
          unit: row.unit,
          system: row.system,
          position: row.position,
          organize: row.organize,
          remark: row.remark || ''
        }
        this.edit = row.id
      },
      handleCreate() {
        this.restaurants = []
        ownPosition().then(res => {
          if (res.success) {
            for (let i = 0; i < res.data.length; i++) {
              this.restaurants.push({ value: res.data[i] })
            }
          }
          this.dialogTableVisible = true
        })
      },
      handleUpdate(row) {
        this.restaurants = []
        ownPosition().then(res => {
          if (res.success) {
            for (let i = 0; i < res.data.length; i++) {
              this.restaurants.push({ value: res.data[i] })
            }
          }
          this.dialogTableVisible = true
          this.resetTemp(row)
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete {
    display: block
  }
  .el-btn-col {
    margin-top: 45px
  }
  .el-form-item {
    margin: 0px 10px
  }
  .el-select {
    width: 100%
  }
  .el-col {
    margin-bottom: 15px
  }
  .el-form-item__label {
    padding: 0px
  }
</style>

src/views/dehumidificationSystemAdmin/serverConfig.vue

@@ -0,0 +1,414 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="所属桥梁名称" v-model="listQuery.key">
      </el-input>
      <el-input style="width: 200px;" class="filter-item" placeholder="服务器编号" v-model="listQuery.code">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <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 style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="服务器编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="内部编号" prop="seq"></el-table-column>
      <el-table-column width="150px" align="center" label="IP" prop="ipAddress"></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>
          <el-button v-waves size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="采集服务器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务器编号" prop="code">
              <el-input placeholder="请输入服务器编号" v-model="ruleForm2.code" maxlength=10></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="内部编号" prop="seq">
                <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq" maxlength=10></el-input>
              </el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item label="IP" prop="ipAddress">
              <el-input placeholder="请输入IP" v-model="ruleForm2.ipAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属桥梁" prop="bridge">
              <el-autocomplete v-model="ruleForm2.bridge" :fetch-suggestions="querySearchAsync" placeholder="请选择所属桥梁"
                @select="handleSelect">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=500 v-model="ruleForm2.remark" rows=4></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button v-waves type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button v-waves type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo"
        :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { addDevice, checkDeviceCode, checkDeviceInternalCode, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkIp } from '@/api/serverAdmin'
  import waves from '@/directive/waves'
  import queryBase from '@/utils/queryBase'
  export default {
    name: 'complexTable',
    directives: {
      waves
    },
    data() {
      var bridge = (rule, value, callback) => {
        const that = this
        setTimeout(function() {
          if (that.ruleForm2.bridge === '' || that.ruleForm2.bridgeId === '') {
            callback(new Error('请选择所属桥梁'))
          } else {
            callback()
          }
        }, 300)
      }
      var seq = (rule, value, callback) => {
        const num = /^[0-9a-zA-Z]*$/
        if (value === '') {
          callback(new Error('请输入内部编号'))
        } else {
          if (!num.test(value)) {
            callback('请输入数字或字母')
            return
          }
          if (this.edit) {
            checkDeviceInternalCode({ seq: value, id: this.edit, bridgeId: this.ruleForm2.bridgeId, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('内部编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          } else {
            checkDeviceInternalCode({ seq: value, bridgeId: this.ruleForm2.bridgeId, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('内部编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          }
        }
      }
      var code = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入服务器编号'))
        } else {
          if (this.edit) {
            checkDeviceCode({ code: value, id: this.edit, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('服务器编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          } else {
            checkDeviceCode({ code: value, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('服务器编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          }
        }
      }
      var checkIpCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入IP'))
        } else {
          if (this.edit) {
            checkIp({ ipAddress: value, id: this.edit, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('IP编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          } else {
            checkIp({ ipAddress: value, active: 1 }).then(response => {
              if (response.data) {
                callback(new Error('IP编号已存在，请重新输入'))
              } else {
                callback()
              }
            })
          }
        }
      }
      return {
        edit: '',
        ruleForm2: {
          code: '',
          bridge: '',
          seq: '',
          bridgeId: '',
          remark: '',
          ipAddress: ''
        },
        rules2: {
          code: [
            { required: true, validator: code, trigger: 'blur' }
          ],
          bridge: [
            { required: true, validator: bridge, trigger: 'blur' }
          ],
          ipAddress: [
            { required: true, validator: checkIpCode, trigger: 'blur' }
          ],
          seq: [
            { required: true, validator: seq, trigger: 'blur' }
          ]
        },
        timeout: null,
        dialogTableVisible: false,
        tableKey: 0,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          key: '',
          code: '',
          active: 1,
          pageSize: 10,
          pageNo: 1
        }
      }
    },
    filters: {
      typeFilter(type) {
      }
    },
    created() {
      this.getList()
    },
    methods: {
      submitForm(formName) {
        const that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.edit) {
              addDevice(this.ruleForm2).then(response => {
                if (response.success) {
                  this.getList()
                  setTimeout(function() {
                    that.pop('已成功添加服务器')
                  }, 1000)
                  this.resetForm('ruleForm2')
                  this.dialogTableVisible = false
                }
              }).catch(error => {
                console.log(error)
              })
            } else {
              const par = this.ruleForm2
              par.id = this.edit
              updateDevice(par).then(response => {
                if (response.success) {
                  setTimeout(function() {
                    that.pop('已成功更新服务器')
                  }, 1000)
                  this.resetForm('ruleForm2')
                  this.getList()
                  this.dialogTableVisible = false
                  this.edit = ''
                  this.ruleForm2 = {
                    code: '',
                    bridge: '',
                    seq: '',
                    bridgeId: '',
                    ipAddress: '',
                    remark: ''
                  }
                }
              })
            }
          }
        })
      },
      resetForm(formName) {
        this.dialogTableVisible = false
        this.$refs[formName].resetFields()
        this.edit = ''
      },
      closed() {
        this.$refs['ruleForm2'].resetFields()
        this.edit = ''
      },
      getList() {
        var that = this
        this.listLoading = true
        pageQueryDevice(this.listQuery).then(response => {
          if (response.success) {
            const $data = response.data.data
            var hdata = { num: 1, data: $data }
            for (let i = 0; i < $data.length; i++) {
              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
                  }
                }
              })
            }
            hdata.num--
            if (hdata.num === 0) {
              that.list = hdata.data
            }
            that.total = response.data.total
            setTimeout(() => {
              that.listLoading = false
            }, 1.5 * 1000)
          }
        })
      },
      handleFilter() {
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNo = val
        this.getList()
      },
      handleModifyStatus(row, status) {
        this.$confirm('确定要删除:服务器' + row.code + '吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteDevice({ id: row.id }).then(response => {
            if (response.success) {
              this.getList()
              this.pop('已成功删除该服务器')
            }
          })
        }).catch(() => {
        })
      },
      pop($par) {
        this.$confirm($par, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
          showCancelButton: false,
          center: true
        }).then(() => {
        }).catch(() => {
        })
      },
      resetTemp(row) {
        this.ruleForm2 = {
          code: row.code,
          bridge: row.bridgeName,
          seq: row.seq,
          bridgeId: row.bridgeId,
          ipAddress: row.ipAddress,
          remark: row.remark
        }
        this.edit = row.id
      },
      handleCreate() {
        this.dialogTableVisible = true
      },
      handleUpdate(row) {
        setTimeout(() => {
          this.resetTemp(row)
        }, 500)
        this.dialogTableVisible = true
      },
      querySearchAsync(queryString, cb) {
        this.ruleForm2.bridgeId = ''
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          DeviceOfservice({ key: this.ruleForm2.bridge, active: 1 }).then(response => {
            const $info = response.data
            if ($info.length) {
              const $data = $info.map(item => {
                return { 'value': item.shortName, 'id': item.id }
              })
              cb($data)
              if ($info.length === 1 && this.ruleForm2.bridge === $info[0].shortName) {
                this.ruleForm2.bridgeId = $info[0].id
              } else {
                this.ruleForm2.bridgeId = ''
              }
            } else {
              cb([])
            }
          })
        }, 3000 * Math.random())
      },
      handleSelect(item) {
        this.ruleForm2.bridgeId = item.id
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete {
    display: block
  }
  .el-btn-col {
    margin-top: 45px
  }
  .el-form-item {
    margin: 0px 10px
  }
  .el-select {
    width: 100%
  }
  .el-col {
    margin-bottom: 15px
  }
  .el-form-item__label {
    padding: 0px
  }
</style>

src/views/layout/Layout.vue

@@ -1,8 +1,8 @@
<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <TopNavbar></TopNavbar>
    <sidebar class="sidebar-container" v-if="roles.indexOf('1')>=0"></sidebar>
    <TopNavbar></TopNavbar>
    <div class="main-container" :style="(roles.indexOf('1')>=0) ? '' : 'marginLeft:0'">
      <navbar></navbar>
      <app-main></app-main>

src/views/layout/com.vue

@@ -0,0 +1,100 @@
<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <TopNavbar></TopNavbar>
    <sidebar class="sidebar-container"></sidebar>
    <div class="main-container">
      <nava></nava>
      <app-main></app-main>
    </div>
    <div class="main-footer">
      <div style="margin:0 auto;line-height:20px;color:#939393; padding:12px 0;overflow: hidden;width:380px">
        <a style="margin: 0 5px 0 0;float:left">京ICP备16026450号-2 |</a>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802027571" style="display:inline-block;text-decoration:none;float:left">
          <img src="./img/beian.png" width="18" style="float:left;" />
          <p style="float:left;margin: 0 0 0 5px;">京公网安备 11010802027571号</p>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { TopNavbar, nava, Sidebar, AppMain } from './components'
  import ResizeMixin from './mixin/ResizeHandler'
  export default {
    name: 'com',
    components: {
      TopNavbar,
      nava,
      Sidebar,
      AppMain
    },
    mixins: [ResizeMixin],
    computed: {
      ...mapGetters([
        'roles'
      ]),
      sidebar() {
        return this.$store.state.app.sidebar
      },
      device() {
        return this.$store.state.app.device
      },
      classObj() {
        return {
          hideSidebar: !this.sidebar.opened,
          openSidebar: this.sidebar.opened,
          withoutAnimation: this.sidebar.withoutAnimation,
          mobile: this.device === 'mobile'
        }
      }
    },
    methods: {
      handleClickOutside() {
        this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
  .main-footer {
    z-index: 2002;
    position: fixed;
    background: rgba(48, 65, 86, 1);
    border-top: 1px solid #e6e6e6;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    text-align: center;
    color: #333;
  }
</style>

src/views/layout/components/Navbar.vue

@@ -1,6 +1,5 @@
<template>
  <div>
    <marqueebox :isShow="roles.indexOf('1')>=0"></marqueebox>
    <el-menu class="navbar" mode="horizontal">
      <hamburger v-if="roles.indexOf('1')>=0" class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
      <breadcrumb></breadcrumb>
@@ -10,15 +9,13 @@
<script>
import { mapGetters } from 'vuex'
import Marqueebox from '@/components/Marqueebox'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
export default {
  components: {
    Breadcrumb,
    Hamburger,
    Marqueebox
    Hamburger
  },
  computed: {
    ...mapGetters([
@@ -32,7 +29,7 @@ export default {
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
        location.reload() // 为锟斤拷锟斤拷锟斤拷实锟斤拷锟斤拷vue-router锟斤拷锟斤拷 锟斤拷锟斤拷bug
      })
    }
  }

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,5 +1,5 @@
<template>
  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
  <div v-if="!item.hidden" class="menu-wrapper">
      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">

src/views/layout/components/Sidebar/index.vue

@@ -9,7 +9,7 @@
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
      <sidebar-item v-for="route in permission_routers" :key="permission_routers.name" :item="route" :base-path="route.path"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>
@@ -22,12 +22,9 @@ export default {
  components: { SidebarItem },
  computed: {
    ...mapGetters([
      // 'permission_routers',
      'sidebar'
      'sidebar',
      'permission_routers'
    ]),
    routes() {
      return this.$router.options.routes
    },
    isCollapse() {
      return !this.sidebar.opened
    }

src/views/layout/components/TopNavbar.vue

@@ -1,7 +1,9 @@
<template>
  <div class="topnavbar">
    <div class="logo-container">
      <div class="logo-wrapper" @click="toHome"><div class="logo-img"></div></div>
      <div class="logo-wrapper" @click="toHome">
        <div class="logo-img"></div>
      </div>
      <el-dropdown v-if="roles.indexOf('1')<0 && dataList.length>0" trigger="click" class="drop-menu">
        <span class="el-dropdown-link">
          {{showName ? showName : '选择桥梁'}}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -12,169 +14,237 @@
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="watchText" v-if="roles.indexOf('1') < 0 && dashFalg">
        <span @click="voiceWatch">音频监测</span>
        <span @click="wetC">除湿监测</span>
      </div>
    </div>
    <div class="name-box">
      <span>您好，{{ name }}</span>
      <span class="exit-btn" @click="logout">退出登录</span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link" style="color:#fff;">
          您好，{{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="/modifyData" v-if="roles.indexOf('0')>-1">修改账户资料</el-dropdown-item>
          <el-dropdown-item command="/modifyPassword" v-if="roles.indexOf('0')>-1">修改密码</el-dropdown-item>
          <el-dropdown-item command="c">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { MessageBox } from 'element-ui'
import { getBridgeList } from '@/api/bridgeInfo'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      bridgeId: '',
      showName: '',
      dataList: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  watch: {
    '$route'(to, from) {
      if (to.path === '/dashboard') {
        var dataList = this.dataList
        for (let i = 0; i < dataList.length; i++) {
          dataList[i].disab = false
        }
        Cookies.remove('bridgeId')
        Cookies.remove('bridgeName')
        this.showName = ''
      } else {
        this.bridgeId = Cookies.get('bridgeId')
        this.showName = Cookies.get('bridgeName')
        this.getBridgeLists()
  import { mapGetters } from 'vuex'
  import { MessageBox } from 'element-ui'
  import { getBridgeList } from '@/api/bridgeInfo'
  import Cookies from 'js-cookie'
  export default {
    data() {
      return {
        activeName: 'second',
        bridgeId: '',
        showName: '',
        dataList: '',
        dashFalg: false
      }
    }
  },
  created() {
    this.bridgeId = Cookies.get('bridgeId')
    this.showName = Cookies.get('bridgeName')
    this.getBridgeLists()
  },
  methods: {
    toHome() {
      this.$router.replace({ path: '/' })
    },
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    logout() {
      MessageBox.confirm('您确认要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
    watch: {
      '$route'(to, from) {
        if (to.path === '/dashboard') {
          this.dashFalg = false
          var dataList = this.dataList
          for (let i = 0; i < dataList.length; i++) {
            dataList[i].disab = false
          }
          Cookies.remove('bridgeId')
          Cookies.remove('bridgeName')
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }).catch(() => {
        console.log('已取消退出')
      })
          this.showName = ''
        } else {
          this.dashFalg = true
          this.bridgeId = Cookies.get('bridgeId')
          this.showName = Cookies.get('bridgeName')
          this.getBridgeLists()
        }
      }
    },
    getBridgeLists() {
      const param = {
        active: 1,
        pageSize: 10,
        pageNo: 1
    created() {
      if (this.$route.name === 'dashboard') {
        this.dashFalg = false
      } else {
        this.dashFalg = true
      }
      getBridgeList(param).then(res => {
        if (res.success) {
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].id === this.bridgeId) {
              res.data.data[i].disab = true
            } else {
              res.data.data[i].disab = false
      this.bridgeId = Cookies.get('bridgeId')
      this.showName = Cookies.get('bridgeName')
      this.getBridgeLists()
    },
    methods: {
      voiceWatch() {
        if (location.href.substr(location.href.indexOf('#') + 1) !== '/bridgeHome/bridgeDetail') {
          this.$router.push('bridgeHome/bridgeDetail')
        }
      },
      wetC() {
        this.$router.push('/gasHolder')
      },
      handleCommand(command) {
        if (command === 'c') {
          this.logout()
        } else {
          this.$router.push(command)
        }
      },
      toHome() {
        this.$router.replace({ path: '/' })
      },
      toggleSideBar() {
        this.$store.dispatch('ToggleSideBar')
      },
      logout() {
        MessageBox.confirm('您确认要退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            Cookies.remove('bridgeId')
            Cookies.remove('bridgeName')
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        }).catch(() => {
          console.log('已取消退出')
        })
      },
      getBridgeLists() {
        const param = {
          active: 1,
          pageSize: 10,
          pageNo: 1
        }
        getBridgeList(param).then(res => {
          if (res.success) {
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].id === this.bridgeId) {
                res.data.data[i].disab = true
              } else {
                res.data.data[i].disab = false
              }
            }
            this.dataList = res.data.data
          }
          this.dataList = res.data.data
        }
      })
    },
    goToDashboardC(id, name) {
      this.showName = name
      Cookies.set('bridgeId', id)
      Cookies.set('bridgeName', name)
      this.$router.replace({
        name: 'bridgeDetail',
        query: { id: id, name: name }
      })
        })
      },
      goToDashboardC(id, name) {
        this.showName = name
        Cookies.set('bridgeId', id)
        Cookies.set('bridgeName', name)
        this.$router.replace({
          name: 'bridgeDetail',
          query: { id: id, name: name }
        })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.topnavbar {
  position: fixed;
  font-size: 0px;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  z-index:2002;
  border-radius: 0px !important;
  background-color: #2d3a4b;
  border-bottom: 1px solid #e6e6e6;
  .logo-container {
    display: inline-block;
    position: absolute;
    left:10px;
    overflow: hidden;
    .logo-wrapper {
      float:left;
      width:300px;
      padding: 0;
      margin:10px 12px;
      cursor: pointer;
  .topnavbar {
    position: fixed;
    font-size: 0px;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    z-index: 2002;
    border-radius: 0px !important;
    background-color: #2d3a4b;
    border-bottom: 1px solid #e6e6e6;
    .logo-container {
      display: inline-block;
      position: absolute;
      left: 10px;
      overflow: hidden;
      .logo-wrapper {
        float: left;
        width: 300px;
        padding: 0;
        margin: 10px 12px;
        cursor: pointer;
      }
      .drop-menu {
        float: left;
        cursor: pointer;
        margin: 0;
        margin-left: 20px;
        color: #fff;
      }
      .watchText {
        font-size: 14px;
        margin-left: 30px;
        float: left;
        color: #fff;
        span {
          margin-right: 30px;
          cursor: pointer;
          &:hover {
            color: #409EFF;
          }
        }
      }
    }
    .drop-menu{
      float:left;
      cursor: pointer;
      margin:0;
      margin-left:20px;
      color: #fff;
    .name-middle {
      height: 50px;
      position: absolute;
      left: 500px;
      overflow: hidden;
    }
  }
  .name-box{
    display: inline-block;
    position: absolute;
    right: 20px;
    font-size:14px;
    overflow: hidden;
    color:#fff;
    .exit-btn {
      margin-left:30px;
      cursor: pointer;
    .name-box {
      height: 50px;
      display: inline-block;
      position: absolute;
      right: 20px;
      font-size: 14px;
      overflow: hidden;
      color: #fff;
      .exit-btn {
        margin-left: 30px;
        cursor: pointer;
      }
    }
  }
}
.drop-menu-list{
  .el-dropdown-menu__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.is-disabled{
      background: #f3f5f7;
    }
    .el-icon-check{
      font-weight: bold;
  .drop-menu-list {
    .el-dropdown-menu__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.is-disabled {
        background: #f3f5f7;
      }
      .el-icon-check {
        font-weight: bold;
      }
    }
  }
}
</style>

src/views/layout/components/index.js

@@ -1,4 +1,5 @@
export { default as TopNavbar } from './TopNavbar'
export { default as Navbar } from './Navbar'
export { default as nava } from './nava'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

src/views/layout/components/nava.vue

@@ -0,0 +1,67 @@
<template>
  <div>
    <el-menu class="navbar" mode="horizontal">
      <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
      <breadcrumb></breadcrumb>
    </el-menu>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import Breadcrumb from '@/components/Breadcrumb'
  import Hamburger from '@/components/Hamburger'
  export default {
    components: {
      Breadcrumb,
      Hamburger
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'roles'
      ])
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('ToggleSideBar')
      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // Ϊ������ʵ����vue-router���� ����bug
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .navbar {
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    border-radius: 0px !important;
    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 10px;
    }
    .screenfull {
      position: absolute;
      right: 90px;
      top: 16px;
      color: red;
    }
  }
  .message-box {
    color: #303133;
    background: #c7e3ff;
    padding: 0 20px;
    font-size: 14px;
  }
</style>