ui测试修改
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
<i
|
||||
class=""
|
||||
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
||||
<img :src="imgSrc" width="20" height="20" alt="" />
|
||||
<img :src="imgSrc" width="24" height="24" alt="" />
|
||||
</i>
|
||||
<span
|
||||
style="
|
||||
@@ -107,6 +107,19 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background: inherit;
|
||||
/* 设置模糊,不用 filter */
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.container-body {
|
||||
|
||||
@@ -158,7 +158,7 @@ export default {
|
||||
grid: { top: 90, right: 12, bottom: 20, left: 70 },
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 100,
|
||||
left: 8,
|
||||
padding: 5,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:370px;" v-show='!notMsg'></div>
|
||||
<div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:420px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -63,7 +63,7 @@ export default {
|
||||
}
|
||||
var option = {
|
||||
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 90 },
|
||||
grid: { top: 82, right: 12, bottom: 20, left: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -75,7 +75,11 @@ export default {
|
||||
className: "energe-monitoring-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['电耗能'],
|
||||
itemWidth:10,
|
||||
itemHeight:10,
|
||||
top: '2.5%',
|
||||
right: '0',
|
||||
data: [{name:'电耗能',itemStyle:{color:'#364BFE'}}],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
@@ -157,6 +161,7 @@ export default {
|
||||
.energe-monitoring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
@@ -168,7 +168,8 @@ export default {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
|
||||
@@ -164,7 +164,8 @@ export default {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
|
||||
@@ -60,15 +60,15 @@ export default {
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('israChart'));
|
||||
var option = {
|
||||
color:this.colors,
|
||||
title:{
|
||||
text: num,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
top: '32%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
lineHeight: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
@@ -77,12 +77,20 @@ export default {
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
bottom: '3%',
|
||||
bottom: '2%',
|
||||
left: 'center',
|
||||
itemWidth: 18,
|
||||
itemHeight:18,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||
name:item.name,
|
||||
itemStyle:{
|
||||
color: this.colors[index%4]
|
||||
}
|
||||
}))
|
||||
},
|
||||
series:[{
|
||||
name: 'ISRA缺陷检测',
|
||||
@@ -96,9 +104,6 @@ export default {
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 12
|
||||
},
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name:item.name,
|
||||
value: item.num,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
|
||||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -53,7 +53,7 @@ export default {
|
||||
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
||||
xData.push(item.lineName)
|
||||
outputNum.push(item.outputNum)
|
||||
passRate.push(item.passRate*100)
|
||||
passRate.push(item.passRate?item.passRate*100:null)
|
||||
})
|
||||
if (
|
||||
this.chart !== null &&
|
||||
@@ -64,7 +64,7 @@ export default {
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||
var option = {
|
||||
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
||||
grid: { top: 82, right: 60, bottom: 20, left: 60 },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
@@ -73,7 +73,15 @@ export default {
|
||||
className: "num-rate-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['产线产量', '良品率'],
|
||||
itemWidth:10,
|
||||
itemHeight:10,
|
||||
top: '2.5%',
|
||||
right: '20px',
|
||||
icon: 'rect',
|
||||
data: [
|
||||
{name:'产线产量',itemStyle:{color:'#364BFE'}},
|
||||
{name:'良品率',itemStyle:{color:'#FFCB59'}}
|
||||
],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
@@ -136,7 +144,10 @@ export default {
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value} %'
|
||||
formatter: () =>{
|
||||
console.log(value)
|
||||
return value ? '{value} %': '-'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@@ -160,7 +171,7 @@ export default {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 12,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
@@ -175,7 +186,7 @@ export default {
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + '%';
|
||||
return value?value + '%':'-';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
@@ -191,6 +202,8 @@ export default {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
data: passRate
|
||||
}
|
||||
]
|
||||
@@ -204,6 +217,7 @@ export default {
|
||||
.num-rate-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user