更新
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div class="title">异常原因Top5</div>
|
||||
<div class="alarm-item" style="margin-top: 14px;">
|
||||
<div class="item top1">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -16,10 +16,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top2">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -31,10 +31,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top3">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -46,10 +46,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top4">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -61,10 +61,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top5">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -76,7 +76,7 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1999,7 +1999,7 @@ export default {
|
||||
|
||||
// 根据位置编码（如FK10101L）获取单个位置的状态类名
|
||||
getPositionClass(positionCode) {
|
||||
console.log('positionCode'.positionCode);
|
||||
// console.log('positionCode'.positionCode);
|
||||
|
||||
// 查找完全匹配的lineEdgeLibraryCode
|
||||
const targetData = this.dataList.find(item =>
|
||||
|
||||
@@ -1,61 +1,63 @@
|
||||
<template>
|
||||
<div id="dayReport" class="dayReport" :style="styles">
|
||||
<ReportHeader top-title="车间生产看板" />
|
||||
<div class="main-body" style=" flex: 1; display: flex;padding: 16px 20px 22px 24px;flex-direction: column;">
|
||||
<div class="top" style="display: flex;gap: 16px;">
|
||||
<div class="top-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 367px 1493px;
|
||||
">
|
||||
<agvStatus />
|
||||
<threeDimensionalChart :dataList="dataList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex;gap: 16px;margin-top: 6px;">
|
||||
<div class="bottom-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 512px 930px 402px;
|
||||
">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 213px 213px;
|
||||
">
|
||||
<taskType />
|
||||
<taskStatus />
|
||||
</div>
|
||||
<div class="center-three" style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 330px 92px;
|
||||
">
|
||||
<realTask />
|
||||
<alarm />
|
||||
<div id="dayReport" class="dayReport" :style="styles">
|
||||
<ReportHeader top-title="车间生产看板" />
|
||||
<div
|
||||
class="main-body"
|
||||
style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px 20px 22px 24px;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="top" style="display: flex; gap: 16px">
|
||||
<div
|
||||
class="top-three"
|
||||
style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
|
||||
<agvStatus />
|
||||
<threeDimensionalChart :dataList="dataList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px; margin-top: 6px">
|
||||
<div
|
||||
class="bottom-three"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 512px 930px 402px;
|
||||
">
|
||||
<div
|
||||
class="left-three"
|
||||
style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
|
||||
<taskType />
|
||||
<taskStatus />
|
||||
</div>
|
||||
<div
|
||||
class="center-three"
|
||||
style="display: grid; gap: 16px; grid-template-rows: 330px 92px">
|
||||
<realTask />
|
||||
<alarm />
|
||||
|
||||
<!-- <taskStatus /> -->
|
||||
</div>
|
||||
<alarmTop />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <taskStatus /> -->
|
||||
</div>
|
||||
<alarmTop />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ReportHeader from './components/Header.vue'
|
||||
import ReportHeader from './components/Header.vue';
|
||||
// import screenfull from 'screenfull'
|
||||
import agvStatus from './components/agvStatus.vue'
|
||||
import taskType from './components/taskType.vue'
|
||||
import realTask from './components/realTask.vue'
|
||||
import alarm from './components/alarm.vue'
|
||||
import alarmTop from './components/alarmTop.vue'
|
||||
import agvStatus from './components/agvStatus.vue';
|
||||
import taskType from './components/taskType.vue';
|
||||
import realTask from './components/realTask.vue';
|
||||
import alarm from './components/alarm.vue';
|
||||
import alarmTop from './components/alarmTop.vue';
|
||||
|
||||
import taskStatus from './components/taskStatus.vue'
|
||||
|
||||
import threeDimensionalChart from './components/threeDimensionalChart.vue'
|
||||
import { getLineEdgeLibraryList } from '../../../api/visualization/visualization'
|
||||
import taskStatus from './components/taskStatus.vue';
|
||||
|
||||
import threeDimensionalChart from './components/threeDimensionalChart.vue';
|
||||
import { getLineEdgeLibraryList } from '../../../api/visualization/visualization';
|
||||
|
||||
// import financeCosts from './components/financeCosts.vue'
|
||||
// import keyProductionIndicators from './components/keyProductionIndicators.vue'
|
||||
@@ -64,151 +66,164 @@ import { getLineEdgeLibraryList } from '../../../api/visualization/visualization
|
||||
// import keyWork from './components/keyWork.vue'
|
||||
// import moment from 'moment'
|
||||
export default {
|
||||
name: 'DayReport',
|
||||
components: { ReportHeader, agvStatus, threeDimensionalChart, taskType, taskStatus, realTask, alarm, alarmTop },
|
||||
data() {
|
||||
return {
|
||||
// isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dataList:[]
|
||||
}
|
||||
},
|
||||
name: 'DayReport',
|
||||
components: {
|
||||
ReportHeader,
|
||||
agvStatus,
|
||||
threeDimensionalChart,
|
||||
taskType,
|
||||
taskStatus,
|
||||
realTask,
|
||||
alarm,
|
||||
alarmTop,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
// this.init()
|
||||
this.windowWidth(document.documentElement.clientWidth)
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['sidebar']),
|
||||
styles() {
|
||||
const v = Math.floor(this.value * this.beilv * 100) / 10000
|
||||
return {
|
||||
transform: `scale(${v})`,
|
||||
transformOrigin: 'left top'
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
clientWidth(val) {
|
||||
if (!this.timer) {
|
||||
this.clientWidth = val
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
this.timer = true
|
||||
let _this = this
|
||||
setTimeout(function () {
|
||||
_this.timer = false
|
||||
}, 500)
|
||||
}
|
||||
// 这里可以添加修改时的方法
|
||||
this.windowWidth(val);
|
||||
}
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// clearInterval(this.timer)
|
||||
// this.destroy()
|
||||
// },
|
||||
mounted() {
|
||||
const _this = this;
|
||||
_this.beilv = document.documentElement.clientWidth / 1920
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||||
this.beilv = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData(data) {
|
||||
console.log(data);
|
||||
getLineEdgeLibraryList().then((res) => {
|
||||
console.log('res', res);
|
||||
created() {
|
||||
// this.init()
|
||||
this.windowWidth(document.documentElement.clientWidth);
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['sidebar']),
|
||||
styles() {
|
||||
const v = Math.floor(this.value * this.beilv * 100) / 10000;
|
||||
return {
|
||||
transform: `scale(${v})`,
|
||||
transformOrigin: 'left top',
|
||||
// overflow: hidden;
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
clientWidth(val) {
|
||||
if (!this.timer) {
|
||||
this.clientWidth = val;
|
||||
this.beilv2 = this.clientWidth / 1920;
|
||||
this.timer = true;
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.timer = false;
|
||||
}, 500);
|
||||
}
|
||||
// 这里可以添加修改时的方法
|
||||
this.windowWidth(val);
|
||||
},
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// clearInterval(this.timer)
|
||||
// this.destroy()
|
||||
// },
|
||||
mounted() {
|
||||
const _this = this;
|
||||
let baseWidth = 1920;
|
||||
if (this.$route.query.keyword == 'home') {
|
||||
baseWidth = 2180;
|
||||
}
|
||||
_this.beilv = document.documentElement.clientWidth / baseWidth;
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`;
|
||||
this.beilv = _this.clientWidth / baseWidth;
|
||||
})();
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData(data) {
|
||||
console.log(data);
|
||||
getLineEdgeLibraryList().then((res) => {
|
||||
console.log('res', res);
|
||||
|
||||
this.dataList =res.data
|
||||
})
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
},
|
||||
// change() {
|
||||
// this.isFullScreen = screenfull.isFullscreen
|
||||
// },
|
||||
// init() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.on('change', this.change)
|
||||
// },
|
||||
// destroy() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.off('change', this.change)
|
||||
// },
|
||||
// // 全屏
|
||||
// screenfullChange() {
|
||||
// console.log('screenfull.enabled', screenfull.isEnabled);
|
||||
this.dataList = res.data;
|
||||
});
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value;
|
||||
this.beilv2 = this.clientWidth / 1920;
|
||||
},
|
||||
// change() {
|
||||
// this.isFullScreen = screenfull.isFullscreen
|
||||
// },
|
||||
// init() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.on('change', this.change)
|
||||
// },
|
||||
// destroy() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.off('change', this.change)
|
||||
// },
|
||||
// // 全屏
|
||||
// screenfullChange() {
|
||||
// console.log('screenfull.enabled', screenfull.isEnabled);
|
||||
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.toggle(this.$refs.dayReportB)
|
||||
// },
|
||||
// changeDate(val) {
|
||||
// this.date = val
|
||||
// // this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||||
// // this.getData()
|
||||
// if (this.date === moment().format('yyyy-MM-DD')) {
|
||||
// this.loopTime()
|
||||
// } else {
|
||||
// clearInterval(this.timer)
|
||||
// }
|
||||
// },
|
||||
// 导出
|
||||
// exportPDF() {
|
||||
// this.$message.success('正在导出，请稍等！')
|
||||
// const element = document.getElementById('dayRepDom')
|
||||
// element.style.display = 'block'
|
||||
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
|
||||
// html2canvas(element, {
|
||||
// dpi: 300, // Set to 300 DPI
|
||||
// scale: 3 // Adjusts your resolution
|
||||
// }).then(function(canvas) {
|
||||
// const imgWidth = 595.28
|
||||
// const imgHeight = 841.89
|
||||
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
|
||||
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
// setTimeout(() => {
|
||||
// PDF.save(fileName) // 导出文件名
|
||||
// }, 1000)
|
||||
// })
|
||||
// element.style.display = 'none'
|
||||
// }
|
||||
}
|
||||
}
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.toggle(this.$refs.dayReportB)
|
||||
// },
|
||||
// changeDate(val) {
|
||||
// this.date = val
|
||||
// // this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||||
// // this.getData()
|
||||
// if (this.date === moment().format('yyyy-MM-DD')) {
|
||||
// this.loopTime()
|
||||
// } else {
|
||||
// clearInterval(this.timer)
|
||||
// }
|
||||
// },
|
||||
// 导出
|
||||
// exportPDF() {
|
||||
// this.$message.success('正在导出，请稍等！')
|
||||
// const element = document.getElementById('dayRepDom')
|
||||
// element.style.display = 'block'
|
||||
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
|
||||
// html2canvas(element, {
|
||||
// dpi: 300, // Set to 300 DPI
|
||||
// scale: 3 // Adjusts your resolution
|
||||
// }).then(function(canvas) {
|
||||
// const imgWidth = 595.28
|
||||
// const imgHeight = 841.89
|
||||
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
|
||||
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
// setTimeout(() => {
|
||||
// PDF.save(fileName) // 导出文件名
|
||||
// }, 1000)
|
||||
// })
|
||||
// element.style.display = 'none'
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dayReport {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #F2F4F9;
|
||||
// background-size: cover;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #f2f4f9;
|
||||
// background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user