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
| <template>
| <div class="main_app">
| <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getData(1)" @clear="clear"
| @changeForm='changeForm'>
| <template #fastdate>
| <el-radio-group v-model="filters.fastdate" size="small" @input="changeForm">
| <el-radio-button label="0">当天</el-radio-button>
| <el-radio-button label="6">近7天</el-radio-button>
| <el-radio-button label="29">近30天</el-radio-button>
| </el-radio-group>
| </template>
| </QueryForm>
| <div class="main_content">
| <div class="type_wrap">
| <div class="title">隐患类型统计</div>
| <div class="type" ref="typeRef"></div>
| </div>
| <div class="dept_wrap">
| <div class="title">隐患归属部门统计</div>
| <div class="dept" ref="deptRef"></div>
| </div>
| </div>
| </div>
| </template>
|
| <script>
| import QueryForm from '@/components/common/QueryForm'
| import echarts from 'echarts'
| export default {
| components: {
| QueryForm,
| },
| data() {
| return {
| filters: {},
| queryFormConfig: {
| formItems: [
| {
| filed: 'status',
| type: 'select',
| label: '状态',
| options: [
| { label: '访客申请', value: '0' },
| { label: '访客报备', value: '1' },
| { label: '用车申请', value: '2' },
| { label: '隐患随手拍', value: '3' },
| { label: '物流车申请', value: '6' }
| ]
| },
| {
| filed1: 'startDate',
| filed2: 'endDate',
| type: 'datetime',
| label: '提报时间'
| },
| {
| type: 'slot',
| filed: 'fastdate',
| label: ''
| }
| ],
| online: true
| },
| }
| },
| methods: {
| getData(page) {
| console.log(this.filters)
| },
| changeForm(form) {
| console.log(form)
| },
| clear() {
| this.filters = {}
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| /*.main_app {
| height: 100%;
| }*/
|
| .main_content {
| display: flex;
| height: calc(100% - 110px);
| .title {
| font-weight: 600;
| font-size: 16px;
| color: #222222;
| margin-bottom: 20px;
| margin-top: 20px;
| }
|
| .type_wrap {
| flex: 5;
| flex-shrink: 0;
| border: 1px solid #E5E5E5;
| height: 100%;
| border-right: 12px solid #f7f7f7;
| }
|
| .dept_wrap {
| flex: 4;
| flex-shrink: 0;
| border: 1px solid #E5E5E5;
| height: 100%;
| padding-left: 20px;
| }
| }
| </style>
|
|
