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
| <template>
| <view>
| <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
| <template slot="center">
| <view style="color: white;">数据看板</view>
| </template>
| </u-navbar>
| <view class="donw-box"></view>
| <view class="page-main">
| <view class="box">
| <view class="title">
| <text>基础信息</text>
| </view>
| <view class="grid-box">
| <view class="grid-item">
| <view class="label">企业总数</view>
| <view>5,400</view>
| </view>
| <view class="grid-item">
| <view class="label">执法单位</view>
| <view>5,400</view>
| </view>
| <view class="grid-item">
| <view class="label">执法人员</view>
| <view>5,400</view>
| </view>
| <view class="grid-item">
| <view class="label">执法申请</view>
| <view>5,400</view>
| </view>
| <view class="grid-item">
| <view class="label">已审批</view>
| <view>5,400</view>
| </view>
| <view class="grid-item">
| <view class="label">已结束</view>
| <view>5,400</view>
| </view>
| </view>
| </view>
| <view class="box">
| <view class="title set-flex-content-between set-flex">
| <text>执法单位执法次数</text>
| <u-icon name="calendar" size="24"></u-icon>
| </view>
| <view class="number">
| <view class="date">2024-04-05 <text class="margin-text">至</text> 2024-06-14</view>
| <view class="progress-box">
| <qiun-data-charts key="11" type="bar" :opts="opts" :chartData="chartData" />
| </view>
| </view>
| </view>
| <view class="box">
| <view class="title set-flex-content-between set-flex">
| <text>企业被执法次数排行</text>
| <u-icon name="calendar" size="24"></u-icon>
| </view>
| <view class="number">
| <view class="date" style="margin-bottom: 36rpx;">2024-04-05 <text class="margin-text">至</text> 2024-06-14</view>
| <view class="list-box">
| <view class="list-item" v-for="(item,index) in listData" :key="index">
| <view class="width-set">
| <text style="margin-right: 10rpx;">{{index+1}}</text>
| <text class="company u-line-1">北京东方盈联科技有限公司</text>
| </view>
| <text class="value">54</text>
| </view>
| <view class="look-more">
| <text>查看更多</text>
| <u-icon name="arrow-right" color="#7E8596"></u-icon>
| </view>
| </view>
| </view>
| </view>
| <view class="box">
| <view class="title set-flex-content-between set-flex">
| <text>执法类型占比</text>
| <u-icon name="calendar" size="24"></u-icon>
| </view>
| <view class="number">
| <view class="date">2024-04-05 <text class="margin-text">至</text> 2024-06-14</view>
| <view class="progress-box">
| <qiun-data-charts
| type="rose"
| key="22"
| :opts="opts1"
| :chartData="chartData1"
| /> </view>
| </view>
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| data() {
| return {
| listData: [
| {
| name: '北京东方盈联科技有限公司',
| value: 54
| },
| {
| name: '北京东方盈联科技有限公司',
| value: 54
| },
| {
| name: '北京东方盈联科技有限公司',
| value: 54
| },
| {
| name: '北京东方盈联科技有限公司',
| value: 54
| }
| ],
| chartData: {},
| //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
| opts: {
| color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
| "#ea7ccc"
| ],
| padding: [15, 30, 0, 5],
| enableScroll: false,
| legend: {
| show: false
| },
| xAxis: {
| boundaryGap: "justify",
| disableGrid: false,
| min: 0,
| axisLine: false,
| max: 40
| },
| yAxis: {},
| extra: {
| bar: {
| type: "group",
| width: 10,
| meterBorde: 1,
| meterFillColor: "#FFFFFF",
| activeBgColor: "#000000",
| activeBgOpacity: 0.08,
| linearType: "custom",
| barBorderCircle: true,
| seriesGap: 2,
| categoryGap: 2
| }
| }
| },
| chartData1: {},
| opts1: {
| color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
| padding: [5,5,5,5],
| enableScroll: false,
| legend: {
| show: true,
| position: "left",
| lineHeight: 25
| },
| extra: {
| rose: {
| type: "area",
| minRadius: 50,
| activeOpacity: 0.5,
| activeRadius: 10,
| offsetAngle: 0,
| labelWidth: 15,
| border: false,
| borderWidth: 2,
| borderColor: "#FFFFFF"
| }
| }
| }
| }
| },
| onReady() {
| this.getServerData();
| this.getServerData1()
| },
| methods: {
| getServerData() {
| //模拟从服务器获取数据时的延时
| setTimeout(() => {
| //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
| let res = {
| categories: ["工商管理局", "城市管理局", "城市管理局", "城市管理局", "城市管理局", "城市管理局"],
| series: [{
| name: "目标值",
| data: [35, 36, 31, 33, 13, 34]
| }
| ]
| };
| this.chartData = JSON.parse(JSON.stringify(res));
| }, 500);
| },
| getServerData1() {
| //模拟从服务器获取数据时的延时
| setTimeout(() => {
| //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
| let res = {
| series: [
| {
| data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
| }
| ]
| };
| this.chartData1 = JSON.parse(JSON.stringify(res));
| }, 500);
| },
| }
| }
| </script>
| <style>
| page {
| background-color: #F4F4F4FF;
| }
| </style>
| <style lang="scss" scoped>
| @import "./dataLook.scss";
| </style>
|
|
