From 06b2f5be922e87d086d1d4e6cdcc2119e7d3a1a4 Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 09 七月 2025 14:36:24 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
admin/src/views/business/dangerStatic.vue | 408 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 360 insertions(+), 48 deletions(-)
diff --git a/admin/src/views/business/dangerStatic.vue b/admin/src/views/business/dangerStatic.vue
index af9f3ee..b43d2af 100644
--- a/admin/src/views/business/dangerStatic.vue
+++ b/admin/src/views/business/dangerStatic.vue
@@ -1,18 +1,40 @@
<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_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="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="">
@@ -20,10 +42,34 @@
</div>
<div class="dept_wrap">
- <div class="title">闅愭偅褰掑睘閮ㄩ棬缁熻</div>
+ <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 class="main_table">
+ <div class="main_table_echart">
+ <div class="title">鏈勾闅愭偅瓒嬪娍</div>
+ <div id="echart3" v-show="yearList.length > 0"></div>
+ <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="yearList.length === 0">
+ <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>
@@ -74,10 +120,20 @@
},
typeList: [],
deptList: [],
+ totalList: {
+ total: 0,
+ waitDeal: 0,
+ dealFinish: 0,
+ back: 0,
+ todayNew: 0
+ },
+ yearList: [],
+ departmentList: []
}
},
mounted() {
this.changeRadio('29')
+ this.initDept3()
// this.getData()
},
methods: {
@@ -90,11 +146,22 @@
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()
})
}
@@ -112,6 +179,13 @@
})
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: '闅愭偅鎬绘暟',
@@ -119,7 +193,7 @@
left: '45%',
textStyle: {
color: '#666666',
- fontSize: 16,
+ fontSize: 13,
},
}, {
text: total,
@@ -127,7 +201,7 @@
left: '47.6%',
textStyle: {
color: '#080404',
- fontSize: 24,
+ fontSize: 16,
fontWeight: 'bold',
},
}],
@@ -150,7 +224,7 @@
series: [
{
type: 'pie',
- radius: ['24%', '40%'],
+ radius: ['34%', '50%'],
label: {
formatter: "{a|{b}}\n\n{c} | {d}%",
rich: {
@@ -191,6 +265,13 @@
const myChart = echarts.init(document.querySelector('.echart2'))
let option = {
+ grid: {
+ left: '10%',
+ right: '10%',
+ bottom: '10%',
+ top: '20%',
+ containLabel: true
+ },
xAxis: {
type: 'category',
data: this.deptList.map(i => i.name),
@@ -203,9 +284,10 @@
yAxis: {
type: 'value',
name: '闅愭偅鏁�',
+ minInterval: 1,
axisLine: {
show: true,
- },
+ }
},
series: [
{
@@ -233,6 +315,97 @@
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 = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ }
+ },
+ grid: {
+ left: '5%',
+ right: '10%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: names
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 鍥涜垗浜斿叆鍒版渶杩戠殑鏁存暟
+ return Math.round(value);
+ }
+ }
+ },
+ series: [
+ {
+ data: datas,
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: '#207FF7' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: 'rgba(255,255,255,.2)' // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ }
+ }
+ },
+ lineStyle: { // 绾挎潯鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#207FF7' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#207FF7' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ width: 2 // 绾挎潯绮楃粏
+ },
+ symbol: 'circle',
+ symbolSize: 10,
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#fff',
+ color: '#207FF7'
+ },
+ smooth: false
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+ },
clear() {
this.filters = {}
this.getData()
@@ -245,42 +418,181 @@
/*.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);
+.main_app1 {
+ width: 100%;
+ height: calc(100% - 44px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 15px;
+ box-sizing: border-box;
+ background-color: #F4F7FC;
+ .main_head {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ .blue {
+ border-left: 8px solid #12BB8B;
+ }
+ .red {
+ border-left: 8px solid #F6CF46;
+ }
+ .yellow {
+ border-left: 8px solid #5DC9FB;
+ }
+ .orange {
+ border-left: 8px solid #FF9E56;
+ }
+ .darkBlue {
+ border-left: 8px solid #6B6EFF;
+ }
+ .main_head_item {
+ width: 19%;
+ height: 112px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ border-radius: 5px;
+ background: #F4F7FC;
+ span {
+ &:nth-child(1) {
+ font-weight: 600;
+ font-size: 30px;
+ color: #222222;
+ }
+ &:nth-child(2) {
+ font-weight: 400;
+ font-size: 14px;
+ color: #222222;
+ margin-top: 10px;
+ }
+ }
}
}
- .dept_wrap {
- flex: 10;
- flex-shrink: 0;
- height: calc(100% - 20px);
- padding-left: 20px;
+ .main_table {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+ .main_table_echart {
+ width: 64%;
+ height: 400px;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ .title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ }
+ #echart3 {
+ width: 100%;
+ height: calc(100% - 33px);
+ }
+ }
+ .main_table_list {
+ flex-shrink: 0;
+ width: 35%;
+ padding: 20px;
+ box-sizing: border-box;
+ background-color: #ffffff;
+ .title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ }
+ .list_head {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ background-color: #F7F7F7;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
+ margin-top: 15px;
+ .list_head_item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ color: #222222;
+ border-right: 1px solid #DFE2E8;
+ }
+ }
+ .table_box {
+ width: 100%;
+ border-bottom: 1px solid #DFE2E8;
+ .list_content {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
+ .list_head_item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ color: #222222;
+ border-right: 1px solid #DFE2E8;
+ }
+ }
+ }
+ }
+ }
- .echart2 {
- width: 100%;
- height: calc(100% - 60px);
+ .main_content {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+ height: 500px;
+ margin-bottom: 10px;
+ .title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ /*margin-bottom: 20px;*/
+ }
+
+ .type_wrap {
+ width: 49.5%;
+ flex-shrink: 0;
+ height: 100%;
+ /*border-right: 12px solid #f7f7f7;*/
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+
+ .echart1 {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .dept_wrap {
+ width: 49.5%;
+ flex-shrink: 0;
+ height: 100%;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ .echart2 {
+ width: 100%;
+ height: 100%;
+ }
}
}
}
+
</style>
--
Gitblit v1.9.3