普通用户信息展示

src/api/bridgeInfo.js

@@ -0,0 +1,100 @@
import request from '@/utils/request'
export function getUserAllResource(params) { // 用户所有信息
  return request({
    url: '/ajax/all/byUser',
    method: 'get',
    params
  })
}
export function getBridgeList(params) { // 用户所有桥梁
  return request({
    url: '/ajax/bridge/byUser',
    method: 'get',
    params
  })
}
export function getBridgeInfo(params) { // 桥梁信息
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}
export function getBridgeServers(params) { // 桥梁服务器
  return request({
    url: '/ajax/server/byBridge',
    method: 'get',
    params
  })
}
export function getServerInfo(params) { // 某个服务器
  return request({
    url: '/ajax/server/qo',
    method: 'get',
    params
  })
}
export function getDeviceInfo(params) { // 某个采集盒
  return request({
    url: '/ajax/device/qo',
    method: 'get',
    params
  })
}
// 报警信息
export function getDangerList(params) {
  return request({
    url: '/ajax/alarm/msg',
    method: 'get',
    params
  })
}
export function getDangerDetail(params) {
  return request({
    url: '/ajax/alarm/detail',
    method: 'get',
    params
  })
}
// 报警信息
// 未读报警
export function getBridgeUnread(params) {
  return request({
    url: '/ajax/alarm/msg/unread',
    method: 'get',
    params
  })
}
export function setUnreadToRead(params) {
  return request({
    url: '/ajax/alarm/msg/read',
    method: 'post',
    data: params
  })
}
// 未读报警
// 监测信息
export function getMonitorByDay(params) {
  return request({
    url: '/ajax/collect/wave/server/day',
    method: 'get',
    params
  })
}
export function getTimingMonitor(params) {
  return request({
    url: '/ajax/collect/wave/curr',
    method: 'get',
    params
  })
}
// 监测信息

src/api/login.js

