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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
| <template>
| <div class="app-container">
| <div>
| <Titlename title="列表页面"></Titlename>
| <div class="whole">
| <div class="left-tree">
| <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
| </div>
| <div class="right">
| <el-form ref="form" :model="form" label-width="100px">
| <el-row>
| <el-col :span="6">
| <el-form-item label="风险点名称：">
| <el-input v-model="form.name"></el-input>
| </el-form-item>
| </el-col>
| <el-col :span="6">
| <el-form-item label="事故类型：">
| <el-input v-model="form.name"></el-input>
| </el-form-item>
| </el-col>
| <el-col :span="6">
| <el-form-item label="主要危险源：">
| <el-input v-model="form.name"></el-input>
| </el-form-item>
| </el-col>
| <el-col :span="6">
| <el-form-item>
| <el-button class="btn" type="primary" @click="onSubmit">查询</el-button>
| <el-button class="btn" type="primary">确定</el-button>
| </el-form-item>
| </el-col>
| </el-row>
| <el-table
| ref="multipleTable"
| :data="tableData"
| tooltip-effect="dark"
| style="width: 100%"
| @selection-change="handleSelectionChange">
| <el-table-column
| type="selection"
| align="center"
| width="55">
| </el-table-column>
| <el-table-column
| label="风险点"
| align="center"
| show-overflow-tooltip
| width="120">
| <template slot-scope="scope">{{ scope.row.riskPoint }}</template>
| </el-table-column>
| <el-table-column
| prop="hazardSources"
| show-overflow-tooltip
| align="center"
| label="主要危险源"
| width="120">
| </el-table-column>
| <el-table-column
| prop="accidentType"
| align="center"
| label="事故类型"
| show-overflow-tooltip>
| </el-table-column>
| <el-table-column
| prop="riskLevel"
| label="风险等级"
| align="center"
| show-overflow-tooltip>
| </el-table-column>
| <el-table-column
| prop="controlMeasures"
| label="管控措施"
| align="center"
| show-overflow-tooltip>
| </el-table-column>
| <el-table-column
| prop="controlLevel"
| align="center"
| label="管控层级"
| show-overflow-tooltip>
| </el-table-column>
| <el-table-column
| prop="responsibleUnit"
| label="责任单位"
| align="center"
| show-overflow-tooltip>
| </el-table-column>
| <el-table-column
| prop="personLiable"
| label="责任人"
| align="center"
| show-overflow-tooltip>
| </el-table-column>
| </el-table>
| </el-form>
| <div style="text-align: right">
| <el-pagination
| v-show="recordTotal > 0"
| @size-change="handleSizeChange"
| @current-change="handleCurrentChange"
| :current-page="currentPage"
| :page-sizes="[10, 20, 30, 50]"
| :page-size="pageSize"
| layout="total, sizes, prev, pager, next, jumper"
| :total="recordTotal"
| >
| </el-pagination>
| </div>
| </div>
| </div>
| </div>
|
| </div>
| </template>
|
| <script>
| import Titlename from "../../components/Titlename/index.vue";
| export default {
| components: {Titlename},
| name: "listAssociatedHazards",
| data(){
| return{
| data: [{
| label: '一级 1',
| children: [{
| label: '二级 1-1',
| children: [{
| label: '三级 1-1-1'
| }]
| }]
| }, {
| label: '一级 2',
| children: [{
| label: '二级 2-1',
| children: [{
| label: '三级 2-1-1'
| }]
| }, {
| label: '二级 2-2',
| children: [{
| label: '三级 2-2-1'
| }]
| }]
| }, {
| label: '一级 3',
| children: [{
| label: '二级 3-1',
| children: [{
| label: '三级 3-1-1'
| }]
| }, {
| label: '二级 3-2',
| children: [{
| label: '三级 3-2-1'
| }]
| }]
| }],
| defaultProps: {
| children: 'children',
| label: 'label'
| },
| form: {
| name: '',
| region: '',
| date1: '',
| date2: '',
| delivery: false,
| type: [],
| resource: '',
| desc: ''
| },
| tableData: [{
| riskPoint:'油库区动火作业',
| hazardSources:'油库区为重大危险源，储存有粗苯，焦油、洗油、碱液等危险化学品，具有爆炸危险性和腐蚀性，在油库区进行动火作业时，安全措施落实不到位，可能引起中毒和窒息、火灾、爆炸、灼烫、触电、其他伤害。',
| accidentType:'中毒和窒息、火灾、爆炸、灼烫、触电、其他伤害',
| riskLevel:'重大风险',
| controlMeasures:'1.工程技术措施：作业现场配备...',
| controlLevel:'公司级',
| responsibleUnit:'化产一车间',
| personLiable:'冉玉新',
| }, {
| riskPoint:'粗苯储槽',
| hazardSources:'粗苯极易燃烧爆炸，当粗苯在空气中达1.4-7.5%（体积）时将形成爆炸性的混合物，如果粗苯储槽泄漏，遇到明火可能造成火灾、爆炸、中毒和窒息。',
| accidentType:'火灾、爆炸、中毒和窒息',
| riskLevel:'重大风险',
| controlMeasures:'1.工程技术措施：每年做一次防...',
| controlLevel:'公司级',
| responsibleUnit:'化产一车间',
| personLiable:'侯冠秋',
| }, {
| riskPoint:'油库产品装车操作',
| hazardSources:'油库装车产品为粗苯和焦油，操作过程不当可能造成火灾、爆炸、中毒、窒息事故。油库卸车原料为洗油、碱液，操作过程中可能造成触电、其他伤害事故。',
| accidentType:'火灾、爆炸、中毒和窒息、触电、其他伤害',
| riskLevel:'重大风险',
| controlMeasures:'1.工程技术措施：配备装车静电...',
| controlLevel:'公司级',
| responsibleUnit:'化产一车间',
| personLiable:'侯冠秋',
| }],
| multipleSelection: [],
| pageSize: 10,
| recordTotal: 0,
| currentPage: 1,
| }
| },
| methods: {
| handleNodeClick(data) {
| console.log(data);
| },
| onSubmit() {
| console.log('submit!');
| },
| handleSelectionChange(val) {
| this.multipleSelection = val;
| }
| }
| }
| </script>
|
| <style scoped>
| .app-container {
| padding: 20px;
| height: 850px;
| overflow-y: auto;
| }
| .whole{
| display: flex;
| flex-direction: row;
| }
| .left-tree{
| width: 15%;
| }
| .right{
| width: 85%;
| }
| .btn{
| background-color: #034ea2;
| border: 1px solid #034ea2;
| }
| .el-button:hover {
| background: #66b1ff;
| border-color: #66b1ff;
| color: #FFF;
| }
| .el-table .cell{
| max-height: 50px;
| overflow-y: auto;
| }
| </style>
|
|
