mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

projects/mesxc-zjl #182

Merged
juzi merged 2 commits from projects/mesxc-zjl into projects/mesxc-test 2024-01-17 09:13:42 +08:00
Conversation 0 Commits 2 Files Changed 12 +85 -55
12 changed files with 85 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/databoard/components/Container.vue
View File

@ -11,7 +11,7 @@
<i <i
class="" class=""
style="display: inline-block; margin-left: 12px; padding-top: 4px"> 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> </i>
<span <span
style=" style="
@ -107,6 +107,19 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0 0; 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 { .container-body {

2
src/views/databoard/components/DefectChart.vue
View File

@ -158,7 +158,7 @@ export default {
grid: { top: 90, right: 12, bottom: 20, left: 70 }, grid: { top: 90, right: 12, bottom: 20, left: 70 },
legend: { legend: {
top: 0, top: 0,
left: 100, left: 8,
padding: 5, padding: 5,
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,

11
src/views/databoard/components/EnergeMonitoringChart.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<NotMsg v-show="notMsg"/> <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> </div>
</template> </template>
<script> <script>
@ -63,7 +63,7 @@ export default {
} }
var option = { var option = {
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'], // 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -75,7 +75,11 @@ export default {
className: "energe-monitoring-chart-tooltip" className: "energe-monitoring-chart-tooltip"
}, },
legend: { legend: {
data: ['电耗能'], itemWidth:10,
itemHeight:10,
top: '2.5%',
right: '0',
data: [{name:'电耗能',itemStyle:{color:'#364BFE'}}],
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 12, fontSize: 12,
@ -157,6 +161,7 @@ export default {
.energe-monitoring-chart { .energe-monitoring-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: -50px;
} }
</style> </style>
<style> <style>

5
src/views/databoard/components/FlueGasChart.vue
View File

@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts'
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg' import NotMsg from './../components/NotMsg'
@ -168,7 +168,8 @@ export default {
lineStyle: { lineStyle: {
width: 1 width: 1
}, },
symbolSize: 1, symbol: 'circle',
symbolSize: 5,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
} }

3
src/views/databoard/components/GasChart.vue
View File

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

17
src/views/databoard/components/ISRAChart.vue
View File

@ -60,15 +60,15 @@ export default {
} }
this.chart = echarts.init(document.getElementById('israChart')); this.chart = echarts.init(document.getElementById('israChart'));
var option = { var option = {
color:this.colors,
title:{ title:{
text: num, text: num,
subtext: '总数', subtext: '总数',
top: '43%', top: '32%',
left: '49%', left: '49%',
textAlign: 'center', textAlign: 'center',
textStyle: { textStyle: {
fontSize: 32, fontSize: 32,
lineHeight: 16,
color: '#fff', color: '#fff',
}, },
subtextStyle: { subtextStyle: {
@ -77,12 +77,20 @@ export default {
}, },
}, },
legend: { legend: {
bottom: '3%', bottom: '2%',
left: 'center', left: 'center',
itemWidth: 18,
itemHeight:18,
icon: 'circle', icon: 'circle',
textStyle: { textStyle: {
color: '#fff' color: '#fff'
},
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
name:item.name,
itemStyle:{
color: this.colors[index%4]
} }
}))
}, },
series:[{ series:[{
name: 'ISRA缺陷检测', name: 'ISRA缺陷检测',
@ -96,9 +104,6 @@ export default {
labelLine: { labelLine: {
show: true, show: true,
}, },
itemStyle: {
borderRadius: 12
},
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
name:item.name, name:item.name,
value: item.num, value: item.num,

28
src/views/databoard/components/NumRateChart.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<NotMsg v-show="notMsg"/> <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> </div>
</template> </template>
<script> <script>
@ -53,7 +53,7 @@ export default {
this.productline && this.productline.length > 0 && this.productline.map(item => { this.productline && this.productline.length > 0 && this.productline.map(item => {
xData.push(item.lineName) xData.push(item.lineName)
outputNum.push(item.outputNum) outputNum.push(item.outputNum)
passRate.push(item.passRate*100) passRate.push(item.passRate?item.passRate*100:null)
}) })
if ( if (
this.chart !== null && this.chart !== null &&
@ -64,7 +64,7 @@ export default {
} }
this.chart = echarts.init(document.getElementById('numRateChart')); this.chart = echarts.init(document.getElementById('numRateChart'));
var option = { var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 }, grid: { top: 82, right: 60, bottom: 20, left: 60 },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
@ -73,7 +73,15 @@ export default {
className: "num-rate-chart-tooltip" className: "num-rate-chart-tooltip"
}, },
legend: { legend: {
data: ['产线产量', '良品率'], itemWidth:10,
itemHeight:10,
top: '2.5%',
right: '20px',
icon: 'rect',
data: [
{name:'产线产量',itemStyle:{color:'#364BFE'}},
{name:'良品率',itemStyle:{color:'#FFCB59'}}
],
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 12, fontSize: 12,
@ -136,7 +144,10 @@ export default {
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
formatter: '{value} %' formatter: () =>{
console.log(value)
return value ? '{value} %': '-'
}
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -160,7 +171,7 @@ export default {
return value; return value;
} }
}, },
barWidth: 12, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' }, { offset: 0, color: '#5CB7FF' },
@ -175,7 +186,7 @@ export default {
yAxisIndex: 1, yAxisIndex: 1,
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value + '%'; return value?value + '%':'-';
} }
}, },
itemStyle: { itemStyle: {
@ -191,6 +202,8 @@ export default {
lineStyle: { lineStyle: {
width: 1 width: 1
}, },
symbol: 'circle',
symbolSize: 5,
data: passRate data: passRate
} }
] ]
@ -204,6 +217,7 @@ export default {
.num-rate-chart { .num-rate-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: -50px;
} }
</style> </style>
<style> <style>

2
src/views/databoard/deepProcessing/index.vue
View File

@ -117,7 +117,7 @@ export default {
screenfull.toggle(this.$refs.deepProcessingContainerB) screenfull.toggle(this.$refs.deepProcessingContainerB)
}, },
resetSize() { resetSize() {
let deepProcessingContainer = document.querySelector('#deepProcessingContainer') let deepProcessingContainer = document.getElementById('deepProcessingContainer')
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight)
let bw = parseFloat(deepProcessingContainer.style.width) let bw = parseFloat(deepProcessingContainer.style.width)

12
src/views/databoard/kiln/GasHandle.vue
View File

@ -29,26 +29,26 @@
<div <div
style=" style="
font-size: 20px; font-size: 20px;
line-height: 1.5; line-height: 1.24;
flex: 1; flex: 1;
text-align: right; text-align: right;
padding-right: 8px; padding:5px 8px 5px 0;
letter-spacing: 3px; letter-spacing: 3px;
"> ">
<p style="margin: 0; line-height: inherit">氮氧化物</p> <p style="margin: 0; line-height: inherit">氮氧化物</p>
<p style="margin: 0; line-height: inherit">排放浓度</p> <p style="margin: 0; line-height: inherit">排放浓度</p>
</div> </div>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span> <span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
</ShadowRect> </ShadowRect>
<ShadowRect> <ShadowRect>
<div <div
style=" style="
font-size: 20px; font-size: 20px;
line-height: 1.5; line-height: 1.24;
flex: 1; flex: 1;
text-align: right; text-align: right;
padding-right: 8px; padding:5px 8px 5px 0;
letter-spacing: 3px; letter-spacing: 3px;
"> ">
<p style="margin: 0; line-height: inherit">二氧化硫</p> <p style="margin: 0; line-height: inherit">二氧化硫</p>
@ -69,7 +69,7 @@
"> ">
颗粒物浓度 颗粒物浓度
</span> </span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span> <span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
</ShadowRect> </ShadowRect>
</div> </div>
<KilnLine :horizontal="true" /> <KilnLine :horizontal="true" />

5
src/views/databoard/kiln/index.vue
View File

@ -6,7 +6,7 @@
class="KilnDataBoard" class="KilnDataBoard"
style=" style="
position: absolute; position: absolute;
transform-origin: left top; transform-origin: 16px 8px;
font-size: 16px; font-size: 16px;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -110,7 +110,8 @@ export default {
screenfull.toggle(this.$refs.kilnContainerB) screenfull.toggle(this.$refs.kilnContainerB)
}, },
resetSize() { resetSize() {
let kilnContainerBox = document.querySelector('#kilnContainer') let kilnContainerBox = document.getElementById('kilnContainer')
console.log(kilnContainerBox)
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight)
let bw = parseFloat(kilnContainerBox.style.width) let bw = parseFloat(kilnContainerBox.style.width)

26
src/views/databoard/wholePlant/OrderStatus.vue
View File

@ -25,7 +25,7 @@ export default {
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [155, 180, 150], columnWidth: [155, 160, 150],
data: [], data: [],
rowNum: 6 rowNum: 6
} }
@ -34,17 +34,17 @@ export default {
mounted() {}, mounted() {},
watch:{ watch:{
order:{ order:{
handler(newVal, oldVal) { handler() {
let outArr = this.order.map((item) => [ let outArr = this.order.map((item) => [
formatDate(item.planStartTime) || '', formatDate(item.planStartTime) || '',
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`, `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`, `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
`<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span> `<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
<div class="box" style="display:inline-block;"> <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<div class="bg"></div> <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<div class="rount" style="-webkit-transform:rotate(${(item.completeRate?(item.completeRate*100).toFixed(2):0)<=50?3.6*item.completeRate*100:180}deg)"></div> <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<div class="bg2"></div> <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
<div style="${item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'}" class="rount2"></div> </svg>
</div>` </div>`
]); ]);
this.config.data = outArr this.config.data = outArr
@ -54,13 +54,3 @@ export default {
} }
} }
</script> </script>
<style lang='scss'>
.orderContainer {
.box{width:16px;height:12px;margin:1px auto;position:relative;}
.box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
.box .bg{border:silver 4px solid}
.box .bg2{border:silver 4px solid;clip:rect(0,8px,20px,0);}
.box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
.box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
}
</style>

2
src/views/databoard/wholePlant/index.vue
View File

@ -107,7 +107,7 @@ export default {
screenfull.toggle(this.$refs.wholePlantContainerB) screenfull.toggle(this.$refs.wholePlantContainerB)
}, },
resetSize() { resetSize() {
let wholePlantContainerBox = document.querySelector('#wholePlantContainer') let wholePlantContainerBox = document.getElementById('wholePlantContainer')
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight)
let bw = parseFloat(wholePlantContainerBox.style.width) let bw = parseFloat(wholePlantContainerBox.style.width)