From 7ed500a5a958e50a4d66fefc48b1366245ffbc44 Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期四, 06 三月 2025 17:58:54 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
admin/src/views/business/dangerStatic.vue | 206 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 185 insertions(+), 21 deletions(-)
diff --git a/admin/src/views/business/dangerStatic.vue b/admin/src/views/business/dangerStatic.vue
index 49d5e6d..c4e2116 100644
--- a/admin/src/views/business/dangerStatic.vue
+++ b/admin/src/views/business/dangerStatic.vue
@@ -3,7 +3,7 @@
<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-group v-model="filters.fastdate" size="small" @input="changeRadio">
<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>
@@ -13,11 +13,11 @@
<div class="main_content">
<div class="type_wrap">
<div class="title">闅愭偅绫诲瀷缁熻</div>
- <div class="type" ref="typeRef"></div>
+ <div class="echart1" ref="typeRef"></div>
</div>
<div class="dept_wrap">
<div class="title">闅愭偅褰掑睘閮ㄩ棬缁熻</div>
- <div class="dept" ref="deptRef"></div>
+ <div class="echart2" ref="deptRef"></div>
</div>
</div>
</div>
@@ -25,14 +25,20 @@
<script>
import QueryForm from '@/components/common/QueryForm'
-import echarts from 'echarts'
+import * as echarts from 'echarts'
+import { hiddenDangerDataPost } from '@/api/business/hiddenDanger'
+import dayjs from 'dayjs'
export default {
components: {
QueryForm,
},
data() {
return {
- filters: {},
+ filters: {
+ fastdate: '0',
+ queryStartTime: '',
+ queryEndTime: ''
+ },
queryFormConfig: {
formItems: [
{
@@ -40,16 +46,14 @@
type: 'select',
label: '鐘舵��',
options: [
- { label: '璁垮鐢宠', value: '0' },
- { label: '璁垮鎶ュ', value: '1' },
- { label: '鐢ㄨ溅鐢宠', value: '2' },
- { label: '闅愭偅闅忔墜鎷�', value: '3' },
- { label: '鐗╂祦杞︾敵璇�', value: '6' }
+ { label: '寰呭鐞�', value: '0' },
+ { label: '宸插鐞�', value: '1' },
+ { label: '涓嶅鐞�', value: '2' },
]
},
{
- filed1: 'startDate',
- filed2: 'endDate',
+ filed1: 'queryStartTime',
+ filed2: 'queryEndTime',
type: 'datetime',
label: '鎻愭姤鏃堕棿'
},
@@ -61,17 +65,167 @@
],
online: true
},
+ typeList: [],
+ deptList: [],
}
},
+ mounted() {
+ this.changeRadio('0')
+ },
methods: {
- getData(page) {
- console.log(this.filters)
+ changeRadio(day) {
+ const arr = [dayjs().subtract(day, 'day').format('YYYY-MM-DD') + ' 00:00:00', dayjs().format('YYYY-MM-DD') + ' 23:59:59']
+ this.filters.queryStartTime = arr[0]
+ this.filters.queryEndTime = arr[1]
+ this.getData()
},
- changeForm(form) {
- console.log(form)
+ getData(page) {
+ hiddenDangerDataPost({ ...this.filters }).then(res => {
+ if (res) {
+ this.typeList = res.cateList || []
+ this.deptList = res.departmentList || []
+ this.initType()
+ this.initDept()
+ }
+ })
+
+ },
+ changeForm(e) {
+ this.getData()
+ },
+ initType() {
+ const myChart = echarts.init(document.querySelector('.echart1'))
+ let total = 0
+ this.typeList.forEach(i => {
+ total += i.total
+ })
+ let colors = ['#d75a44', '#e39f4d', '#7ac7f6', '#7ac7f6', '#4469ee', '#698af0', '#9fb5f4', '#b6c7f7', '#c8d5f8']
+ let option = {
+ title: [
+ {
+ text: '闅愭偅鎬绘暟',
+ top: '46%',
+ left: '46%',
+ textStyle: {
+ color: '#666666',
+ fontSize: 16,
+ },
+ }, {
+ text: total,
+ top: '50%',
+ left: '48%',
+ textStyle: {
+ color: '#080404',
+ fontSize: 24,
+ fontWeight: 'bold',
+ },
+ }],
+ legend: {
+ left: 'center',
+ bottom: '8%',
+ itemGap: 30,
+ itemWidth: 30,
+ icon: 'circle',
+ formatter: (name) => {
+ const item = this.typeList.filter((item) => item.name === name)[0]
+
+ if (item) {
+ return ` ${name} ${item.total} | ${item.rata}%`
+ } else {
+ return ` ${name} 0 | 0%`
+ }
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['28%', '46%'],
+ label: {
+ formatter: "{a|{b}}\n\n{c} | {d}%",
+ rich: {
+ a: {
+ color: '#333333',
+ fontSize: 14,
+ fontWeight: 500
+ }
+ }
+ },
+ labelLine: {
+ showAbove: true,
+ show: true,
+ length: 24,
+ length2: 64,
+ lineStyle: {
+ width: 2 // 绾挎潯瀹藉害
+ }
+ },
+ data: this.typeList.map((i, index) => {
+ return {
+ value: i.total,
+ name: i.name,
+ itemStyle: {
+ color: colors[index]
+ }
+ }
+ })
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+ },
+ initDept() {
+ const myChart = echarts.init(document.querySelector('.echart2'))
+
+ let option = {
+ xAxis: {
+ type: 'category',
+ data: this.deptList.map(i => i.name),
+ axisLabel: {
+ color: '#333333',
+ fontSize: 14,
+ fontWeight: 'bold'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: '闅愭偅鏁�',
+ axisLine: {
+ show: true,
+ },
+ },
+ series: [
+ {
+ data: this.deptList.map(i => i.total),
+ type: 'bar',
+ barWidth: 40,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#d75e45' }, // 娓愬彉璧峰鑹�
+ { offset: 1, color: '#db924c' } // 娓愬彉缁堟鑹�
+ ])
+ },
+
+ label: {
+ show: true, // 鏄剧ず鏍囩
+ position: 'top', // 璁╂爣绛炬樉绀哄湪鏌卞瓙椤堕儴
+ color: '#666666', // 鏂囧瓧棰滆壊
+ fontSize: 14, // 鏂囧瓧澶у皬
+ }
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
},
clear() {
this.filters = {}
+ this.getData()
}
}
}
@@ -84,7 +238,8 @@
.main_content {
display: flex;
- height: calc(100% - 110px);
+ height: calc(100% - 100px);
+
.title {
font-weight: 600;
font-size: 16px;
@@ -96,17 +251,26 @@
.type_wrap {
flex: 5;
flex-shrink: 0;
- border: 1px solid #E5E5E5;
- height: 100%;
+ height: calc(100% - 20px);
border-right: 12px solid #f7f7f7;
+
+
+ .echart1 {
+ width: 100%;
+ height: calc(100% - 60px);
+ }
}
.dept_wrap {
flex: 4;
flex-shrink: 0;
- border: 1px solid #E5E5E5;
- height: 100%;
+ height: calc(100% - 20px);
padding-left: 20px;
+
+ .echart2 {
+ width: 100%;
+ height: calc(100% - 60px);
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3