From 7712b788faf815e8e39d5bbbd61b5e4261eee7b2 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 28 二月 2021 18:54:54 +0800
Subject: [PATCH] 朔黄首页更新
---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 228 insertions(+), 41 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index c647ab2..67cb70e 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -56,8 +56,10 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">1025</div>
- <div class="trend"></div>
+ <div class="val">{{$numberFormat(1025)}}</div>
+ <div class="trend">
+ <Bar :options="optionsOfTransferSumBar" style="height: 70px;"></Bar>
+ </div>
<div class="devide"></div>
<div class="detail">
<div class="name">杞崲鐜�</div>
@@ -72,7 +74,15 @@
</span>
</div>
<div class="val">99%</div>
- <div class="trend"></div>
+ <div class="trend">
+ <el-progress
+ :percentage="99"
+ stroke-linecap="square"
+ color="#1890ff"
+ :stroke-width="14"
+ :show-text="false"
+ ></el-progress>
+ </div>
<div class="devide"></div>
<div class="detail week-day-ratio">
<div class="week-ratio">
@@ -90,7 +100,7 @@
</div>
<div class="part">
<div class="header-width-tab">
- <el-tabs class="tab-menu" v-model="hidDangerTab">
+ <el-tabs class="tab-menu" v-model="actHiddanderTab" @tab-click="initTabContent">
<el-tab-pane label="闅愭偅浜嬩欢缁熻" name="hidDanderStatistic"></el-tab-pane>
<el-tab-pane label="闅愭偅浜嬩欢瓒嬪娍" name="hidDanderTrend"></el-tab-pane>
</el-tabs>
@@ -109,19 +119,42 @@
</div>
<div class="statics">
<div class="lt">
- <el-radio-group v-model="actHidDanderChart" size="mini">
- <el-radio-button label="bar">鏌辩姸鍥�</el-radio-button>
- <el-radio-button label="pie">楗煎浘</el-radio-button>
- </el-radio-group>
- <Bar :options="optionsOfHidDangerBar" v-show="actHidDanderChart=='bar'"></Bar>
- <Pie :options="optionsOfHidDangerPie" v-show="actHidDanderChart=='pie'"></Pie>
+ <template v-if="actHiddanderTab == 'hidDanderStatistic'">
+ <el-radio-group v-model="actHidDanderStatiscChart" size="mini">
+ <el-radio-button label="bar">鏌辩姸鍥�</el-radio-button>
+ <el-radio-button label="pie">楗煎浘</el-radio-button>
+ </el-radio-group>
+ <Bar
+ :options="optionsOfHidDangerBar"
+ v-if="actHidDanderStatiscChart=='bar'"
+ ></Bar>
+ <Pie
+ :options="optionsOfHidDangerPie"
+ v-if="actHidDanderStatiscChart=='pie'"
+ ></Pie>
+ </template>
+ <template v-if="actHiddanderTab == 'hidDanderTrend'">
+ <el-radio-group v-model="actHidDanderTrendChart" size="mini">
+ <el-radio-button label="line">鎶樼嚎鍥�</el-radio-button>
+ <el-radio-button label="pie">楗煎浘</el-radio-button>
+ </el-radio-group>
+ <line-chart
+ :options="optionsOfHidDangerTrend"
+ v-if="actHidDanderTrendChart=='line'"
+ style="height:350px"
+ ></line-chart>
+ <Pie
+ :options="optionsOfHidDangerTrendPie"
+ v-if="actHidDanderTrendChart=='pie'"
+ ></Pie>
+ </template>
</div>
<div class="rt">
<div class="header">
<span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span>
- <!-- <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
+ <!-- <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
<el-option>涓搧涓�灞�</el-option>
- </el-select> -->
+ </el-select>-->
</div>
<div class="rank-list">
<div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id">
@@ -174,7 +207,7 @@
:page-sizes="pageSizes"
layout="total,sizes, prev, pager, next"
:total="tableTotal"
- ></el-pagination> -->
+ ></el-pagination>-->
<el-pagination
@size-change="handleTableSizeChange"
@current-change="renderIrregularMenTable"
@@ -336,7 +369,7 @@
:page-sizes="pageSizes"
layout="total,sizes, prev, pager, next"
:total="tableTotal"
- ></el-pagination> -->
+ ></el-pagination>-->
<el-pagination
@size-change="handleTableSizeChange"
@current-change="renderIrregularMenTable"
@@ -395,7 +428,7 @@
data () {
return {
actCardTab: 'dataStatistic',
- hidDangerTab: 'hidDanderStatistic',
+ //actHiddanderTab: 'hidDanderStatistic',
optionsOfWeekAnalyze: {
animation: false,
grid: {
@@ -432,7 +465,7 @@
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
+ data: [100, 103, 101, 107, 104, 111, 109],
type: 'line',
smooth: true,
areaStyle: {
@@ -442,8 +475,54 @@
}
]
},
+ optionsOfTransferSumBar: {
+ color: ['#3ba1ff'],
+ grid: {
+ top: 0,
+ left: 10,
+ right: 10,
+ bottom: 30,
+ //containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ xAxis: {
+ show: false,
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ label: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ show: false,
+ boundaryGap: [0, '45%'],
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '鏁伴噺',
+ type: 'bar',
+ barWidth: '24%',
+ data: [123, 120, 157, 140, 147, 172, 166]
+ }
+ ]
+ },
searchHidDanderTime: [],
- actHidDanderChart: 'bar',
+ actHiddanderTab: 'hidDanderStatistic',
+ actHidDanderStatiscChart: 'bar',
+ actHidDanderTrendChart: 'line',
optionsOfHidDangerBar: {
color: ['#9ed2f5'],
tooltip: {
@@ -489,6 +568,101 @@
type: 'bar',
barWidth: '24%',
data: [21, 102, 100, 1, 7, 14]
+ }
+ ]
+ },
+ optionsOfHidDangerTrend: {
+ grid: {
+ top: 40,
+ left: 10,
+ right: 10,
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ label: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ show: false
+ },
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ data: [83, 83, 85, 85, 80, 40, 30],
+ type: 'line',
+ color: '#5dbafd',
+ symbolSize: 10,
+ symbol: 'circle',
+ lineStyle: {
+ color: '#61b4ff',
+ width: 2,
+ },
+ itemStyle: {
+ color: '#98d87d'
+ }
+ }
+ ]
+ },
+ optionsOfHidDangerTrendPie: {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}<br>{b}:{c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ right: 10,
+ y: 'center',
+ data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
+ },
+ series: [
+ {
+ name: '寮傚父浜嬩欢',
+ type: 'pie',
+ color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+ radius: ['70%', '90%'],
+ //center: ['40%','60%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
+ formatter: '{b}\n{c} '
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '30',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 83, name: '鏈福绗�' },
+ { value: 83, name: '鏈墜姣�' },
+ { value: 85, name: '鏈懠鍞�' },
+ { value: 80, name: '杩愯涓潯瑙�' },
+ { value: 40, name: '鏈鏌�' },
+ { value: 30, name: '鏈簲绛�' },
+ ]
}
]
},
@@ -572,12 +746,12 @@
show: false
},
data: [
- { value: 270, name: '寮犵' },
- { value: 500, name: '鏉庡洓' },
- { value: 300, name: '鐜嬩附' },
- { value: 430, name: '椹畯瀹�' },
- { value: 620, name: '鍒樹箖瓒�' },
- { value: 540, name: '浣曞厜瀹�' },
+ { value: 127, name: '寮犵' },
+ { value: 130, name: '鏉庡洓' },
+ { value: 128, name: '鐜嬩附' },
+ { value: 129, name: '椹畯瀹�' },
+ { value: 126, name: '鍒樹箖瓒�' },
+ { value: 112, name: '浣曞厜瀹�' },
]
}
]
@@ -590,31 +764,31 @@
id: 'ztyj',
name: '涓搧涓�灞�',
val: 52
- },{
+ }, {
id: 'ztsj',
name: '涓搧鍥涘眬',
val: 40
- },{
+ }, {
id: 'ztsanj',
name: '涓搧涓夊眬',
val: 38
- },{
+ }, {
id: 'ztswj',
name: '涓搧鍗佷簲灞�',
val: 36
- },{
+ }, {
id: 'ztslj',
name: '涓搧鍗佸叚灞�',
val: 33
- },{
+ }, {
id: 'jtjw',
name: '浜搧鏈哄姟',
val: 24
- },{
+ }, {
id: 'lhjw',
name: '璺崕鏈哄姟',
val: 15
- },{
+ }, {
id: 'nhjw',
name: '鍗楃幆鏈哄姟',
val: 14
@@ -710,7 +884,7 @@
}
]
},
- irregularTableData: [{name:'鍚村浗姊�',wg:2},{name:'鐜嬩粊鍏�',wg:1},{name:'缃楀厓鍙�',wg:1}],
+ irregularTableData: [{ name: '鍚村浗姊�', wg: 2 }, { name: '鐜嬩粊鍏�', wg: 1 }, { name: '缃楀厓鍙�', wg: 1 }],
PageIndex: 1,
PageSize: 5,
pageSizes: [5, 10],
@@ -751,12 +925,12 @@
show: false
},
data: [
- { value: 270, name: '闃叉姢鍦版' },
- { value: 500, name: '杩涘嚭绔�' },
- { value: 300, name: '杩囧垎鐩�' },
- { value: 430, name: '浼氳溅' },
- { value: 620, name: '涓存椂鎱㈣' },
-
+ { value: 32, name: '闃叉姢鍦版' },
+ { value: 55, name: '杩涘嚭绔�' },
+ { value: 42, name: '杩囧垎鐩�' },
+ { value: 96, name: '浼氳溅' },
+ { value: 20, name: '涓存椂鎱㈣' },
+
]
}
]
@@ -807,7 +981,7 @@
}
]
},
- searchTaskAnalyzeTime: [new Date(2021,1,22),new Date(2021,2,1)],
+ searchTaskAnalyzeTime: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
optionsOfTaskAnalyzeBar: {
color: ['#fbd438', '#4fcb74'],
dataset: {
@@ -884,16 +1058,23 @@
{ name: '鐜嬩附', rwl: 128, fxl: 127, pdwgl: 43, pdwglv: '33.86%', wcl: '99.22%' },
{ name: '椹畯瀹�', rwl: 129, fxl: 125, pdwgl: 44, pdwglv: '35.2%', wcl: '96.90%' },
{ name: '鍒樹箖瓒�', rwl: 126, fxl: 126, pdwgl: 46, pdwglv: '33.50%', wcl: '100%' },
- { name: '浣曞厜瀹�', rwl: 112, fxl: 112, pdwgl: 12, pdwglv: '10.71%', wcl: '100%'}],
+ { name: '浣曞厜瀹�', rwl: 112, fxl: 112, pdwgl: 12, pdwglv: '10.71%', wcl: '100%' }],
jsTreeNodes: [],
}
},
methods: {
+ initTabContent(tab){
+ if(tab.name == "hidDanderStatistic"){
+ this.actHidDanderStatiscChart = 'bar'
+ }else{
+ this.actHidDanderTrendChart = 'line'
+ }
+ },
checkTabInSwipe (tab) {
- debugger
+
},
checkIrregularEventType (type) {
- debugger
+
},
taskAnalyzeCase (time) {
@@ -929,6 +1110,12 @@
<style lang="scss">
.guide-index {
+ .el-progress-bar__outer {
+ border-radius: 5px;
+ }
+ .el-progress-bar__inner {
+ border-radius: 5px;
+ }
.triangle {
width: 0;
height: 0;
--
Gitblit v1.8.0