From 69a1b3bf45738f048361ee4ccb6bdc64fce35720 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 12 三月 2025 11:31:46 +0800
Subject: [PATCH] 更新
---
admin/src/views/business/dangerStatic.vue | 293 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 293 insertions(+), 0 deletions(-)
diff --git a/admin/src/views/business/dangerStatic.vue b/admin/src/views/business/dangerStatic.vue
new file mode 100644
index 0000000..d396341
--- /dev/null
+++ b/admin/src/views/business/dangerStatic.vue
@@ -0,0 +1,293 @@
+<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="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>
+ </el-radio-group>
+ </template>
+ </QueryForm>
+ <div class="main_content">
+ <div class="type_wrap">
+ <div class="title">闅愭偅绫诲瀷缁熻</div>
+ <div v-show="typeList && typeList.length > 0" class="echart1" ref="typeRef"></div>
+ <div v-show="typeList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
+ <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">
+ </div>
+
+ </div>
+ <div class="dept_wrap">
+ <div class="title">闅愭偅褰掑睘閮ㄩ棬缁熻</div>
+ <div v-show="deptList && deptList.length > 0" class="echart2" ref="deptRef"></div>
+ <div v-show="deptList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
+ <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import QueryForm from '@/components/common/QueryForm'
+import * as echarts from 'echarts'
+import { hiddenDangerDataPost } from '@/api/business/hiddenDanger'
+import dayjs from 'dayjs'
+export default {
+ components: {
+ QueryForm,
+ },
+ data() {
+ return {
+ filters: {
+ fastdate: '29',
+ queryStartTime: '',
+ queryEndTime: ''
+ },
+ queryFormConfig: {
+ formItems: [
+ {
+ filed: 'status',
+ type: 'select',
+ label: '鐘舵��',
+ options: [
+ { label: '寰呭鐞�', value: '0' },
+ { label: '宸插鐞�', value: '1' },
+ { label: '宸查��鍥�', value: '2' },
+ ]
+ },
+ {
+ filed1: 'queryStartTime',
+ filed2: 'queryEndTime',
+ type: 'datetime',
+ label: '鎻愭姤鏃堕棿'
+ },
+ {
+ type: 'slot',
+ filed: 'fastdate',
+ label: ''
+ }
+ ],
+ online: true
+ },
+ typeList: [],
+ deptList: [],
+ }
+ },
+ mounted() {
+ this.changeRadio('29')
+ // this.getData()
+ },
+ methods: {
+ 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()
+ },
+ getData(page) {
+ hiddenDangerDataPost({ ...this.filters }).then(res => {
+ if (res) {
+ this.typeList = res.cateList || []
+ this.deptList = res.departmentList || []
+ this.$nextTick(() => {
+ 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', '#f0d05f', '#7ac7f6', '#4469ee', '#698af0','#86a2f1','#a1b4f6','#a0b5f5', '#9fb5f4', '#b6c7f7', '#c8d5f8']
+ let option = {
+ grid: {
+ left: '0%',
+ // right: '4%',
+ // bottom: '3%',
+ top: '0%',
+ containLabel: true
+ },
+ title: [
+ {
+ text: '闅愭偅鎬绘暟',
+ top: '46%',
+ left: '45%',
+ textStyle: {
+ color: '#666666',
+ fontSize: 16,
+ },
+ }, {
+ text: total,
+ top: '50%',
+ left: '47.6%',
+ 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: [
+ {
+ type: 'pie',
+ radius: ['24%', '40%'],
+ 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()
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+/*.main_app {
+ height: 100%;
+}*/
+
+.main_content {
+ display: flex;
+ height: calc(100% - 100px);
+
+ .title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ }
+
+ .type_wrap {
+ flex: 11;
+ flex-shrink: 0;
+ height: calc(100% - 20px);
+ border-right: 12px solid #f7f7f7;
+
+
+ .echart1 {
+ width: 100%;
+ height: calc(100% - 60px);
+ }
+ }
+
+ .dept_wrap {
+ flex: 10;
+ flex-shrink: 0;
+ height: calc(100% - 20px);
+ padding-left: 20px;
+
+ .echart2 {
+ width: 100%;
+ height: calc(100% - 60px);
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3