From 11e6ed41dac032fd09a793787c4747ab0d1aa9f6 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 22 四月 2025 08:05:41 +0800
Subject: [PATCH] 代码初始化
---
admin/src/views/index.vue | 147 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 126 insertions(+), 21 deletions(-)
diff --git a/admin/src/views/index.vue b/admin/src/views/index.vue
index 82aeaae..687f6f2 100644
--- a/admin/src/views/index.vue
+++ b/admin/src/views/index.vue
@@ -18,8 +18,8 @@
<!-- <img src="@/assets/images/bg_a.png" alt="" />-->
</div>
<div class="content">
-<!-- <div>鏈В鍐筹細{{ headerData.sheNum || 0}}</div>-->
-<!-- <div>宸茶В鍐筹細{{ headerData.sheNum || 0}}</div>-->
+ <div>鏈В鍐筹細{{ 0}}</div>
+ <div>宸茶В鍐筹細{{ headerData.sheNum || 0}}</div>
<div>鎬诲伐鍗曢噺锛歿{ headerData.sheNum || 0}}</div>
</div>
</div>
@@ -69,6 +69,17 @@
</div>
</div>
<div class="static_wrap">
+ <div class="df mb50" >
+ <div class="wrap static1">
+ <div class="header" style="text-align: center">
+ <div class="home_title" style="text-align: center;width: 100%">鍚勭被鍨嬪伐鍗曞崰姣旂粺璁�</div>
+ </div>
+ <div class="echart" style="height: 400px" >
+ <div id="circleChart0"></div>
+ <div id="circleChart1"></div>
+ </div>
+ </div>
+ </div>
<div class="df mb50" >
<div class="wrap static1">
<div class="header">
@@ -202,6 +213,17 @@
getWorkHead () {
getIndexData({ }).then(res => {
this.headerData = res || {}
+ var cdata = []
+ cdata.push({ name: '璺岀粖婊戜簨浠�', value: res.dbhNum || 0 })
+ cdata.push({ name: 'DCA浜嬩欢', value: res.dcaChildNum || 0 })
+ cdata.push({ name: 'SHE浜嬩欢', value: res.sheNum || 0 })
+ this.initEchartCircleDo('circleChart0', '鍚勭被鍨嬩簨浠跺伐鍗曚笂鎶ョ粺璁�', '', cdata)
+ var xdata = ['SHE浜嬩欢', '璺岀粖婊戜簨浠�', 'DCA浜嬩欢']
+ var ydata = []
+ ydata.push({ name: '宸茶В鍐�', stack: 'cateNum', type: 'bar', unit: '椤�', color: '#f07e6f', data: [res.sheNum || 0, res.dbhYesNum || 0, res.dcaChildYesNum || 0] })
+ ydata.push({ name: '鏈В鍐�', stack: 'cateNum', type: 'bar', unit: '椤�', color: '#8383ff', data: [0, res.dbhNoNum || 0, res.dcaChildNoNum || 0] })
+ ydata.push({ name: '鎬诲崟閲�', type: 'bar', unit: '娆�', color: '#29aeff', data: [res.sheNum || 0, res.dbhNum || 0, res.dcaChildNum || 0] })
+ this.initEchartDataDo('鍚勭被鍨嬩簨浠剁姸鎬佺粺璁�', 'circleChart1', xdata, ydata)
})
},
updateDate () {
@@ -210,25 +232,25 @@
},
initEchart0 () {
var ydata = [{ name: '宸ュ崟鏁伴噺', type: 'line', unit: '鍗�', color: '#29aeff', data: this.staticData0.map(i => i.total) }]
- this.initEchartDataDo('鏈堝害缁熻','echart0', this.staticData0.map(i => i.dateStr), ydata)
+ this.initEchartDataDo('鏈堝害缁熻', 'echart0', this.staticData0.map(i => i.dateStr), ydata)
},
initEchart01 () {
var ydata = [{ name: '宸ュ崟鏁伴噺', type: 'bar', unit: '鍗�', color: '#29aeff', data: this.staticData01.map(i => i.total) }]
- this.initEchartDataDo('瀛ｅ害缁熻','echart01', this.staticData01.map(i => i.dateStr), ydata)
+ this.initEchartDataDo('瀛ｅ害缁熻', 'echart01', this.staticData01.map(i => i.dateStr), ydata)
},
initEchart1 () {
var ydata = []
ydata.push({ name: '绗﹀悎椤�', type: 'line', unit: '椤�', color: '#f07e6f', data: this.staticData1.map(i => i.dcaYesTotal) })
ydata.push({ name: '涓嶇鍚堥」', type: 'line', unit: '椤�', color: '#8383ff', data: this.staticData1.map(i => i.dcaNoTotal) })
- ydata.push({ name: '涓婃姤娆℃暟', type: 'line', unit: '娆�', color: '#29aeff', data: this.staticData1.map(i => i.total) })
- this.initEchartDataDo('鏈堝害缁熻','echart1', this.staticData1.map(i => i.dateStr), ydata)
+ ydata.push({ name: '涓婃姤娆℃暟', type: 'bar', unit: '娆�', color: '#29aeff', data: this.staticData1.map(i => i.total) })
+ this.initEchartDataDo('鏈堝害缁熻', 'echart1', this.staticData1.map(i => i.dateStr), ydata)
},
initEchart11 () {
var ydata = []
- ydata.push({ name: '绗﹀悎椤�', type: 'bar', unit: '椤�', color: '#f07e6f', data: this.staticData11.map(i => i.dcaYesTotal) })
- ydata.push({ name: '涓嶇鍚堥」', type: 'bar', unit: '椤�', color: '#8383ff', data: this.staticData11.map(i => i.dcaNoTotal) })
+ ydata.push({ name: '绗﹀悎椤�', type: 'line', unit: '椤�', color: '#f07e6f', data: this.staticData11.map(i => i.dcaYesTotal) })
+ ydata.push({ name: '涓嶇鍚堥」', type: 'line', unit: '椤�', color: '#8383ff', data: this.staticData11.map(i => i.dcaNoTotal) })
ydata.push({ name: '涓婃姤娆℃暟', type: 'bar', unit: '娆�', color: '#29aeff', data: this.staticData11.map(i => i.total) })
- this.initEchartDataDo('瀛ｅ害缁熻','echart11', this.staticData11.map(i => i.dateStr), ydata)
+ this.initEchartDataDo('瀛ｅ害缁熻', 'echart11', this.staticData11.map(i => i.dateStr), ydata)
},
initEchart2 () {
var ydata = []
@@ -237,7 +259,7 @@
ydata.push({ name: 'SHE鍏抽棴鍗曢噺', type: 'line', unit: '鍗�', color: '#e75314', data: this.staticData2.map(i => i.sheTotal) })
ydata.push({ name: '鏈В鍐冲崟閲�', type: 'line', unit: '鍗�', color: '#8383ff', data: this.staticData2.map(i => i.unCloseTotal) })
ydata.push({ name: '宸ュ崟鎬婚噺', type: 'line', unit: '鍗�', color: '#30d3de', data: this.staticData2.map(i => i.total) })
- this.initEchartDataDo('鏈堝害缁熻','echart2', this.staticData2.map(i => i.dateStr), ydata)
+ this.initEchartDataDo('鏈堝害缁熻', 'echart2', this.staticData2.map(i => i.dateStr), ydata)
},
initEchart21 () {
var ydata = []
@@ -245,8 +267,8 @@
ydata.push({ name: 'WTS鍏抽棴鍗曢噺', type: 'bar', unit: '鍗�', color: '#29aeff', data: this.staticData21.map(i => i.wtsTotal) })
ydata.push({ name: 'SHE鍏抽棴鍗曢噺', type: 'bar', unit: '鍗�', color: '#e75314', data: this.staticData21.map(i => i.sheTotal) })
ydata.push({ name: '鏈В鍐冲崟閲�', type: 'bar', unit: '鍗�', color: '#8383ff', data: this.staticData21.map(i => i.unCloseTotal) })
- ydata.push({ name: '宸ュ崟鎬婚噺', type: 'bar', unit: '鍗�', color: '#30d3de', data: this.staticData21.map(i => i.total) })
- this.initEchartDataDo('瀛ｅ害缁熻','echart21', this.staticData21.map(i => i.dateStr), ydata)
+ ydata.push({ name: '宸ュ崟鎬婚噺', type: 'line', unit: '鍗�', color: '#30d3de', data: this.staticData21.map(i => i.total) })
+ this.initEchartDataDo('瀛ｅ害缁熻', 'echart21', this.staticData21.map(i => i.dateStr), ydata)
},
initEchart3 () {
var ydata = []
@@ -255,7 +277,7 @@
ydata.push({ name: 'SHE鍏抽棴鍗曢噺', type: 'line', unit: '鍗�', color: '#e75314', data: this.staticData3.map(i => i.sheTotal) })
ydata.push({ name: '鏈В鍐冲崟閲�', type: 'line', unit: '鍗�', color: '#8383ff', data: this.staticData3.map(i => i.unCloseTotal) })
ydata.push({ name: '宸ュ崟鎬婚噺', type: 'line', unit: '鍗�', color: '#30d3de', data: this.staticData3.map(i => i.total) })
- this.initEchartDataDo('鏈堝害缁熻','echart3', this.staticData3.map(i => i.dateStr), ydata)
+ this.initEchartDataDo('鏈堝害缁熻', 'echart3', this.staticData3.map(i => i.dateStr), ydata)
},
initEchart31 () {
var ydata = []
@@ -263,33 +285,59 @@
ydata.push({ name: 'WTS鍏抽棴鍗曢噺', type: 'bar', unit: '鍗�', color: 'rgba(217,4,34,0.83)', data: this.staticData31.map(i => i.wtsTotal) })
ydata.push({ name: 'SHE鍏抽棴鍗曢噺', type: 'bar', unit: '鍗�', color: '#e75314', data: this.staticData31.map(i => i.sheTotal) })
ydata.push({ name: '鏈В鍐冲崟閲�', type: 'bar', unit: '鍗�', color: '#8383ff', data: this.staticData31.map(i => i.unCloseTotal) })
- ydata.push({ name: '宸ュ崟鎬婚噺', type: 'bar', unit: '鍗�', color: '#30d3de', data: this.staticData31.map(i => i.total) })
- this.initEchartDataDo('瀛ｅ害缁熻','echart31', this.staticData31.map(i => i.dateStr), ydata)
+ ydata.push({ name: '宸ュ崟鎬婚噺', type: 'line', unit: '鍗�', color: '#30d3de', data: this.staticData31.map(i => i.total) })
+ this.initEchartDataDo('瀛ｅ害缁熻', 'echart31', this.staticData31.map(i => i.dateStr), ydata)
},
- initEchartDataDo (title,id, xdata, ydata) {
+ initEchartDataDo (title, id, xdata, ydata) {
const myChart = echarts.init(document.getElementById(id))
myChart.setOption({
title: {
- text: title || ''
+ text: (title || ''),
+ textStyle: {
+ fontSize: 12,
+ fontStyle: 'normal',
+ fontWeight: 'bold'
+ }
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
+ },
+ textStyle: {
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'normal'
}
},
- legend:{
+ legend: {
orient: 'vertical',
- left: 'right'
+ left: 'right',
+ textStyle: {
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'normal'
+ }
},
xAxis: {
type: 'category',
- boundaryGap: false,
+ // boundaryGap: false,
data: xdata
},
yAxis: {
type: 'value',
name: '',
+ min: 0,
+ axisLabel: {
+ formatter: function (value) {
+ return Number.isInteger(value) ? value : ''
+ }
+ },
+ textStyle: {
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'normal'
+ },
nameTextStyle: {
padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
},
@@ -320,6 +368,7 @@
array.push({
data: ydata[i].data,
name: ydata[i].name,
+ stack: ydata[i].stack || '',
type: ydata[i].type || 'line',
areaStyle: {
normal: {
@@ -349,7 +398,7 @@
colorStops: [{
offset: 0, color: ydata[i].color || '#207FF7' // 0% 澶勭殑棰滆壊
}, {
- offset: 1, color: ydata[i].color|| '#207FF7' // 100% 澶勭殑棰滆壊
+ offset: 1, color: ydata[i].color || '#207FF7' // 100% 澶勭殑棰滆壊
}]
},
width: 2 // 绾挎潯绮楃粏
@@ -366,6 +415,62 @@
}
return array
+ },
+ initEchartCircleDo (id, title, subTitle, data) {
+ var option = {
+ title: {
+ text: '',
+ subtext: '',
+ left: 'center',
+ bottom: 'bottom',
+ textStyle: {
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'bold'
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ textStyle: {
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'normal'
+ }
+ },
+ series: [
+ {
+ name: title || '',
+ type: 'pie',
+ radius: '50%',
+ data: data,
+ label: {
+ show: true,
+ formatter: '{b}:{d}%',
+ textStyle: {
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'normal'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+ const myChart = echarts.init(document.getElementById(id))
+ myChart.setOption(option)
}
}
}
--
Gitblit v1.9.3