From 72f553661a74b225c89310d3fb3d78f3ebe35f82 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 28 二月 2021 10:45:04 +0800
Subject: [PATCH] m朔黄首页模拟数据更新
---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 862 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 803 insertions(+), 59 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 8007458..c91051c 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">
@@ -13,11 +13,11 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">265</div>
+ <div class="val">245</div>
<div class="trend week-day-ratio">
<div class="week-ratio">
<span>鍛ㄥ悓姣�</span>
- <span class="triangle green"></span>
+ <span class="triangle red"></span>
<span>12%</span>
</div>
<div class="day-ratio">
@@ -29,7 +29,7 @@
<div class="devide"></div>
<div class="detail">
<div class="name">鏃ュ潎闅愭偅浜嬩欢</div>
- <div class="specific">28</div>
+ <div class="specific">35</div>
</div>
</el-card>
<el-card>
@@ -39,12 +39,14 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">8846</div>
- <div class="trend"></div>
+ <div class="val">{{$numberFormat(735)}}</div>
+ <div class="trend">
+ <line-chart :options="optionsOfWeekAnalyze" style="height:50px"></line-chart>
+ </div>
<div class="devide"></div>
<div class="detail">
<div class="name">鏃ュ潎鍒嗘瀽閲�</div>
- <div class="specific">128</div>
+ <div class="specific">105</div>
</div>
</el-card>
<el-card>
@@ -54,12 +56,12 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">8846</div>
+ <div class="val">1025</div>
<div class="trend"></div>
<div class="devide"></div>
<div class="detail">
<div class="name">杞崲鐜�</div>
- <div class="specific">60%</div>
+ <div class="specific">100%</div>
</div>
</el-card>
<el-card>
@@ -69,7 +71,7 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">78%</div>
+ <div class="val">99%</div>
<div class="trend"></div>
<div class="devide"></div>
<div class="detail week-day-ratio">
@@ -80,7 +82,7 @@
</div>
<div class="day-ratio">
<span>鏃ョ幆姣�</span>
- <span class="triangle red"></span>
+ <span class="triangle green"></span>
<span>11%</span>
</div>
</div>
@@ -95,7 +97,7 @@
<div class="rt">
<time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
<el-date-picker
- v-model="searchTime"
+ v-model="searchHidDanderTime"
type="datetimerange"
size="small"
range-separator="鑷�"
@@ -117,41 +119,233 @@
<div class="rt">
<div class="header">
<span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span>
- <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
+ <!-- <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
<el-option>涓搧涓�灞�</el-option>
- </el-select>
+ </el-select> -->
</div>
<div class="rank-list">
- <div class="rank-item">
- <span class="rank-index">1</span>
- <span class="name">鏈鸿締鍒嗗叕鍙�</span>
- <span class="val">323,234</span>
+ <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id">
+ <span
+ class="rank-index"
+ :class="{'first':index==0,'second':index==1,'third':index==2}"
+ >{{index+1}}</span>
+ <span class="name">{{rankItem.name}}</span>
+ <span class="val">{{rankItem.val}}</span>
+ </div>
+ </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">187</span>
+ <span class="ratio">17.1%</span>
+ </div>
+ <line-chart :options="optionsOfIrregularSum" style="height:70px"></line-chart>
+ </div>
+ <div class="gt">
+ <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
+ <div class="sum">
+ <span class="val">1.31</span>
+ </div>
+ <line-chart :options="optionsOfIrregularPer" style="height:70px"></line-chart>
+ </div>
+ </div>
+ <el-table class="thbg" :data="irregularTableData">
+ <el-table-column label="鎺掑悕" type="index" width="90"></el-table-column>
+ <el-table-column label="濮撳悕" prop="name"></el-table-column>
+ <el-table-column label="杩濊娆℃暟" prop="wg"></el-table-column>
+ <!-- <el-table-column label="鍛ㄦ定骞�" prop="ratio"></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> -->
+ <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="irregularTableData.length"
+ ></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"
+ @change="checkIrregularEventType"
+ 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" style="padding-top:20px;"></Pie>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="part">
+ <div class="tab-swiper">
+ <swipe-tabs @checkTab="checkTabInSwipe"></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 class="general-view">
+ <div class="indicator">
+ <div class="icon">
+ <i class="iconfont iconrenwuzhipai" style="color:#3399ff"></i>
+ </div>
+ <div class="content">
+ <div class="indicator-title">鏈懆浠诲姟鎸囨淳閲�</div>
+ <div class="indicator-val">742</div>
+ </div>
+ </div>
+ <div class="indicator">
+ <div class="icon">
+ <i class="iconfont iconfenxi" style="color:#4c76ff"></i>
+ </div>
+ <div class="content">
+ <div class="indicator-title">鍒嗘瀽閲�</div>
+ <div class="indicator-val">735</div>
+ </div>
+ </div>
+ <div class="indicator lastOne">
+ <div class="icon">
+ <i class="iconfont iconweigui" style="color:#fdd476"></i>
+ </div>
+ <div class="content">
+ <div class="indicator-title">杩濊閲�</div>
+ <div class="indicator-val">245</div>
+ </div>
+ </div>
+ </div>
+ <div class="part">
+ <div class="statics flex-box">
+ <div class="lt">
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">浠诲姟鎸囨淳缁熻</span>
+ </div>
+ <div class="statics-content">
+ <div class="flex-end">
+ <time-shortcut @actPickerChange="taskAssignStatics"></time-shortcut>
+ <el-date-picker
+ v-model="searchTaskAssignTime"
+ type="datetimerange"
+ size="small"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ align="right"
+ ></el-date-picker>
+ </div>
+ <line-chart :options="optionsOfTaskAssign" style="height: 300px;"></line-chart>
+ </div>
+ </div>
+ </div>
+ <div class="rt">
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">閮ㄩ棬鎸囨淳浠诲姟鍗犳瘮</span>
+ <time-shortcut @actPickerChange="partAssignstatics"></time-shortcut>
+ </div>
+ <div class="statics-content">
+ <Pie :options="optionsOfTaskAssignPie"></Pie>
</div>
</div>
</div>
</div>
<div class="statics">
- <div class="lt">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span>
- <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">浠诲姟鍒嗘瀽缁熻</span>
+ </div>
+ <div class="statics-content">
+ <div class="flex-end">
+ <time-shortcut @actPickerChange="taskAnalyzeStatics"></time-shortcut>
+ <el-date-picker
+ v-model="searchTaskAnalyzeTime"
+ type="datetimerange"
+ size="small"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ align="right"
+ ></el-date-picker>
</div>
- <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 :options="optionsOfIrregularSum"></Line>
- </div>
- <div class="gt">
- <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
- <div class="sum">
- <span class="val">8846</span>
- </div>
- </div>
+ <Bar :options="optionsOfTaskAnalyzeBar" style="height: 300px;"></Bar>
+ </div>
+ </div>
+ </div>
+ <div class="statics">
+ <div class="statics-part">
+ <div class="statics-header">
+ <span class="title">浠诲姟鍒嗘瀽鎯呭喌</span>
+ <time-shortcut @actPickerChange="taskAnalyzeCase"></time-shortcut>
+ </div>
+ <div class="statics-content">
+ <div class="table-area">
+ <el-table class="thbg" :data="taskAnalyzeCaseTableData">
+ <el-table-column type="index" label="搴忓彿"></el-table-column>
+ <el-table-column prop="name" label="濮撳悕"></el-table-column>
+ <el-table-column prop="rwl" label="浠诲姟閲�"></el-table-column>
+ <el-table-column prop="fxl" label="鍒嗘瀽閲�"></el-table-column>
+ <el-table-column prop="pdwgl" label="鍒ゅ畾杩濊閲�"></el-table-column>
+ <el-table-column prop="pdwglv" label="鍒ゅ畾杩濊鐜�"></el-table-column>
+ <el-table-column prop="wcl" label="瀹屾垚鐜�"></el-table-column>
+ </el-table>
+ </div>
+
+ <div class="flex-end">
+ <!-- <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> -->
+ <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="taskAnalyzeCaseTableData.length"
+ ></el-pagination>
</div>
</div>
</div>
@@ -165,14 +359,90 @@
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
-import Line from './charts/line';
+import LineChart from './charts/line';
+import SwipeTabs from './swipeTabs';
+import DatasetChart from './charts/dataset';
export default {
- components: { timeShortcut, Bar, Pie, Line },
+ components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
+ mounted () {
+ let tempArr = [{
+ "text": "Same but with checkboxes",
+ "children": [
+ {
+ "text": "initially selected",
+ "selected": true
+ }
+ ]
+ }];
+ for (var i = 0; i < 20; i++) {
+ tempArr[0].children.push({
+ "text": "initially open",
+ "icon": "fa fa-folder icon-state-default",
+ "opened": true,
+ "children": [
+ {
+ "text": "Another node"
+ }
+ ]
+ })
+ }
+ tempArr.forEach(node => {
+ //if(node.children.length)
+
+ })
+ this.jsTreeNodes = tempArr
+ },
data () {
return {
actCardTab: 'dataStatistic',
hidDangerTab: 'hidDanderStatistic',
- searchTime: [],
+ optionsOfWeekAnalyze: {
+ animation: false,
+ grid: {
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 10,
+ //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,
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ smooth: true,
+ areaStyle: {
+ opacity: 0.7
+ },
+ color: '#975fe3'
+ }
+ ]
+ },
+ searchHidDanderTime: [],
actHidDanderChart: 'bar',
optionsOfHidDangerBar: {
color: ['#9ed2f5'],
@@ -194,31 +464,44 @@
data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
axisTick: {
alignWithLabel: true
- }
+ },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#ccc'
+ // }
+ // },
+ // nameTextStyle: {
+ // color: "#333"
+ // }
}
],
yAxis: [
- { type: 'value' }
+ {
+ type: 'value',
+ axisLine: {
+ show: false
+ }
+ }
],
series: [
{
name: '鏁伴噺',
type: 'bar',
barWidth: '24%',
- data: [270, 500, 300, 430, 620, 540]
+ data: [21, 102, 100, 1, 7, 14]
}
]
},
optionsOfHidDangerPie: {
tooltip: {
trigger: 'item',
- formatter: '{a}<br/>{b}:{c} ({d}%)'
+ formatter: '{a}<br>{b}:{c} ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
y: 'center',
- data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�']
+ data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
},
series: [
{
@@ -230,7 +513,8 @@
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center'
+ position: 'center',
+ formatter: '{b}\n{c} '
},
emphasis: {
label: {
@@ -243,18 +527,248 @@
show: false
},
data: [
- { value: 270, name: '鏈福绗�' },
- { value: 500, name: '鏈墜姣�' },
- { value: 300, name: '鏈懠鍞�' },
- { value: 430, name: '杩愯涓潯瑙�' },
- { value: 620, name: '鏈鏌�' },
- { value: 540, name: '鏈簲绛�' },
+ { value: 21, name: '鏈福绗�' },
+ { value: 102, name: '鏈墜姣�' },
+ { value: 100, name: '鏈懠鍞�' },
+ { value: 1, name: '杩愯涓潯瑙�' },
+ { value: 7, name: '鏈鏌�' },
+ { value: 14, name: '鏈簲绛�' },
]
}
]
},
+ optionsOfTaskAssignPie: {
+ 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: 270, name: '寮犵' },
+ { value: 500, name: '鏉庡洓' },
+ { value: 300, name: '鐜嬩附' },
+ { value: 430, name: '椹畯瀹�' },
+ { value: 620, name: '鍒樹箖瓒�' },
+ { value: 540, name: '浣曞厜瀹�' },
+ ]
+ }
+ ]
+ },
+ rankList: [{
+ id: 'jl',
+ name: '鏈鸿締鍒嗗叕鍙�',
+ val: 121
+ }, {
+ 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
+ }],
optionsOfIrregularSum: {
animation: false,
+ grid: {
+ top: 0,
+ left: 0,
+ bottom: 10,
+ 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, '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,
+ bottom: 10,
+ 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,
+ label: {
+ show: false
+ }
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ smooth: true,
+ areaStyle: {
+ opacity: 0.3
+ },
+ color: '#8adee6'
+ }
+ ]
+ },
+ irregularTableData: [{name:'鍚村浗姊�',wg:2},{name:'鐜嬩粊鍏�',wg:1},{name:'缃楀厓鍙�',wg:1}],
+ PageIndex: 1,
+ PageSize: 5,
+ pageSizes: [5, 10],
+ tableTotal: 0,
+ irregularEventType: 'fhdd',
+ optionsOfIrregularEventPie: {
+ 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: 270, name: '闃叉姢鍦版' },
+ { value: 500, name: '杩涘嚭绔�' },
+ { value: 300, name: '杩囧垎鐩�' },
+ { value: 430, name: '浼氳溅' },
+ { value: 620, name: '涓存椂鎱㈡��' },
+
+ ]
+ }
+ ]
+ },
+ searchTaskAssignTime: [],
+ optionsOfTaskAssign: {
+ grid: {
+ top: 40,
+ left: 10,
+ right: 10,
+ containLabel: true,
+ },
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -274,6 +788,9 @@
},
yAxis: {
type: 'value',
+ axisLine: {
+ show: false
+ },
label: {
show: false
}
@@ -282,20 +799,131 @@
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
-
+ smooth: true,
+ areaStyle: {
+ opacity: 0.3
+ },
+ color: '#5dbafd'
}
]
- }
+ },
+ searchTaskAnalyzeTime: [new Date(2021,1,22),new Date(2021,2,1)],
+ optionsOfTaskAnalyzeBar: {
+ color: ['#fbd438', '#4fcb74'],
+ dataset: {
+ source: [
+ ['mon', 44, 83],
+ ['tue', 47, 83],
+ ['wed', 43, 85],
+ ['thu', 44, 85],
+ ['fri', 46, 80],
+ ['sat', 12, 40],
+ ['sun', 9, 34],
+ ]
+ },
+ legend: {
+ left: 0
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ //type: 'shadow'
+ },
+ },
+ grid: {
+ left: 10,
+ right: 10,
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ //data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ // axisLine: {
+ // lineStyle: {
+ // color: '#ccc'
+ // }
+ // },
+ // nameTextStyle: {
+ // color: "#333"
+ // }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鏈夊紓甯�',
+ type: 'bar',
+ stack: '寮傚父',
+ barWidth: 20,
+ //data: [270, 500, 300, 430, 620, 540]
+ },
+ {
+ name: '鏃犲紓甯�',
+ type: 'bar',
+ stack: '寮傚父',
+ barWidth: 20,
+ //data: [270, 500, 300, 430, 620, 540]
+ }
+ ]
+ },
+ taskAnalyzeCaseTableData: [
+ { name: '寮犵', rwl: 127, fxl: 127, pdwgl: 44, pdwglv: '34.65%', wcl: '100%' },
+ { name: '鏉庡洓', rwl: 130, fxl: 129, pdwgl: 47, pdwglv: '36.43%', wcl: '99.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%'}],
+ jsTreeNodes: [],
}
},
methods: {
+ checkTabInSwipe (tab) {
+ debugger
+ },
+ checkIrregularEventType (type) {
+ debugger
+ },
+ taskAnalyzeCase (time) {
+
+ },
+ taskAnalyzeStatics (time) {
+
+ },
+ partAssignstatics (time) {
+
+ },
+ taskAssignStatics (time) {
+
+ },
+ renderIrregularMenTable () {
+
+ },
+ handleTableSizeChange () {
+
+ },
timeShortChange (time) {
},
- irregularStatistic (time) {
+ irregularMenStatistic (time) {
+
+ },
+ irregularEventStatistic (time) {
}
- }
+ },
+
}
</script>
@@ -359,6 +987,15 @@
.day-ratio {
display: flex;
align-items: center;
+ & > span {
+ margin-right: 6px;
+ }
+ .triangle.green {
+ margin-top: -6px;
+ }
+ .triangle.red {
+ margin-top: 6px;
+ }
}
}
.devide {
@@ -368,11 +1005,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;
@@ -385,10 +1028,48 @@
display: flex;
padding: 0 10px;
min-height: 400px;
+ margin-bottom: 30px;
+ .statics-header {
+ height: 50px;
+ 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 {
+ flex: 1;
+ .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;
@@ -403,6 +1084,8 @@
}
.rank-list {
padding: 10px 0;
+ max-height: 380px;
+ overflow-y: auto;
.rank-item {
height: 36px;
display: flex;
@@ -418,14 +1101,75 @@
color: #666;
border-radius: 50%;
text-align: center;
+ &.first {
+ background-color: red;
+ color: #fff;
+ }
+ &.second {
+ background-color: rgb(248, 126, 45);
+ color: #fff;
+ }
+ &.third {
+ background-color: #0b3c29;
+ color: #fff;
+ }
}
.name {
width: 200px;
}
+ .val {
+ width: 100px;
+ }
}
}
}
}
+ .flex-box {
+ .lt,
+ .rt,
+ .gt {
+ flex: 1;
+ width: auto;
+ //padding: 0 20px;
+ }
+ }
+ .tab-swiper {
+ width: calc(100vw - 340px);
+ margin-bottom: 20px;
+ }
+ }
+ .general-view {
+ display: flex;
+ padding: 20px 50px;
+ .indicator {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ &:not(.lastOne):after {
+ content: '';
+ width: 1px;
+ height: 57px;
+ background: #e9e9e9;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .icon .iconfont {
+ font-size: 40px;
+ margin-right: 24px;
+ }
+ .indicator-title {
+ font-size: 14px;
+ color: #999;
+ margin-bottom: 15px;
+ }
+ .indicator-val {
+ font-size: 24px;
+ }
+ }
}
}
}
--
Gitblit v1.8.0