1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <template>
| <div class="map-mode-change flexbox flex-space-between fy-container">
| <template v-for="(item, index) in menu" :key="index">
| <a :class="btnClz(item.selected)" @click="navTo(index)">
| <div>{{ item.name }}</div>
| </a>
| </template>
| <!-- <a class="mode-btn btn-selected">
| <div>污染溯源</div>
| </a>
| <a class="mode-btn btn-unselected margin-left-8">
| <div>走航监测</div>
| </a>
| <a class="mode-btn btn-unselected margin-left-8">
| <div>网格化监测</div>
| </a> -->
| <!-- <div class="flexbox-col">
| <a id="btn_more" class="btn-unselected margin-left-8">
| <div id="mode_selected">其他模式</div>
| </a>
| <div
| id="mode_others"
| class="flexbox-col"
| style="display: none; position: absolute; margin-top: 40px"
| >
| <a id="btn_gridmonitor" class="mode-btn mode-btn-other btn-unselected margin-left-8">
| <div>网格化监测</div>
| </a>
| <a id="btn_electricity" class="mode-btn mode-btn-other btn-unselected margin-left-8">
| <div>用电量监测</div>
| </a>
| <a id="btn_weight" class="mode-btn mode-btn-other btn-unselected margin-left-8">
| <div>风险模型</div>
| </a>
| </div>
| </div> -->
| </div>
| </template>
|
| <script>
| export default {
| data() {
| return {
| menu: [
| {
| name: '污染溯源',
| path: 'hmode',
| selected: true
| },
| {
| name: '走航监测',
| path: 'rmode'
| },
| {
| name: '网格化监测',
| path: 'gridmonitor'
| }
| // {
| // name: '用电量监测',
| // path: 'emode'
| // },
| // {
| // name: '风险模型',
| // path: 'riskmode'
| // },
| ]
| };
| },
| computed: {},
| methods: {
| btnClz(selected) {
| return 'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8';
| },
| navTo(index) {
| const m = this.menu;
| m.forEach((e) => {
| e.selected = false;
| });
| m[index].selected = true;
| this.$router.push(m[index].path);
| }
| }
| };
| </script>
| <style scoped></style>
|
|
