fix:overview 布局完成、单个组件开发进行中
This commit is contained in:
wangwenrui
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-room">
|
||||||
|
<loading :ref="localLoading"></loading>
|
||||||
|
|
||||||
|
<div class="chart-header"></div>
|
||||||
|
|
||||||
|
<div class="chart-body" ref="chartBody" id="chartBody"></div>
|
||||||
|
|
||||||
|
<div class="chart-foot">
|
||||||
|
<el-scrollbar>
|
||||||
|
<div class="chart-legend"></div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts';
|
||||||
|
import chartDataFormat from "../../../charts/chartDataFormat";
|
||||||
|
import loading from "../../../common/loading";
|
||||||
|
import chartConfig from './chartConfig'
|
||||||
|
export default {
|
||||||
|
name: "chart",
|
||||||
|
props:[],
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
option:chartConfig.getCommonOption
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
<script>
|
||||||
|
import chartDataFormat from "../../../charts/chartDataFormat";
|
||||||
|
const commonOption={
|
||||||
|
title:{
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
color: this.bgColorList,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
confine:false,
|
||||||
|
extraCssText:'z-index:1000;',
|
||||||
|
// formatter:null,
|
||||||
|
// position:null,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 13,
|
||||||
|
left: 0,
|
||||||
|
right: 30,
|
||||||
|
containLabel: true,
|
||||||
|
bottom:35,//156
|
||||||
|
},
|
||||||
|
dataZoom: [{
|
||||||
|
type: 'slider',
|
||||||
|
show:true,
|
||||||
|
xAxisIndex: [0],
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
height:25,
|
||||||
|
bottom:10,//96
|
||||||
|
left:40,
|
||||||
|
right:48,
|
||||||
|
}],
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
// boundaryGap: false,//line-false; bar-true;
|
||||||
|
axisLabel: {
|
||||||
|
intervale: 0,
|
||||||
|
rotate: 0,
|
||||||
|
formatter: function (value) {
|
||||||
|
var t_date = new Date(value);
|
||||||
|
return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
|
||||||
|
+ [t_date.getHours(), t_date.getMinutes()].join(':');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisPointer: {//y轴上显示指针对应的值
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine:{
|
||||||
|
show:true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// formatter:null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
useUTC: false,//使用本地时间
|
||||||
|
series: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getCommonOption:function(){
|
||||||
|
return commonOption;
|
||||||
|
},
|
||||||
|
setTooltipPostion:function(positionFunc){
|
||||||
|
commonOption.tooltip.position=positionFunc;
|
||||||
|
},
|
||||||
|
setTooltipFormatter:function(formatFunc){
|
||||||
|
commonOption.tooltip.formatter=formatFunc;
|
||||||
|
},
|
||||||
|
setYAxisLabelFormatter:function(formatFunc){
|
||||||
|
commonOption.yAxis.axisLabel.formatter=formatFunc;
|
||||||
|
},
|
||||||
|
setSeries:function(series){
|
||||||
|
commonOption.series=series;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
.overview{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-content-header{
|
||||||
|
display: flex;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.overview-content-header .header-title{
|
||||||
|
flex:13;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 24px !important;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
.overview-content-header .header-tool{
|
||||||
|
flex: 2;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
.header-tool .tool-container{
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tool-container .time{
|
||||||
|
flex: 4;
|
||||||
|
font-size: 24px !important;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-block;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.tool-container .date{
|
||||||
|
flex: 4;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
.date .week{
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.date .sys-date{
|
||||||
|
padding-top: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.tool-container .operation{
|
||||||
|
flex: 2;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
|
.operation .nz-icon-maxview{
|
||||||
|
font-size: 30px !important;
|
||||||
|
}
|
||||||
|
.overview-content{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/*100份*/
|
||||||
|
.overview-content .content-row-box{
|
||||||
|
margin: 15px 15px 15px 15px;
|
||||||
|
width: 99%;
|
||||||
|
}
|
||||||
|
.content-row-box .content-col-box{
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
padding: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.box-height-250{
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
.box-height-350{
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
.box-height-400{
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
.box-height-500{
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<div class="overview">
|
||||||
|
<!--左侧菜单栏-->
|
||||||
|
<div class="overview-left content-left">
|
||||||
|
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||||
|
<div class="sidebar-info">
|
||||||
|
<div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
|
||||||
|
<div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||||
|
<div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--右侧内容-->
|
||||||
|
<div class="overview-right content-right">
|
||||||
|
<!--标题-->
|
||||||
|
<div class="overview-content-header">
|
||||||
|
<div class="header-title">{{$t('dashboard.overview.contentTitle')}}</div>
|
||||||
|
<div class="header-tool">
|
||||||
|
<div class="tool-container">
|
||||||
|
<div class="time">{{sysTime}}</div>
|
||||||
|
<div class="date">
|
||||||
|
<div class="week">{{sysWeek}}</div>
|
||||||
|
<div class="sys-date">{{sysDate}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="operation"><span ><i class="nz-icon nz-icon-maxview"></i></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--内容-->
|
||||||
|
<div class="overview-content">
|
||||||
|
<el-scrollbar>
|
||||||
|
<div class="content-row-box">
|
||||||
|
<div class="content-col-box box-height-250 " style="width: 45%"></div>
|
||||||
|
<div class="content-col-box box-height-250 " style="width: 25%"></div>
|
||||||
|
<div class="content-col-box box-height-250 " style="width: 23%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="content-row-box">
|
||||||
|
<div class="content-col-box box-height-350 " style="width: 45%"></div>
|
||||||
|
<div class="content-col-box box-height-350 "style="width: 50.2%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="content-row-box">
|
||||||
|
<div class="content-col-box box-height-400 "style="width: 25%"></div>
|
||||||
|
<div class="content-col-box box-height-400 "style="width: 48%"></div>
|
||||||
|
<div class="content-col-box box-height-400 "style="width: 20%"></div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "overview",
|
||||||
|
props:[],
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
sysTime:'',
|
||||||
|
sysDate:'',
|
||||||
|
sysWeek:'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
/*header 时间处理 start*/
|
||||||
|
initDate:function(){
|
||||||
|
this.sysTime=this.getTime();
|
||||||
|
this.sysDate=this.getDate();
|
||||||
|
this.sysWeek=this.getWeek();
|
||||||
|
this.freshTime();
|
||||||
|
},
|
||||||
|
freshTime:function(){
|
||||||
|
let $temp=this;
|
||||||
|
setInterval(function(){
|
||||||
|
$temp.sysTime=$temp.getTime()
|
||||||
|
$temp.sysDate=$temp.getDate();
|
||||||
|
$temp.sysWeek=$temp.getWeek();
|
||||||
|
},1000)
|
||||||
|
},
|
||||||
|
getTime:function(){
|
||||||
|
let date=new Date();
|
||||||
|
let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
|
||||||
|
let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
|
||||||
|
let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
|
||||||
|
return hours+':'+minutes+':'+seconds;
|
||||||
|
},
|
||||||
|
getDate:function(){
|
||||||
|
let date=new Date();
|
||||||
|
let years=date.getFullYear();
|
||||||
|
let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
|
||||||
|
let days=date.getDate()>9?date.getDate():'0'+date.getDate();
|
||||||
|
return years+'-'+months+'-'+days;
|
||||||
|
},
|
||||||
|
getWeek:function(){
|
||||||
|
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
|
||||||
|
let enWeeks=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
|
||||||
|
let cnWeeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
|
||||||
|
let date=new Date();
|
||||||
|
let day=date.getDay();
|
||||||
|
if(language == 'en'){
|
||||||
|
return enWeeks[day];
|
||||||
|
}else if(language == 'cn'){
|
||||||
|
return cnWeeks[day];
|
||||||
|
}else{
|
||||||
|
return enWeeks[day];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*header 时间处理end*/
|
||||||
|
jumpTo(data, id) {
|
||||||
|
//this.$store.state.assetData.moduleData = data
|
||||||
|
//this.$store.state.assetData.selectedData = id
|
||||||
|
this.$router.push({
|
||||||
|
path: "/" + data,
|
||||||
|
query: {
|
||||||
|
t: +new Date()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initDate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "overview.scss";
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.overview .el-scrollbar__wrap{
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user