From 3fe6be8e6eeae41fcfabc5876cac2fddd1c860f0 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 21 一月 2021 11:41:07 +0800
Subject: [PATCH] 朔黄首页数据统计分析tab静态页完善
---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 323 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 294 insertions(+), 29 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 40c81ac..8092860 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -4,7 +4,7 @@
<el-tab-pane label="鏁版嵁缁熻鍒嗘瀽" name="dataStatistic"></el-tab-pane>
<el-tab-pane label="浠诲姟缁熻鍒嗘瀽" name="taskStatistic"></el-tab-pane>
</el-tabs>
- <div class="tab-content">
+ <div class="tab-content" v-if="actCardTab=='dataStatistic'">
<div class="card-view">
<el-card>
<div class="title">
@@ -130,7 +130,82 @@
</div>
</div>
</div>
+ <div class="statics flex-box">
+ <div class="lt">
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span>
+ <time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut>
+ </div>
+ <div class="statics-content">
+ <div class="chart-area flex-box">
+ <div class="lt">
+ <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div>
+ <div class="sum">
+ <span class="val">8846</span>
+ <span class="ratio">17.1%</span>
+ </div>
+ <line-chart :options="optionsOfIrregularSum" :defineW="300" :defineH="160"></line-chart>
+ </div>
+ <div class="gt">
+ <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
+ <div class="sum">
+ <span class="val">8846</span>
+ </div>
+ <!-- <line-chart :options="optionsOfIrregularPer"></line-chart> -->
+ <line-chart :options="optionsOfIrregularPer" :defineW="300" :defineH="160"></line-chart>
+ </div>
+ </div>
+ <el-table :data="irregularTableData">
+ <el-table-column label="鎺掑悕"></el-table-column>
+ <el-table-column label="濮撳悕"></el-table-column>
+ <el-table-column label="杩濊娆℃暟"></el-table-column>
+ <el-table-column label="鍛ㄦ定骞�"></el-table-column>
+ </el-table>
+ <el-pagination
+ @size-change="handleTableSizeChange"
+ @current-change="renderIrregularMenTable"
+ :current-page.sync="PageIndex"
+ :page-size="PageSize"
+ :page-sizes="pageSizes"
+ layout="total,sizes, prev, pager, next"
+ :total="tableTotal"
+ ></el-pagination>
+ </div>
+ </div>
+ </div>
+ <div class="rt">
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</span>
+ <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
+ </div>
+ <div class="statics-content">
+ <el-radio-group v-model="irregularEventType" size="small">
+ <el-radio-button label="fhdd">闃叉姢鍦版</el-radio-button>
+ <el-radio-button label="jcz">杩涘嚭绔�</el-radio-button>
+ <el-radio-button label="gfx">杩囧垎鐩�</el-radio-button>
+ <el-radio-button label="hc">浼氳溅</el-radio-button>
+ <el-radio-button label="lsmx">涓存椂鎱㈡��</el-radio-button>
+ </el-radio-group>
+ <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
+ <Pie :options="optionsOfHidDangerPie"></Pie>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="part">
+ <div class="tab-swiper">
+ <swipe-tabs></swipe-tabs>
+ </div>
+ <div class="tab-detail">
+ <dataset-chart style="width:100%"></dataset-chart>
+ </div>
+ </div>
</div>
+ </div>
+ <div class="tab-content" v-if="actCardTab=='taskStatistic'">
+
</div>
</div>
</template>
@@ -139,8 +214,11 @@
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
+import LineChart from './charts/line';
+import SwipeTabs from './swipeTabs';
+import DatasetChart from './charts/dataset';
export default {
- components: { timeShortcut, Bar, Pie },
+ components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
data () {
return {
actCardTab: 'dataStatistic',
@@ -167,11 +245,24 @@
data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
axisTick: {
alignWithLabel: true
- }
+ },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#ccc'
+ // }
+ // },
+ // nameTextStyle: {
+ // color: "#333"
+ // }
}
],
yAxis: [
- { type: 'value' }
+ {
+ type: 'value',
+ axisLine: {
+ show: false
+ }
+ }
],
series: [
{
@@ -183,53 +274,163 @@
]
},
optionsOfHidDangerPie: {
- tooltip:{
+ tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b}:{c} ({d}%)'
},
legend: {
orient: 'vertical',
- left: 10,
+ right: 10,
+ y: 'center',
data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�']
},
series: [
{
- name:'寮傚父浜嬩欢',
- type:'pie',
- color: [],
- radius: ['50%','70%'],
+ name: '寮傚父浜嬩欢',
+ type: 'pie',
+ color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+ radius: ['70%', '90%'],
+ //center: ['40%','60%'],
avoidLabelOverlap: false,
- label:{
+ label: {
show: false,
position: 'center'
},
- emphasis:{
- label:{
+ emphasis: {
+ label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
- labelLine:{
+ labelLine: {
show: false
},
data: [
- {value: 270,name:'鏈福绗�'},
- {value: 500,name:'鏈墜姣�'},
- {value: 300,name:'鏈懠鍞�'},
- {value: 430,name:'杩愯涓潯瑙�'},
- {value: 620,name:'鏈鏌�'},
- {value: 540,name:'鏈簲绛�'},
+ { value: 270, name: '鏈福绗�' },
+ { value: 500, name: '鏈墜姣�' },
+ { value: 300, name: '鏈懠鍞�' },
+ { value: 430, name: '杩愯涓潯瑙�' },
+ { value: 620, name: '鏈鏌�' },
+ { value: 540, name: '鏈簲绛�' },
]
}
]
+ },
+ optionsOfIrregularSum: {
+ animation: false,
+ grid: {
+ top: 0,
+ left: 0
+ },
+ 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, '30%'],
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ smooth: true,
+ areaStyle: {
+ opacity: 0.3
+ },
+ color: '#5dbafd'
+ }
+ ]
+ },
+ optionsOfIrregularPer: {
+ animation: false,
+ grid: {
+ top: 0,
+ left: 0
+ },
+ 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,
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ smooth: true,
+ areaStyle: {
+ opacity: 0.3
+ },
+ color: '#8adee6'
+ }
+ ]
+ },
+ irregularTableData: [],
+ PageIndex: 1,
+ PageSize: 5,
+ pageSizes: [5, 10],
+ tableTotal: 0,
+ irregularEventType: 'fhdd',
+ optionsOfIrregularEventPie: {
+
}
}
},
methods: {
- timeShortChange (time) {
- debugger
+ renderIrregularMenTable () {
+
},
+ handleTableSizeChange () {
+
+ },
+ timeShortChange (time) {
+
+ },
+ irregularMenStatistic (time) {
+
+ },
+ irregularEventStatistic (time) {
+
+ }
}
}
</script>
@@ -294,6 +495,15 @@
.day-ratio {
display: flex;
align-items: center;
+ &>span{
+ margin-right: 6px;
+ }
+ .triangle.green{
+ margin-top: -6px;
+ }
+ .triangle.red{
+ margin-top: 6px;
+ }
}
}
.devide {
@@ -303,11 +513,17 @@
}
.detail {
display: flex;
+ align-items: center;
+ color: #777;
+ .name{
+ margin-right: 20px;
+ }
}
}
}
.part {
- padding: 10px 0;
+ padding: 20px 0;
+ margin-bottom: 20px;
.header-width-tab {
display: flex;
justify-content: space-between;
@@ -320,10 +536,46 @@
display: flex;
padding: 0 10px;
min-height: 400px;
+ margin-bottom: 20px;
+ .statics-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ .title {
+ font-size: 16px;
+ font-weight: bold;
+ }
+ }
+ .statics-part {
+ .statics-content {
+ padding: 0 20px;
+ .chart-area {
+ .chart-theme {
+ font-size: 14px;
+ color: #999;
+ }
+ .sum {
+ padding: 14px 0 10px;
+ .val {
+ font-size: 24px;
+ padding-left: 10px;
+ margin-right: 20px;
+ }
+ .ratio {
+ font-size: 14px;
+ color: #999;
+ }
+ }
+ }
+ }
+ }
.lt {
text-align: left;
flex: 1;
- padding-right: 20px;
+ padding-right: 40px;
}
.rt {
text-align: left;
@@ -336,16 +588,16 @@
font-weight: bold;
}
}
- .rank-list{
+ .rank-list {
padding: 10px 0;
- .rank-item{
+ .rank-item {
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #666;
- .rank-index{
+ .rank-index {
width: 20px;
height: 20px;
line-height: 20px;
@@ -354,13 +606,26 @@
border-radius: 50%;
text-align: center;
}
- .name{
- width:200px;
+ .name {
+ width: 200px;
}
}
}
}
}
+ .flex-box {
+ .lt,
+ .rt,
+ .gt {
+ flex: 1;
+ width: auto;
+ //padding: 0 20px;
+ }
+ }
+ .tab-swiper {
+ width: calc(100vw - 340px);
+ margin-bottom: 20px;
+ }
}
}
}
--
Gitblit v1.8.0