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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
| <template>
| <div class="manholeCoverWarning">
| <div class="header">
| <span class="title1">景区事件</span>
| </div>
| <div class="content" v-if="conshow === 0">
| <dv-scroll-board :config="config" style="width:100%;height:100%" />
| </div>
| </div>
| </template>
|
| <script>
| export default {
| name: "EventsPopular",
| data() {
| return {
| config: {
| align: ['center', 'center', 'center'],
| header: ['事件类型', '发生地点', '发生时间', '当前状态'],
| headerBGC: 'rgba(5,32,74,0.64)',
| oddRowBGC: 'rgba(35,96,166,0.45)',
| evenRowBGC: 'rgba(0,0,0,0)',
| data: [
| [
| "摄像头损坏",
| "大唐芙蓉园",
| "1",
| "未处理",
| ],
| [
| "园区失火",
| "大雁塔",
| "2",
| "进行中",
| ],
| [
| "踩踏事件",
| "回民街",
| "3",
| "已解决",
| ],
| [
| "游客冲突",
| "钟鼓楼",
| "4",
| "派遣中",
| ],
| [
| "民事纠纷",
| "小寨商业区",
| "5",
| "已解决",
| ],
| [
| "孩童溺水",
| "浐灞",
| "6",
| "已解决",
| ],
| [
| "偷窃",
| "兵马俑",
| "7",
| "已解决",
| ],
| [
| "孩童走失",
| "清华池",
| "8",
| "已解决",
| ],
| [
| "游客失足",
| "华山",
| "9",
| "进行中",
| ],
| [
| "动物出笼",
| "秦岭野生动物园",
| "10",
| "已解决",
| ]
| ]
| },
| conshow: 0,
| }
| },
| methods: {
| },
| watch: {
| "$store.state.echartsUpdata": function (newValue, oldValue) {
| this.conshow = 1
| setTimeout(() => {
| this.conshow = 0
| }, 100);
| }
| },
| }
|
|
|
| </script>
|
| <style lang="scss" scoped>
| .manholeCoverWarning {
| width: 100%;
| height: 33%;
| display: flex;
| flex-direction: column;
| align-items: center;
|
| .header {
| width: 304px;
| height: 27.5px;
| margin-left: 20px;
| margin-top: 20px;
| background-image: url("~@/assets/img/menuTitle1.png");
| background-repeat: no-repeat;
| background-size: 100% 100%;
| font-family: PangMenZhengDao;
| text-shadow: 0px 6px 9px #20618e;
| display: flex;
| flex-direction: row;
| align-items: center;
| flex-shrink: 0;
| align-self: flex-start;
|
| .title1 {
| margin-left: 30px;
| font-size: 15px;
| color: #ffffff;
| }
| }
|
| .content {
| width: calc(100% - 40px);
| height: 100%;
| margin-top: 20px;
| }
| }
| </style>
|
|
