Browse Source

添加桥梁信息主页

luyanan 6 years ago
parent
commit
8800422304

+ 1 - 0
package.json

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

+ 22 - 2
src/router/index.js

@ -8,6 +8,7 @@ Vue.use(Router)
8 8
9 9
/* Layout */
10 10
import Layout from '../views/layout/Layout'
11
import LayoutC from '../views/layout/LayoutC'
11 12
12 13
/**
13 14
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@ -26,6 +27,25 @@ export const constantRouterMap = [
26 27
  { path: '/findPwd', component: () => import('@/views/findPwd/index'), hidden: true },
27 28
  { path: '/404', component: () => import('@/views/404'), hidden: true },
28 29
30
  {
31
    path: '/bridgesConsole',
32
    component: LayoutC,
33
    redirect: '/bridgesConsole/birdgeLists',
34
    hidden: true,
35
    children: [
36
      {
37
        path: 'birdgeLists',
38
        name: 'bridgeLists',
39
        component: () => import('@/views/bridgesConsole/birdgeLists/index')
40
      },
41
      {
42
        path: 'dashboardC',
43
        name: 'dashboardC',
44
        component: () => import('@/views/bridgesConsole/dashboardC/index')
45
      }
46
    ]
47
  },
48
29 49
  {
30 50
    path: '/',
31 51
    component: Layout,
@ -37,19 +57,19 @@ export const constantRouterMap = [
37 57
      component: () => import('@/views/dashboard/index')
38 58
    }]
39 59
  },
40
41 60
  {
42 61
    path: '/peoplesManage',
43 62
    component: Layout,
44 63
    redirect: '/peoplesManage/infoManage',
45 64
    name: 'peoplesManage',
46 65
    meta: { title: '用户系统管理', icon: 'peoples' },
66
    alwaysShow: true,
47 67
    children: [
48 68
      {
49 69
        path: 'infoManage',
50 70
        name: 'infoManage',
51 71
        component: () => import('@/views/peoplesManage/infoManage/index'),
52
        meta: { title: '用户信息管理', icon: 'peoples' }
72
        meta: { title: '用户信息管理' }
53 73
      }
54 74
    ]
55 75
  },

+ 24 - 0
src/styles/element-ui.scss

@ -27,3 +27,27 @@
27 27
    }
28 28
  }
29 29
}
30
.el-dialog{
31
  margin: 0 auto 50px;
32
}
33
.el-dialog__header{
34
  border-bottom: 1px solid #ebeef5;
35
}
36
.el-dialog__body{
37
  padding:20px 
38
}
39
40
.pagination-container{
41
  margin:20px;
42
  text-align:center;
43
}
44
45
.el-btn-col{
46
  margin: 20px 0;
47
  .el-btn-col-box{
48
    text-align:center;
49
    .el-button{
50
      padding: 12px 50px;
51
    }
52
  }
53
}

+ 1 - 0
src/styles/sidebar.scss

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

+ 35 - 0
src/utils/index.js

@ -56,3 +56,38 @@ export function formatTime(time, option) {
56 56
    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
57 57
  }
58 58
}
59
60
export function debounce(func, wait, immediate) {
61
  let timeout, args, context, timestamp, result
62
63
  const later = function() {
64
    // 据上一次触发时间间隔
65
    const last = +new Date() - timestamp
66
67
    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
68
    if (last < wait && last > 0) {
69
      timeout = setTimeout(later, wait - last)
70
    } else {
71
      timeout = null
72
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
73
      if (!immediate) {
74
        result = func.apply(context, args)
75
        if (!timeout) context = args = null
76
      }
77
    }
78
  }
79
80
  return function(...args) {
81
    context = this
82
    timestamp = +new Date()
83
    const callNow = immediate && !timeout
84
    // 如果延时不存在,重新设定延时
85
    if (!timeout) timeout = setTimeout(later, wait)
86
    if (callNow) {
87
      result = func.apply(context, args)
88
      context = args = null
89
    }
90
91
    return result
92
  }
93
}

+ 101 - 0
src/views/bridgesConsole/birdgeLists/index.vue

@ -0,0 +1,101 @@
1
<template>
2
  <div class="dashboard-editor-container">
3
    <el-row class="panel-group" :gutter="40">
4
      <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">
5
        <div class='card-panel'>
6
          <div class="card-panel-icon-wrapper">
7
            <div class="card-image" style="background-image: url(/static/touchwave.png);"></div>
8
          </div>
9
          <div class="card-panel-description">
10
            <div class="card-panel-text">桥梁名称 <span>山东青岛跨海大桥A段</span></div>
11
            <div class="card-panel-text">未读报警 10条</div>
12
          </div>
13
        </div>
14
      </el-col>
15
    </el-row>
16
    <div class="pagination-container">
17
      <el-pagination background current-page="1" :page-sizes="[10,20,30, 50]" page-size="20" layout="total, sizes, prev, pager, next, jumper" total="60">
18
      </el-pagination>
19
    </div>
20
  </div>
21
</template>
22
23
<script>
24
25
export default {
26
  components: {
27
28
  },
29
  methods: {
30
    goToDashboardC() {
31
      this.$router.push({ path: 'dashboardC' })
32
    }
33
    // @size-change="handleSizeChange" @current-change="handleCurrentChange"
34
    // handleSizeChange(val) {
35
    //   this.listQuery.limit = val
36
    //   this.getList()
37
    // },
38
    // handleCurrentChange(val) {
39
    //   this.listQuery.page = val
40
    //   this.getList()
41
    // }
42
  }
43
}
44
</script>
45
46
<style rel="stylesheet/scss" lang="scss" scoped>
47
.dashboard-editor-container{
48
  padding: 32px;
49
  .panel-group {
50
    margin-top: 18px;
51
    .card-panel-col{
52
      margin-bottom: 32px;
53
    }
54
    .card-panel {
55
      cursor: pointer;
56
      padding: 15px;
57
      font-size: 12px;
58
      position: relative;
59
      overflow: hidden;
60
      color: #666;
61
      background: #fff;
62
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
63
      border-color: rgba(0, 0, 0, .05);
64
      &:hover {
65
        .card-panel-icon-wrapper {
66
          color: #fff;
67
        }
68
      }
69
      .card-panel-icon-wrapper {
70
        margin: 10px 0;
71
        transition: all 0.38s ease-out;
72
        border-radius: 6px;
73
      }
74
      .card-image{
75
        width: 100%;
76
        max-width: 280px;
77
        margin: auto;
78
        height: 160px;
79
        border: 1px solid #d0d0d0;
80
        background-position: center;
81
        background-size: cover;
82
      }
83
      .card-panel-icon {
84
        font-size: 48px;
85
      }
86
      .card-panel-description {
87
        font-weight: bold;
88
        margin-top:12px;
89
        .card-panel-text {
90
          line-height: 24px;
91
          color: rgba(0, 0, 0, 0.45);
92
          font-size: 16px;
93
        }
94
        .card-panel-num {
95
          font-size: 20px;
96
        }
97
      }
98
    }
99
  }
100
}
101
</style>

+ 130 - 0
src/views/bridgesConsole/dashboardC/components/BInfoDialog01.vue

@ -0,0 +1,130 @@
1
<template>
2
  <el-dialog title="桥梁信息" :visible.sync="dialogTableVisible" width="80%">
3
    <el-form class="form-main">
4
      <el-row :gutter="10">
5
        <el-col :xs="24" :sm="18" :lg="16">
6
          <el-row>
7
            <el-col :span="12">
8
              <el-form-item label="桥梁编号">000000001</el-form-item>
9
            </el-col>
10
            <el-col :span="12">
11
              <el-form-item label="桥梁简称">青岛跨海大桥A段</el-form-item>
12
            </el-col>
13
            <el-col :span="24">
14
              <el-form-item label="桥梁全称">山东省青岛市胶州跨海大桥A段</el-form-item>
15
            </el-col>
16
            <el-col :span="24">
17
              <el-form-item label="桥梁位置信息">山东省青岛市胶州</el-form-item>
18
            </el-col>
19
            <el-col :span="12">
20
              <el-form-item label="地理位置信息">青岛跨海大桥南侧</el-form-item>
21
            </el-col>
22
            <el-col :span="12">
23
              <el-form-item label="桥梁开通日期">2018/07/21</el-form-item>
24
            </el-col>
25
            <el-col :span="24">
26
              <el-form-item label="维护单位">青岛拉升阶段拉升阶段是觉得了科技有限公司</el-form-item>
27
            </el-col>
28
            <el-col :span="12">
29
              <el-form-item label="维护单位电话">40988923-328</el-form-item>
30
            </el-col>
31
            <el-col :span="12">
32
              <el-form-item label="维护单位电邮">23142121@163.com</el-form-item>
33
            </el-col>
34
          </el-row>
35
        </el-col>
36
        <el-col :xs="24" :sm="6" :lg="8">
37
          <div style="width:100%">
38
            <img src="/static/touchwave.png" alt="桥梁图片" width="90%">
39
          </div>
40
        </el-col>
41
      </el-row>
42
      <el-table :data="tableData" border style="width: 100%;margin:15px 0">
43
        <el-table-column v-for="item in tableRow" :key="item.id"
44
          :prop="item.prop"
45
          :label="item.label">
46
        </el-table-column>
47
      </el-table>
48
      <el-row>
49
        <el-col :span="24">
50
          <el-form-item label="大桥描述" class="el-to-block"><br />
51
            <div class="textarea-div">
52
            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.
53
            </div>
54
          </el-form-item>
55
        </el-col>
56
        <el-col :span="24">
57
          <el-form-item label="备注" class="el-to-block"><br />
58
            <div class="textarea-div">
59
            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.
60
            </div>
61
          </el-form-item>
62
        </el-col>
63
        <el-col :span="24" class="el-btn-col">
64
          <div class="el-btn-col-box">
65
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
66
          </div>
67
        </el-col>
68
      </el-row>
69
    </el-form>
70
  </el-dialog>
71
</template>
72
73
<script>
74
75
export default {
76
  data() {
77
    return {
78
      dialogTableVisible: false,
79
      tableRow: [{
80
        prop: 'date',
81
        label: '维护负责人'
82
      }, {
83
        prop: 'name',
84
        label: '职位'
85
      }, {
86
        prop: 'address',
87
        label: '所在机构'
88
      }, {
89
        prop: 'address2',
90
        label: '联系电话'
91
      }, {
92
        prop: 'address3',
93
        label: '联系邮箱'
94
      }],
95
      tableData: [{
96
        date: '王明',
97
        name: '工程师',
98
        address: '上海市普陀区金沙江路 1518 弄',
99
        address2: '15795223636',
100
        address3: '26586466@qq.com'
101
      }, {
102
        date: '王明',
103
        name: '工程师',
104
        address: '上海市普陀区金沙江路 1518 弄',
105
        address2: '15795223636',
106
        address3: '26586466@qq.com'
107
      }, {
108
        date: '王明',
109
        name: '工程师',
110
        address: '上海市普陀区金沙江路 1518 弄',
111
        address2: '15795223636',
112
        address3: '26586466@qq.com'
113
      }]
114
    }
115
  },
116
  methods: {
117
118
  }
119
}
120
</script>
121
122
<style rel="stylesheet/scss" lang="scss" scoped>
123
  .el-form-item{
124
    margin: 0;
125
  }
126
  .textarea-div{
127
    line-height: 26px;
128
    margin-bottom: 10px;
129
  }
130
</style>

+ 83 - 0
src/views/bridgesConsole/dashboardC/components/BInfoDialog02.vue

@ -0,0 +1,83 @@
1
<template>
2
  <el-dialog title="采集服务器信息" :visible.sync="dialogTableVisible" width="80%">
3
    <el-form class="form-main">
4
      <el-row :gutter="16">
5
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in [0,1,2,3]" :key="item.id">
6
          <div class="list-item">
7
            <el-row>
8
              <el-col :span="12">
9
                <el-form-item label="服务器编号">000000001</el-form-item>
10
              </el-col>
11
              <el-col :span="12">
12
                <el-form-item label="采集器数量">2</el-form-item>
13
              </el-col>
14
              <el-col :span="24">
15
                <el-form-item label="所属桥梁">青岛跨海大桥</el-form-item>
16
              </el-col>
17
              <el-col :span="24">
18
                <el-form-item label="备注" class="el-to-block"><br />
19
                  <div class="textarea-div">
20
                  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.
21
                  </div>
22
                </el-form-item>
23
              </el-col>
24
            </el-row>
25
          </div>
26
        </el-col>
27
      </el-row>
28
      <div class="pagination-container">
29
        <el-pagination
30
          background
31
          @size-change="handleSizeChange"
32
          @current-change="handleCurrentChange"
33
          :current-page.sync="currentPage"
34
          :page-size="4"
35
          layout="prev, pager, next, jumper"
36
          :total="10">
37
        </el-pagination>
38
      </div>
39
      <el-row>
40
        <el-col :span="24" class="el-btn-col">
41
          <div class="el-btn-col-box">
42
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
43
          </div>
44
        </el-col>
45
      </el-row>
46
    </el-form>
47
  </el-dialog>
48
</template>
49
50
<script>
51
52
export default {
53
  data() {
54
    return {
55
      dialogTableVisible: false,
56
      currentPage: 1
57
    }
58
  },
59
  methods: {
60
    handleSizeChange(val) {
61
      console.log(`每页 ${val} 条`)
62
    },
63
    handleCurrentChange(val) {
64
      console.log(`当前页: ${val}`)
65
    }
66
  }
67
}
68
</script>
69
70
<style rel="stylesheet/scss" lang="scss" scoped>
71
  .el-form-item{
72
    margin: 0;
73
  }
74
  .textarea-div{
75
    line-height: 26px;
76
    margin-bottom: 10px;
77
  }
78
  .list-item{
79
    border: 1px solid #ccc;
80
    margin-bottom: 20px;
81
    padding: 10px 15px;
82
  }
83
</style>

+ 83 - 0
src/views/bridgesConsole/dashboardC/components/BInfoDialog03.vue

@ -0,0 +1,83 @@
1
<template>
2
  <el-dialog title="采集盒信息" :visible.sync="dialogTableVisible" width="80%">
3
    <el-form class="form-main">
4
      <el-row :gutter="16">
5
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in [0,1,2,3]" :key="item.id">
6
          <div class="list-item">
7
            <el-row>
8
              <el-col :span="12">
9
                <el-form-item label="采集盒编号">000000001</el-form-item>
10
              </el-col>
11
              <el-col :span="12">
12
                <el-form-item label="采集盒信道数量">2</el-form-item>
13
              </el-col>
14
              <el-col :span="24">
15
                <el-form-item label="采集盒所属服务器编号">1926831</el-form-item>
16
              </el-col>
17
              <el-col :span="24">
18
                <el-form-item label="备注" class="el-to-block"><br />
19
                  <div class="textarea-div">
20
                  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.
21
                  </div>
22
                </el-form-item>
23
              </el-col>
24
            </el-row>
25
          </div>
26
        </el-col>
27
      </el-row>
28
      <div class="pagination-container">
29
        <el-pagination
30
          background
31
          @size-change="handleSizeChange"
32
          @current-change="handleCurrentChange"
33
          :current-page.sync="currentPage"
34
          :page-size="4"
35
          layout="prev, pager, next, jumper"
36
          :total="10">
37
        </el-pagination>
38
      </div>
39
      <el-row>
40
        <el-col :span="24" class="el-btn-col">
41
          <div class="el-btn-col-box">
42
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
43
          </div>
44
        </el-col>
45
      </el-row>
46
    </el-form>
47
  </el-dialog>
48
</template>
49
50
<script>
51
52
export default {
53
  data() {
54
    return {
55
      dialogTableVisible: false,
56
      currentPage: 1
57
    }
58
  },
59
  methods: {
60
    handleSizeChange(val) {
61
      console.log(`每页 ${val} 条`)
62
    },
63
    handleCurrentChange(val) {
64
      console.log(`当前页: ${val}`)
65
    }
66
  }
67
}
68
</script>
69
70
<style rel="stylesheet/scss" lang="scss" scoped>
71
  .el-form-item{
72
    margin: 0;
73
  }
74
  .textarea-div{
75
    line-height: 26px;
76
    margin-bottom: 10px;
77
  }
78
  .list-item{
79
    border: 1px solid #ccc;
80
    margin-bottom: 20px;
81
    padding: 10px 15px;
82
  }
83
</style>

+ 86 - 0
src/views/bridgesConsole/dashboardC/components/BInfoDialog04.vue

@ -0,0 +1,86 @@
1
<template>
2
  <el-dialog title="传感器信息" :visible.sync="dialogTableVisible" width="80%">
3
    <el-form class="form-main">
4
      <el-row :gutter="16">
5
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in [0,1,2,3]" :key="item.id">
6
          <div class="list-item">
7
            <el-row>
8
              <el-col :span="12">
9
                <el-form-item label="采集盒编号">000000001</el-form-item>
10
              </el-col>
11
              <el-col :span="12">
12
                <el-form-item label="传感器编号">8903420394</el-form-item>
13
              </el-col>
14
              <el-col :span="12">
15
                <el-form-item label="所属主缆">上游主缆</el-form-item>
16
              </el-col>
17
              <el-col :span="12">
18
                <el-form-item label="传感器位置">东段</el-form-item>
19
              </el-col>
20
              <el-col :span="24">
21
                <el-form-item label="备注" class="el-to-block"><br />
22
                  <div class="textarea-div">
23
                  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.
24
                  </div>
25
                </el-form-item>
26
              </el-col>
27
            </el-row>
28
          </div>
29
        </el-col>
30
      </el-row>
31
      <div class="pagination-container">
32
        <el-pagination
33
          background
34
          @size-change="handleSizeChange"
35
          @current-change="handleCurrentChange"
36
          :current-page.sync="currentPage"
37
          :page-size="4"
38
          layout="prev, pager, next, jumper"
39
          :total="10">
40
        </el-pagination>
41
      </div>
42
      <el-row>
43
        <el-col :span="24" class="el-btn-col">
44
          <div class="el-btn-col-box">
45
            <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
46
          </div>
47
        </el-col>
48
      </el-row>
49
    </el-form>
50
  </el-dialog>
51
</template>
52
53
<script>
54
55
export default {
56
  data() {
57
    return {
58
      dialogTableVisible: false,
59
      currentPage: 1
60
    }
61
  },
62
  methods: {
63
    handleSizeChange(val) {
64
      console.log(`每页 ${val} 条`)
65
    },
66
    handleCurrentChange(val) {
67
      console.log(`当前页: ${val}`)
68
    }
69
  }
70
}
71
</script>
72
73
<style rel="stylesheet/scss" lang="scss" scoped>
74
  .el-form-item{
75
    margin: 0;
76
  }
77
  .textarea-div{
78
    line-height: 26px;
79
    margin-bottom: 10px;
80
  }
81
  .list-item{
82
    border: 1px solid #ccc;
83
    margin-bottom: 20px;
84
    padding: 10px 15px;
85
  }
86
</style>

+ 150 - 0
src/views/bridgesConsole/dashboardC/components/LineChart.vue

@ -0,0 +1,150 @@
1
<template>
2
  <div :class="className" :style="{height:height,width:width}"></div>
3
</template>
4
5
<script>
6
import echarts from 'echarts'
7
require('echarts/theme/macarons') // echarts theme
8
import { debounce } from '@/utils'
9
10
export default {
11
  props: {
12
    className: {
13
      type: String,
14
      default: 'chart'
15
    },
16
    width: {
17
      type: String,
18
      default: '100%'
19
    },
20
    height: {
21
      type: String,
22
      default: '350px'
23
    },
24
    autoResize: {
25
      type: Boolean,
26
      default: true
27
    },
28
    chartData: {
29
      type: Object
30
    }
31
  },
32
  data() {
33
    return {
34
      chart: null
35
    }
36
  },
37
  mounted() {
38
    this.initChart()
39
    if (this.autoResize) {
40
      this.__resizeHanlder = debounce(() => {
41
        if (this.chart) {
42
          this.chart.resize()
43
        }
44
      }, 100)
45
      window.addEventListener('resize', this.__resizeHanlder)
46
    }
47
48
    // 监听侧边栏的变化
49
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
50
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
51
  },
52
  beforeDestroy() {
53
    if (!this.chart) {
54
      return
55
    }
56
    if (this.autoResize) {
57
      window.removeEventListener('resize', this.__resizeHanlder)
58
    }
59
60
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
61
    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
62
63
    this.chart.dispose()
64
    this.chart = null
65
  },
66
  watch: {
67
    chartData: {
68
      deep: true,
69
      handler(val) {
70
        this.setOptions(val)
71
      }
72
    }
73
  },
74
  methods: {
75
    setOptions({ expectedData, actualData } = {}) {
76
      this.chart.setOption({
77
        xAxis: {
78
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
79
          boundaryGap: false,
80
          axisTick: {
81
            show: false
82
          }
83
        },
84
        grid: {
85
          left: 10,
86
          right: 10,
87
          bottom: 20,
88
          top: 30,
89
          containLabel: true
90
        },
91
        tooltip: {
92
          trigger: 'axis',
93
          axisPointer: {
94
            type: 'cross'
95
          },
96
          padding: [5, 10]
97
        },
98
        yAxis: {
99
          axisTick: {
100
            show: false
101
          }
102
        },
103
        legend: {
104
          data: ['expected', 'actual']
105
        },
106
        series: [{
107
          name: 'expected', itemStyle: {
108
            normal: {
109
              color: '#FF005A',
110
              lineStyle: {
111
                color: '#FF005A',
112
                width: 2
113
              }
114
            }
115
          },
116
          smooth: true,
117
          type: 'line',
118
          data: expectedData,
119
          animationDuration: 2800,
120
          animationEasing: 'cubicInOut'
121
        },
122
        {
123
          name: 'actual',
124
          smooth: true,
125
          type: 'line',
126
          itemStyle: {
127
            normal: {
128
              color: '#3888fa',
129
              lineStyle: {
130
                color: '#3888fa',
131
                width: 2
132
              },
133
              areaStyle: {
134
                color: '#f3f8ff'
135
              }
136
            }
137
          },
138
          data: actualData,
139
          animationDuration: 2800,
140
          animationEasing: 'quadraticOut'
141
        }]
142
      })
143
    },
144
    initChart() {
145
      this.chart = echarts.init(this.$el, 'macarons')
146
      this.setOptions(this.chartData)
147
    }
148
  }
149
}
150
</script>

+ 107 - 0
src/views/bridgesConsole/dashboardC/components/updateLoginPwd.vue

@ -0,0 +1,107 @@
1
<template>
2
  <el-dialog title="修改登录密码" ref="ruleForm" :visible.sync="dialogTableVisible" width="460px">
3
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
4
      <el-form-item prop="pass">
5
        <el-input type="password" v-model="ruleForm2.pass" placeholder="请设置您的新密码" auto-complete="off"></el-input>
6
      </el-form-item>
7
      <el-form-item prop="checkPass">
8
        <el-input type="password" v-model="ruleForm2.checkPass" placeholder="请再次输入密码确认" auto-complete="off"></el-input>
9
      </el-form-item>
10
      <el-form-item></el-form-item>
11
      <el-form-item class="el-btn-col">
12
        <div class="el-btn-col-box">
13
          <el-button type="primary" @click="resetPwd('ruleForm2')">确定</el-button>
14
        </div>
15
      </el-form-item>
16
    </el-form>
17
  </el-dialog>
18
</template>
19
20
<script>
21
22
export default {
23
  data() {
24
    var validatePass = (rule, value, callback) => {
25
      if (value === '') {
26
        callback(new Error('请设置您的新密码'))
27
      } else if (value.length < 6 || value.length > 24) {
28
        callback(new Error('密码由6-24个字符组成,区分大小写'))
29
      } else {
30
        if (this.ruleForm2.checkPass !== '') {
31
          this.$refs.ruleForm2.validateField('checkPass')
32
        }
33
        callback()
34
      }
35
    }
36
    var validatePass2 = (rule, value, callback) => {
37
      if (value === '') {
38
        callback(new Error('请再次输入密码确认'))
39
      } else if (value !== this.ruleForm2.pass) {
40
        callback(new Error('两次输入密码不一致,请重新输入!'))
41
      } else {
42
        callback()
43
      }
44
    }
45
    return {
46
      dialogTableVisible: false,
47
      ruleForm2: {
48
        pass: '',
49
        checkPass: ''
50
      },
51
      rules2: {
52
        pass: [
53
          { validator: validatePass, trigger: 'blur' }
54
        ],
55
        checkPass: [
56
          { validator: validatePass2, trigger: 'blur' }
57
        ]
58
      }
59
    }
60
  },
61
  methods: {
62
    resetPwd(formName) {
63
      this.$refs[formName].validate((valid) => {
64
        if (valid) {
65
          // this.$axios.post(httpUrl.hQuery.sign.resetpw, {
66
          //   code: this.resetCode,
67
          //   pw: this.ruleForm2.pass
68
          // }).then(res => {
69
          //   console.log(res);
70
          //   if (res.success) {
71
          //     this.$alert('您可以使用新密码登录您的账户了', '恭喜您,您的密码重置成功!', {
72
          //       confirmButtonText: '重新登录',
73
          //       type: 'success',
74
          //       center: true,
75
          //       callback: action => {
76
          //         if (action === 'confirm') {
77
          //           this.$router.push({path: '/loginPlat'});
78
          //         };
79
          //       }
80
          //     });
81
          //   } else {
82
          //     if (res.code === -600001) {
83
          //       this.$alert('小提示:邮件内的链接有效时长为10分钟', '很抱歉,当前的链接已失效。', {
84
          //         confirmButtonText: '重新找回密码',
85
          //         type: 'warning',
86
          //         center: true,
87
          //         callback: action => {
88
          //           if (action === 'confirm') {
89
          //             this.stepFisrt = true;
90
          //             this.stepSecond = false;
91
          //             this.stepThird = false;
92
          //             this.stepVal = 0;
93
          //           };
94
          //         }
95
          //       });
96
          //       return;
97
          //     };
98
          //   };
99
          // });
100
        } else {
101
          return false
102
        }
103
      })
104
    }
105
  }
106
}
107
</script>

+ 97 - 0
src/views/bridgesConsole/dashboardC/components/updatePersonInfo.vue

@ -0,0 +1,97 @@
1
<template>
2
  <el-dialog title="修改个人信息" ref="ruleForm" :visible.sync="dialogTableVisible" width="680px">
3
    <el-form class="form-main" label-width="80px">
4
      <el-row>
5
        <el-col :span="12">
6
          <el-form-item label="账 号">13679879708</el-form-item>
7
        </el-col>
8
        <el-col :span="12">
9
          <el-form-item label="用户姓名">李二蛋</el-form-item>
10
        </el-col>
11
        <el-col :span="12">
12
          <el-form-item label="职 位">
13
            <el-input placeholder="请填写职位"></el-input>
14
          </el-form-item>
15
        </el-col>
16
        <el-col :span="12">
17
          <el-form-item label="所在机构">
18
            <el-input placeholder="请填写所在机构"></el-input>
19
          </el-form-item>
20
        </el-col>
21
        <el-col :span="12">
22
          <el-form-item label="联系电话">
23
            <el-input placeholder="请填写联系电话"></el-input>
24
          </el-form-item>
25
        </el-col>
26
        <el-col :span="12">
27
          <el-form-item label="联系邮箱">
28
            <el-input placeholder="请填写联系邮箱"></el-input>
29
          </el-form-item>
30
        </el-col>
31
        <el-col :span="24" class="el-btn-col">
32
          <div class="el-btn-col-box">
33
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
34
          </div>
35
        </el-col>
36
      </el-row>
37
    </el-form>
38
  </el-dialog>
39
</template>
40
41
<script>
42
43
export default {
44
  data() {
45
    return {
46
      dialogTableVisible: false
47
    }
48
  },
49
  methods: {
50
    submitForm(formName) {
51
      this.$refs[formName].validate((valid) => {
52
        if (valid) {
53
        //   let paramsData = {
54
        //     'title': this.ruleFormDem.demandTit,
55
        //     'descp': this.ruleFormDem.demandDesc,
56
        //     'province': this.ruleFormDem.province,
57
        //     'city': this.ruleFormDem.city,
58
        //     'invalidDay': util.dateFormatter(this.ruleFormDem.lastDate, false, true),
59
        //     'cost': this.selectCostRange,
60
        //     'duration': this.selectLongTime,
61
        //     'orgName': this.ruleFormDem.orgName,
62
        //     'contactNum': this.ruleFormDem.linkTel,
63
        //     'creator': this.kxUserId,
64
        //     'source': this.platSource
65
        //   };
66
        //   this.$axios.post(httpUrl.kxQurey.demand.add, paramsData).then((res) => {
67
        //     if (res.success) {
68
        //       this.$alert('我们已收到您的需求,马上为您对接合适的专家和专业机构,您可以登录科袖网与对方做进一步沟通。', '需求发布成功!', {
69
        //         confirmButtonText: '进入科袖网,发现更多服务和资源',
70
        //         type: 'success',
71
        //         center: true,
72
        //         cancelButtonText: '取消',
73
        //         callback: action => {
74
        //           if (action === 'confirm') {
75
        //             window.open(util.ekexiuUrl, '科袖网首页');
76
        //           };
77
        //         }
78
        //       });
79
        //       this.resetForm(formName);
80
        //       this.$emit('dialogChangedLogin', false);
81
        //     } else {
82
        //       this.$message({
83
        //         message: '需求发布失败,请重新发布!',
84
        //         type: 'warning'
85
        //       });
86
        //     };
87
        //     console.log(res);
88
        //   });
89
        // } else {
90
        //   console.log('error submit!!');
91
        //   return false
92
        }
93
      })
94
    }
95
  }
96
}
97
</script>

+ 169 - 0
src/views/bridgesConsole/dashboardC/index.vue

@ -0,0 +1,169 @@
1
<template>
2
  <div class="dashboard-editor-container">
3
    <BInfoDialog01 ref="BInfoDialog01"></BInfoDialog01>
4
    <BInfoDialog02 ref="BInfoDialog02"></BInfoDialog02>
5
    <BInfoDialog03 ref="BInfoDialog03"></BInfoDialog03>
6
    <BInfoDialog04 ref="BInfoDialog04"></BInfoDialog04>
7
8
    <updatePersonInfo ref="updatePersonInfo"></updatePersonInfo>
9
    <updateLoginPwd ref="updateLoginPwd"></updateLoginPwd>
10
11
    <el-row :gutter="20">
12
      <el-col :xs="24" :sm="15" :lg="18">
13
        <el-card class="box-card block-group">
14
          <div slot="header" class="block-title">
15
            <span>报警信息</span>
16
            <el-button type="text">查看全部</el-button>
17
          </div>
18
          <ul class="item-ul">
19
            <li v-for="item in [0,1,2,3,4]" :key="item.id">2018年8月1日11:42      XXXXX大桥XXX采集盒XXX传感器检测到异常情况,请点击查看。    未读标记</li>
20
          </ul>
21
        </el-card>
22
        <el-card class="box-card block-group">
23
          <div slot="header" class="block-title">
24
            <span>实时监测</span>
25
          </div>
26
          <el-row>
27
            <line-chart :chart-data="lineChartData"></line-chart>
28
          </el-row>
29
        </el-card>
30
      </el-col>
31
      <el-col :xs="24" :sm="9" :lg="6">
32
        <el-card class="box-card block-group">
33
          <div slot="header" class="block-title">
34
            <span>基础信息查看</span>
35
          </div>
36
          <el-row :gutter="10" class="item-row">
37
            <el-col :span="12"><div class="grid-content" @click="queryBirdgeInfo">桥梁信息</div></el-col>
38
            <el-col :span="12"><div class="grid-content" @click="queryServerInfo">采集服务器信息</div></el-col>
39
            <el-col :span="12"><div class="grid-content" @click="queryBoxInfo">采集盒信息</div></el-col>
40
            <el-col :span="12"><div class="grid-content" @click="querySensorInfo">传感器信息</div></el-col>
41
          </el-row>
42
        </el-card>
43
        <el-card class="box-card block-group">
44
          <div slot="header" class="block-title">
45
            <span>常用操作</span>
46
          </div>
47
          <el-row :gutter="10" class="item-row">
48
            <el-col :span="12"><div class="grid-content">历史报警信息查询</div></el-col>
49
            <el-col :span="12"><div class="grid-content">历史监测信息查询</div></el-col>
50
            <el-col :span="12"><div class="grid-content" @click="updatePersonInfo">修改个人信息</div></el-col>
51
            <el-col :span="12"><div class="grid-content" @click="updateLoginPwd">修改登录密码</div></el-col>
52
          </el-row>
53
        </el-card>
54
      </el-col>
55
    </el-row>
56
  </div>
57
</template>
58
59
60
<script>
61
import LineChart from './components/LineChart'
62
import BInfoDialog01 from './components/BInfoDialog01'
63
import BInfoDialog02 from './components/BInfoDialog02'
64
import BInfoDialog03 from './components/BInfoDialog03'
65
import BInfoDialog04 from './components/BInfoDialog04'
66
67
import updatePersonInfo from './components/updatePersonInfo'
68
import updateLoginPwd from './components/updateLoginPwd'
69
70
const lineChartData = {
71
  newVisitis: {
72
    expectedData: [100, 120, 161, 134, 105, 160, 165],
73
    actualData: [120, 82, 91, 154, 162, 140, 145]
74
  },
75
  messages: {
76
    expectedData: [200, 192, 120, 144, 160, 130, 140],
77
    actualData: [180, 160, 151, 106, 145, 150, 130]
78
  },
79
  purchases: {
80
    expectedData: [80, 100, 121, 104, 105, 90, 100],
81
    actualData: [120, 90, 100, 138, 142, 130, 130]
82
  },
83
  shoppings: {
84
    expectedData: [130, 140, 141, 142, 145, 150, 160],
85
    actualData: [120, 82, 91, 154, 162, 140, 130]
86
  }
87
}
88
89
export default {
90
  name: 'dashboard-other',
91
  components: {
92
    LineChart,
93
    BInfoDialog01,
94
    BInfoDialog02,
95
    BInfoDialog03,
96
    BInfoDialog04,
97
    updatePersonInfo,
98
    updateLoginPwd
99
  },
100
  data() {
101
    return {
102
      lineChartData: lineChartData.newVisitis
103
    }
104
  },
105
  methods: {
106
    queryBirdgeInfo() {
107
      this.$refs.BInfoDialog01.dialogTableVisible = true
108
    },
109
    queryServerInfo() {
110
      this.$refs.BInfoDialog02.dialogTableVisible = true
111
    },
112
    queryBoxInfo() {
113
      this.$refs.BInfoDialog03.dialogTableVisible = true
114
    },
115
    querySensorInfo() {
116
      this.$refs.BInfoDialog04.dialogTableVisible = true
117
    },
118
    updatePersonInfo() {
119
      this.$refs.updatePersonInfo.dialogTableVisible = true
120
    },
121
    updateLoginPwd() {
122
      this.$refs.updateLoginPwd.dialogTableVisible = true
123
    }
124
  }
125
}
126
</script>
127
128
<style rel="stylesheet/scss" lang="scss" scoped>
129
.dashboard-editor-container {
130
  padding: 32px;
131
  background-color: rgb(240, 242, 245);
132
  .block-group{
133
    background: #fff;
134
    margin-bottom: 20px;
135
    .block-title{
136
      display: flex;
137
      justify-content: space-between;
138
      .el-button{
139
        padding: 3px 0;
140
      }
141
    }
142
    .item-ul{
143
      margin: 0;
144
      padding: 0 10px;
145
      li{
146
        padding: 8px 0;
147
        margin: 0;
148
        list-style: none;
149
      }
150
    }
151
    .grid-content{
152
      height: 100px;
153
      display: flex;
154
      text-align: center;
155
      justify-content: center;
156
      align-items: center;
157
      background-color: #f8f8f8;
158
      margin-bottom: 8px;
159
      padding:20px;
160
      cursor: pointer;
161
      &:hover {
162
        transition: all 0.2s ease-out;
163
        color: #fff;
164
        background: #36a3f7;
165
      }
166
    }
167
  }
168
}
169
</style>

+ 14 - 15
src/views/dashboard/index.vue

@ -1,32 +1,31 @@
1 1
<template>
2 2
  <div class="dashboard-container">
3
    <div class="dashboard-text">name:{{name}}</div>
4
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
3
    <component :is="currentRole"></component>
5 4
  </div>
6 5
</template>
7 6
8 7
<script>
9 8
import { mapGetters } from 'vuex'
9
import adminDashboard from './admin'
10
import otherDashboard from './other'
10 11
11 12
export default {
12 13
  name: 'dashboard',
14
  components: { adminDashboard, otherDashboard },
15
  data() {
16
    return {
17
      currentRole: 'adminDashboard'
18
    }
19
  },
13 20
  computed: {
14 21
    ...mapGetters([
15
      'name',
16 22
      'roles'
17 23
    ])
24
  },
25
  created() {
26
    if (!this.roles.includes('admin')) {
27
      this.currentRole = 'otherDashboard'
28
    }
18 29
  }
19 30
}
20 31
</script>
21
22
<style rel="stylesheet/scss" lang="scss" scoped>
23
.dashboard {
24
  &-container {
25
    margin: 30px;
26
  }
27
  &-text {
28
    font-size: 30px;
29
    line-height: 46px;
30
  }
31
}
32
</style>

+ 66 - 0
src/views/layout/LayoutC.vue

@ -0,0 +1,66 @@
1
<template>
2
  <div class="app-wrapper" :class="classObj">
3
    <TopNavbar></TopNavbar>
4
    <div class="main-container">
5
      <navbar></navbar>
6
      <app-main></app-main>
7
    </div>
8
  </div>
9
</template>
10
11
<script>
12
import { TopNavbar, Navbar, AppMain } from './components'
13
import ResizeMixin from './mixin/ResizeHandler'
14
15
export default {
16
  name: 'layout',
17
  components: {
18
    TopNavbar,
19
    Navbar,
20
    AppMain
21
  },
22
  mixins: [ResizeMixin],
23
  computed: {
24
    device() {
25
      return this.$store.state.app.device
26
    },
27
    classObj() {
28
      return {
29
        mobile: this.device === 'mobile'
30
      }
31
    }
32
  },
33
  methods: {
34
35
  }
36
}
37
</script>
38
39
<style rel="stylesheet/scss" lang="scss" scoped>
40
  @import "src/styles/mixin.scss";
41
  #app .main-container {
42
    margin-left: 0;
43
  }
44
  #app .navbar .hamburger-container {
45
    display:none;
46
  }
47
  .app-wrapper {
48
    @include clearfix;
49
    position: relative;
50
    height: 100%;
51
    width: 100%;
52
    &.mobile.openSidebar{
53
      position: fixed;
54
      top: 0;
55
    }
56
  }
57
  .drawer-bg {
58
    background: #000;
59
    opacity: 0.3;
60
    width: 100%;
61
    top: 0;
62
    height: 100%;
63
    position: absolute;
64
    z-index: 999;
65
  }
66
</style>

+ 0 - 38
src/views/layout/components/Navbar.vue

@ -2,22 +2,6 @@
2 2
  <el-menu class="navbar" mode="horizontal">
3 3
    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
4 4
    <breadcrumb></breadcrumb>
5
    <!-- <el-dropdown class="avatar-container" trigger="click">
6
      <div class="avatar-wrapper">
7
        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
8
        <i class="el-icon-caret-bottom"></i>
9
      </div>
10
      <el-dropdown-menu class="user-dropdown" slot="dropdown">
11
        <router-link class="inlineBlock" to="/">
12
          <el-dropdown-item>
13
            Home
14
          </el-dropdown-item>
15
        </router-link>
16
        <el-dropdown-item divided>
17
          <span @click="logout" style="display:block;">LogOut</span>
18
        </el-dropdown-item>
19
      </el-dropdown-menu>
20
    </el-dropdown> -->
21 5
  </el-menu>
22 6
</template>
23 7
@ -67,28 +51,6 @@ export default {
67 51
    top: 16px;
68 52
    color: red;
69 53
  }
70
  .avatar-container {
71
    height: 50px;
72
    display: inline-block;
73
    position: absolute;
74
    right: 35px;
75
    .avatar-wrapper {
76
      cursor: pointer;
77
      margin-top: 5px;
78
      position: relative;
79
      .user-avatar {
80
        width: 40px;
81
        height: 40px;
82
        border-radius: 10px;
83
      }
84
      .el-icon-caret-bottom {
85
        position: absolute;
86
        right: -20px;
87
        top: 25px;
88
        font-size: 12px;
89
      }
90
    }
91
  }
92 54
}
93 55
</style>
94 56