Skip to content

M
mes-ui
Commit d6605f92 authored by kangzhenfei's avatar kangzhenfei
Browse files
Options

Merge branch 'product-kk' into product

parents ab47335a a0284786
Show whitespace changes
Inline Side-by-side
Showing with 133 additions and 50 deletions
pages/dncmnc/mnc/compose/echart3.vue
View file @ d6605f92
<template> <template>
<div> <div>
<div id="myChart03" style="width:865px;height:516px;top: 0px;"></div> <div id="myChart03" style="width:865px;height:316px;top: 0px;"></div>
</div> </div>
</template> </template>
<script> <script>
......
pages/dncmnc/mnc/compose/echart4.vue
View file @ d6605f92
<template> <template>
<div> <div>
<div id="myChart04" style="width:100%;height:340px;margin:20px auto;top: 0px;"></div> <div id="gauge01" style="width:200px;height:150px;top: 0px;"></div>
</div> </div>
</template> </template>
<script> <script>
...@@ -17,61 +17,141 @@ export default { ...@@ -17,61 +17,141 @@ export default {
}, },
loadEchart() { loadEchart() {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart04 = this.$echarts.init(document.getElementById('myChart04')) var gauge01 = this.$echarts.init(document.getElementById('gauge01'))
var score = 78;
var name = '名称';
var option = { var option = {
series: [
{
type: 'gauge',
min: 0,
max: 100,
radius: '80%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
opacity: 0,
width: 12
}
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: '#004fb0'
}
},
title: { title: {
text: '' show: true,
fontSize: 16,
color: '#5faeff',
offsetCenter: [0, '-115%']
}, },
legend: { detail: {
data: ['开机', '关机', '故障', '运行'], formatter: function (value) {
right: 55, return '{a|' + value + '} {b|分}'
}, },
tooltip: { offsetCenter: [0,-20],
trigger: 'axis' rich: {
a: {
fontSize: 32,
color: '#15e198'
}, },
grid: { b: {
left: '3%', fontSize: 14,
right: '4%', color: '#15e198',
bottom: '3%', padding: [0, 0, 5, 0]
containLabel: true }
}
}, },
xAxis: { data: [{value: [score], name: name}]
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日',
'14日', '15日', '16日', '17日', '18日']
}, },
yAxis: { {
type: 'value' name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [105, 115],
label: {
normal: {
show: false
}
}, },
series: [ data: [
{ {
name: '开机', value: 0.4,
type: 'bar', name: 0.4,
barWidth: 8, itemStyle: {
data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134] normal: {
color: '#fff'
}
}
}, },
{ {
name: '关机', value: 0.4,
type: 'bar', itemStyle: {
barWidth: 8, normal: {
data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310] color: 'transparent'
}
}
}
]
}, },
{ {
name: '故障', name: 'score',
type: 'bar', type: 'pie',
barWidth: 8, startAngle: 180,
data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410] hoverAnimation: false,
radius: [105, 115],
label: {
normal: {
show: false
}
}, },
data: [
{ {
name: '运行', value: [(score * 0.5 /100).toFixed(2)],
type: 'bar', name: [(score * 0.5 /100).toFixed(2)],
barWidth: 8, itemStyle: {
data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320] normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15e198'
}, {
offset: 1, color: '#409eff'
}]
}
}
}
},
{
value: [1- (score * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
} }
] ]
} }
// 绘制图表 // 绘制图表
myChart04.setOption(option) gauge01.setOption(option)
} }
}, },
mounted() { mounted() {
......
pages/dncmnc/mnc/index.vue
View file @ d6605f92
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</div> </div>
</template> </template>
<template slot="card" slot-scope="{row}"> <template slot="card" slot-scope="{row}">
<div class="body" v-for="i of 15" :key="i"> <div class="body" v-for="i of 5" :key="i">
<Row class="title-i"> <Row class="title-i">
<Col :span="16" class="order-code"> <Col :span="16" class="order-code">
<Ellipsis :text="row.productName+i" :lines="1" tooltip transfer /> <Ellipsis :text="row.productName+i" :lines="1" tooltip transfer />
......
pages/dncmnc/mnc/mnc.less
View file @ d6605f92
.set_card{ .set_card{
padding: 30px 30px 0; padding: 12px 30px 0;
.set_card_box{ .set_card_box{
border: 1px solid #CACBD0; border: 1px solid #CACBD0;
border-radius: 4px; border-radius: 4px;
......
pages/dncmnc/mnc/monitoring.vue
View file @ d6605f92
...@@ -105,6 +105,7 @@ ...@@ -105,6 +105,7 @@
<Col span="16"> <Col span="16">
<div class="echart3"> <div class="echart3">
<Echart3 ></Echart3> <Echart3 ></Echart3>
<Echart4 ></Echart4>
</div> </div>
</Col> </Col>
<Col span="8"> <Col span="8">
...@@ -163,10 +164,12 @@ ...@@ -163,10 +164,12 @@
<script> <script>
import Echart2 from './compose/echart2' import Echart2 from './compose/echart2'
import Echart3 from './compose/echart3' import Echart3 from './compose/echart3'
import Echart4 from './compose/echart4'
export default { export default {
components: { components: {
Echart2, Echart2,
Echart3, Echart3,
Echart4,
}, },
data(){ data(){
return{ return{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment