From c3aaf28f7316cce12eec007a9f85a96cbcddeec2 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 07 五月 2025 10:34:20 +0800
Subject: [PATCH] 最新版本541200007
---
admin/src/views/business/dangerStatic.vue | 503 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 456 insertions(+), 47 deletions(-)
diff --git a/admin/src/views/business/dangerStatic.vue b/admin/src/views/business/dangerStatic.vue
index 4d5d385..d1ea42c 100644
--- a/admin/src/views/business/dangerStatic.vue
+++ b/admin/src/views/business/dangerStatic.vue
@@ -1,23 +1,76 @@
<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_app1">
+ <div class="main_head">
+ <div class="main_head_item blue">
+ <span>{{totalList.total}}</span>
+ <span>鎬婚殣鎮ｆ暟</span>
+ </div>
+ <div class="main_head_item red">
+ <span>{{totalList.waitDeal}}</span>
+ <span>寰呭鐞�</span>
+ </div>
+ <div class="main_head_item yellow">
+ <span>{{totalList.dealFinish}}</span>
+ <span>宸叉暣鏀�</span>
+ </div>
+ <div class="main_head_item orange">
+ <span>{{totalList.back}}</span>
+ <span>宸查��鍥�</span>
+ </div>
+ <div class="main_head_item darkBlue">
+ <span>{{totalList.todayNew}}</span>
+ <span>浠婃棩鏂板</span>
+ </div>
+ </div>
+<!-- <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 class="type" ref="typeRef"></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 class="dept" ref="deptRef"></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 class="main_table">
+ <div class="main_table_echart">
+ <div class="title">鏈勾闅愭偅瓒嬪娍</div>
+ <div id="echart3" v-if="yearList.length > 0"></div>
+ <div v-else 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="main_table_list">
+ <div class="title">鏈湀棰戠箒鍙戠敓闅愭偅鍖哄煙Top10</div>
+ <div class="list_head">
+ <div class="list_head_item">璐ｄ换閮ㄩ棬</div>
+ <div class="list_head_item">闅愭偅鍖哄煙</div>
+ <div class="list_head_item">闅愭偅鏁伴噺</div>
+ </div>
+ <div class="table_box">
+ <div class="list_content" v-for="(item, index) in departmentList" :key="index">
+ <div class="list_head_item">{{item.name}}</div>
+ <div class="list_head_item">{{item.categoryName}}</div>
+ <div class="list_head_item">{{item.total}}</div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -25,14 +78,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: '29',
+ queryStartTime: '',
+ queryEndTime: ''
+ },
queryFormConfig: {
formItems: [
{
@@ -40,16 +99,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 +118,241 @@
],
online: true
},
+ typeList: [],
+ deptList: [],
+ totalList: {
+ total: 0,
+ waitDeal: 0,
+ dealFinish: 0,
+ back: 0,
+ todayNew: 0
+ },
+ yearList: [],
+ departmentList: []
}
},
+ mounted() {
+ this.changeRadio('29')
+ this.initDept3()
+ // this.getData()
+ },
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.totalList.total = res.total || 0
+ this.totalList.waitDeal = res.waitDeal || 0
+ this.totalList.dealFinish = res.dealFinish || 0
+ this.totalList.back = res.back || 0
+ this.totalList.todayNew = res.todayNew || 0
+
+ this.yearList = res.yearList
+
+ this.departmentList = res.departmentList.slice(0, 10)
+
+ this.typeList = res.cateList || []
+ this.deptList = res.departmentList || []
+ this.$nextTick(() => {
+ this.initType()
+ this.initDept()
+ this.initDept3()
+ })
+
+ }
+ })
+
+ },
+ 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: '0%',
+ bottom: '0%',
+ top: '0%',
+ containLabel: true
+ },
+ title: [
+ {
+ text: '闅愭偅鎬绘暟',
+ top: '46%',
+ left: '45%',
+ textStyle: {
+ color: '#666666',
+ fontSize: 13,
+ },
+ }, {
+ text: total,
+ top: '50%',
+ left: '47.6%',
+ textStyle: {
+ color: '#080404',
+ fontSize: 16,
+ 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: ['34%', '50%'],
+ 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 = {
+ grid: {
+ left: '10%',
+ right: '10%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: this.deptList.map(i => i.name),
+ axisLabel: {
+ color: '#333333',
+ fontSize: 14,
+ fontWeight: 'bold'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: '闅愭偅鏁�',
+ minInterval: 1,
+ 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()
+ })
+ },
+ initDept3() {
+ if (this.yearList.length === 0) return
+
+ const myChart = echarts.init(document.querySelector('#echart3'))
+
+ let names = this.yearList.map(item => item.name)
+ let datas = this.yearList.map(item => item.total)
+
+ let option = {
+ grid: {
+ left: '5%',
+ right: '10%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: names
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: datas,
+ type: 'line'
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
},
clear() {
this.filters = {}
+ this.getData()
}
}
}
@@ -81,32 +362,160 @@
/*.main_app {
height: 100%;
}*/
-
-.main_content {
- display: flex;
- height: calc(100% - 110px);
- .title {
- font-weight: 600;
- font-size: 16px;
- color: #222222;
+.main_app1 {
+ width: 100%;
+ height: calc(100% - 44px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 15px;
+ box-sizing: border-box;
+ background-color: #ffffff;
+ .main_head {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
margin-bottom: 20px;
- margin-top: 20px;
+ .blue {
+ border-left: 5px solid blue;
+ }
+ .red {
+ border-left: 5px solid red;
+ }
+ .yellow {
+ border-left: 5px solid yellow;
+ }
+ .orange {
+ border-left: 5px solid orange;
+ }
+ .darkBlue {
+ border-left: 5px solid #0000a8;
+ }
+ .main_head_item {
+ width: 19%;
+ height: 70px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ border-radius: 5px;
+ background-color: #ffffff;
+ span {
+ &:nth-child(1) {
+ font-size: 22px;
+ color: black;
+ font-weight: bold;
+ }
+ &:nth-child(2) {
+ font-size: 16px;
+ color: black;
+ }
+ }
+ }
}
- .type_wrap {
- flex: 5;
- flex-shrink: 0;
- border: 1px solid #E5E5E5;
- height: 100%;
- border-right: 12px solid #f7f7f7;
+ .main_table {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+ .main_table_echart {
+ flex: 1;
+ height: 400px;
+ .title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ }
+ #echart3 {
+ width: 100%;
+ height: calc(100% - 33px);
+ }
+ }
+ .main_table_list {
+ margin-left: 20px;
+ flex-shrink: 0;
+ width: 500px;
+ .title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ }
+ .list_head {
+ width: 100%;
+ height: 35px;
+ display: flex;
+ align-items: center;
+ background-color: #ececec;
+ margin-top: 15px;
+ .list_head_item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ color: #222222;
+ }
+ }
+ .table_box {
+ width: 100%;
+ .list_content {
+ width: 100%;
+ height: 35px;
+ display: flex;
+ align-items: center;
+ .list_head_item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ color: #222222;
+ }
+ }
+ }
+ }
}
- .dept_wrap {
- flex: 4;
- flex-shrink: 0;
- border: 1px solid #E5E5E5;
- height: 100%;
- padding-left: 20px;
+ .main_content {
+ display: flex;
+ height: 500px;
+
+ .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