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 +183 -55
13 changed files with 183 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a637977e12 - Show all commits

15
src/views/databoard/components/Container.vue
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 {

2
src/views/databoard/components/DefectChart.vue
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,

11
src/views/databoard/components/EnergeMonitoringChart.vue
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>

5
src/views/databoard/components/FlueGasChart.vue
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'
}

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

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

17
src/views/databoard/components/ISRAChart.vue
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,

28
src/views/databoard/components/NumRateChart.vue
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>

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

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

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

@ -29,26 +29,26 @@
<div
style="
font-size: 20px;
line-height: 1.5;
line-height: 1.24;
flex: 1;
text-align: right;
padding-right: 8px;
padding:5px 8px 5px 0;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">氮氧化物</p>
<p style="margin: 0; line-height: inherit">排放浓度</p>
</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>
<div
style="
font-size: 20px;
line-height: 1.5;
line-height: 1.24;
flex: 1;
text-align: right;
padding-right: 8px;
padding:5px 8px 5px 0;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">二氧化硫</p>
@ -69,7 +69,7 @@
">
颗粒物浓度
</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>
</div>
<KilnLine :horizontal="true" />

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

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

98
src/views/databoard/wholePlant/OrderStatus copy.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<div style="flex: 1;" class="orderContainer">
<Container name="订单完成情况" size="small" style="">
<div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
</div>
<button @click='bb'>aa</button>
</Container>
</div>
</template>
<script>
import Container from '../components/Container'
import { formatDate } from '@/utils'
export default {
name: 'OrderStatus',
components: { Container },
computed: {
order() {
return this.$store.state.websocket.order
}
},
data() {
return {
config: {
header: ['上线时间', '客户名称', '规格','完成度'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [155, 180, 140],
data: [],
rowNum: 8
}
}
},
mounted() {},
methods:{
bb() {
let aaa = [
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.1},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.3},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.4},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.5},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.7},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.8},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:1}
]
let outArr = aaa.map((item) => [
formatDate(item.planStartTime) || '',
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
`<span title=${item.specifications || ''}>${item.specifications || ''}</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 class="bg"></div>
<div class="rount" style="-webkit-transform:rotate(${item.completeRate?((item.completeRate*100).toFixed(2)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
<div class="bg2"></div>
<div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
</div>`
]);
this.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr)
}
}
// }
// watch:{
// order: {
// handler(newVal, oldVal) {
// let outArr = this.order.map((item) => [
// formatDate(item.planStartTime) || '',
// `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
// `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
// `<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
// <div class="box" style="display:inline-block;">
// <div class="bg"></div>
// <div class="rount" style="-webkit-transform:rotate(${item.completeRate?((item.completeRate*100).toFixed(2)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
// <div class="bg2"></div>
// <div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
// </div>`
// ]);
// this.config.data = outArr
// this.$refs['orderScrollBoard'].updateRows(outArr)
// }
// }
// }
}
</script>
<style lang='scss'>
.orderContainer {
.box{width:16px;height:12px;margin: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:#283851 4px solid}
.box .bg2{border:#283851 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>

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

@ -25,7 +25,7 @@ export default {
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [155, 180, 150],
columnWidth: [155, 160, 150],
data: [],
rowNum: 6
}
@ -34,17 +34,17 @@ export default {
mounted() {},
watch:{
order:{
handler(newVal, oldVal) {
handler() {
let outArr = this.order.map((item) => [
formatDate(item.planStartTime) || '',
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
`<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
<div class="box" style="display:inline-block;">
<div class="bg"></div>
<div class="rount" style="-webkit-transform:rotate(${(item.completeRate?(item.completeRate*100).toFixed(2):0)<=50?3.6*item.completeRate*100:180}deg)"></div>
<div class="bg2"></div>
<div style="${item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'}" class="rount2"></div>
`<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<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)}"/>
</svg>
</div>`
]);
this.config.data = outArr
@ -54,13 +54,3 @@ export default {
}
}
</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)
},
resetSize() {
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
let wholePlantContainerBox = document.getElementById('wholePlantContainer')
let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight)
let bw = parseFloat(wholePlantContainerBox.style.width)