添加桥梁信息主页

package.json

@@ -14,6 +14,7 @@
  },
  "dependencies": {
    "axios": "0.17.1",
    "echarts": "3.8.5",
    "element-ui": "2.3.4",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",

src/router/index.js

@@ -8,6 +8,7 @@ Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
import LayoutC from '../views/layout/LayoutC'
/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -26,6 +27,25 @@ export const constantRouterMap = [
  { path: '/findPwd', component: () => import('@/views/findPwd/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  {
    path: '/bridgesConsole',
    component: LayoutC,
    redirect: '/bridgesConsole/birdgeLists',
    hidden: true,
    children: [
      {
        path: 'birdgeLists',
        name: 'bridgeLists',
        component: () => import('@/views/bridgesConsole/birdgeLists/index')
      },
      {
        path: 'dashboardC',
        name: 'dashboardC',
        component: () => import('@/views/bridgesConsole/dashboardC/index')
      }
    ]
  },
  {
    path: '/',
    component: Layout,
@@ -37,19 +57,19 @@ export const constantRouterMap = [
      component: () => import('@/views/dashboard/index')
    }]
  },
  {
    path: '/peoplesManage',
    component: Layout,
    redirect: '/peoplesManage/infoManage',
    name: 'peoplesManage',
    meta: { title: '用户系统管理', icon: 'peoples' },
    alwaysShow: true,
    children: [
      {
        path: 'infoManage',
        name: 'infoManage',
        component: () => import('@/views/peoplesManage/infoManage/index'),
        meta: { title: '用户信息管理', icon: 'peoples' }
        meta: { title: '用户信息管理' }
      }
    ]
  },

src/styles/element-ui.scss

@@ -27,3 +27,27 @@
    }
  }
}
.el-dialog{
  margin: 0 auto 50px;
}
.el-dialog__header{
  border-bottom: 1px solid #ebeef5;
}
.el-dialog__body{
  padding:20px 
}
.pagination-container{
  margin:20px;
  text-align:center;
}
.el-btn-col{
  margin: 20px 0;
  .el-btn-col-box{
    text-align:center;
    .el-button{
      padding: 12px 50px;
    }
  }
}

src/styles/sidebar.scss

@@ -6,6 +6,7 @@
    transition: margin-left .28s;
    margin-left: 240px;
    position: relative;
    background-color: rgb(240, 242, 245);
  }
  // 侧边栏
  .sidebar-container {

src/utils/index.js

@@ -56,3 +56,38 @@ export function formatTime(time, option) {
    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
  }
}
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result
  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp
    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }
    return result
  }
}

src/views/bridgesConsole/birdgeLists/index.vue

@@ -0,0 +1,101 @@
<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 [0,1,2,3,4]" :key="item.id" @click.native="goToDashboardC">
        <div class='card-panel'>
          <div class="card-panel-icon-wrapper">
            <div class="card-image" style="background-image: url(/static/touchwave.png);"></div>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">桥梁名称 <span>山东青岛跨海大桥A段</span></div>
            <div class="card-panel-text">未读报警 10条</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="pagination-container">
      <el-pagination background current-page="1" :page-sizes="[10,20,30, 50]" page-size="20" layout="total, sizes, prev, pager, next, jumper" total="60">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  methods: {
    goToDashboardC() {
      this.$router.push({ path: 'dashboardC' })
    }
    // @size-change="handleSizeChange" @current-change="handleCurrentChange"
    // handleSizeChange(val) {
    //   this.listQuery.limit = val
    //   this.getList()
    // },
    // handleCurrentChange(val) {
    //   this.listQuery.page = val
    //   this.getList()
    // }
  }
}
</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/bridgesConsole/dashboardC/components/BInfoDialog01.vue

