@@ -0,0 +1,14 @@ | |||
<?xml version="1.0" encoding="UTF-8"?> | |||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
<title>编组 13</title> | |||
<g id="·窑炉总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="总览" transform="translate(-1823.000000, -772.000000)"> | |||
<g id="编组-20备份-5" transform="translate(1786.000000, 764.000000)"> | |||
<g id="编组-13" transform="translate(37.000000, 8.000000)"> | |||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect> | |||
<path d="M3.67840479,4.47768215 L12.3215952,4.47768215 C12.87388,4.47768215 13.3215952,4.9253974 13.3215952,5.47768215 C13.3215952,5.70423387 13.2446673,5.92407165 13.1034098,6.1011931 L8.78181462,11.5200015 C8.43745903,11.9517857 7.80827335,12.0226607 7.37648905,11.6783051 C7.31796217,11.6316289 7.2648616,11.5785283 7.21818538,11.5200015 L2.89659016,6.1011931 C2.55223458,5.6694088 2.62310955,5.04022312 3.05489384,4.69586753 C3.23201529,4.55461005 3.45185307,4.47768215 3.67840479,4.47768215 Z" id="路径-2" fill="#03233C"></path> | |||
</g> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div> | |||
<NotMsg v-show="notMsg"/> | |||
<div id="defectChart" style="width:600px;height:238px;" v-show="!notMsg"></div> | |||
<div id="defectChart" style="width:580px;height:238px;" v-show="!notMsg"></div> | |||
</div> | |||
</template> | |||
<script> | |||
@@ -45,6 +45,7 @@ export default { | |||
if (this.chartTime === '日') { | |||
this.tempData = this.israDayStatistic | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -53,6 +54,7 @@ export default { | |||
if (this.chartTime === '周') { | |||
this.tempData = this.israWeekStatistic | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -61,6 +63,7 @@ export default { | |||
if (this.chartTime === '月') { | |||
this.tempData = this.israMonthStatistic | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -69,6 +72,7 @@ export default { | |||
if (this.chartTime === '年') { | |||
this.tempData = this.israYearStatistic | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -33,6 +33,7 @@ export default { | |||
return false | |||
} | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
}, | |||
chartType: {// 监听类型变化,更新图 | |||
@@ -0,0 +1,86 @@ | |||
<template> | |||
<div class="drop-down-btn"> | |||
<button class="top-btn" @click='toggleExpand'><span style="margin-right: 3px;">{{active}}</span><svg-icon class-name="arrow" icon-class="arrow" :style="{transform:isExpand?'rotate(180deg)':'rotate(0deg)'}"/></button> | |||
<div v-show="isExpand" class="btn-box"> | |||
<button | |||
class="btn" | |||
v-for="opt in options" | |||
:key="opt" | |||
@click="clickBtn(opt)" | |||
v-show="active !== opt"> | |||
<span class="btn-text"> | |||
{{ opt }} | |||
</span> | |||
</button> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'DropDownBtn', | |||
components: {}, | |||
props: ['options', 'active'], | |||
data() { | |||
return { | |||
isExpand: false | |||
}; | |||
}, | |||
computed: {}, | |||
methods: { | |||
clickBtn(opt) { | |||
this.$emit('emitFun', opt) | |||
this.isExpand = !this.isExpand | |||
}, | |||
toggleExpand() { | |||
this.isExpand = !this.isExpand | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.drop-down-btn { | |||
z-index: 1000; | |||
button { | |||
border: none; | |||
appearance: none; | |||
outline: none; | |||
color: #fff; | |||
font-size: 14px; | |||
padding: 8px 5px 8px 8px; | |||
height: 32px; | |||
} | |||
.top-btn { | |||
background: #02457E; | |||
border-radius: 5px; | |||
cursor: pointer; | |||
.arrow { | |||
font-size: 16px; | |||
} | |||
} | |||
.btn-box { | |||
.btn { | |||
display: block; | |||
width: 100%; | |||
background: #03233C; | |||
&:hover { | |||
background: #02457E; | |||
transition: all 0.5s ease-out; | |||
} | |||
.btn-text{ | |||
padding: 0px 5px 6px; | |||
border-bottom: 1px solid #010D18; | |||
} | |||
} | |||
.btn:last-child{ | |||
border-bottom-right-radius: 5px; | |||
border-bottom-left-radius: 5px; | |||
.btn-text{ | |||
height: 16px; | |||
border-bottom: none; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -30,6 +30,7 @@ export default { | |||
return false | |||
} | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -53,6 +53,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '日') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -60,6 +61,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '周') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -67,6 +69,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '月') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -74,6 +77,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '年') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -53,6 +53,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '周' && this.chartType === '电耗能') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -60,6 +61,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '月' && this.chartType === '电耗能') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -67,6 +69,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '年' && this.chartType === '电耗能') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -74,6 +77,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartType === '天然气I' || this.chartType === '天然气II') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -242,7 +246,7 @@ export default { | |||
.map((_, index) => { | |||
const today = new Date(); | |||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; | |||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( | |||
return `${currentMonth < 10?'0'+currentMonth:currentMonth }.${new Date( | |||
dtimestamp | |||
).getDate()}`;}).reverse() | |||
}else if (this.chartTime == "月") { | |||
@@ -259,7 +263,7 @@ export default { | |||
return Array(12) | |||
.fill(1) | |||
.map((_, index) => { | |||
return `${currentYear}.${12 - index}`;}).reverse() | |||
return `${12 - index}`;}).reverse() | |||
} | |||
}, | |||
isLeapYear(year) { | |||
@@ -80,7 +80,7 @@ export default { | |||
.datetime { | |||
position: absolute; | |||
top: 45px; | |||
right: 240px; | |||
right: 425px; | |||
color: #fff; | |||
font-size: 20px; | |||
letter-spacing: 1px; | |||
@@ -35,6 +35,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
this.chartData = newVal || [] | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -1,5 +1,5 @@ | |||
<template> | |||
<div> | |||
<div style="height: 370px;"> | |||
<NotMsg v-show="notMsg"/> | |||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div> | |||
</div> | |||
@@ -30,6 +30,7 @@ export default { | |||
return false | |||
} | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -51,9 +52,11 @@ export default { | |||
let outputNum = [] | |||
let passRate = [] | |||
this.productline && this.productline.length > 0 && this.productline.map(item => { | |||
xData.push(item.lineName) | |||
outputNum.push(item.outputNum) | |||
passRate.push(item.passRate?item.passRate*100:null) | |||
if ((item.lineName).includes('D')) { | |||
xData.push(item.lineName) | |||
outputNum.push(item.outputNum) | |||
passRate.push(item.passRate?item.passRate*100:null) | |||
} | |||
}) | |||
if ( | |||
this.chart !== null && | |||
@@ -64,7 +67,7 @@ export default { | |||
} | |||
this.chart = echarts.init(document.getElementById('numRateChart')); | |||
var option = { | |||
grid: { top: 82, right: 60, bottom: 20, left: 60 }, | |||
grid: { top: 82, right: 60, bottom: 20, left: 90 }, | |||
tooltip: { | |||
trigger: "axis", | |||
axisPointer: { | |||
@@ -145,7 +148,6 @@ export default { | |||
color: "#fff", | |||
fontSize: 12, | |||
formatter: () =>{ | |||
console.log(value) | |||
return value ? '{value} %': '-' | |||
} | |||
}, | |||
@@ -0,0 +1,75 @@ | |||
<template> | |||
<span | |||
style=" | |||
font-size: 20px; | |||
color:#52FFF8; | |||
"> | |||
{{timestr}} | |||
</span> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'TimePrompt', | |||
components: {}, | |||
props: ['timestr'], | |||
data() { | |||
return { | |||
}; | |||
}, | |||
// watch: { | |||
// timestr:{ | |||
// handler(){ | |||
// } | |||
// } | |||
// } | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.drop-down-btn { | |||
z-index: 1000; | |||
button { | |||
border: none; | |||
appearance: none; | |||
outline: none; | |||
color: #fff; | |||
font-size: 14px; | |||
padding: 8px 5px 7px 8px; | |||
height: 32px; | |||
} | |||
.top-btn { | |||
background: #02457E; | |||
border-radius: 5px; | |||
cursor: pointer; | |||
.arrow { | |||
font-size: 16px; | |||
} | |||
} | |||
.btn-box { | |||
.btn { | |||
display: block; | |||
width: 100%; | |||
background: #03233C; | |||
&:hover { | |||
background: #02457E; | |||
transition: all 0.5s ease-out; | |||
} | |||
.btn-text{ | |||
padding: 0px 5px 6px; | |||
border-bottom: 1px solid #010D18; | |||
} | |||
} | |||
.btn:last-child{ | |||
border-bottom-right-radius: 5px; | |||
border-bottom-left-radius: 5px; | |||
.btn-text{ | |||
height: 16px; | |||
border-bottom: none; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -5,7 +5,6 @@ | |||
<script> | |||
import * as echarts from 'echarts'; | |||
import resize from './../mixins/resize' | |||
import { formatDate } from '@/utils' | |||
export default { | |||
name: 'GasChart', | |||
@@ -39,6 +38,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '日') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -46,6 +46,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '周') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -53,6 +54,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '月') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -60,6 +62,7 @@ export default { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '年') { | |||
this.updateChart() | |||
this.$emit('emitFun') | |||
} | |||
} | |||
}, | |||
@@ -1,6 +1,7 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="各工序缺陷汇总" size="middle" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div style="padding: 5px 10px;"> | |||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/> | |||
</div> | |||
@@ -9,9 +10,11 @@ | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'DefectSum', | |||
components: { Container }, | |||
components: { Container, TimePrompt }, | |||
computed: { | |||
defectSum() { | |||
return this.$store.state.websocket.defectSum | |||
@@ -19,6 +22,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
timestr: '', | |||
config: { | |||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'], | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
@@ -32,6 +36,9 @@ export default { | |||
} | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime('日') | |||
}, | |||
watch:{ | |||
defectSum: { | |||
handler(newVal, oldVal) { | |||
@@ -44,8 +51,16 @@ export default { | |||
]); | |||
this.config.data = outArr | |||
this.$refs['defectScrollBoard'].updateRows(outArr) | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 240px; | |||
} | |||
</style> |
@@ -1,25 +1,41 @@ | |||
<template> | |||
<Container name="能源监控" size="large" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div class="chart" style="height: 370px; margin-top: 8px;"> | |||
<EnergeMonitoringChart/> | |||
<EnergeMonitoringChart @emitFun='dateUpdate'/> | |||
</div> | |||
</Container> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import EnergeMonitoringChart from '../components/EnergeMonitoringChart'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'EnergyMonitoring', | |||
components: { Container, EnergeMonitoringChart }, | |||
components: { Container, EnergeMonitoringChart, TimePrompt }, | |||
data() { | |||
return { | |||
timestr: '' | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime('日') | |||
}, | |||
methods: { | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 18px; | |||
left: 170px; | |||
} | |||
.timeToggle { | |||
position: absolute; | |||
right: 20px; | |||
@@ -1,6 +1,7 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="设备报警" size="middle" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div style="padding: 5px 10px;"> | |||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/> | |||
</div> | |||
@@ -9,9 +10,11 @@ | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'EqAlarm', | |||
components: { Container }, | |||
components: { Container, TimePrompt }, | |||
computed: { | |||
sjgEquipment() { | |||
return this.$store.state.websocket.sjgEquipment | |||
@@ -19,6 +22,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
timestr: '', | |||
config: { | |||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
@@ -44,6 +48,7 @@ export default { | |||
} | |||
}, | |||
mounted(){ | |||
this.timestr = switchShowTime('日') | |||
}, | |||
watch:{ | |||
sjgEquipment: { | |||
@@ -57,8 +62,16 @@ export default { | |||
]); | |||
this.config.data = outArr | |||
this.$refs['eqScrollBoard'].updateRows(outArr) | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 170px; | |||
} | |||
</style> |
@@ -1,25 +1,41 @@ | |||
<template> | |||
<Container name="产线产量及良品率" size="large" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div class="chart" style="height: 370px; margin-top: 8px;"> | |||
<NumRateChart /> | |||
<NumRateChart @emitFun='dateUpdate'/> | |||
</div> | |||
</Container> | |||
</template> | |||
<script> | |||
import Container from '../components/Container'; | |||
import NumRateChart from '../components/NumRateChart'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'NumRate', | |||
components: { Container, NumRateChart }, | |||
components: { Container, NumRateChart, TimePrompt }, | |||
data() { | |||
return { | |||
timestr: '' | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime('日') | |||
}, | |||
methods: { | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 265px; | |||
} | |||
.timeToggle { | |||
position: absolute; | |||
right: 20px; | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<Container name="工单监控" size="middle" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div style="padding: 5px 10px;" class="WOMonitoring"> | |||
<dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/> | |||
</div> | |||
@@ -7,10 +8,12 @@ | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
import { formatDate } from '@/utils' | |||
export default { | |||
name: 'WorkOrderMonitoring', | |||
components: { Container }, | |||
components: { Container, TimePrompt }, | |||
computed: { | |||
order() { | |||
return this.$store.state.websocket.workOrder | |||
@@ -18,6 +21,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
timestr: '', | |||
config: { | |||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'], | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
@@ -30,7 +34,8 @@ export default { | |||
} | |||
} | |||
}, | |||
methods:{ | |||
mounted(){ | |||
this.timestr = switchShowTime('日') | |||
}, | |||
watch:{ | |||
order: { | |||
@@ -47,8 +52,16 @@ export default { | |||
]); | |||
this.config.data = outArr | |||
this.$refs['worderScrollBoard'].updateRows(outArr) | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 170px; | |||
} | |||
</style> |
@@ -7,6 +7,7 @@ | |||
<template> | |||
<Container name="能耗" size="middle" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<EnergeTop /> | |||
<SplitLine :horizontal="true" /> | |||
<div class="" style="flex: 2; padding: 8px"> | |||
@@ -35,7 +36,7 @@ | |||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/> | |||
</div> | |||
<div class="chart" style="height: 200px; margin-top: 8px;"> | |||
<GasChart :chartType='chartType' :chartTime='chartTime'/> | |||
<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/> | |||
</div> | |||
</div> | |||
</Container> | |||
@@ -49,6 +50,8 @@ import SplitLine from '../components/line'; | |||
import EnergeTop from './EnergeTop'; | |||
import GasChart from '../components/GasChart.vue'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'EnergeCost', | |||
components: { | |||
@@ -58,14 +61,19 @@ export default { | |||
EnergeTop, | |||
GasChart, | |||
SelectorBtnGroup, | |||
TimePrompt | |||
}, | |||
props: {}, | |||
data() { | |||
return { | |||
chartType:'电耗能', | |||
chartTime:'周' | |||
chartTime:'周', | |||
timestr: '' | |||
}; | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
}, | |||
computed: { | |||
gasInfoMsg() { | |||
return this.$store.state.websocket.gasInfo | |||
@@ -74,37 +82,27 @@ export default { | |||
methods: { | |||
// 切换能源 | |||
toggleType(val) { | |||
console.log('能源' + val) | |||
this.chartType = val | |||
// if (val === '天然气I' || val === '天然气II') { | |||
// if (this.chartTime === '周') { | |||
// this.chartType = val | |||
// } else { | |||
// this.$message.warning('暂无数据') | |||
// } | |||
// }else { | |||
// this.chartType = val | |||
// } | |||
}, | |||
// 切换时间 | |||
toggleDate(val) { | |||
console.log('时间' + val) | |||
this.chartTime = val | |||
// if (val === '月' || val === '年') { | |||
// if (this.chartType === '电耗能') { | |||
// this.chartTime = val | |||
// } else { | |||
// this.$message.warning('暂无数据') | |||
// } | |||
// }else{ | |||
// this.chartTime = val | |||
// } | |||
} | |||
this.timestr = switchShowTime(val) | |||
}, | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 120px; | |||
} | |||
.lgd { | |||
color: #fff; | |||
@@ -1,6 +1,7 @@ | |||
<template> | |||
<div class="gas-handle" style="flex: 2"> | |||
<Container name="烟气处理" size="large" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div | |||
class="" | |||
style=" | |||
@@ -99,7 +100,7 @@ | |||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> | |||
</div> | |||
<div class="chart" style="height: 250px;margin-top: 10px;"> | |||
<FlueGasChart :chartType='chartType' :chartTime='chartTime'/> | |||
<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/> | |||
</div> | |||
</div> | |||
</Container> | |||
@@ -113,6 +114,8 @@ import KilnLine from '../components/line'; | |||
// import Switcher from '../components/Switcher'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import FlueGasChart from '../components/FlueGasChart'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'GasHandle', | |||
@@ -122,12 +125,14 @@ export default { | |||
KilnLine, | |||
SelectorBtnGroup, | |||
FlueGasChart, | |||
TimePrompt | |||
}, | |||
props: {}, | |||
data() { | |||
return { | |||
chartType:'氧气含量', | |||
chartTime:'日' | |||
chartTime:'日', | |||
timestr: '' | |||
}; | |||
}, | |||
computed: { | |||
@@ -135,6 +140,9 @@ export default { | |||
return this.$store.state.websocket.exhaustGasInfo | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
}, | |||
methods: { | |||
// 烟气 | |||
toggleType(val) { | |||
@@ -143,14 +151,23 @@ export default { | |||
}, | |||
// 切换时间 | |||
toggleDate(val) { | |||
console.log('时间' + val) | |||
this.chartTime = val | |||
} | |||
this.timestr = switchShowTime(val) | |||
}, | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 170px; | |||
} | |||
.gas-handle { | |||
} | |||
@@ -1,34 +1,8 @@ | |||
<!-- | |||
filename: IsraCheck.vue | |||
author: liubin | |||
date: 2023-12-06 09:50:13 | |||
description: | |||
--> | |||
<template> | |||
<Container name="ISRA缺陷检测" size="middle" style=""> | |||
<ISRAChart /> | |||
<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;"> | |||
<div class="f" style="flex: 9;"> | |||
</div> | |||
<ul | |||
class="legend" | |||
style=" | |||
flex: 1; | |||
padding: 8px; | |||
display: flex; | |||
justify-content: center; | |||
gap: 20px; | |||
color: #fff; | |||
font-size: 14px; | |||
"> | |||
<li class="fault-1">缺陷1</li> | |||
<li class="fault-2">缺陷2</li> | |||
<li class="fault-3">缺陷3</li> | |||
<li class="fault-4">缺陷4</li> | |||
</ul> | |||
</div> --> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<ISRAChart @emitFun='dateUpdate'/> | |||
</Container> | |||
</template> | |||
@@ -36,20 +10,36 @@ | |||
import Container from '../components/Container'; | |||
import ShadowRect from '../components/ShadowRect.vue'; | |||
import ISRAChart from '../components/ISRAChart.vue'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'IsraCheck', | |||
components: { Container, ShadowRect, ISRAChart }, | |||
components: { Container, ShadowRect, ISRAChart, TimePrompt }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
return { | |||
timestr: '' | |||
}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
mounted() { | |||
this.timestr = switchShowTime('日') | |||
}, | |||
methods: { | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime('日') | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.timeShow { | |||
position: absolute; | |||
top: 19px; | |||
left: 210px; | |||
} | |||
ul, | |||
li { | |||
margin: 0; | |||
@@ -0,0 +1,44 @@ | |||
import moment from "moment"; | |||
export const switchShowTime = (type) => { | |||
let nowTime = new Date | |||
let startTime = '' | |||
let endTime = '' | |||
let currentYear = nowTime.getFullYear(); | |||
let startYear = null | |||
switch(type) { | |||
case '日': | |||
let hour = nowTime.getHours() | |||
if (hour > 6) { | |||
startTime = moment(nowTime).format('yyyy.MM.DD')+' 7点' | |||
endTime = moment(moment(nowTime)+86400000).format('yyyy.MM.DD')+' 7点' | |||
}else{ | |||
endTime = moment(nowTime).format('yyyy.MM.DD')+' 7点' | |||
startTime = moment(moment(nowTime)-86400000).format('yyyy.MM.DD')+' 7点' | |||
} | |||
return startTime+'-'+endTime | |||
case '周': | |||
let timestamp = nowTime- 24 * 60 * 60 * 1000 | |||
endTime = moment(timestamp).format('yyyy.MM.DD') | |||
startTime = moment(timestamp-24 * 60 * 60 * 1000 * 6).format('yyyy.MM.DD') | |||
return startTime+'-'+endTime | |||
case '月': | |||
let day = 29; | |||
let lastMonth = nowTime.getMonth() === 0 ? 12 : nowTime.getMonth(); | |||
if (lastMonth === 2) { | |||
day = isLeapYear(currentYear) ? 29 : 28; | |||
} | |||
if (lastMonth === 12) { | |||
startYear = currentYear - 1 | |||
} | |||
startTime = startYear+'.'+lastMonth+'.'+day | |||
endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28' | |||
return startTime+'-'+endTime | |||
default:// 年 | |||
startTime = (currentYear - 1)+'.12.29' | |||
endTime = currentYear+'.12.28' | |||
return startTime+'-'+endTime | |||
} | |||
} | |||
const isLeapYear = (year) => { | |||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0); | |||
} |
@@ -1,36 +1,51 @@ | |||
<template> | |||
<Container name="产线当日缺陷分类" size="middle"> | |||
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' /> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<DropDownBtn class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' /> | |||
<div class="chart" style="height: 375px; margin-top: 8px;"> | |||
<DefectClassChart :chartType='chartType'/> | |||
<DefectClassChart :chartType='chartType' @emitFun='dateUpdate'/> | |||
</div> | |||
</Container> | |||
</template> | |||
<script> | |||
import Container from '../components/Container'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import DropDownBtn from '../components/DropDownBtn'; | |||
import DefectClassChart from '../components/DefectClassChart'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'DefectClass', | |||
components: { Container, SelectorBtnGroup, DefectClassChart }, | |||
components: { Container, DropDownBtn, DefectClassChart, TimePrompt }, | |||
data() { | |||
return { | |||
chartType:'Y61' | |||
chartType:'Y61', | |||
timestr: '' | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime('日') | |||
}, | |||
methods: { | |||
// 切换产线 | |||
toggleType(val) { | |||
console.log('产线' + val) | |||
this.chartType = val | |||
} | |||
}, | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 18px; | |||
left: 260px; | |||
} | |||
.typeToggle { | |||
position: absolute; | |||
right: 20px; | |||
top: 30px; | |||
top: 15px; | |||
} | |||
</style> |
@@ -1,38 +1,54 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="产线缺陷统计" size="small"> | |||
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<DropDownBtn class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> | |||
<div class="chart" style="height: 238px; margin-top: 8px;"> | |||
<DefectChart :chartTime='chartTime'/> | |||
<DefectChart :chartTime='chartTime' @emitFun='dateUpdate'/> | |||
</div> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import DropDownBtn from '../components/DropDownBtn'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import DefectChart from '../components/DefectChart'; | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'DefectStatistics', | |||
components: { Container, SelectorBtnGroup, DefectChart }, | |||
components: { Container, DropDownBtn, DefectChart, TimePrompt }, | |||
data() { | |||
return { | |||
chartTime:'日' | |||
chartTime:'日', | |||
timestr: '' | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
}, | |||
methods: { | |||
// 切换时间 | |||
toggleDate(val) { | |||
console.log('时间' + val) | |||
this.chartTime = val | |||
} | |||
this.timestr = switchShowTime(val) | |||
}, | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 210px; | |||
} | |||
.timeToggle { | |||
position: absolute; | |||
right: 20px; | |||
top: 20px; | |||
top: 15px; | |||
} | |||
</style> |
@@ -1,6 +1,7 @@ | |||
<template> | |||
<div style="flex: 1;" class="orderContainer"> | |||
<Container name="订单完成情况" size="small" style=""> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div style="padding: 5px 10px;"> | |||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/> | |||
</div> | |||
@@ -9,10 +10,12 @@ | |||
</template> | |||
<script> | |||
import Container from '../components/Container' | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { formatDate } from '@/utils' | |||
import { switchShowTime } from '../utils' | |||
export default { | |||
name: 'OrderStatus', | |||
components: { Container }, | |||
components: { Container, TimePrompt }, | |||
computed: { | |||
order() { | |||
return this.$store.state.websocket.order | |||
@@ -20,6 +23,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
timestr: '', | |||
config: { | |||
header: ['上线时间', '客户名称', '规格','完成度'], | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
@@ -31,7 +35,9 @@ export default { | |||
} | |||
} | |||
}, | |||
mounted() {}, | |||
mounted() { | |||
this.timestr = switchShowTime('日') | |||
}, | |||
watch:{ | |||
order:{ | |||
handler() { | |||
@@ -49,8 +55,16 @@ export default { | |||
]); | |||
this.config.data = outArr | |||
this.$refs['orderScrollBoard'].updateRows(outArr) | |||
this.timestr = switchShowTime('日') | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 210px; | |||
} | |||
</style> |
@@ -1,5 +1,6 @@ | |||
<template> | |||
<Container name="本日生产良品率" size="large"> | |||
<TimePrompt class="timeShow" :timestr="timestr" /> | |||
<div style="padding: 5px 10px;"> | |||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/> | |||
</div> | |||
@@ -22,7 +23,7 @@ | |||
</div> | |||
</div> | |||
<div class="chart" style="height: 230px;"> | |||
<YieldRateChart :chartTime='chartTime' :chartType='chartType'/> | |||
<YieldRateChart :chartTime='chartTime' :chartType='chartType' @emitFun='dateUpdate'/> | |||
</div> | |||
</div> | |||
</Container> | |||
@@ -33,10 +34,12 @@ import ScrollBoard from '../components/ScrollBoard' | |||
import KilnLine from '../components/line' | |||
import Switcher from '../components/Switcher' | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import YieldRateChart from '../components/YieldRateChart' | |||
import YieldRateChart from '../components/YieldRateChart'; | |||
import TimePrompt from '../components/TimePrompt'; | |||
import { switchShowTime } from '../utils'; | |||
export default { | |||
name: 'YieldRate', | |||
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart }, | |||
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart, TimePrompt }, | |||
computed: { | |||
yieldRateTable() { | |||
return this.$store.state.websocket.yieldRateTable | |||
@@ -55,7 +58,8 @@ export default { | |||
rowNum: 5 | |||
}, | |||
chartType:false, | |||
chartTime: "日" | |||
chartTime: "日", | |||
timestr: "" | |||
} | |||
}, | |||
watch:{ | |||
@@ -73,6 +77,9 @@ export default { | |||
} | |||
} | |||
}, | |||
mounted() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
}, | |||
methods: { | |||
changeType(val) { | |||
this.chartType = val | |||
@@ -80,11 +87,21 @@ export default { | |||
// 切换时间 | |||
toggleDate(val) { | |||
this.chartTime = val | |||
} | |||
this.timestr = switchShowTime(this.chartTime) | |||
}, | |||
// 数据更新 | |||
dateUpdate() { | |||
this.timestr = switchShowTime(this.chartTime) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeShow { | |||
position: absolute; | |||
top: 20px; | |||
left: 235px; | |||
} | |||
.lgd { | |||
color: #fff; | |||