Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
a72d18e9 by renchao@pashanhoo.com
Options

style:办事效率监控样式修改

1 parent 1c379ff5
Inline Side-by-side
Showing 2 changed files with 259 additions and 259 deletions
1 /* 1 /*
2 * @Description :路由配置 2 * @Description :路由配置
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime: 2023-06-08 14:24:36 4 * @LastEditTime: 2023-06-09 09:21:27
5 */ 5 */
6 import Vue from 'vue' 6 import Vue from 'vue'
7 import Router from 'vue-router' 7 import Router from 'vue-router'
...@@ -214,7 +214,7 @@ export const asyncRoutes = [ ...@@ -214,7 +214,7 @@ export const asyncRoutes = [
214 children: [ 214 children: [
215 { 215 {
216 path: 'dictionaries', 216 path: 'dictionaries',
217 component: () => import('@/views/system/dictionaries/dictionaries.vue'), 217 component: () => import('@/views/system/dictionaries/dictionaries'),
218 name: 'dictionaries', 218 name: 'dictionaries',
219 meta: { title: '字典管理' } 219 meta: { title: '字典管理' }
220 }, 220 },
......
1 <!-- 1 <!--
2 * @Description :监控日志 2 * @Description :监控日志
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-17 15:31:58 4 * @LastEditTime: 2023-06-09 09:24:08
5 --> 5 -->
6 <template> 6 <template>
7 <!-- 监控日志 --> 7 <!-- 监控日志 -->
...@@ -44,300 +44,300 @@ ...@@ -44,300 +44,300 @@
44 </div> 44 </div>
45 </template> 45 </template>
46 <script> 46 <script>
47 import { mapGetters } from "vuex"; 47 import { mapGetters } from "vuex";
48 import efficient from "@/api/efficient"; 48 import efficient from "@/api/efficient";
49 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 49 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
50 export default { 50 export default {
51 name: "jktj", 51 name: "jktj",
52 data () { 52 data () {
53 return { 53 return {
54 // 开始日期限制 54 // 开始日期限制
55 pickerOptionsStart: { 55 pickerOptionsStart: {
56 disabledDate: (time) => { 56 disabledDate: (time) => {
57 if (this.form.endTime) { 57 if (this.form.endTime) {
58 return time.getTime() > new Date(this.form.endTime).getTime(); 58 return time.getTime() > new Date(this.form.endTime).getTime();
59 } 59 }
60 },
60 }, 61 },
61 }, 62 // 结束日期限制
62 // 结束日期限制 63 pickerOptionsEnd: {
63 pickerOptionsEnd: { 64 disabledDate: (time) => {
64 disabledDate: (time) => { 65 if (this.form.startTime) {
65 if (this.form.startTime) { 66 return time.getTime() < new Date(this.form.startTime).getTime();
66 return time.getTime() < new Date(this.form.startTime).getTime(); 67 }
67 } 68 },
68 }, 69 },
69 }, 70 form: {
70 form: { 71 startTime: getFirstDayOfSeason(),
71 startTime: getFirstDayOfSeason(), 72 endTime: timeFormat(new Date(), true),
72 endTime: timeFormat(new Date(), true), 73 },
73 }, 74 // 搜索表单
74 // 搜索表单 75 pieChartsData: [],
75 pieChartsData: [],
76 };
77 },
78 created () { },
79 mounted () {
80 this.getProcessCounts();
81 },
82 computed: {
83 ...mapGetters(["dicData"]),
84 },
85 methods: {
86 endTimeChange (val) {
87 this.form.endTime = timeFormat(new Date(val), true);
88 },
89 //查询各区县办件数量
90 async getProcessCounts () {
91 this.pieChartsData = [];
92 let { result: res } = await efficient.getProcessCounts(
93 this.form.startTime,
94 this.form.endTime
95 );
96 //获取图表配置项需要的数据
97 res.length > 0 &&
98 res.forEach((item) => {
99 this.pieChartsData.push({
100 //登记数量
101 value: item.counts,
102 //登记数量
103 name: item.recTypeName,
104 //登记类型代码
105 groupId: item.recType,
106 });
107 });
108 res.length &&
109 this.$nextTick(() => {
110 // 初始化图表
111 this.echartInit();
112 this.barChartInit(res[0].recType);
113 });
114 },
115 // 重置
116 resetForm () {
117 this.form = {
118 startTime: getFirstDayOfSeason(),
119 endTime: timeFormat(new Date(), true),
120 }; 76 };
77 },
78 created () { },
79 mounted () {
121 this.getProcessCounts(); 80 this.getProcessCounts();
122 }, 81 },
123 //玫瑰图初始化 82 computed: {
124 echartInit () { 83 ...mapGetters(["dicData"]),
125 let _this = this; 84 },
126 // 基于准备好的dom，初始化echarts实例 85 methods: {
127 let myChart = this.$echarts.init(document.getElementById("myChart")); 86 endTimeChange (val) {
128 // 绘制图表 87 this.form.endTime = timeFormat(new Date(val), true);
129 myChart.setOption({ 88 },
130 legend: { 89 //查询各区县办件数量
131 bottom: "-1%", 90 async getProcessCounts () {
132 left: "center", 91 this.pieChartsData = [];
133 textStyle: { 92 let { result: res } = await efficient.getProcessCounts(
134 color: this.BASE_API.echartTextColor, 93 this.form.startTime,
135 }, 94 this.form.endTime
136 }, 95 );
137 tooltip: { 96 //获取图表配置项需要的数据
138 trigger: "item", 97 res.length > 0 &&
139 formatter: "{b} : {c}", 98 res.forEach((item) => {
140 }, 99 this.pieChartsData.push({
141 label: { 100 //登记数量
142 color: 'inherit', 101 value: item.counts,
143 }, 102 //登记数量
144 series: [ 103 name: item.recTypeName,
145 { 104 //登记类型代码
146 name: "各业务类型办理数量", 105 groupId: item.recType,
147 type: "pie", 106 });
148 radius: [0, 250], 107 });
149 center: ["50%", "32%"], 108 res.length &&
150 roseType: "area", 109 this.$nextTick(() => {
151 itemStyle: { 110 // 初始化图表
152 borderRadius: 8, 111 this.echartInit();
112 this.barChartInit(res[0].recType);
113 });
114 },
115 // 重置
116 resetForm () {
117 this.form = {
118 startTime: getFirstDayOfSeason(),
119 endTime: timeFormat(new Date(), true),
120 };
121 this.getProcessCounts();
122 },
123 //玫瑰图初始化
124 echartInit () {
125 let _this = this;
126 // 基于准备好的dom，初始化echarts实例
127 let myChart = this.$echarts.init(document.getElementById("myChart"));
128 // 绘制图表
129 myChart.setOption({
130 legend: {
131 bottom: "-1%",
132 left: "center",
133 textStyle: {
134 color: this.BASE_API.echartTextColor,
153 }, 135 },
154 data: this.pieChartsData,
155 }, 136 },
156 ], 137 tooltip: {
157 }); 138 trigger: "item",
158 //添加点击事件 139 formatter: "{b} : {c}",
159 myChart.on("click", function (param) { 140 },
160 _this.barChartInit(param.data.groupId); 141 label: {
161 }); 142 color: 'inherit',
162 //默认选中第一个 143 },
163 let index = 1; 144 series: [
164 myChart.dispatchAction({ 145 {
165 type: "highlight", 146 name: "各业务类型办理数量",
166 seriesIndex: 0, 147 type: "pie",
167 dataIndex: 0, 148 radius: [0, 250],
168 }); 149 center: ["50%", "46%"],
169 myChart.on("mouseover", function (e) { 150 roseType: "area",
170 if (e.dataIndex != index) { 151 itemStyle: {
171 myChart.dispatchAction({ 152 borderRadius: 8,
172 type: "downplay", 153 },
173 seriesIndex: 0, 154 data: this.pieChartsData,
174 dataIndex: index, 155 },
175 }); 156 ],
176 } 157 });
177 }); 158 //添加点击事件
178 myChart.on("mouseout", function (e) { 159 myChart.on("click", function (param) {
179 index = e.dataIndex; 160 _this.barChartInit(param.data.groupId);
161 });
162 //默认选中第一个
163 let index = 1;
180 myChart.dispatchAction({ 164 myChart.dispatchAction({
181 type: "highlight", 165 type: "highlight",
182 seriesIndex: 0, 166 seriesIndex: 0,
183 dataIndex: e.dataIndex, 167 dataIndex: 0,
184 }); 168 });
185 }); 169 myChart.on("mouseover", function (e) {
186 }, 170 if (e.dataIndex != index) {
187 //柱图初始化 171 myChart.dispatchAction({
188 async barChartInit (recType) { 172 type: "downplay",
189 //请求recType对应业务的各区县数据 173 seriesIndex: 0,
190 let { result: res } = await efficient.getProcessDays( 174 dataIndex: index,
191 recType, 175 });
192 this.form.startTime, 176 }
193 this.form.endTime
194 );
195 //行政区数组
196 let xzqArr = [];
197 this.dicData["A20"].forEach((item) => {
198 xzqArr.push(item.DNAME);
199 let tempArr = res.filter((i) => {
200 return i.qxdm == item.DCODE;
201 }); 177 });
202 if (tempArr.length) { 178 myChart.on("mouseout", function (e) {
203 item.avgDay = tempArr[0].avgDay; 179 index = e.dataIndex;
204 item.maxDay = tempArr[0].maxDay; 180 myChart.dispatchAction({
205 item.minDay = tempArr[0].minDay; 181 type: "highlight",
206 } else { 182 seriesIndex: 0,
207 item.avgDay = 0; 183 dataIndex: e.dataIndex,
208 item.maxDay = 0; 184 });
209 item.minDay = 0; 185 });
210 } 186 },
211 }); 187 //柱图初始化
212 //补全无数据行政区后的结果数组 188 async barChartInit (recType) {
213 let dealArr = [...this.dicData["A20"]]; 189 //请求recType对应业务的各区县数据
214 let myChartBar = this.$echarts.init( 190 let { result: res } = await efficient.getProcessDays(
215 document.getElementById("myChart-bar") 191 recType,
216 ); 192 this.form.startTime,
217 myChartBar.setOption({ 193 this.form.endTime
218 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], 194 );
219 tooltip: { 195 //行政区数组
220 show: true, 196 let xzqArr = [];
221 trigger: "axis", 197 this.dicData["A20"].forEach((item) => {
222 textStyle: { 198 xzqArr.push(item.DNAME);
223 fontSize: 16, // 字体大小 199 let tempArr = res.filter((i) => {
224 }, 200 return i.qxdm == item.DCODE;
225 extraCssText: "width:220px;height:160px;", // 背景色 201 });
226 }, 202 if (tempArr.length) {
227 grid: { 203 item.avgDay = tempArr[0].avgDay;
228 top: 120, 204 item.maxDay = tempArr[0].maxDay;
229 }, 205 item.minDay = tempArr[0].minDay;
230 legend: { 206 } else {
231 data: ["最短用时", "平均用时", "最长用时"], 207 item.avgDay = 0;
232 top: 20, 208 item.maxDay = 0;
233 textStyle: { 209 item.minDay = 0;
210 }
211 });
212 //补全无数据行政区后的结果数组
213 let dealArr = [...this.dicData["A20"]];
214 let myChartBar = this.$echarts.init(
215 document.getElementById("myChart-bar")
216 );
217 myChartBar.setOption({
218 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
219 tooltip: {
234 show: true, 220 show: true,
235 color: this.BASE_API.echartTextColor, 221 trigger: "axis",
236 fontSize: "16", 222 textStyle: {
237 }, 223 fontSize: 16, // 字体大小
238 },
239 xAxis: [
240 {
241 type: "category",
242 data: xzqArr,
243 axisLabel: {
244 interval: 0,
245 textStyle: {
246 show: true,
247 color: this.BASE_API.echartTextColor,
248 fontSize: "16",
249 },
250 }, 224 },
225 extraCssText: "width:220px;height:160px;", // 背景色
251 }, 226 },
252 ], 227 grid: {
253 yAxis: [ 228 top: 120,
254 { 229 },
255 type: "value", 230 legend: {
256 name: "单位：天", 231 data: ["最短用时", "平均用时", "最长用时"],
257 nameTextStyle: { 232 top: 20,
258 color: this.BASE_APIechartTextColor, 233 textStyle: {
234 show: true,
235 color: this.BASE_API.echartTextColor,
259 fontSize: "16", 236 fontSize: "16",
260 }, 237 },
261 axisLabel: { 238 },
262 textStyle: { 239 xAxis: [
263 show: true, 240 {
264 color: this.BASE_API.echartTextColor, 241 type: "category",
242 data: xzqArr,
243 axisLabel: {
244 interval: 0,
245 textStyle: {
246 show: true,
247 color: this.BASE_API.echartTextColor,
248 fontSize: "16",
249 },
250 },
251 },
252 ],
253 yAxis: [
254 {
255 type: "value",
256 name: "单位：天",
257 nameTextStyle: {
258 color: this.BASE_APIechartTextColor,
265 fontSize: "16", 259 fontSize: "16",
266 }, 260 },
261 axisLabel: {
262 textStyle: {
263 show: true,
264 color: this.BASE_API.echartTextColor,
265 fontSize: "16",
266 },
267 },
267 }, 268 },
269 ],
270 label: {
271 color: 'inherit',
268 }, 272 },
269 ], 273 series: [
270 label: { 274 {
271 color: 'inherit', 275 type: "bar",
272 }, 276 //显示数值
273 series: [ 277 itemStyle: {
274 { 278 normal: {
275 type: "bar", 279 label: {
276 //显示数值 280 show: true, //开启显示
277 itemStyle: { 281 position: "top", //在上方显示
278 normal: {
279 label: {
280 show: true, //开启显示
281 position: "top", //在上方显示
282 282
283 },
283 }, 284 },
284 }, 285 },
286 barMaxWidth: "60",
287 name: "最短用时",
288 data: dealArr.map((item) => item.minDay),
285 }, 289 },
286 barMaxWidth: "60", 290 {
287 name: "最短用时", 291 type: "bar",
288 data: dealArr.map((item) => item.minDay), 292 //显示数值
289 }, 293 itemStyle: {
290 { 294 normal: {
291 type: "bar", 295 label: {
292 //显示数值 296 show: true, //开启显示
293 itemStyle: { 297 position: "top", //在上方显示
294 normal: {
295 label: {
296 show: true, //开启显示
297 position: "top", //在上方显示
298 298
299 },
299 }, 300 },
300 }, 301 },
302 barMaxWidth: "60",
303 name: "平均用时",
304 data: dealArr.map((item) => item.avgDay),
301 }, 305 },
302 barMaxWidth: "60", 306 {
303 name: "平均用时", 307 type: "bar",
304 data: dealArr.map((item) => item.avgDay), 308 //显示数值
305 }, 309 itemStyle: {
306 { 310 normal: {
307 type: "bar", 311 label: {
308 //显示数值 312 show: true, //开启显示
309 itemStyle: { 313 position: "top", //在上方显示
310 normal: {
311 label: {
312 show: true, //开启显示
313 position: "top", //在上方显示
314 314
315 },
315 }, 316 },
316 }, 317 },
318 barMaxWidth: "60",
319 name: "最长用时",
320 data: dealArr.map((item) => item.maxDay),
317 }, 321 },
318 barMaxWidth: "60", 322 ],
319 name: "最长用时", 323 });
320 data: dealArr.map((item) => item.maxDay), 324 },
321 },
322 ],
323 });
324 }, 325 },
325 }, 326 };
326 };
327 </script> 327 </script>
328 <style scoped lang="scss"> 328 <style scoped lang="scss">
329 .jktjDetail { 329 .jktjDetail {
330 flex-direction: column; 330 flex-direction: column;
331 331
332 .rows { 332 .rows {
333 margin-left: 100px; 333 margin-left: 100px;
334 } 334 }
335 335
336 .center { 336 .center {
337 line-height: 50vh; 337 line-height: 50vh;
338 text-align: center; 338 text-align: center;
339 color: #b6b5b5; 339 color: #b6b5b5;
340 }
340 } 341 }
341 }
342 </style> 342 </style>
343 343
......