@@ -0,0 +1,130 @@
<template>
  <el-dialog title="桥梁信息" :visible.sync="dialogTableVisible" width="80%">
    <el-form class="form-main">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="18" :lg="16">
          <el-row>
            <el-col :span="12">
              <el-form-item label="桥梁编号">000000001</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="桥梁简称">青岛跨海大桥A段</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="桥梁全称">山东省青岛市胶州跨海大桥A段</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="桥梁位置信息">山东省青岛市胶州</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地理位置信息">青岛跨海大桥南侧</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="桥梁开通日期">2018/07/21</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="维护单位">青岛拉升阶段拉升阶段是觉得了科技有限公司</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维护单位电话">40988923-328</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维护单位电邮">23142121@163.com</el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xs="24" :sm="6" :lg="8">
          <div style="width:100%">
            <img src="/static/touchwave.png" alt="桥梁图片" width="90%">
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" border style="width: 100%;margin:15px 0">
        <el-table-column v-for="item in tableRow" :key="item.id"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
      </el-table>
      <el-row>
        <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>
          </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>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      tableRow: [{
        prop: 'date',
        label: '维护负责人'
      }, {
        prop: 'name',
        label: '职位'
      }, {
        prop: 'address',
        label: '所在机构'
      }, {
        prop: 'address2',
        label: '联系电话'
      }, {
        prop: 'address3',
        label: '联系邮箱'
      }],
      tableData: [{
        date: '王明',
        name: '工程师',
        address: '上海市普陀区金沙江路 1518 弄',
        address2: '15795223636',
        address3: '26586466@qq.com'
      }, {
        date: '王明',
        name: '工程师',
        address: '上海市普陀区金沙江路 1518 弄',
        address2: '15795223636',
        address3: '26586466@qq.com'
      }, {
        date: '王明',
        name: '工程师',
        address: '上海市普陀区金沙江路 1518 弄',
        address2: '15795223636',
        address3: '26586466@qq.com'
      }]
    }
  },
  methods: {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin: 0;
  }
  .textarea-div{
    line-height: 26px;
    margin-bottom: 10px;
  }
</style>

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

@@ -0,0 +1,83 @@
<template>
  <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">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
                <el-form-item label="服务器编号">000000001</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集器数量">2</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属桥梁">青岛跨海大桥</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>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="10">
        </el-pagination>
      </div>
      <el-row>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${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/dashboardC/components/BInfoDialog03.vue

@@ -0,0 +1,83 @@
<template>
  <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">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
                <el-form-item label="采集盒编号">000000001</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集盒信道数量">2</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="采集盒所属服务器编号">1926831</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>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="10">
        </el-pagination>
      </div>
      <el-row>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${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/dashboardC/components/BInfoDialog04.vue

@@ -0,0 +1,86 @@
<template>
  <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">
          <div class="list-item">
            <el-row>
              <el-col :span="12">
                <el-form-item label="采集盒编号">000000001</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器编号">8903420394</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属主缆">上游主缆</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器位置">东段</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>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="10">
        </el-pagination>
      </div>
      <el-row>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${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/dashboardC/components/LineChart.vue

@@ -0,0 +1,150 @@
<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: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    }
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHanlder)
    }
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  methods: {
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
        },
        series: [{
          name: 'expected', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          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() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    }
  }
}
</script>

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

@@ -0,0 +1,107 @@
<template>
  <el-dialog title="修改登录密码" ref="ruleForm" :visible.sync="dialogTableVisible" width="460px">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
      <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>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
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 {
      dialogTableVisible: false,
      ruleForm2: {
        pass: '',
        checkPass: ''
      },
      rules2: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetPwd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$axios.post(httpUrl.hQuery.sign.resetpw, {
          //   code: this.resetCode,
          //   pw: this.ruleForm2.pass
          // }).then(res => {
          //   console.log(res);
          //   if (res.success) {
          //     this.$alert('您可以使用新密码登录您的账户了', '恭喜您，您的密码重置成功！', {
          //       confirmButtonText: '重新登录',
          //       type: 'success',
          //       center: true,
          //       callback: action => {
          //         if (action === 'confirm') {
          //           this.$router.push({path: '/loginPlat'});
          //         };
          //       }
          //     });
          //   } else {
          //     if (res.code === -600001) {
          //       this.$alert('小提示：邮件内的链接有效时长为10分钟', '很抱歉，当前的链接已失效。', {
          //         confirmButtonText: '重新找回密码',
          //         type: 'warning',
          //         center: true,
          //         callback: action => {
          //           if (action === 'confirm') {
          //             this.stepFisrt = true;
          //             this.stepSecond = false;
          //             this.stepThird = false;
          //             this.stepVal = 0;
          //           };
          //         }
          //       });
          //       return;
          //     };
          //   };
          // });
        } else {
          return false
        }
      })
    }
  }
}
</script>

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

