|
@@ -1,71 +1,166 @@
|
1
|
1
|
<template>
|
2
|
2
|
<d2-container class="page">
|
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>
|
|
3
|
+ <div class="mapPosition">
|
|
4
|
+ <div>
|
|
5
|
+ <div class="ckt-bg">
|
|
6
|
+ <span class="ckt-bg-font">当天出库量(吨)</span>
|
|
7
|
+ <div class="ckt-szk-bg">70</div>
|
|
8
|
+ <span class="ckt-bg-little"
|
|
9
|
+ >较昨日增长<span class="zcColor">15.9%</span
|
|
10
|
+ ><img src="./image/zezhang.png"
|
|
11
|
+ /></span>
|
|
12
|
+ </div>
|
|
13
|
+ <div class="rkt-bg">
|
|
14
|
+ <span class="rkt-bg-font">当天入库量(吨)</span>
|
|
15
|
+ <div class="rkt-szk-bg">80</div>
|
|
16
|
+ <span class="rkt-bg-little"
|
|
17
|
+ >较昨日降低<span class="jdColor">15.9%</span
|
|
18
|
+ ><img src="./image/jiangdi.png"
|
|
19
|
+ /></span>
|
|
20
|
+ </div>
|
47
|
21
|
</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 id="myChart" :style="{ width: '400px', height: '250px' }"></div>
|
53
|
|
- </div>
|
54
|
|
- <div class="page-content right-content">
|
55
|
|
- <span class="content-title">库区报警排名</span>
|
|
22
|
+
|
|
23
|
+ <div class="kck-content">
|
|
24
|
+ <div class="kck-content-out">
|
|
25
|
+ <span class="kck-content-in-1"
|
|
26
|
+ >总仓容<span class="kck-content-num1">100</span>吨</span
|
|
27
|
+ >
|
|
28
|
+ <span class="kck-content-in-2"
|
|
29
|
+ >已用<span class="kck-content-num2">70</span>吨</span
|
|
30
|
+ >
|
|
31
|
+ <span class="kck-content-in-3"
|
|
32
|
+ >剩余可用<span class="kck-content-num3">30</span>吨</span
|
|
33
|
+ >
|
|
34
|
+ </div>
|
56
|
35
|
</div>
|
57
|
|
- </el-row>
|
|
36
|
+ <fjmap></fjmap>
|
|
37
|
+ <!-- <div id="map-content" class="echarts-map"></div> -->
|
|
38
|
+ </div>
|
|
39
|
+ <!-- <el-row class="content"> -->
|
|
40
|
+ <div class="page-content left-content">
|
|
41
|
+ <span class="content-title">报警待处理</span>
|
|
42
|
+ <el-table
|
|
43
|
+ :data="tableData"
|
|
44
|
+ class="table-content"
|
|
45
|
+ @row-click="jumpDetails"
|
|
46
|
+ :row-class-name="tableRowClassName"
|
|
47
|
+ >
|
|
48
|
+ <el-table-column
|
|
49
|
+ prop="ckmc"
|
|
50
|
+ align="center"
|
|
51
|
+ label="仓库名称"
|
|
52
|
+ show-overflow-tooltip
|
|
53
|
+ >
|
|
54
|
+ <template slot-scope="scope">
|
|
55
|
+ <img class="ckmcImg" src="./image/bjck.png" />
|
|
56
|
+ <span>{{ scope.row.ckmc }}</span>
|
|
57
|
+ </template>
|
|
58
|
+ </el-table-column>
|
|
59
|
+ <el-table-column
|
|
60
|
+ prop="cfmc"
|
|
61
|
+ label="仓房名称"
|
|
62
|
+ align="center"
|
|
63
|
+ show-overflow-tooltip
|
|
64
|
+ ></el-table-column>
|
|
65
|
+ <el-table-column
|
|
66
|
+ prop="bjsj"
|
|
67
|
+ label="报警时间"
|
|
68
|
+ align="center"
|
|
69
|
+ show-overflow-tooltip
|
|
70
|
+ ></el-table-column>
|
|
71
|
+ <el-table-column
|
|
72
|
+ prop="yclddsc"
|
|
73
|
+ align="center"
|
|
74
|
+ label="已处理等待时常"
|
|
75
|
+ show-overflow-tooltip
|
|
76
|
+ ></el-table-column>
|
|
77
|
+ <el-table-column align="center" label="处理">
|
|
78
|
+ <el-button
|
|
79
|
+ class="czBut"
|
|
80
|
+ type="button"
|
|
81
|
+ size="small"
|
|
82
|
+ icon="el-icon-edit"
|
|
83
|
+ >反馈</el-button
|
|
84
|
+ >
|
|
85
|
+ </el-table-column>
|
|
86
|
+ </el-table>
|
|
87
|
+ <span class="seeMore">查看更多></span>
|
|
88
|
+ </div>
|
|
89
|
+ <div class="page-content right-content">
|
|
90
|
+ <span class="content-title">通知公告</span>
|
|
91
|
+ <ul class="tzggList">
|
|
92
|
+ <li v-for="(item, index) in tzggListData" :key="index">
|
|
93
|
+ <span class="tzXyd"></span><span>{{ item.name }}</span>
|
|
94
|
+ <span class="tzggListLi">2011-10-19 11:11:11</span>
|
|
95
|
+ </li>
|
|
96
|
+ </ul>
|
|
97
|
+ <span class="seeMore">查看更多></span>
|
|
98
|
+ </div>
|
|
99
|
+ <!-- </el-row> -->
|
|
100
|
+ <!-- <el-row class="content contentX"> -->
|
|
101
|
+ <div class="page-content left-content contentX">
|
|
102
|
+ <span class="content-title">出入库数量趋势</span>
|
|
103
|
+ <el-row>
|
|
104
|
+ <el-date-picker
|
|
105
|
+ class="timeOption"
|
|
106
|
+ v-model="time"
|
|
107
|
+ type="monthrange"
|
|
108
|
+ range-separator="-"
|
|
109
|
+ start-placeholder="开始月份"
|
|
110
|
+ end-placeholder="结束月份"
|
|
111
|
+ >
|
|
112
|
+ </el-date-picker>
|
|
113
|
+ </el-row>
|
|
114
|
+
|
|
115
|
+ <div
|
|
116
|
+ class="myChart"
|
|
117
|
+ id="myChart"
|
|
118
|
+ :style="{ width: '100%', height: '82%', top: '10%' }"
|
|
119
|
+ ></div>
|
|
120
|
+ </div>
|
|
121
|
+ <div class="page-content right-content contentX">
|
|
122
|
+ <span class="content-title">库区报警排名</span>
|
|
123
|
+ <div
|
|
124
|
+ class="myChart"
|
|
125
|
+ id="myChart1"
|
|
126
|
+ :style="{ width: '100%', height: '80%' }"
|
|
127
|
+ ></div>
|
|
128
|
+ </div>
|
|
129
|
+ <!-- </el-row> -->
|
58
|
130
|
</d2-container>
|
59
|
131
|
</template>
|
60
|
132
|
|
61
|
133
|
<script>
|
|
134
|
+import fjmap from "./fjmap";
|
62
|
135
|
export default {
|
|
136
|
+ components: { fjmap },
|
63
|
137
|
data() {
|
64
|
138
|
return {
|
65
|
|
- tableData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
|
|
139
|
+ time: "",
|
|
140
|
+ tableData: [
|
|
141
|
+ {
|
|
142
|
+ ckmc: "商丘中转库",
|
|
143
|
+ cfmc: "3号仓",
|
|
144
|
+ bjsj: "2020-10-21",
|
|
145
|
+ yclddsc: "2小时",
|
|
146
|
+ },
|
|
147
|
+ {
|
|
148
|
+ ckmc: "商丘中转库",
|
|
149
|
+ cfmc: "5号仓",
|
|
150
|
+ bjsj: "2020-10-22",
|
|
151
|
+ yclddsc: "5小时",
|
|
152
|
+ },
|
|
153
|
+ ],
|
66
|
154
|
tzggListData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
|
67
|
155
|
};
|
68
|
156
|
},
|
|
157
|
+ created() {},
|
|
158
|
+ mounted() {
|
|
159
|
+ //出入库数量趋势
|
|
160
|
+ this.drawLine();
|
|
161
|
+ //库区报警排名
|
|
162
|
+ this.drawBar();
|
|
163
|
+ },
|
69
|
164
|
methods: {
|
70
|
165
|
jumpDetails() {},
|
71
|
166
|
tableRowClassName({ row, rowIndex }) {
|
|
@@ -75,19 +170,138 @@ export default {
|
75
|
170
|
return "two-row";
|
76
|
171
|
}
|
77
|
172
|
},
|
|
173
|
+ drawBar() {
|
|
174
|
+ let myChart = this.$echarts.init(document.getElementById("myChart1"));
|
|
175
|
+ // 绘制图表
|
|
176
|
+ myChart.setOption({
|
|
177
|
+ tooltip: {
|
|
178
|
+ trigger: "axis",
|
|
179
|
+ backgroundColor: "rgba(21, 96, 176, 0.5)",
|
|
180
|
+ borderColor: "#7dc9de",
|
|
181
|
+ textStyle: {
|
|
182
|
+ color: "dafaff",
|
|
183
|
+ },
|
|
184
|
+ axisPointer: {
|
|
185
|
+ type: "shadow",
|
|
186
|
+ },
|
|
187
|
+ },
|
|
188
|
+ legend: {
|
|
189
|
+ textStyle: {
|
|
190
|
+ color: "#dafaff",
|
|
191
|
+ },
|
|
192
|
+ },
|
|
193
|
+ grid: {
|
|
194
|
+ top: "40px",
|
|
195
|
+ left: "3%",
|
|
196
|
+ right: "4%",
|
|
197
|
+ bottom: "3%",
|
|
198
|
+ containLabel: true,
|
|
199
|
+ },
|
|
200
|
+ xAxis: {
|
|
201
|
+ type: "value",
|
|
202
|
+ splitLine: {
|
|
203
|
+ show: true,
|
|
204
|
+ lineStyle: {
|
|
205
|
+ width: 1,
|
|
206
|
+ type: "solid",
|
|
207
|
+ color: "#0a4b88",
|
|
208
|
+ },
|
|
209
|
+ },
|
|
210
|
+ boundaryGap: [0, 0.01],
|
|
211
|
+ axisLine: {
|
|
212
|
+ lineStyle: {
|
|
213
|
+ color: "#dafaff",
|
|
214
|
+ width: 1,
|
|
215
|
+ type: "solid",
|
|
216
|
+ },
|
|
217
|
+ },
|
|
218
|
+ },
|
|
219
|
+ yAxis: {
|
|
220
|
+ type: "category",
|
|
221
|
+ splitLine: {
|
|
222
|
+ show: true,
|
|
223
|
+ lineStyle: {
|
|
224
|
+ width: 1,
|
|
225
|
+ type: "solid",
|
|
226
|
+ color: "#0a4b88",
|
|
227
|
+ },
|
|
228
|
+ },
|
|
229
|
+ axisLine: {
|
|
230
|
+ lineStyle: {
|
|
231
|
+ color: "#dafaff",
|
|
232
|
+ width: 1,
|
|
233
|
+ type: "solid",
|
|
234
|
+ },
|
|
235
|
+ },
|
|
236
|
+ data: [
|
|
237
|
+ "民权粮食储备公司",
|
|
238
|
+ "宁陵粮食储备公司",
|
|
239
|
+ "拓城粮食储备公司",
|
|
240
|
+ "虞城粮食储备公司",
|
|
241
|
+ ],
|
|
242
|
+ },
|
|
243
|
+ series: [
|
|
244
|
+ {
|
|
245
|
+ name: "逐次报警",
|
|
246
|
+ type: "bar",
|
|
247
|
+ data: [1, 2, 2, 4, 7, 3],
|
|
248
|
+ },
|
|
249
|
+ {
|
|
250
|
+ name: "总数报警",
|
|
251
|
+ type: "bar",
|
|
252
|
+ data: [1, 2, 2, 4, 7, 3],
|
|
253
|
+ },
|
|
254
|
+ {
|
|
255
|
+ name: "设备断链",
|
|
256
|
+ type: "bar",
|
|
257
|
+ data: [1, 2, 2, 4, 7, 3],
|
|
258
|
+ },
|
|
259
|
+ ],
|
|
260
|
+ });
|
|
261
|
+ },
|
78
|
262
|
drawLine() {
|
79
|
263
|
// 基于准备好的dom,初始化echarts实例
|
80
|
264
|
let myChart = this.$echarts.init(document.getElementById("myChart"));
|
81
|
265
|
// 绘制图表
|
82
|
266
|
myChart.setOption({
|
83
|
267
|
// title: { text: "在Vue中使用echarts" },
|
84
|
|
- tooltip: {},
|
|
268
|
+ tooltip: {
|
|
269
|
+ backgroundColor: "rgba(21, 96, 176, 0.5)",
|
|
270
|
+ borderColor: "#7dc9de",
|
|
271
|
+ textStyle: {
|
|
272
|
+ color: "dafaff",
|
|
273
|
+ },
|
|
274
|
+ },
|
85
|
275
|
legend: {
|
86
|
276
|
data: ["出库", "入库"],
|
|
277
|
+ textStyle: {
|
|
278
|
+ color: "#dafaff",
|
|
279
|
+ },
|
|
280
|
+ },
|
|
281
|
+ grid: {
|
|
282
|
+ top: "40px",
|
87
|
283
|
},
|
88
|
284
|
xAxis: {
|
89
|
285
|
type: "category",
|
90
|
286
|
boundaryGap: false,
|
|
287
|
+ splitLine: {
|
|
288
|
+ show: true,
|
|
289
|
+ lineStyle: {
|
|
290
|
+ width: 1,
|
|
291
|
+ type: "solid",
|
|
292
|
+ color: "#0a4b88",
|
|
293
|
+ },
|
|
294
|
+ },
|
|
295
|
+ axisLine: {
|
|
296
|
+ lineStyle: {
|
|
297
|
+ color: "#dafaff",
|
|
298
|
+ width: 1,
|
|
299
|
+ type: "solid",
|
|
300
|
+ },
|
|
301
|
+ },
|
|
302
|
+ axisLabel: {
|
|
303
|
+ interval: 0,
|
|
304
|
+ },
|
91
|
305
|
data: [
|
92
|
306
|
"1月",
|
93
|
307
|
"2月",
|
|
@@ -103,7 +317,24 @@ export default {
|
103
|
317
|
"12月",
|
104
|
318
|
],
|
105
|
319
|
},
|
106
|
|
- yAxis: { type: "value" },
|
|
320
|
+ yAxis: {
|
|
321
|
+ type: "value",
|
|
322
|
+ splitLine: {
|
|
323
|
+ show: true,
|
|
324
|
+ lineStyle: {
|
|
325
|
+ width: 1,
|
|
326
|
+ type: "solid",
|
|
327
|
+ color: "#0a4b88",
|
|
328
|
+ },
|
|
329
|
+ },
|
|
330
|
+ axisLine: {
|
|
331
|
+ lineStyle: {
|
|
332
|
+ color: "#dafaff",
|
|
333
|
+ width: 1,
|
|
334
|
+ type: "solid",
|
|
335
|
+ },
|
|
336
|
+ },
|
|
337
|
+ },
|
107
|
338
|
series: [
|
108
|
339
|
{
|
109
|
340
|
name: "出库",
|
|
@@ -123,10 +354,6 @@ export default {
|
123
|
354
|
});
|
124
|
355
|
},
|
125
|
356
|
},
|
126
|
|
- created() {},
|
127
|
|
- mounted() {
|
128
|
|
- this.drawLine();
|
129
|
|
- },
|
130
|
357
|
};
|
131
|
358
|
</script>
|
132
|
359
|
|
|
@@ -135,16 +362,22 @@ export default {
|
135
|
362
|
width: 100%;
|
136
|
363
|
height: 100%;
|
137
|
364
|
color: #dafaff;
|
138
|
|
- background-image: url("./image/bg.png") no-repeat;
|
|
365
|
+ background: url("./image/bg.png") center no-repeat;
|
|
366
|
+ background-size: 100%;
|
|
367
|
+ ::v-deep.el-button--small,
|
|
368
|
+ .el-button--small.is-round {
|
|
369
|
+ padding: 7px 15px;
|
|
370
|
+ }
|
139
|
371
|
::v-deep.el-table::before {
|
140
|
372
|
background-color: #042c59 !important;
|
141
|
373
|
}
|
142
|
374
|
::v-deep.el-table td.el-table__cell,
|
143
|
375
|
::v-deep.el-table th.el-table__cell.is-leaf {
|
144
|
376
|
border: 0px !important;
|
|
377
|
+ padding: 5px 0px;
|
145
|
378
|
}
|
146
|
379
|
::v-deep.el-table th.el-table__cell {
|
147
|
|
- background-color: #042c59;
|
|
380
|
+ background-color: #1460b0;
|
148
|
381
|
}
|
149
|
382
|
::v-deep.el-table--enable-row-hover
|
150
|
383
|
.el-table__body
|
|
@@ -164,7 +397,7 @@ export default {
|
164
|
397
|
}
|
165
|
398
|
::v-deep.el-table .two-row {
|
166
|
399
|
background-color: #063c67 !important;
|
167
|
|
- color: #dafaff;
|
|
400
|
+ color: #f7feff;
|
168
|
401
|
}
|
169
|
402
|
.table-content {
|
170
|
403
|
width: 98%;
|
|
@@ -188,6 +421,7 @@ export default {
|
188
|
421
|
margin-top: 4%;
|
189
|
422
|
}
|
190
|
423
|
.page-content {
|
|
424
|
+ position: relative;
|
191
|
425
|
width: 35%;
|
192
|
426
|
min-width: 350px;
|
193
|
427
|
height: 100%;
|
|
@@ -195,10 +429,14 @@ export default {
|
195
|
429
|
background-size: 100% 100%;
|
196
|
430
|
}
|
197
|
431
|
.right-content {
|
|
432
|
+ height: 45%;
|
|
433
|
+ min-height: 300px;
|
198
|
434
|
margin-right: -20px;
|
199
|
435
|
float: right;
|
200
|
436
|
}
|
201
|
437
|
.left-content {
|
|
438
|
+ height: 45%;
|
|
439
|
+ min-height: 300px;
|
202
|
440
|
float: left;
|
203
|
441
|
}
|
204
|
442
|
.tzggList {
|
|
@@ -206,19 +444,210 @@ export default {
|
206
|
444
|
padding: 0;
|
207
|
445
|
}
|
208
|
446
|
.tzggList li {
|
209
|
|
- margin: 5px;
|
210
|
|
- padding-left: 10px;
|
|
447
|
+ margin: 0 5px;
|
|
448
|
+ padding-left: 20px;
|
211
|
449
|
list-style: none;
|
212
|
450
|
padding-right: 10px;
|
213
|
451
|
height: 40px;
|
214
|
452
|
line-height: 40px;
|
215
|
453
|
border-bottom: 1px solid #1460b0;
|
216
|
454
|
}
|
|
455
|
+ .tzggList li:hover {
|
|
456
|
+ background: #1460af;
|
|
457
|
+ // border-bottom: 1px solid #1460b0;
|
|
458
|
+ border-radius: 25px;
|
|
459
|
+ }
|
217
|
460
|
.tzggListLi {
|
218
|
461
|
float: right;
|
219
|
462
|
}
|
220
|
|
- #myChart {
|
|
463
|
+ .myChart {
|
|
464
|
+ margin: 0 auto;
|
|
465
|
+ color: #f7feff;
|
|
466
|
+ }
|
|
467
|
+ .mapPosition {
|
|
468
|
+ width: 30%;
|
221
|
469
|
margin: 0 auto;
|
|
470
|
+ min-width: 400px;
|
|
471
|
+ height: 92%;
|
|
472
|
+ position: absolute;
|
|
473
|
+ left: 36%;
|
|
474
|
+ right: center;
|
|
475
|
+ }
|
|
476
|
+ .echarts-map {
|
|
477
|
+ min-width: 30px;
|
|
478
|
+ min-height: 30px;
|
|
479
|
+ width: 100%;
|
|
480
|
+ height: 100%;
|
|
481
|
+ }
|
|
482
|
+ .kck-content {
|
|
483
|
+ font-size: 14px;
|
|
484
|
+ width: 91%;
|
|
485
|
+ height: 50px;
|
|
486
|
+ margin: 5% 0 0 4%;
|
|
487
|
+ float: left;
|
|
488
|
+ background: url("./image/crbg.png") no-repeat;
|
|
489
|
+ background-size: 100% 100%;
|
|
490
|
+ background-position: center;
|
|
491
|
+ }
|
|
492
|
+ .kck-content-out {
|
|
493
|
+ text-align: center;
|
|
494
|
+ line-height: 47px;
|
|
495
|
+ }
|
|
496
|
+ .kck-content-in-2 {
|
|
497
|
+ margin: 0 15px;
|
|
498
|
+ }
|
|
499
|
+ .kck-content-num1 {
|
|
500
|
+ margin: 0 5px;
|
|
501
|
+ font-size: 20px;
|
|
502
|
+ font-weight: bold;
|
|
503
|
+ }
|
|
504
|
+ .kck-content-num2 {
|
|
505
|
+ display: inline-block;
|
|
506
|
+ width: 35px;
|
|
507
|
+ height: 22px;
|
|
508
|
+ line-height: 22px;
|
|
509
|
+ background: url("./image/szkBlue.png") no-repeat;
|
|
510
|
+ background-size: 100%;
|
|
511
|
+ letter-spacing: 12px;
|
|
512
|
+ padding-left: 6px;
|
|
513
|
+ }
|
|
514
|
+ .kck-content-num3 {
|
|
515
|
+ display: inline-block;
|
|
516
|
+
|
|
517
|
+ width: 35px;
|
|
518
|
+ height: 22px;
|
|
519
|
+ line-height: 22px;
|
|
520
|
+ background: url("./image/szkBlue.png") no-repeat;
|
|
521
|
+ background-size: 100% 100%;
|
|
522
|
+ letter-spacing: 12px;
|
|
523
|
+ padding-left: 6px;
|
|
524
|
+ }
|
|
525
|
+ .ckt-bg {
|
|
526
|
+ position: relative;
|
|
527
|
+ width: 190px;
|
|
528
|
+ height: 100px;
|
|
529
|
+ float: left;
|
|
530
|
+ background: url("./image/ckl.png") no-repeat;
|
|
531
|
+ background-size: 100% 100%;
|
|
532
|
+ }
|
|
533
|
+ .rkt-bg {
|
|
534
|
+ width: 190px;
|
|
535
|
+ height: 100px;
|
|
536
|
+ float: right;
|
|
537
|
+ background: url("./image/rkl.png") no-repeat;
|
|
538
|
+ background-size: 100% 100%;
|
|
539
|
+ }
|
|
540
|
+ .czBut {
|
|
541
|
+ color: #dafaff;
|
|
542
|
+ background-color: #142f66;
|
|
543
|
+ border: 1.5px solid #4a95be;
|
|
544
|
+ border-radius: 7px;
|
|
545
|
+ }
|
|
546
|
+ .czBut:hover {
|
|
547
|
+ color: #dafaff;
|
|
548
|
+ background-color: #3d8ee9;
|
|
549
|
+ border: 1.5px solid #4a95be;
|
|
550
|
+ border-radius: 7px;
|
|
551
|
+ }
|
|
552
|
+ .ckmcImg {
|
|
553
|
+ width: 17px;
|
|
554
|
+ margin: 0px 10px 0 -5px;
|
|
555
|
+ }
|
|
556
|
+ .seeMore {
|
|
557
|
+ font-size: 14px;
|
|
558
|
+ position: absolute;
|
|
559
|
+ bottom: 10px;
|
|
560
|
+ right: 0px;
|
|
561
|
+ margin: 10px 20px;
|
|
562
|
+ cursor: pointer;
|
|
563
|
+ }
|
|
564
|
+ .tzXyd {
|
|
565
|
+ background: #dafaff;
|
|
566
|
+ display: inline-block;
|
|
567
|
+ width: 7px;
|
|
568
|
+ height: 7px;
|
|
569
|
+ border-radius: 50%;
|
|
570
|
+ margin-right: 10px;
|
|
571
|
+ }
|
|
572
|
+ .ckt-szk-bg {
|
|
573
|
+ position: absolute;
|
|
574
|
+ width: 35px;
|
|
575
|
+ height: 22px;
|
|
576
|
+ left: 100px;
|
|
577
|
+ top: 50px;
|
|
578
|
+ background: url("./image/szkBlue.png") no-repeat;
|
|
579
|
+ background-size: 100% 100%;
|
|
580
|
+ letter-spacing: 12px;
|
|
581
|
+ padding-left: 6px;
|
|
582
|
+ }
|
|
583
|
+ .rkt-szk-bg {
|
|
584
|
+ position: absolute;
|
|
585
|
+ width: 35px;
|
|
586
|
+ height: 22px;
|
|
587
|
+ right: 100px;
|
|
588
|
+ top: 50px;
|
|
589
|
+ background: url("./image/szkGreen.png") no-repeat;
|
|
590
|
+ background-size: 100% 100%;
|
|
591
|
+ letter-spacing: 12px;
|
|
592
|
+ padding-left: 6px;
|
|
593
|
+ }
|
|
594
|
+ .rkt-bg-font {
|
|
595
|
+ font-size: 14px;
|
|
596
|
+ position: absolute;
|
|
597
|
+ right: 70px;
|
|
598
|
+ top: 23px;
|
|
599
|
+ }
|
|
600
|
+ .ckt-bg-font {
|
|
601
|
+ font-size: 14px;
|
|
602
|
+ position: absolute;
|
|
603
|
+ left: 70px;
|
|
604
|
+ top: 23px;
|
|
605
|
+ }
|
|
606
|
+ .ckt-bg-little {
|
|
607
|
+ font-size: 12px;
|
|
608
|
+ position: absolute;
|
|
609
|
+ left: 60px;
|
|
610
|
+ top: 79px;
|
|
611
|
+ }
|
|
612
|
+ .rkt-bg-little {
|
|
613
|
+ font-size: 12px;
|
|
614
|
+ position: absolute;
|
|
615
|
+ right: 40px;
|
|
616
|
+ top: 79px;
|
|
617
|
+ }
|
|
618
|
+ .zcColor {
|
|
619
|
+ margin-right: 5px;
|
|
620
|
+ color: #19d606;
|
|
621
|
+ }
|
|
622
|
+ .jdColor {
|
|
623
|
+ margin-right: 5px;
|
|
624
|
+ color: #ff8ca7;
|
|
625
|
+ }
|
|
626
|
+ .timeOption {
|
|
627
|
+ position: absolute;
|
|
628
|
+ width: 187px;
|
|
629
|
+ right: 20px;
|
|
630
|
+ height: 28px;
|
|
631
|
+ background-color: #142f66;
|
|
632
|
+ padding: 0;
|
|
633
|
+ margin: -16px 0 0 0;
|
|
634
|
+ }
|
|
635
|
+ ::v-deep.el-date-editor .el-range__icon {
|
|
636
|
+ font-size: 12px;
|
|
637
|
+ margin-left: 5px;
|
|
638
|
+ color: #f7feff;
|
|
639
|
+ float: left;
|
|
640
|
+ line-height: 26px;
|
|
641
|
+ }
|
|
642
|
+ ::v-deep.el-range-editor .el-range-input {
|
|
643
|
+ background: #142f66;
|
|
644
|
+ font-size: 12px;
|
|
645
|
+ }
|
|
646
|
+ ::v-deep.el-date-editor .el-range-separator {
|
|
647
|
+ padding: 0 5px;
|
|
648
|
+ line-height: 25px;
|
|
649
|
+ width: 5%;
|
|
650
|
+ color: #f7feff;
|
222
|
651
|
}
|
223
|
652
|
// .btn-group {
|
224
|
653
|
// color: $color-text-placehoder;
|