ui测试修改

This commit is contained in:
2024-01-17 09:11:02 +08:00
parent 3aa7825c56
commit a637977e12
13 changed files with 183 additions and 55 deletions

View File

@@ -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 {

View File

@@ -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,

View File

@@ -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>

View File

@@ -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'
}

View File

@@ -164,7 +164,8 @@ export default {
lineStyle: {
width: 1
},
symbolSize: 1,
symbol: 'circle',
symbolSize: 5,
emphasis: {
focus: 'series'
}

View File

@@ -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,

View File

@@ -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>