@@ -0,0 +1,97 @@
<template>
  <el-dialog title="修改个人信息" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
    <el-form class="form-main" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="账 号">13679879708</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户姓名">李二蛋</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职 位">
            <el-input placeholder="请填写职位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在机构">
            <el-input placeholder="请填写所在机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input placeholder="请填写联系电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱">
            <el-input 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>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false
    }
  },
  methods: {
    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
        }
      })
    }
  }
}
</script>

src/views/bridgesConsole/dashboardC/index.vue

@@ -0,0 +1,169 @@
<template>
  <div class="dashboard-editor-container">
    <BInfoDialog01 ref="BInfoDialog01"></BInfoDialog01>
    <BInfoDialog02 ref="BInfoDialog02"></BInfoDialog02>
    <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">
        <el-card class="box-card block-group">
          <div slot="header" class="block-title">
            <span>报警信息</span>
            <el-button type="text">查看全部</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>
          </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>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="9" :lg="6">
        <el-card class="box-card block-group">
          <div slot="header" class="block-title">
            <span>基础信息查看</span>
          </div>
          <el-row :gutter="10" class="item-row">
            <el-col :span="12"><div class="grid-content" @click="queryBirdgeInfo">桥梁信息</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="queryServerInfo">采集服务器信息</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="queryBoxInfo">采集盒信息</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="querySensorInfo">传感器信息</div></el-col>
          </el-row>
        </el-card>
        <el-card class="box-card block-group">
          <div slot="header" class="block-title">
            <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="updatePersonInfo">修改个人信息</div></el-col>
            <el-col :span="12"><div class="grid-content" @click="updateLoginPwd">修改登录密码</div></el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import LineChart from './components/LineChart'
import BInfoDialog01 from './components/BInfoDialog01'
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'
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,
    BInfoDialog01,
    BInfoDialog02,
    BInfoDialog03,
    BInfoDialog04,
    updatePersonInfo,
    updateLoginPwd
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    queryBirdgeInfo() {
      this.$refs.BInfoDialog01.dialogTableVisible = true
    },
    queryServerInfo() {
      this.$refs.BInfoDialog02.dialogTableVisible = true
    },
    queryBoxInfo() {
      this.$refs.BInfoDialog03.dialogTableVisible = true
    },
    querySensorInfo() {
      this.$refs.BInfoDialog04.dialogTableVisible = true
    },
    updatePersonInfo() {
      this.$refs.updatePersonInfo.dialogTableVisible = true
    },
    updateLoginPwd() {
      this.$refs.updateLoginPwd.dialogTableVisible = true
    }
  }
}
</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/dashboard/index.vue

@@ -1,32 +1,31 @@
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
    <component :is="currentRole"></component>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import otherDashboard from './other'
export default {
  name: 'dashboard',
  components: { adminDashboard, otherDashboard },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'otherDashboard'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

src/views/layout/LayoutC.vue

@@ -0,0 +1,66 @@
<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

@@ -2,22 +2,6 @@
  <el-menu class="navbar" mode="horizontal">
    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
    <breadcrumb></breadcrumb>
    <!-- <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper">
        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
        <i class="el-icon-caret-bottom"></i>
      </div>
      <el-dropdown-menu class="user-dropdown" slot="dropdown">
        <router-link class="inlineBlock" to="/">
          <el-dropdown-item>
            Home
          </el-dropdown-item>
        </router-link>
        <el-dropdown-item divided>
          <span @click="logout" style="display:block;">LogOut</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown> -->
  </el-menu>
</template>
@@ -67,28 +51,6 @@ export default {
    top: 16px;
    color: red;
  }
  .avatar-container {
    height: 50px;
    display: inline-block;
    position: absolute;
    right: 35px;
    .avatar-wrapper {
      cursor: pointer;
      margin-top: 5px;
      position: relative;
      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
      .el-icon-caret-bottom {
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}
</style>