|
|
@@ -1,65 +1,186 @@
|
|
1
|
1
|
<template>
|
|
2
|
2
|
<d2-container class="page">
|
|
3
|
|
- <d2-page-cover>
|
|
4
|
|
- <d2-icon-svg class="logo" name="d2-admin"/>
|
|
5
|
|
- <template slot="footer">
|
|
6
|
|
- <div class="btn-group">
|
|
7
|
|
- <span class="btn-group__btn" @click="$open('https://github.com/d2-projects')">开源组织</span> |
|
|
8
|
|
- <span class="btn-group__btn" @click="$open('https://d2.pub/zh/doc/d2-admin')">文档</span> |
|
|
9
|
|
- <span class="btn-group__btn" @click="$open('https://github.com/d2-projects/d2-admin-start-kit')">简化版</span> |
|
|
10
|
|
- <span class="btn-group__btn" @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')">掘金</span> |
|
|
11
|
|
- <el-popover :width="172" trigger="hover">
|
|
12
|
|
- <p class="d2-mt-0 d2-mb-10">今日前端</p>
|
|
13
|
|
- <img src="./image/qr@2x.png" style="width: 172px;">
|
|
14
|
|
- <span slot="reference" class="btn-group__btn btn-group__btn--link">
|
|
15
|
|
- <d2-icon name="weixin"/>
|
|
16
|
|
- 微信公众号
|
|
17
|
|
- </span>
|
|
18
|
|
- <p style="font-size: 12px; margin-top: 0px; margin-bottom: 0px;">
|
|
19
|
|
- 官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息
|
|
20
|
|
- </p>
|
|
21
|
|
- </el-popover>
|
|
22
|
|
- </div>
|
|
23
|
|
- <d2-badge/>
|
|
24
|
|
- <d2-help/>
|
|
25
|
|
- </template>
|
|
26
|
|
- </d2-page-cover>
|
|
|
3
|
+ <el-row class="content">
|
|
|
4
|
+ <div class="page-content left-content">
|
|
|
5
|
+ <span class="content-title">报警待处理</span>
|
|
|
6
|
+ <el-table
|
|
|
7
|
+ :data="tableData"
|
|
|
8
|
+ class="table-content"
|
|
|
9
|
+ @row-click="jumpDetails"
|
|
|
10
|
+ :row-class-name="tableRowClassName"
|
|
|
11
|
+ >
|
|
|
12
|
+ <el-table-column
|
|
|
13
|
+ prop="name"
|
|
|
14
|
+ align="center"
|
|
|
15
|
+ label="仓库名称"
|
|
|
16
|
+ ></el-table-column>
|
|
|
17
|
+ <el-table-column
|
|
|
18
|
+ prop="itemName"
|
|
|
19
|
+ label="仓房名称"
|
|
|
20
|
+ align="center"
|
|
|
21
|
+ ></el-table-column>
|
|
|
22
|
+ <el-table-column
|
|
|
23
|
+ prop="submitter"
|
|
|
24
|
+ label="报警时间"
|
|
|
25
|
+ align="center"
|
|
|
26
|
+ ></el-table-column>
|
|
|
27
|
+ <el-table-column
|
|
|
28
|
+ prop="reportDate"
|
|
|
29
|
+ align="center"
|
|
|
30
|
+ label="已处理等待时常"
|
|
|
31
|
+ ></el-table-column>
|
|
|
32
|
+ <el-table-column align="center" label="操作">
|
|
|
33
|
+ <el-button type="text" size="small" icon="el-icon-edit"
|
|
|
34
|
+ >编辑</el-button
|
|
|
35
|
+ >
|
|
|
36
|
+ </el-table-column>
|
|
|
37
|
+ </el-table>
|
|
|
38
|
+ </div>
|
|
|
39
|
+ <div class="page-content right-content">
|
|
|
40
|
+ <span class="content-title">通知公告</span>
|
|
|
41
|
+ <ul class="tzggList">
|
|
|
42
|
+ <li v-for="(item, index) in tzggListData" :key="index">
|
|
|
43
|
+ <span>{{ item.name }}</span>
|
|
|
44
|
+ <span class="tzggListLi">2011-10-19 11:11:11</span>
|
|
|
45
|
+ </li>
|
|
|
46
|
+ </ul>
|
|
|
47
|
+ </div>
|
|
|
48
|
+ </el-row>
|
|
|
49
|
+ <el-row class="content contentX">
|
|
|
50
|
+ <div class="page-content left-content">
|
|
|
51
|
+ <span class="content-title">出入库数量趋势</span>
|
|
|
52
|
+ </div>
|
|
|
53
|
+ <div class="page-content right-content">
|
|
|
54
|
+ <span class="content-title">库区报警排名</span>
|
|
|
55
|
+ </div>
|
|
|
56
|
+ </el-row>
|
|
27
|
57
|
</d2-container>
|
|
28
|
58
|
</template>
|
|
29
|
59
|
|
|
30
|
60
|
<script>
|
|
31
|
|
-import D2Badge from './components/d2-badge'
|
|
32
|
|
-import D2Help from './components/d2-help'
|
|
33
|
|
-import D2PageCover from './components/d2-page-cover'
|
|
34
|
61
|
export default {
|
|
35
|
|
- components: {
|
|
36
|
|
- D2Badge,
|
|
37
|
|
- D2Help,
|
|
38
|
|
- D2PageCover
|
|
39
|
|
- }
|
|
40
|
|
-}
|
|
|
62
|
+ data() {
|
|
|
63
|
+ return {
|
|
|
64
|
+ tableData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
|
|
|
65
|
+ tzggListData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
|
|
|
66
|
+ };
|
|
|
67
|
+ },
|
|
|
68
|
+ methods: {
|
|
|
69
|
+ jumpDetails() {},
|
|
|
70
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
71
|
+ if ((rowIndex + 1) % 2 === 0) {
|
|
|
72
|
+ return "one-row";
|
|
|
73
|
+ } else {
|
|
|
74
|
+ return "two-row";
|
|
|
75
|
+ }
|
|
|
76
|
+ },
|
|
|
77
|
+ },
|
|
|
78
|
+ created() {},
|
|
|
79
|
+};
|
|
41
|
80
|
</script>
|
|
42
|
81
|
|
|
43
|
82
|
<style lang="scss" scoped>
|
|
44
|
83
|
.page {
|
|
45
|
|
- .logo {
|
|
46
|
|
- width: 120px;
|
|
47
|
|
- }
|
|
48
|
|
- .btn-group {
|
|
49
|
|
- color: $color-text-placehoder;
|
|
50
|
|
- font-size: 12px;
|
|
51
|
|
- line-height: 12px;
|
|
52
|
|
- margin-top: 0px;
|
|
53
|
|
- margin-bottom: 20px;
|
|
54
|
|
- .btn-group__btn {
|
|
55
|
|
- color: $color-text-sub;
|
|
56
|
|
- &:hover {
|
|
57
|
|
- color: $color-text-main;
|
|
58
|
|
- }
|
|
59
|
|
- &.btn-group__btn--link {
|
|
60
|
|
- color: $color-primary;
|
|
61
|
|
- }
|
|
62
|
|
- }
|
|
|
84
|
+ width: 100%;
|
|
|
85
|
+ height: 100%;
|
|
|
86
|
+ color: #dafaff;
|
|
|
87
|
+ background-image: url("./image/bg.png") no-repeat;
|
|
|
88
|
+ ::v-deep.el-table::before {
|
|
|
89
|
+ background-color: #042c59 !important;
|
|
|
90
|
+ }
|
|
|
91
|
+ ::v-deep.el-table td.el-table__cell,
|
|
|
92
|
+ ::v-deep.el-table th.el-table__cell.is-leaf {
|
|
|
93
|
+ border: 0px !important;
|
|
|
94
|
+ }
|
|
|
95
|
+ ::v-deep.el-table th.el-table__cell {
|
|
|
96
|
+ background-color: #042c59;
|
|
|
97
|
+ }
|
|
|
98
|
+ ::v-deep.el-table--enable-row-hover
|
|
|
99
|
+ .el-table__body
|
|
|
100
|
+ tr:hover
|
|
|
101
|
+ > td.el-table__cell {
|
|
|
102
|
+ background-color: #1460b0;
|
|
|
103
|
+ }
|
|
|
104
|
+ ::v-deep.el-table thead {
|
|
|
105
|
+ color: #dafaff;
|
|
|
106
|
+ }
|
|
|
107
|
+ ::v-deep.d2-container-full__body {
|
|
|
108
|
+ background: none !important;
|
|
|
109
|
+ }
|
|
|
110
|
+ ::v-deep.el-table .one-row {
|
|
|
111
|
+ background-color: #042c59 !important;
|
|
|
112
|
+ color: #dafaff;
|
|
|
113
|
+ }
|
|
|
114
|
+ ::v-deep.el-table .two-row {
|
|
|
115
|
+ background-color: #063c67 !important;
|
|
|
116
|
+ color: #dafaff;
|
|
|
117
|
+ }
|
|
|
118
|
+ .table-content {
|
|
|
119
|
+ width: 98%;
|
|
|
120
|
+ margin-left: 6px;
|
|
|
121
|
+ background: #042c59;
|
|
|
122
|
+ }
|
|
|
123
|
+ .content-title {
|
|
|
124
|
+ padding-left: 43px;
|
|
|
125
|
+ display: inline-block;
|
|
|
126
|
+ height: 50px;
|
|
|
127
|
+ line-height: 50px;
|
|
|
128
|
+ background: url("./image/xjt.png") no-repeat;
|
|
|
129
|
+ background-position: 20px center;
|
|
|
130
|
+ }
|
|
|
131
|
+ .content {
|
|
|
132
|
+ width: 100%;
|
|
|
133
|
+ height: 45%;
|
|
|
134
|
+ min-height: 300px;
|
|
|
135
|
+ }
|
|
|
136
|
+ .contentX {
|
|
|
137
|
+ margin-top: 4%;
|
|
|
138
|
+ }
|
|
|
139
|
+ .page-content {
|
|
|
140
|
+ width: 35%;
|
|
|
141
|
+ min-width: 350px;
|
|
|
142
|
+ height: 100%;
|
|
|
143
|
+ background: url("./image/kuang-bg_1.png") no-repeat;
|
|
|
144
|
+ background-size: 100% 100%;
|
|
|
145
|
+ }
|
|
|
146
|
+ .right-content {
|
|
|
147
|
+ margin-right: -20px;
|
|
|
148
|
+ float: right;
|
|
|
149
|
+ }
|
|
|
150
|
+ .left-content {
|
|
|
151
|
+ float: left;
|
|
|
152
|
+ }
|
|
|
153
|
+ .tzggList {
|
|
|
154
|
+ margin: 10px 0;
|
|
|
155
|
+ padding: 0;
|
|
|
156
|
+ }
|
|
|
157
|
+ .tzggList li {
|
|
|
158
|
+ margin: 5px;
|
|
|
159
|
+ padding-left: 10px;
|
|
|
160
|
+ list-style: none;
|
|
|
161
|
+ padding-right: 10px;
|
|
|
162
|
+ height: 40px;
|
|
|
163
|
+ line-height: 40px;
|
|
|
164
|
+ border-bottom: 1px solid #1460b0;
|
|
|
165
|
+ }
|
|
|
166
|
+ .tzggListLi {
|
|
|
167
|
+ float: right;
|
|
63
|
168
|
}
|
|
|
169
|
+ // .btn-group {
|
|
|
170
|
+ // color: $color-text-placehoder;
|
|
|
171
|
+ // font-size: 12px;
|
|
|
172
|
+ // line-height: 12px;
|
|
|
173
|
+ // margin-top: 0px;
|
|
|
174
|
+ // margin-bottom: 20px;
|
|
|
175
|
+ // .btn-group__btn {
|
|
|
176
|
+ // color: $color-text-sub;
|
|
|
177
|
+ // &:hover {
|
|
|
178
|
+ // color: $color-text-main;
|
|
|
179
|
+ // }
|
|
|
180
|
+ // &.btn-group__btn--link {
|
|
|
181
|
+ // color: $color-primary;
|
|
|
182
|
+ // }
|
|
|
183
|
+ // }
|
|
|
184
|
+ // }
|
|
64
|
185
|
}
|
|
65
|
186
|
</style>
|
GaoYuPeng
