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

projects/mesxc-zjl #187

Merged
juzi merged 5 commits from projects/mesxc-zjl into projects/mesxc-test 2024-01-25 09:11:16 +08:00
Conversation 0 Commits 5 Files Changed 26 +484 -105
26 changed files with 484 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/icons/svg/arrow.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/views/databoard/assets/head.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 132 KiB

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

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

1
src/views/databoard/components/DefectClassChart.vue
View File

@ -33,6 +33,7 @@ export default {
return false
}
this.updateChart()
this.$emit('emitFun')
}
},
chartType: {// 监听类型变化，更新图

86
src/views/databoard/components/DropDownBtn.vue Normal file
View File

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

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

@ -30,6 +30,7 @@ export default {
return false
}
this.updateChart()
this.$emit('emitFun')
}
}
},

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

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

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

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

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

@ -80,7 +80,7 @@ export default {
.datetime {
position: absolute;
top: 45px;
right: 240px;
right: 425px;
color: #fff;
font-size: 20px;
letter-spacing: 1px;

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

@ -35,6 +35,7 @@ export default {
handler(newVal, oldVal) {
this.chartData = newVal || []
this.updateChart()
this.$emit('emitFun')
}
}
},

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

@ -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} %': '-'
}
},

75
src/views/databoard/components/TimePrompt.vue Normal file
View File

@ -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
src/views/databoard/components/YieldRateChart.vue
View File

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

17
src/views/databoard/deepProcessing/DefectSum.vue
View File

@ -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>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 240px;
}
</style>

20
src/views/databoard/deepProcessing/EnergyMonitoring.vue
View File

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

15
src/views/databoard/deepProcessing/EqAlarm.vue
View File

@ -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>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
</style>

20
src/views/databoard/deepProcessing/NumRate.vue
View File

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

17
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
View File

@ -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>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
</style>

44
src/views/databoard/kiln/EnergeCost.vue
View File

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

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

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

54
src/views/databoard/kiln/IsraCheck.vue
View File

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

44
src/views/databoard/utils/index.js Normal file
View File

@ -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);
}

31
src/views/databoard/wholePlant/DefectClass.vue
View File

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

32
src/views/databoard/wholePlant/DefectStatistics.vue
View File

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

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

@ -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>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 210px;
}
</style>

27
src/views/databoard/wholePlant/YieldRate.vue
View File

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