@@ -55,14 +55,43 @@ export function resetPwdByTel(pw, vc) {
}
// 修改密码
export function changePw(id, oldPw, newPw) {
export function changePw(params) {
  return request({
    url: '/ajax/sys/changePw',
    method: 'post',
    data: {
      id,
      oldPw,
      newPw
    }
    data: params
  })
}
// 获取修改个人信息
export function getMyself(params) {
  return request({
    url: '/ajax/sys/qo',
    method: 'get',
    params
  })
}
export function updateMyself(params) {
  return request({
    url: '/ajax/sys/update',
    method: 'post',
    data: params
  })
}
// 获取公告信息
export function getNotice() {
  return request({
    url: '/ajax/sys/notice',
    method: 'get'
  })
}
export function updateNotice(params) {
  return request({
    url: '/ajax/sys/notice',
    method: 'post',
    data: params
  })
}

src/api/table.js

@@ -1,41 +0,0 @@
import request from '@/utils/request'
export function getBridgeList(params) {
  return request({
    url: '/ajax/bridge/byUser',
    method: 'get',
    params
  })
}
export function getBridgeInfo(params) {
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}
export function getBridgeServers(params) {
  return request({
    url: '/ajax/server/byBridge',
    method: 'get',
    params
  })
}
export function getBridgeDevices(params) {
  return request({
    url: '/ajax/device/byServer',
    method: 'get',
    params
  })
}
export function getBridgeSensors(params) {
  return request({
    url: '/ajax/transducer/byDevice',
    method: 'get',
    params
  })
}

src/components/Marqueebox/index.vue

@@ -0,0 +1,132 @@
<template>
  <div>
    <el-dialog title="系统消息编辑" :visible.sync="dialogFormVisible">
      <el-form :model="formNotice" ref="formNotice" :rules="rules">
        <el-input type="textarea" v-model="formNotice.desc"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setNotice('formNotice')">确 定</el-button>
      </div>
    </el-dialog>
    <el-menu class="message-box" mode="horizontal">
      <div class="marquee_box">
        <span class="tit">系统公告：</span>
        <div ref="rollul" class="marquee_text" :class="{anim:animate}">
          {{formNotice.desc}}
        </div>
        <span class="btn-span" v-if="isShow" @click="openNoticeDialog">设置</span>
      </div>
    </el-menu>
  </div>
</template>
 
<script>
import { getNotice, updateNotice } from '@/api/login'
export default {
  props: {
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      animate: true,
      formNotice: {
        desc: ''
      },
      rules: {
        desc: [
          { required: true, message: '请编辑内容发送', trigger: 'blur' },
          { max: 100, message: '不得超过100个字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getNotice()
    setInterval(this.scroll, 3000)
  },
  methods: {
    getNotice() {
      getNotice().then(res => {
        if (res.success) {
          this.formNotice.desc = res.data
        }
      })
    },
    openNoticeDialog() {
      this.dialogFormVisible = true
    },
    setNotice(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            cnt: this.formNotice.desc
          }
          updateNotice(param).then(res => {
            if (res.success) {
              this.dialogFormVisible = false
              this.$refs[formName].resetFields()
            }
          })
        } else {
          return false
        }
      })
    },
    scroll() {
      // const con1 = this.$refs.rollul
      // con1.style.marginTop = '0px'
      // this.animate = !this.animate
      // var that = this
      // setTimeout(() => {
      //   con1.style.marginTop = '-50px'
      //   that.animate = !that.animate
      // }, 1000)
    }
  }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.message-box{
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border-radius: 0px !important;
  color: #303133;
  background: #c7e3ff;
  padding: 0 20px;
  font-size: 14px;
  .marquee_box {
    width: 100%;
    position: relative;
    height: 50px;
    overflow: hidden;
    .marquee_text {
      line-height: 50px;
      position:absolute;
      top:0;
      padding-left:68px;
      padding-right: 80px;
      width:100%;
      box-sizing: border-box;
      overflow: hidden;
    }
    .btn-span{
      position:absolute;
      top:0;
      right:0;
      cursor: pointer;
    }
  }
  .anim{
    transition: all 0.5s;
  }
}
.el-textarea .el-textarea__inner{
  height: 160px;
}
</style>

src/icons/svg/msgvc.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="1534314336166" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1053" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M835.1 200.9c-7.7 0.3-15.3 0.4-22.7 0.4-194.9 0-280.9-82.6-281.6-83.3l-19.4-19.7-19.6 19.7c-0.8 0.9-85 83.3-281.5 83.3-7.4 0-15-0.1-22.7-0.4l-27.4-0.9v374.4c0 98 35.4 241 341.6 350.4l9.6 3.4 9.6-3.4c306.2-109.4 341.6-252.4 341.6-350.4V200l-27.5 0.9M481.2 671.2L304.8 517.6l46.8-37.3 93.8 68S574.9 416.6 700 355l17.9 19.8S561.6 502.2 481.2 671.2m0 0" p-id="1054"></path></svg>

src/icons/svg/unread.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="1534314532421" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2816" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.999488 66.861804c-245.826801 0-445.138196 199.203948-445.138196 445.138196 0 245.826801 199.311395 445.138196 445.138196 445.138196 245.825778 0 445.138196-199.311395 445.138196-445.138196C957.137685 266.065751 757.824243 66.861804 511.999488 66.861804zM484.177839 230.311433c0-15.431457 12.443403-27.821649 27.821649-27.821649s27.821649 12.389168 27.821649 27.821649l0 389.495922c0 15.32401-12.443403 27.821649-27.821649 27.821649s-27.821649-12.497639-27.821649-27.821649L484.177839 230.311433zM511.999488 807.599392c-22.985504 0-41.73145-18.800181-41.73145-41.73145 0-23.039739 18.745946-41.73145 41.73145-41.73145s41.73145 18.692734 41.73145 41.73145C553.730938 788.79921 534.984992 807.599392 511.999488 807.599392z" p-id="2817"></path></svg>

src/router/index.js

@@ -8,7 +8,6 @@ Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
import LayoutC from '../views/layout/LayoutC'
/** note: submenu only apppear when children.length>=1
*   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -52,7 +51,7 @@ export const constantRouterMap = [
  {
    path: '',
    component: LayoutC,
    component: Layout,
    name: 'bridgesConsole',
    meta: {
      noCache: true
@@ -63,6 +62,33 @@ export const constantRouterMap = [
        name: 'bridgeDetail',
        component: () => import('@/views/bridgesConsole/bridgeDetail/index'),
        meta: { noCache: true }
      },
      {
        path: 'danger',
        name: 'danger',
        redirect: 'noredirect',
        meta: { title: '历史报警信息查询', noCache: true },
        component: () => import('@/views/bridgesConsole/bridgeDanger/index'),
        children: [
          {
            path: 'dangerList',
            name: 'dangerList',
            component: () => import('@/views/bridgesConsole/bridgeDanger/dangerList'),
            meta: { noCache: true }
          },
          {
            path: 'dangerDetail',
            name: 'dangerDetail',
            component: () => import('@/views/bridgesConsole/bridgeDanger/dangerDetail'),
            meta: { title: '报警信息浏览', noCache: true }
          }
        ]
      },
      {
        path: 'bridgeMonitor',
        name: 'bridgeMonitor',
        component: () => import('@/views/bridgesConsole/bridgeMonitor/index'),
        meta: { title: '历史监测信息查询', noCache: true }
      }
    ]
  },

src/store/getters.js

@@ -1,6 +1,7 @@
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  account: state => state.user.account,
  userid: state => state.user.userid,
  name: state => state.user.name,
  roles: state => state.user.roles,

src/store/modules/user.js

@@ -3,6 +3,7 @@ import { getSession, removeSession } from '@/utils/auth'
const user = {
  state: {
    account: '',
    userid: '',
    name: '',
    roles: [],
@@ -10,6 +11,9 @@ const user = {
    session: getSession()
  },
  mutations: {
    SET_ACCOUNT: (state, account) => {
      state.account = account
    },
    SET_USERID: (state, userid) => {
      state.userid = userid
    },
@@ -39,6 +43,7 @@ const user = {
            if (response.data) {
              const dataS = response.data
              if (dataS.active) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                commit('SET_ROLES', [dataS.type.toString()])
                commit('SET_NAME', dataS.name)
@@ -61,6 +66,7 @@ const user = {
            if (response.data) {
              const dataS = response.data
              if (dataS.active) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                commit('SET_ROLES', [dataS.type.toString()])
                commit('SET_NAME', dataS.name)
@@ -78,6 +84,7 @@ const user = {
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout().then(() => {
          commit('SET_ACCOUNT', '')
          commit('SET_USERID', '')
          commit('SET_ROLES', [])
          commit('SET_NAME', '')

src/styles/roleuser.scss

@@ -0,0 +1,106 @@
.dashboard-editor-container{
  padding: 32px;
  .block-group{
    background: #fff;
    margin-bottom: 20px;
    .block-title{
      display: flex;
      justify-content: space-between;
      .el-button{
        padding: 3px 0;
      }
    }
    .item-ul{
      margin: 0;
      padding: 0 10px;
      li{
        padding: 8px 0;
        margin: 0;
        list-style: none;
        cursor: pointer;
        &.readed-li{
          color: #de0000;
        }
        span{
          display: inline-block;
          margin-right: 15px;
        }
      }
    }
    .grid-content{
      height: 100px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      background-color: #f8f8f8;
      margin-bottom: 8px;
      padding:20px;
      cursor: pointer;
      &:hover {
        transition: all 0.2s ease-out;
        color: #fff;
        background: #36a3f7;
      }
    }
  }
  .panel-group {
    margin-top: 18px;
    .card-panel-col{
      margin-bottom: 32px;
    }
    .card-panel {
      cursor: pointer;
      padding: 15px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
      }
      .card-panel-icon-wrapper {
        margin: 10px 0;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-image{
        width: 100%;
        max-width: 280px;
        margin: auto;
        height: 160px;
        border: 1px solid #d0d0d0;
        background-position: center;
        background-size: cover;
      }
      .card-panel-icon {
        font-size: 48px;
      }
      .card-panel-description {
        font-weight: bold;
        margin-top:12px;
        .card-panel-text {
          line-height: 24px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
        }
        .card-panel-text-red {
          color: #de0000
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
  .line-chart-box{
    .el-col{
      margin: 15px 0;
    }
  }
}

src/styles/sidebar.scss

@@ -2,7 +2,7 @@
  // 主体区域
  .main-container {
    min-height: 100%;
    top:50px;
    padding-top:50px;
    transition: margin-left .28s;
    margin-left: 240px;
    position: relative;

src/utils/index.js

@@ -3,58 +3,40 @@
 */
export const comUrl = 'http://localhost:90'
export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
/**
 * 解析url参数
 * @example ?id=12345&a=b
 * @return Object {id:12345,a:b}
 */
export function urlParse(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || ['', ''])[1].replace(/\+/g, '%20')) || null
}
export function parseTime(startTime, flag, fa) {
  if (flag) {
    if (!fa) {
      return startTime.substring(0, 4) + '年' + startTime.substring(4, 6) + '月' + startTime.substring(6, 8) + '日 ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12)
    } else {
      return startTime.substring(0, 4) + '/' + startTime.substring(4, 6) + '/' + startTime.substring(6, 8) + ' ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12) + ':' + startTime.substring(12, 14)
    }
  } else {
    if (('' + time).length === 10) time = parseInt(time) * 1000
    date = new Date(time)
    return startTime.substring(0, 4) + '/' + startTime.substring(4, 6) + '/' + startTime.substring(6, 8)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}
export function formatTime(time, option) {
  time = +time * 1000
  const d = new Date(time)
  const now = Date.now()
  const diff = (now - d) / 1000
  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) { // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {
    return parseTime(time, option)
  } else {
    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
export function turnTime(time, hasT, hasF) { // hasT='date/time'是否有时分秒，hasF是否需要显示格式
  if (hasT === 'time') {
    if (hasF) {
      return [time.getFullYear(), time.getMonth() + 1, time.getDate()].join('/') + ' ' + [time.getHours(), time.getMinutes(), time.getSeconds()].join(':')
    } else {
      return time.getFullYear() + (time.getMonth() + 1) + time.getDate() + time.getHours() + time.getMinutes() + time.getSeconds()
    }
  } else if (hasT === 'date') {
    if (hasF) {
      return [time.getFullYear(), time.getMonth() + 1, time.getDate()].join('/')
    } else {
      return time.getFullYear() + (time.getMonth() + 1) + time.getDate()
    }
  }
}

src/views/bridgesConsole/bridgeDanger/dangerDetail.vue

@@ -0,0 +1,97 @@
<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card block-group">
      <div slot="header" class="block-title">
        <span>{{alarmTime}}</span>
        <span>{{alarmTit}}</span>
      </div>
      <el-row class="line-chart-box">
        <el-col :xs="24" :sm="24" :lg="24" v-for="(item, index) in alarmShowList" :key="item.index">
          <lineChart :chartData="item.data" :startTime="item.stime" :legendName="'传感器' + item.seq" :lineColor="index" :intervalTime="intervalTime"></lineChart>
        </el-col>
      </el-row>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="alarmList.length">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import '@/styles/roleuser.scss'
import { urlParse, parseTime } from '@/utils'
import { getDangerDetail, setUnreadToRead } from '@/api/bridgeInfo'
import lineChart from '../lineChart/LineChart'
export default {
  data() {
    return {
      alarmId: '',
      alarmTit: '',
      alarmList: [],
      pageSize: 6,
      pageNo: 1,
      intervalTime: 3 * 1000
    }
  },
  components: {
    lineChart
  },
  created() {
    this.alarmId = urlParse('aid')
    this.alarmTit = urlParse('msg')
    this.getDangerDetail()
    this.setUnreadToRead()
  },
  computed: {
    alarmTime() {
      const alramM = this.alarmId.split('_')
      return parseTime(alramM[ alramM.length - 1], true)
    },
    alarmShowList() {
      return this.alarmList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  methods: {
    getDangerDetail() {
      const param = {
        aid: this.alarmId
      }
      getDangerDetail(param).then(res => {
        if (res.success && res.data) {
          for (let i = 0; i < res.data.length; i++) {
            const arr = JSON.parse('[' + String(res.data[i].data.split(',')) + ']')
            res.data[i].data = arr
          }
          this.alarmList = res.data
        }
      })
    },
    setUnreadToRead() {
      const param = {
        aid: this.alarmId
      }
      setUnreadToRead(param).then(res => {
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
    }
  }
}
</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/bridgesConsole/bridgeDanger/dangerList.vue

@@ -0,0 +1,92 @@
<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card block-group">
      <div slot="header" class="block-title">
        <span>报警信息</span>
      </div>
      <ul class="item-ul">
        <li :class="!item.readed ? 'readed-li' : ''" v-for="item in dangerShowList" :key="item.index" @click="alarmShow(item.aid, item.device)">
          <span>{{item.alarmTime}}</span>
          <span>{{item.device}}，请点击查看。</span>
          <span class="svg-container" v-if="!item.readed">
            <svg-icon icon-class="unread"></svg-icon>
          </span>
        </li>
      </ul>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import '@/styles/roleuser.scss'
import { urlParse, parseTime } from '@/utils'
import { getDangerList } from '@/api/bridgeInfo'
export default {
  data() {
    return {
      bridgeName: '',
      dangerList: [],
      total: 0,
      pageSize: 4,
      pageNo: 1
    }
  },
  computed: {
    dangerShowList() {
      return this.dangerList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  created() {
    this.bridgeName = urlParse('name')
    this.getDangerList()
  },
  methods: {
    getDangerList() {
      const param = {
        pageSize: 18,
        pageNo: 1
      }
      getDangerList(param).then(res => {
        if (res.success && res.data.data) {
          const dataS = res.data.data
          this.total = res.data.total
          for (let i = 0; i < dataS.length; i++) {
            if (dataS[i].alarmTime) {
              dataS[i].alarmTime = parseTime(dataS[i].alarmTime, true)
            }
            dataS[i].device = `${this.bridgeName}大桥${dataS[i].device}采集盒检测到异常情况`
          }
          this.dangerList = dataS
        }
      })
    },
    alarmShow(id, msg) {
      this.$router.push({
        name: 'dangerDetail',
        query: { aid: id, msg: msg }
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.item-ul{
  min-height: 400px;
}
</style>

src/views/bridgesConsole/bridgeDanger/index.vue

@@ -0,0 +1,5 @@
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

src/views/bridgesConsole/bridgeDetail/components/BInfoDialog01.vue

@@ -35,7 +35,7 @@
        </el-col>
        <el-col :xs="24" :sm="6" :lg="8">
          <div style="width:100%">
            <img :src="dataInfo.img" alt="桥梁图片" width="90%">
            <img :src="dataInfo.img" :alt="dataInfo.shortName" width="90%">
          </div>
        </el-col>
        <el-col :span="24" v-if="dataInfo.descp">
@@ -59,7 +59,8 @@
</template>
<script>
import { getBridgeInfo } from '@/api/table'
import { getBridgeInfo } from '@/api/bridgeInfo'
import { parseTime } from '@/utils'
export default {
  props: {
@@ -83,6 +84,7 @@ export default {
      }
      getBridgeInfo(param).then(res => {
        if (res.success) {
          res.data.serviceDay = parseTime(res.data.serviceDay)
          this.dataInfo = res.data
        }
      })

src/views/bridgesConsole/bridgeDetail/components/BInfoDialog02.vue

@@ -2,7 +2,7 @@
  <el-dialog title="采集服务器信息" :visible.sync="dialogTableVisible" width="80%">
    <el-form class="form-main">
      <el-row :gutter="16">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in [0,1,2,3]" :key="item.id">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in serverShowList" :key="item.index">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
@@ -12,7 +12,7 @@
                <el-form-item label="采集器数量">{{item.devices}}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属桥梁">{{item.bridgeId}}</el-form-item>
                <el-form-item label="所属桥梁">{{bridgeName}}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" class="el-to-block"><br />
@@ -26,12 +26,11 @@
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="10">
          :total="serverList.length">
        </el-pagination>
      </div>
      <el-row>
@@ -46,36 +45,33 @@
</template>
<script>
import './style.scss'
export default {
  props: {
    serverList: {
      type: Array
    },
    bridgeName: {
      type: String
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      currentPage: 1
      pageSize: 4,
      pageNo: 1
    }
  },
  computed: {
    serverShowList() {
      return this.serverList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin: 0;
  }
  .textarea-div{
    line-height: 26px;
    margin-bottom: 10px;
  }
  .list-item{
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 10px 15px;
  }
</style>

src/views/bridgesConsole/bridgeDetail/components/BInfoDialog03.vue

@@ -2,23 +2,21 @@
  <el-dialog title="采集盒信息" :visible.sync="dialogTableVisible" width="80%">
    <el-form class="form-main">
      <el-row :gutter="16">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in [0,1,2,3]" :key="item.id">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in deviceShowList" :key="item.index">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
                <el-form-item label="采集盒编号">000000001</el-form-item>
                <el-form-item label="采集盒编号">{{item.code}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集盒信道数量">2</el-form-item>
                <el-form-item label="采集盒信道数量">{{item.channels}}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="采集盒所属服务器编号">1926831</el-form-item>
                <el-form-item label="采集盒所属服务器编号">{{item.serverCode}}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" class="el-to-block"><br />
                  <div class="textarea-div">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                  </div>
                  <div class="textarea-div">{{item.remark}}</div>
                </el-form-item>
              </el-col>
            </el-row>
@@ -28,12 +26,11 @@
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="10">
          :total="deviceList.length">
        </el-pagination>
      </div>
      <el-row>
@@ -48,36 +45,30 @@
</template>
<script>
import './style.scss'
export default {
  props: {
    deviceList: {
      type: Array
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      currentPage: 1
      pageSize: 4,
      pageNo: 1
    }
  },
  computed: {
    deviceShowList() {
      return this.deviceList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin: 0;
  }
  .textarea-div{
    line-height: 26px;
    margin-bottom: 10px;
  }
  .list-item{
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 10px 15px;
  }
</style>

src/views/bridgesConsole/bridgeDetail/components/BInfoDialog04.vue

@@ -2,26 +2,24 @@
  <el-dialog title="传感器信息" :visible.sync="dialogTableVisible" width="80%">
    <el-form class="form-main">
      <el-row :gutter="16">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in [0,1,2,3]" :key="item.id">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in transducerShowList" :key="item.index">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
                <el-form-item label="采集盒编号">000000001</el-form-item>
                <el-form-item label="采集盒编号">{{item.deviceCode}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器编号">8903420394</el-form-item>
                <el-form-item label="传感器编号">{{item.code}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属主缆">上游主缆</el-form-item>
                <el-form-item label="所属主缆">{{item.cableType}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器位置">东段</el-form-item>
                <el-form-item label="传感器位置">{{item.locType}}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" class="el-to-block"><br />
                  <div class="textarea-div">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                  </div>
                  <div class="textarea-div">{{item.remark}}</div>
                </el-form-item>
              </el-col>
            </el-row>
@@ -31,12 +29,11 @@
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="10">
          :total="transducerList.length">
        </el-pagination>
      </div>
      <el-row>
@@ -51,36 +48,30 @@
</template>
<script>
import './style.scss'
export default {
  props: {
    transducerList: {
      type: Array
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      currentPage: 1
      pageSize: 4,
      pageNo: 1
    }
  },
  computed: {
    transducerShowList() {
      return this.transducerList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin: 0;
  }
  .textarea-div{
    line-height: 26px;
    margin-bottom: 10px;
  }
  .list-item{
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 10px 15px;
  }
</style>

src/views/bridgesConsole/bridgeDetail/components/style.scss

@@ -0,0 +1,16 @@
.form-main{
  .el-form-item{
    margin: 0;
  }
}
.textarea-div{
  line-height: 26px;
  margin-bottom: 10px;
}
.list-item{
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 10px 15px;
  height: 200px;
  overflow: hidden;
}

src/views/bridgesConsole/bridgeDetail/components/updateLoginPwd.vue

@@ -1,19 +1,15 @@
<template>
  <el-dialog title="修改登录密码" ref="ruleForm" :visible.sync="dialogTableVisible" width="460px">
  <el-dialog title="修改登录密码" :visible.sync="dialogTableVisible" width="460px">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
      <el-form-item prop="oldpass">
        <el-input type="password" v-model="ruleForm2.oldpass" placeholder="请输入您的旧密码" auto-complete="off"></el-input>
      </el-form-item>
      <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></el-form-item>
      <el-form-item class="el-btn-col">
        <div class="el-btn-col-box">
          <el-button type="primary" @click="resetPwd('ruleForm2')">确定</el-button>
          <el-button type="primary" @click.native.prevent="resetPwd('ruleForm2')">确定</el-button>
        </div>
      </el-form-item>
    </el-form>
@@ -22,7 +18,7 @@
<script>
import { changePw } from '@/api/login'
import { Alert } from 'element-ui'
import { MessageBox } from 'element-ui'
export default {
  data() {
@@ -50,19 +46,15 @@ export default {
    return {
      dialogTableVisible: false,
      ruleForm2: {
        oldpass: '',
        pass: '',
        checkPass: ''
      },
      rules2: {
        oldpass: [
          { required: true, message: '请输入您的旧密码', trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
@@ -71,21 +63,19 @@ export default {
    resetPwd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            oldPw: this.ruleForm2.oldpass,
            newpw: this.ruleForm2.checkPass
          }
          changePw(params).then((res) => {
          const newPw = this.ruleForm2.checkPass
          changePw({ newPw }).then((res) => {
            if (res.success) {
              Alert('提示', '密码修改成功！', {
              MessageBox.alert('提示', '密码修改成功！', {
                confirmButtonText: '确定',
                type: 'success',
                center: true
                // callback: action => {
                //   if (action === 'confirm') {
                //     this.$router.push({path: '/loginPlat'})
                //   }
                // }
                center: true,
                callback: action => {
                  if (action === 'confirm') {
                    this.dialogTableVisible = false
                    this.$refs[formName].resetFields()
                  }
                }
              })
            }
          })

src/views/bridgesConsole/bridgeDetail/components/updatePersonInfo.vue

@@ -1,36 +1,36 @@
<template>
  <el-dialog title="修改个人信息" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
    <el-form class="form-main" label-width="80px">
      <el-row>
  <el-dialog title="修改个人信息" :visible.sync="dialogTableVisible" width="680px">
    <el-form class="demo-ruleForm" label-width="80px" :model="ruleForm" ref="ruleForm" :rules="formRules">
      <el-row :gutter='20'>
        <el-col :span="12">
          <el-form-item label="账 号">13679879708</el-form-item>
          <el-form-item label="账 号">{{account}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户姓名">李二蛋</el-form-item>
          <el-form-item label="用户姓名">{{name}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职 位">
            <el-input placeholder="请填写职位"></el-input>
          <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="所在机构">
            <el-input placeholder="请填写所在机构"></el-input>
          <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="联系电话">
            <el-input placeholder="请填写联系电话"></el-input>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请填写联系电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱">
            <el-input placeholder="请填写联系邮箱"></el-input>
          <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="submitForm('ruleForm')">保存</el-button>
            <el-button type="primary" @click.native.prevent="submitForm('ruleForm')">保存</el-button>
          </div>
        </el-col>
      </el-row>
@@ -39,56 +39,86 @@
</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 (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      dialogTableVisible: false
      dialogTableVisible: false,
      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) {
        //   let paramsData = {
        //     'title': this.ruleFormDem.demandTit,
        //     'descp': this.ruleFormDem.demandDesc,
        //     'province': this.ruleFormDem.province,
        //     'city': this.ruleFormDem.city,
        //     'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
        //     'cost': this.selectCostRange,
        //     'duration': this.selectLongTime,
        //     'orgName': this.ruleFormDem.orgName,
        //     'contactNum': this.ruleFormDem.linkTel,
        //     'creator': this.kxUserId,
        //     'source': this.platSource
        //   };
        //   this.$axios.post(httpUrl.kxQurey.demand.add, paramsData).then((res) => {
        //     if (res.success) {
        //       this.$alert('我们已收到您的需求，马上为您对接合适的专家和专业机构，您可以登录科袖网与对方做进一步沟通。', '需求发布成功！', {
        //         confirmButtonText: '进入科袖网，发现更多服务和资源',
        //         type: 'success',
        //         center: true,
        //         cancelButtonText: '取消',
        //         callback: action => {
        //           if (action === 'confirm') {
        //             window.open(util.ekexiuUrl, '科袖网首页');
        //           };
        //         }
        //       });
        //       this.resetForm(formName);
        //       this.$emit('dialogChangedLogin', false);
        //     } else {
        //       this.$message({
        //         message: '需求发布失败，请重新发布！',
        //         type: 'warning'
        //       });
        //     };
        //     console.log(res);
        //   });
        // } else {
        //   console.log('error submit!!');
        //   return false
          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.dialogTableVisible = false
                    this.$refs[formName].resetFields()
                  }
                }
              })
            }
          })
        }
      })
    }

src/views/bridgesConsole/bridgeDetail/index.vue

@@ -1,9 +1,9 @@
<template>
  <div class="dashboard-editor-container">
    <BInfoDialog01 ref="BInfoDialog01"></BInfoDialog01>
    <BInfoDialog02 ref="BInfoDialog02"></BInfoDialog02>
    <BInfoDialog03 ref="BInfoDialog03"></BInfoDialog03>
    <BInfoDialog04 ref="BInfoDialog04"></BInfoDialog04>
    <BInfoDialog01 ref="BInfoDialog01" :bridgeId="bridgeId"></BInfoDialog01>
    <BInfoDialog02 ref="BInfoDialog02" :serverList="serverList" :bridgeName="bridgeName"></BInfoDialog02>
    <BInfoDialog03 ref="BInfoDialog03" :deviceList="deviceList"></BInfoDialog03>
    <BInfoDialog04 ref="BInfoDialog04" :transducerList="transducerList"></BInfoDialog04>
    <updatePersonInfo ref="updatePersonInfo"></updatePersonInfo>
    <updateLoginPwd ref="updateLoginPwd"></updateLoginPwd>
@@ -13,19 +13,37 @@
        <el-card class="box-card block-group">
          <div slot="header" class="block-title">
            <span>报警信息</span>
            <el-button type="text">查看全部</el-button>
            <el-button type="text" @click="queryDangerInfo">查看全部</el-button>
          </div>
          <ul class="item-ul">
            <li v-for="item in [0,1,2,3,4]" :key="item.id">2018年8月1日11:42      XXXXX大桥XXX采集盒XXX传感器检测到异常情况，请点击查看。    未读标记</li>
            <li :class="!item.readed ? 'readed-li' : ''" v-for="item in dangerList" :key="item.index" @click="alarmShow(item.aid, item.device)">
              <span>{{item.alarmTime}}</span>
              <span>{{item.device}}，请点击查看。</span>
              <span class="svg-container" v-if="!item.readed">
                <svg-icon icon-class="unread"></svg-icon>
              </span>
            </li>
          </ul>
        </el-card>
        <el-card class="box-card block-group">
          <div slot="header" class="block-title">
            <span>实时监测</span>
          </div>
          <el-row>
            <!-- <line-chart :chart-data="lineChartData"></line-chart> -->
          <el-row class="line-chart-box">
            <el-col :xs="24" :sm="24" :lg="24" v-for="item in monitorShowList" :key="item.index">
              <lineChart2 :chartData="item"></lineChart2>
            </el-col>
          </el-row>
          <div class="pagination-container">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentNo"
              :page-size="currentSize"
              layout="prev, pager, next, jumper"
              :total="this.monitorList.length">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="9" :lg="6">
@@ -45,8 +63,8 @@
            <span>常用操作</span>
          </div>
          <el-row :gutter="10" class="item-row">
            <el-col :span="12"><div class="grid-content">历史报警信息查询</div></el-col>
            <el-col :span="12"><div class="grid-content">历史监测信息查询</div></el-col>
            <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>
@@ -58,7 +76,11 @@
<script>
import LineChart from './components/LineChart'
import '@/styles/roleuser.scss'
import { urlParse, parseTime, turnTime } from '@/utils'
import { getUserAllResource, getDangerList, getTimingMonitor, getServerInfo, getDeviceInfo } from '@/api/bridgeInfo'
import lineChart2 from '../lineChart/LineChart2'
import BInfoDialog01 from './components/BInfoDialog01'
import BInfoDialog02 from './components/BInfoDialog02'
import BInfoDialog03 from './components/BInfoDialog03'
@@ -67,29 +89,10 @@ import BInfoDialog04 from './components/BInfoDialog04'
import updatePersonInfo from './components/updatePersonInfo'
import updateLoginPwd from './components/updateLoginPwd'
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  name: 'dashboard-other',
  components: {
    LineChart,
    lineChart2,
    BInfoDialog01,
    BInfoDialog02,
    BInfoDialog03,
@@ -99,10 +102,169 @@ export default {
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
      bridgeId: '',
      bridgeName: '',
      dangerList: '',
      bridgeList: [],
      serverList: [],
      serverSeqArr: [],
      deviceList: [],
      transducerList: [],
      monitorList: [],
      currentNo: 1,
      currentSize: 4,
      currentTime: turnTime(new Date()),
      dateArr: [],
      intervalTime: 60 * 1000
    }
  },
  computed: {
    monitorShowList() {
      return this.monitorList.slice((this.currentNo - 1) * this.currentSize, this.currentNo * this.currentSize)
    }
  },
  created() {
    this.bridgeId = urlParse('id')
    this.bridgeName = urlParse('name')
    this.getUserAllResource()
    this.getDangerList()
    // setInterval(() => {
    //   this.addData(true)
    //   this.getTimingMonitor()
    // }, 500)
  },
  methods: {
    getDangerList() {
      const param = {
        pageSize: 5,
        pageNo: 1
      }
      getDangerList(param).then(res => {
        if (res.success && res.data.data) {
          const dataS = res.data.data
          for (let i = 0; i < dataS.length; i++) {
            if (dataS[i].alarmTime) {
              dataS[i].alarmTime = parseTime(dataS[i].alarmTime, true)
            }
            dataS[i].device = `${this.bridgeName}大桥${dataS[i].device}采集盒检测到异常情况`
          }
          this.dangerList = dataS
        }
      })
    },
    getUserAllResource() {
      var _this = this
      const param = {
        active: 1
      }
      getUserAllResource(param).then(res => {
        if (res.success) {
          res.data.bridge.map((value, index, array) => {
            if (value.id === _this.bridgeId) {
              _this.bridgeName = value.shortName
            }
          })
          res.data.server.map((value, index, array) => {
            if (value.bridgeId === _this.bridgeId) {
              _this.serverList.push(value)
              _this.serverSeqArr.push(value.seq)
              _this.$forceUpdate()
              res.data.device.map((value2, index2, array2) => {
                if (value2.serverId === value.id) {
                  getServerInfo({ id: value2.serverId }).then(res => {
                    if (res.success && res.data) {
                      value2.serverCode = res.data.code
                      _this.$forceUpdate()
                    }
                  })
                  _this.deviceList.push(value2)
                  res.data.transducer.map((value3, index3, array3) => {
                    if (value3.serverId === value.id) {
                      getDeviceInfo({ id: value3.deviceId }).then(res => {
                        if (res.success && res.data) {
                          value3.deviceCode = res.data.code
                          _this.$forceUpdate()
                        }
                      })
                      _this.transducerList.push(value3)
                    }
                  })
                }
              })
            }
          })
          _this.getTimingMonitor()
        }
      })
    },
    getTimingMonitor() {
      var that = this
      const arr = this.serverSeqArr
      if (arr) {
        const param = {
          seq: arr
        }
        getTimingMonitor(param).then(res => {
          if (res.success && res.data) {
            var monitorList = []
            for (let i = 0; i < res.data.length; i++) {
              var str = res.data[i].cid
              var monitorData = null
              for (let j = 0; j < monitorList.length; ++j) {
                if (str === monitorList[j].tit) {
                  monitorData = monitorList[j]
                  break
                }
              }
              if (!monitorData) {
                monitorData = {
                  xData: [],
                  seData: {
                    max: [],
                    min: []
                  }
                }
                monitorList.push(monitorData)
                monitorData.tit = str
                that.addData()
              }
              monitorData.xData.push(that.dateArr)
              monitorData.seData.max.push(res.data[i].hvalue)
              monitorData.seData.min.push(res.data[i].lvalue)
            }
            that.monitorList = monitorList
          }
        })
      }
    },
    addData(shift) {
      this.dateArr.push(this.currentTime)
      if (shift) {
        this.dateArr.shift()
      }
      this.currentTime = turnTime(new Date(+new Date(this.currentTime) + this.intervalTime))
    },
    handleCurrentChange(val) {
      this.currentNo = val
    },
    alarmShow(id, msg) {
      this.$router.push({
        name: 'dangerDetail',
        query: { aid: id, msg: msg }
      })
    },
    queryDangerInfo() {
      this.$router.push({
        name: 'dangerList',
        query: { name: this.bridgeName }
      })
    },
    queryMonitorInfo() {
      this.$router.push({
        name: 'bridgeMonitor',
        query: { arr: this.serverSeqArr }
      })
    },
    queryBirdgeInfo() {
      this.$refs.BInfoDialog01.dialogTableVisible = true
    },
@@ -117,6 +279,7 @@ export default {
    },
    updatePersonInfo() {
      this.$refs.updatePersonInfo.dialogTableVisible = true
      this.$refs.updatePersonInfo.getUserSelf()
    },
    updateLoginPwd() {
      this.$refs.updateLoginPwd.dialogTableVisible = true
@@ -124,46 +287,3 @@ export default {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .block-group{
    background: #fff;
    margin-bottom: 20px;
    .block-title{
      display: flex;
      justify-content: space-between;
      .el-button{
        padding: 3px 0;
      }
    }
    .item-ul{
      margin: 0;
      padding: 0 10px;
      li{
        padding: 8px 0;
        margin: 0;
        list-style: none;
      }
    }
    .grid-content{
      height: 100px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      background-color: #f8f8f8;
      margin-bottom: 8px;
      padding:20px;
      cursor: pointer;
      &:hover {
        transition: all 0.2s ease-out;
        color: #fff;
        background: #36a3f7;
      }
    }
  }
}
</style>

src/views/bridgesConsole/bridgeMonitor/index.vue

@@ -0,0 +1,125 @@
<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card block-group">
      <div slot="header" class="block-title">
          <el-date-picker
            v-model="valueDate"
            type="date"
            value-format="yyyyMMdd"
            @change="changeDate">
          </el-date-picker>
          <el-button type="primary" @click="getMonitorByDay">查询</el-button>
      </div>
      <el-row class="line-chart-box">
        <el-col :xs="24" :sm="24" :lg="24" v-for="item in alarmShowList" :key="item.index">
          <lineChart2 :chartData="item"></lineChart2>
        </el-col>
      </el-row>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="alarmList.length">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import '@/styles/roleuser.scss'
import { urlParse, parseTime } from '@/utils'
import { Message } from 'element-ui'
import { getMonitorByDay } from '@/api/bridgeInfo'
import lineChart2 from '../lineChart/LineChart2'
export default {
  data() {
    return {
      valueDate: new Date().toISOString().substring(0, 10).replace(/-/g, ''),
      serverSeqArr: [],
      alarmList: [],
      pageSize: 2,
      pageNo: 1
    }
  },
  components: {
    lineChart2
  },
  computed: {
    alarmShowList() {
      return this.alarmList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  created() {
    this.serverSeqArr = urlParse('arr')
    this.getMonitorByDay()
  },
  methods: {
    getMonitorByDay() {
      var that = this
      const arr = this.serverSeqArr
      if (arr) {
        var date = that.valueDate
        var param = {
          seq: arr,
          day: date
        }
        getMonitorByDay(param).then(res => {
          if (res.success && res.data) {
            var monitorList = []
            for (let i = 0; i < res.data.length; i++) {
              var str = res.data[i].cid
              var monitorData = null
              for (let j = 0; j < monitorList.length; ++j) {
                if (str === monitorList[j].tit) {
                  monitorData = monitorList[j]
                  break
                }
              }
              if (!monitorData) {
                monitorData = {
                  xData: [],
                  seData: {
                    max: [],
                    min: []
                  }
                }
                monitorList.push(monitorData)
                monitorData.tit = str
              }
              monitorData.xData.push(parseTime(res.data[i].ctime, true, true))
              monitorData.seData.max.push(res.data[i].hvalue)
              monitorData.seData.min.push(res.data[i].lvalue)
            }
            that.alarmList = monitorList
          }
        })
      } else {
        Message.error('当前没有任何采集服务器，请检查')
      }
    },
    changeDate(val) {
      this.valueDate = val
      this.getMonitorByDay()
    },
    handleCurrentChange(val) {
      this.pageNo = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container .block-group .block-title{
  justify-content: flex-start;
  .el-button{
    padding: 12px 20px;
    margin-left: 15px;
  }
}
</style>

src/views/dashboard/admin/components/LineChart.vue

@@ -4,11 +4,16 @@
<script>
import echarts from 'echarts'
import { parseTime, turnTime } from '@/utils'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
export default {
  props: {
    lineColor: {
      type: Number,
      default: 0
    },
    className: {
      type: String,
      default: 'chart'
@@ -19,18 +24,30 @@ export default {
    },
    height: {
      type: String,
      default: '350px'
      default: '260px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
      type: Array
    },
    legendName: {
      type: String
    },
    startTime: {
      type: String
    },
    intervalTime: {
      type: Number
    }
  },
  data() {
    return {
      lineColorNow: this.lineColor % 2 === 0 ? '#FF005A' : '#3888fa',
      Ydate: [],
      nowTime: parseTime(this.startTime, true, true),
      chart: null
    }
  },
@@ -46,8 +63,8 @@ export default {
    }
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
    // const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    // sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
@@ -57,8 +74,8 @@ export default {
      window.removeEventListener('resize', this.__resizeHanlder)
    }
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
    // const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    // sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
@@ -72,10 +89,14 @@ export default {
    }
  },
  methods: {
    setOptions({ expectedData, actualData } = {}) {
    addData() {
      this.Ydate.push(this.nowTime)
      this.nowTime = turnTime(new Date(+new Date(this.nowTime) + this.intervalTime), 'time', true)
    },
    setOptions(datastr) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: this.Ydate,
          boundaryGap: false,
          axisTick: {
            show: false
@@ -96,52 +117,36 @@ export default {
          padding: [5, 10]
        },
        yAxis: {
          // name: '豪伏(-8192-8192)',
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
          data: [this.legendName]
        },
        series: [{
          name: 'expected', itemStyle: {
          name: this.legendName, itemStyle: {
            normal: {
              color: '#FF005A',
              color: this.lineColorNow,
              lineStyle: {
                color: '#FF005A',
                color: this.lineColorNow,
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          data: datastr,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: 'actual',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    },
    initChart() {
      for (var i = 1; i < this.chartData.length; i++) {
        this.addData()
      }
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    }

src/views/bridgesConsole/bridgeDetail/components/LineChart.vue

@@ -44,10 +44,6 @@ export default {
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    }
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
@@ -57,9 +53,6 @@ export default {
      window.removeEventListener('resize', this.__resizeHanlder)
    }
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
@@ -72,14 +65,15 @@ export default {
    }
  },
  methods: {
    setOptions({ expectedData, actualData } = {}) {
    setOptions(datastr) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        title: {
          text: '传感器' + datastr.tit,
          textStyle: {
            color: '#333',
            fontSize: 14
          },
          left: 16
        },
        grid: {
          left: 10,
@@ -95,16 +89,27 @@ export default {
          },
          padding: [5, 10]
        },
        xAxis: {
          data: datastr.xData,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} mv'
          },
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
          data: ['最大值', '最小值']
        },
        series: [{
          name: 'expected', itemStyle: {
          name: '最大值', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
@@ -115,29 +120,24 @@ export default {
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          data: datastr.seData.max,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: 'actual',
          smooth: true,
          type: 'line',
          itemStyle: {
        }, {
          name: '最小值', itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          smooth: true,
          type: 'line',
          data: datastr.seData.min,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
          animationEasing: 'cubicInOut'
        }]
      })
    },

src/views/dashboard/other/index.vue

@@ -1,14 +1,14 @@
<template>
  <div class="dashboard-editor-container">
    <el-row class="panel-group" :gutter="40">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col" v-for="item in dataList" :key="item.index" @click.native="goToDashboardC(item.id)">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col" v-for="item in dataList" :key="item.index" @click.native="goToDashboardC(item.id, item.shortName)">
        <div class='card-panel'>
          <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-text">桥梁名称 <span>{{item.shortName}}</span></div>
            <div class="card-panel-text">未读报警 10条</div>
            <div class="card-panel-text" :class="item.alarmNum>0?'card-panel-text-red':''">未读报警 {{item.alarmNum ? item.alarmNum : alarmNum}}条</div>
          </div>
        </div>
      </el-col>
@@ -26,110 +26,102 @@
</template>
<script>
import { getBridgeList } from '@/api/table'
import {
  getBridgeServers,
  getBridgeList,
  getBridgeUnread
} from '@/api/bridgeInfo'
import '@/styles/roleuser.scss'
export default {
  data() {
    return {
      listParameters: {},
      alarmNum: 0,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      dataList: [],
      ifDefault: false
      bridgeList: [],
      serverList: [],
      serverSeqArr: [],
      deviceList: [],
      transducerList: []
    }
  },
  created() {
    this.listParameters = {
      active: 1,
      pageSize: 10,
      pageNo: 1
    }
    this.getBridgeLists()
  },
  components: {
  },
  methods: {
    getBridgeLists() {
      const param = this.listParameters
      const param = {
        active: 1,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }
      getBridgeList(param).then(res => {
        if (res.success) {
          if (res.data.data.length === 0) {
            this.ifDefault = true
          } else {
            this.ifDefault = false
          if (res.data.data.length > 0) {
            this.total = res.data.total
            this.getBridgeServers(res.data.data)
          }
        }
      })
    },
    getBridgeServers($data) {
      var that = this
      for (let i = 0; i < $data.length; i++) {
        (function(i) {
          const param = {
            active: 1,
            id: $data[i].id
          }
          getBridgeServers(param).then(res => {
            if (res.success) {
              console.log(res)
              var serverSeqArr = []
              if (res.data.length > 0) {
                for (let j = 0; j < res.data.length; j++) {
                  serverSeqArr.push(res.data[j].seq)
                }
                that.getBridgeUnread($data[i], serverSeqArr)
              }
            }
          })
        })(i)
      }
      this.dataList = $data
      console.log(this.dataList)
    },
    getBridgeUnread($data, $arr) {
      var that = this
      const param = {
        server: $arr
      }
      var alarmNum = 0
      getBridgeUnread(param).then(res => {
        if (res.success) {
          if (res.data.length > 0) {
            for (let j = 0; j < res.data.length; j++) {
              alarmNum += res.data[j].num
            }
            $data.alarmNum = alarmNum
            that.$forceUpdate()
          }
          this.dataList = res.data.data
          // this.disposeData(res.data.data);
          this.total = res.data.total
        }
      })
    },
    goToDashboardC(id) {
    goToDashboardC(id, name) {
      this.$router.push({
        path: '/bridgesConsole',
        query: { bridgeId: id }
        path: '/bridgeDetail',
        query: { id: id, name: name }
      })
    },
    handleCurrentChange(val) {
      this.expertParameters.pageNo = val
      this.pageNo = val
      this.getBridgeLists()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container{
  padding: 32px;
  .panel-group {
    margin-top: 18px;
    .card-panel-col{
      margin-bottom: 32px;
    }
    .card-panel {
      cursor: pointer;
      padding: 15px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
      }
      .card-panel-icon-wrapper {
        margin: 10px 0;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-image{
        width: 100%;
        max-width: 280px;
        margin: auto;
        height: 160px;
        border: 1px solid #d0d0d0;
        background-position: center;
        background-size: cover;
      }
      .card-panel-icon {
        font-size: 48px;
      }
      .card-panel-description {
        font-weight: bold;
        margin-top:12px;
        .card-panel-text {
          line-height: 24px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
}
</style>

src/views/layout/Layout.vue

@@ -2,8 +2,8 @@
  <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">
    <sidebar class="sidebar-container" v-if="roles.indexOf('1')>=0"></sidebar>
    <div class="main-container" :style="(roles.indexOf('1')>=0) ? '' : 'marginLeft:0'">
      <navbar></navbar>
      <app-main></app-main>
    </div>
@@ -11,6 +11,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { TopNavbar, Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
@@ -24,6 +25,9 @@ export default {
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapGetters([
      'roles'
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },

src/views/layout/LayoutC.vue

@@ -1,66 +0,0 @@
<template>
  <div class="app-wrapper" :class="classObj">
    <TopNavbar></TopNavbar>
    <div class="main-container">
      <navbar></navbar>
      <app-main></app-main>
    </div>
  </div>
</template>
<script>
import { TopNavbar, Navbar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
  name: 'layout',
  components: {
    TopNavbar,
    Navbar,
    AppMain
  },
  mixins: [ResizeMixin],
  computed: {
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  #app .main-container {
    margin-left: 0;
  }
  #app .navbar .hamburger-container {
    display:none;
  }
  .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;
  }
</style>

src/views/layout/components/Navbar.vue

@@ -1,23 +1,29 @@
<template>
  <el-menu class="navbar" mode="horizontal">
    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
    <breadcrumb></breadcrumb>
  </el-menu>
  <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>
    </el-menu>
  </div>
</template>
<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
    Hamburger,
    Marqueebox
  },
  computed: {
    ...mapGetters([
      'sidebar'
      'sidebar',
      'roles'
    ])
  },
  methods: {
@@ -37,6 +43,7 @@ export default {
.navbar {
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border-radius: 0px !important;
  .hamburger-container {
    line-height: 58px;
@@ -51,5 +58,11 @@ export default {
    color: red;
  }
}
.message-box{
  color: #303133;
  background: #c7e3ff;
  padding: 0 20px;
  font-size: 14px;
}
</style>

src/views/layout/components/TopNavbar.vue

@@ -2,6 +2,14 @@
  <el-menu class="topnavbar" mode="horizontal">
    <div class="logo-container">
      <img class="logo-wrapper" src="/static/touchwave.png" alt="">
      <el-dropdown v-if="roles.indexOf('1')<0" trigger="click" style="cursor: pointer;margin-left:20px">
        <span class="el-dropdown-link">
          {{showName}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu style="min-width:120px;" slot="dropdown">
          <el-dropdown-item v-for="item in dataList" :key="item.index"@click.native="goToDashboardC(item.id, item.shortName)">{{item.shortName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper">
@@ -22,13 +30,27 @@
<script>
import { mapGetters } from 'vuex'
import { getBridgeList } from '@/api/bridgeInfo'
import { urlParse } from '@/utils'
export default {
  data() {
    return {
      bridgeId: '',
      showName: '选择大桥',
      dataList: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
      'name',
      'roles'
    ])
  },
  created() {
    this.bridgeId = urlParse('id')
    this.getBridgeLists()
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
@@ -37,6 +59,25 @@ export default {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    getBridgeLists() {
      const param = {
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
      getBridgeList(param).then(res => {
        if (res.success) {
          this.dataList = res.data.data
        }
      })
    },
    goToDashboardC(id, name) {
      this.$router.push({
        path: '/bridgeDetail',
        query: { id: id, name: name }
      })
      this.showName = name
    }
  }
}

src/views/login/index.vue

@@ -19,13 +19,13 @@
      </el-form-item>
      <el-form-item prop="imgVerifyCode">
        <span class="svg-container">
          <svg-icon icon-class="password"></svg-icon>
          <svg-icon icon-class="msgvc"></svg-icon>
        </span>
        <el-input v-model="loginForm.imgVerifyCode" placeholder="请输入图形验证码" class="code-btn">
        <el-input v-model="loginForm.imgVerifyCode" placeholder="请输入图形验证码" @keyup.enter.native="handleLogin" class="code-btn">
        <img slot="append" :src="imgVcUrl" @click="changeImgVc" /></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="log-btn" type="primary" :loading="loading" @click.native.prevent="handleLogin" @keyup.enter.native="handleLogin">登录</el-button>
        <el-button class="log-btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
      </el-form-item>
      <el-form-item class="el-form-find">
        <el-button type="text" @click.native.prevent="goBackPwd">忘记密码？</el-button>
@@ -90,17 +90,11 @@ export default {
            this.loading = false
            if (response.success) {
              if (response.data) {
                const dataS = response.data
                if (dataS.active) {
                  this.$store.dispatch('GetUserInfo').then(res => {
                  })
                  this.$router.push({ path: '/' })
                } else {
                  Message.error('您的账号已经被禁用')
                  return
                }
                this.$store.dispatch('GetUserInfo').then(res => {
                })
                this.$router.push({ path: '/' })
              } else {
                Message.error('登录账号与密码不匹配')
                Message.error('登录账号与密码不匹配，请检查后重试')
                return
              }
            } else {
@@ -113,6 +107,9 @@ export default {
              }, {
                code: -60003,
                msg: '图形验证码不正确'
              }, {
                code: -60005,
                msg: '该账号已停用，请联系管理员'
              }]
              for (let i = 0; i < errorCode.length; i++) {
                if (response.code === errorCode[i].code) {