From fa7044f3ccc9a91bc2bc117d1a06f650d86554f2 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期二, 15 六月 2021 16:07:16 +0800
Subject: [PATCH] 优化联动规则加载场景列表的操作
---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 126 +++++++++++++++++++++++++++++++++++-------
1 files changed, 105 insertions(+), 21 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 48c2ce7..9075503 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -100,13 +100,14 @@
</el-card>
</div>
<div class="part">
- <div class="header-width-tab">
+ <div class="part-top">
+ <div class="header-width-tab">
<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>
<div class="rt">
- <time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
+ <time-shortcut actPicker="week" @actPickerChange="timeShortChange"></time-shortcut>
<el-date-picker
v-model="searchHidDanderTime"
type="datetimerange"
@@ -168,6 +169,7 @@
</div>
</div>
</div>
+ </div>
</div>
<div class="statics flex-box">
<div class="lt">
@@ -239,12 +241,13 @@
<el-radio-button label="hc">浼氳溅</el-radio-button>
<el-radio-button label="lsmx">涓存椂鎱㈣</el-radio-button>
</el-radio-group>
+
<Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>
</div>
</div>
</div>
</div>
- <div class="part">
+ <div class="part-bottom" >
<div class="tab-swiper">
<swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
</div>
@@ -567,8 +570,8 @@
{
name: '鏁伴噺',
type: 'bar',
- barWidth: '24%',
- data: [21, 102, 100, 1, 7, 14]
+ barWidth: '60%',
+ data: [{value:21,itemStyle:{color:'#3aa0ff'}},{value:102,itemStyle:{color:'#36cbcb'}},{value:100,itemStyle:{color:'#4dcb73'}},{value:1,itemStyle:{color:'#fad337'}},{value:7,itemStyle:{color:'#f2637b'}}, {value:14,itemStyle:{color:'#975fe4'}}]
}
]
},
@@ -638,18 +641,18 @@
name: '寮傚父浜嬩欢',
type: 'pie',
color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['70%', '90%'],
+ radius: ['50%', '80%'],
//center: ['40%','60%'],
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center',
+ // position: 'center',
formatter: '{b}\n{c} '
},
emphasis: {
label: {
show: true,
- fontSize: '30',
+ fontSize: '20',
fontWeight: 'bold'
}
},
@@ -907,24 +910,35 @@
name: '寮傚父浜嬩欢',
type: 'pie',
color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['70%', '90%'],
+ radius: ['50%', '80%'],
//center: ['40%','60%'],
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center',
+ // position: 'center',
formatter: '{b}\n{c} '
},
emphasis: {
label: {
show: true,
- fontSize: '30',
+ fontSize: '20',
fontWeight: 'bold'
}
},
- labelLine: {
- show: false
+ itemStyle:{
+ normal:{
+ label:{
+ show:true,
+ formatter: '{b}\n{c} ',
+ labelLine:{
+ show:true
+ }
+ }
+ }
},
+ // labelLine: {
+ // show: false
+ // },
data: [
{ value: 32, name: '闃叉姢鍦版' },
{ value: 55, name: '杩涘嚭绔�' },
@@ -1107,10 +1121,56 @@
},
}
+
+
+
+// title : {
+// /* text: '鏌愮珯鐐圭敤鎴疯闂潵婧�',
+// subtext: '绾睘铏氭瀯',
+// x:'center'*/
+// },
+// tooltip : {
+// trigger: 'item',
+// formatter: "{a} <br/>{b} : {c} ({d}%)"
+// },
+// legend: {
+// orient: 'vertical',
+// left: 'right',
+// bottom:'80px',
+// data: ['浼佷笟','涓綋','绀句細缁勭粐','浜嬩笟鍗曚綅','鏈哄叧鍗曚綅','鍏朵粬']
+// },
+// series : [
+// {
+// name: '鍗犳瘮鎯呭喌',
+// type: 'pie',
+// radius : '55%',
+// center: ['40%', '60%'],
+// data: data,
+// /*鍦╯eries涓坊鍔爄temStyle鍗冲彲鐩磋鏄剧ず楗煎瀷鏁板��*/
+// itemStyle:{
+// normal:{
+// label:{
+// show: true,
+// formatter: '{b} : {c} ({d}%)'
+// },
+// labelLine :{show:true}
+// }
+// }
+// }
+// ]
+
+// };
+// myChart_qyhhmd.setOption(option,true)
</script>
<style lang="scss">
+
.guide-index {
+ background-color: #f0f2f5;
+ .tab-menu {
+ background-color: #fff;
+ height: 60px;
+ }
.el-progress-bar__outer {
border-radius: 2px;
}
@@ -1163,10 +1223,14 @@
}
}
.tab-content {
+ // padding: 18px 12px;
padding: 20px;
+
.card-view {
display: flex;
- margin-right: -20px;
+ margin-right: -20px;
+
+ // margin-left: -2px;
.el-card {
flex: 1;
margin-right: 20px;
@@ -1223,21 +1287,37 @@
}
}
.part {
- padding: 20px 0;
+ padding:20px 0;
margin-bottom: 20px;
+ .part-top{
+ background-color: #fff;
+ }
+ .part-bottom{
+ background-color: #fff;
+ // padding: 0 30px 30px 30px;
+ padding: 0 0 25px 0;
+
+ .tab-detail{
+ margin: 0 25px;
+ }
+ }
.header-width-tab {
display: flex;
justify-content: space-between;
+ margin-bottom: 12px;
+
.rt {
display: flex;
padding-top: 20px;
+ margin-right: 25px;
+
}
}
.statics {
display: flex;
- padding: 0 10px;
+ // padding: 0 10px;
min-height: 400px;
- margin-bottom: 30px;
+ margin-bottom: 20px;
.statics-header {
height: 50px;
display: flex;
@@ -1278,10 +1358,15 @@
.lt {
text-align: left;
flex: 1;
- padding-right: 40px;
+ padding: 3px 15px 15px 18px;
+ background-color: #fff;
+ margin-right: 18px;
+
}
.rt {
text-align: left;
+ background-color: #fff;
+ padding: 3px 15px 15px 18px;
width: 400px;
.header {
display: flex;
@@ -1339,12 +1424,11 @@
.gt {
flex: 1;
width: auto;
- //padding: 0 20px;
}
}
.tab-swiper {
- width: calc(100vw - 340px);
- margin-bottom: 20px;
+ width: calc(100vw - 367px);
+ margin: 0 0 20px 20px;
}
}
.general-view {
--
Gitblit v1.8.0