554 lines
15 KiB
Vue
554 lines
15 KiB
Vue
<template>
|
||
<div class="widgets-home" ref="main">
|
||
<div class="widgets-content">
|
||
<div class="retangleWrap retangleWrapTop">
|
||
<div class="retangle retangleImg">
|
||
<div class="companyName">超低排放系统</div>
|
||
<div class="companyDesc">超低排放系统，超低排放系统超低排放系统超低排放系统</div>
|
||
<div class="companyDesc">超低排放系统超低排放系统超低排放系统，超低排放系统超低排放系统</div>
|
||
<div class="companyDesc">超低排放系统超低排放系统超低排放系统超低排放系统超低排放系统</div>
|
||
<img class="topCardImg" src="img/topCard.png">
|
||
</div>
|
||
</div>
|
||
<el-row style="margin-bottom: 20px;">
|
||
<el-col :span="7">
|
||
<div class="retangleWrap" style="padding-right: 0;">
|
||
<div class="retangle bottomRetangle" style="">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="font-size: 16px;font-weight: 400;line-height: 24px;">预警提示</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;height: 311px;">
|
||
<div>
|
||
<p style="display: flex;justify-content: space-between;height: 30px;line-height: 30px;">
|
||
<span>颗粒物污染上升</span>
|
||
<span style="font-size: 24px;">0.035%</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
|
||
<div class="retangle tableRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备
|
||
</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;">
|
||
<el-table :data="equipList" style="width: 100%;height: 285px;">
|
||
<el-table-column prop="number" label="设备编号" />
|
||
<el-table-column prop="name" label="设备名称" />
|
||
<el-table-column prop="belong_dept_name" label="所在车间" />
|
||
<el-table-column prop="state" label="设备状态">
|
||
<template #default="scope">
|
||
<el-tag class="ml-2" type="success" v-if="scope.row.state == 10">{{
|
||
eqState_[scope.row.state] }}</el-tag>
|
||
<el-tag class="ml-2" type="warning" v-if="scope.row.state == 20">{{
|
||
eqState_[scope.row.state] }}</el-tag>
|
||
<el-tag class="ml-2" type="info" v-if="scope.row.state == 30">{{
|
||
eqState_[scope.row.state] }}</el-tag>
|
||
<el-tag class="ml-2" type="danger" v-if="scope.row.state == 40">{{
|
||
eqState_[scope.row.state] }}</el-tag>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<div class="retangleWrap retangleWrapTable">
|
||
<div class="retangle tableRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历
|
||
</div>
|
||
</div>
|
||
<div style="">
|
||
<el-calendar v-model="calendarValue" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
data() {
|
||
return {
|
||
time: '',
|
||
day: '',
|
||
year_s: '',
|
||
day_s: '',
|
||
month_s: '',
|
||
deptName: '10车间',
|
||
yesterday: '',
|
||
yesterdayBefore: '',
|
||
yearData: [],
|
||
monthData: [],
|
||
warningNum: 0,
|
||
warningNum2: 0,
|
||
chartData: [],
|
||
tableData: [],
|
||
equipList: [],
|
||
calendarValue: '',
|
||
eqState_: {
|
||
10: '完好',
|
||
20: '限用',
|
||
30: '在修',
|
||
40: '禁用',
|
||
},
|
||
dayPassNum7: 0,
|
||
tongbi7: 0,
|
||
dayPassNum10: 0,
|
||
tongbi10: 0,
|
||
dayPayNum6: 0,//交付数
|
||
tongbi06: 0,
|
||
|
||
monthPayNum6: 0,
|
||
monthPassRate7: 0,
|
||
monthPassRate10: 0,
|
||
|
||
|
||
dayAVGcountOk: 0,
|
||
AVGOktongbi: 0,
|
||
dayAVGcountDelivered: 0,
|
||
AVGDelivertongbi: 0,
|
||
monthRateAVG: 0,
|
||
monthPayNumAVG: 0,
|
||
|
||
option: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
||
top: '5%',
|
||
left: '1%',
|
||
right: '1%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
// show: false, // X 轴标签文字旋转角度
|
||
},
|
||
data: []
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: false, // X 轴标签文字旋转角度
|
||
},
|
||
},
|
||
series: {
|
||
data: [],
|
||
type: 'bar',
|
||
barMaxWidth: 50,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#000'
|
||
},
|
||
itemStyle: {
|
||
borderRadius: [5, 5, 0, 0],
|
||
normal: { color: 'rgb(20, 141, 255)' }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$emit('on-mounted');
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year = myDate.getFullYear();
|
||
let month = myDate.getMonth() + 1;
|
||
let day = myDate.getDate();
|
||
that.year_s = year;
|
||
that.month_s = month;
|
||
that.day_s = day;
|
||
|
||
let yesterday = new Date(myDate.getTime() - 24 * 60 * 60 * 1000);
|
||
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
|
||
let yesterdayBefore = new Date(yesterday.getTime() - 24 * 60 * 60 * 1000);
|
||
this.yesterdayBefore = yesterdayBefore.getFullYear() + "-" + (yesterdayBefore.getMonth() + 1) + "-" + yesterdayBefore.getDate();
|
||
that.getdayData();
|
||
that.getMonthData();
|
||
this.getAVGDayData();
|
||
this.calendarValue = new Date();
|
||
this.getEquipList();
|
||
this.getMaterialList();
|
||
this.getProductStatistic();
|
||
},
|
||
methods: {
|
||
// 动态绑定Class
|
||
bindClass(rate) {
|
||
let classInfo = {
|
||
socketDom: true, redColor: false, greenColor: true
|
||
}
|
||
if (rate > 0) {
|
||
classInfo.greenColor = true
|
||
} else if (rate < 0) {
|
||
classInfo.redColor = true
|
||
}
|
||
return classInfo
|
||
},
|
||
getEquipList() {
|
||
this.$API.em.equipment.list.req({ page: 0, type: 10 }).then(res => {
|
||
this.equipList = res
|
||
})
|
||
},
|
||
getMaterialList() {
|
||
this.$API.mtm.material.list.req({ page: 0, type: 10 }).then(res => {
|
||
this.tableData = res.filter(item => {
|
||
return item.count > 0;
|
||
});
|
||
console.log('getMaterialList', res)
|
||
})
|
||
},
|
||
|
||
showTime() {
|
||
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||
},
|
||
interEquipment() {
|
||
this.$router.replace({ path: '/em/equipment' })
|
||
},
|
||
//昨日数据
|
||
getdayData() {
|
||
let that = this;
|
||
let date = that.yesterday;
|
||
let obj6 = {
|
||
query: { start_date: date, end_date: date, mio_type: 'sale_out', material_id: '' },
|
||
};
|
||
let obj7 = {
|
||
query: { start_date: date, end_date: date, dept_name: "7车间" },
|
||
};
|
||
let obj10 = {
|
||
query: { start_date: date, end_date: date, dept_name: "10车间" },
|
||
};
|
||
|
||
let date0 = that.yesterdayBefore;
|
||
let obj06 = {
|
||
query: { start_date: date0, end_date: date0, mio_type: 'sale_out', material_id: '' },
|
||
};
|
||
let obj07 = {
|
||
query: { start_date: date0, end_date: date0, dept_name: "7车间" },
|
||
};
|
||
let obj010 = {
|
||
query: { start_date: date0, end_date: date0, dept_name: "10车间" },
|
||
};
|
||
//7车间昨日合格数
|
||
that.$API.bi.dataset.exec.req('lineDay', obj7).then((res7) => {
|
||
let list7 = res7.data2.ds0;
|
||
if (list7.length > 0) {
|
||
this.dayPassNum7 = list7[0].合格数;
|
||
}
|
||
//7车间前天合格数
|
||
that.$API.bi.dataset.exec.req('lineDay', obj07).then((res07) => {
|
||
let list07 = res07.data2.ds0;
|
||
if (list07.length > 0) {
|
||
this.tongbi7 = Math.round((this.dayPassNum7 - list07[0].合格数) / list07[0].合格数 * 100);
|
||
}
|
||
});
|
||
});
|
||
//10车间昨日合格数
|
||
that.$API.bi.dataset.exec.req('lineDay', obj10).then((res10) => {
|
||
console.log('res10', res10);
|
||
let list10 = res10.data2.ds0;
|
||
if (list10.length > 0) {
|
||
this.dayPassNum10 = list10[0].合格数;
|
||
}
|
||
//10车间前天合格数
|
||
that.$API.bi.dataset.exec.req('lineDay', obj010).then((res010) => {
|
||
console.log('res10', res010);
|
||
let list010 = res010.data2.ds0;
|
||
if (list010.length > 0) {
|
||
this.tongbi10 = Math.round((this.dayPassNum10 - list010[0].合格数) / list010[0].合格数 * 100);
|
||
}
|
||
});
|
||
});
|
||
//6车昨日交付数
|
||
that.$API.bi.dataset.exec.req('saleOutDay', obj6).then((res6) => {
|
||
let list6 = res6.data2.ds0;
|
||
if (list6.length > 0) {
|
||
this.dayPayNum6 = list6[0].交付数;
|
||
}
|
||
//6车前日交付数
|
||
that.$API.bi.dataset.exec.req('saleOutDay', obj06).then((res06) => {
|
||
let list06 = res06.data2.ds0;
|
||
if (list06.length > 0) {
|
||
this.tongbi06 = Math.round((this.dayPayNum6 - list06[0].交付数) / list06[0].交付数 * 100);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
//本月合格数&本月交付统计
|
||
getMonthData() {
|
||
let that = this;
|
||
let start_date = that.year_s + '-' + that.month_s + '-01';
|
||
let end_date = that.year_s + '-' + that.month_s + '-' + that.day_s;
|
||
let obj6 = {
|
||
query: { start_date: start_date, end_date: end_date, mio_type: 'sale_out', material_id: '' },
|
||
};
|
||
let obj7 = {
|
||
query: { start_date: start_date, end_date: end_date, dept_name: "7车间" },
|
||
};
|
||
let obj10 = {
|
||
query: { start_date: start_date, end_date: end_date, dept_name: "10车间" },
|
||
};
|
||
//7车间本月合格率
|
||
that.$API.bi.dataset.exec.req('lineMonth', obj7).then((res7) => {
|
||
// console.log('7车间本月合格率:',res7);
|
||
let list7 = res7.data2.ds0;
|
||
let sum = 0, rate = 0;
|
||
if (list7.length > 0) {
|
||
list7.forEach(item => {
|
||
sum = sum + item.合格率;
|
||
});
|
||
rate = sum / list7.length;
|
||
}
|
||
this.monthPassRate7 = Math.round(rate);
|
||
});
|
||
//10车间本月合格率
|
||
that.$API.bi.dataset.exec.req('lineMonth', obj10).then((res10) => {
|
||
this.monthPassRate10 = 0;
|
||
let list10 = res10.data2.ds0;
|
||
let sum = 0, rate = 0;
|
||
if (list10.length > 0) {
|
||
list10.forEach(item => {
|
||
sum = sum + item.合格率;
|
||
});
|
||
rate = sum / list10.length;
|
||
}
|
||
this.monthPassRate10 = Math.round(rate);
|
||
});
|
||
//6车间本月交付数
|
||
that.$API.bi.dataset.exec.req('saleOutMonth', obj6).then((res6) => {
|
||
// console.log('6车间本月交付数:',res6);
|
||
let list6 = res6.data2.ds0;
|
||
let sum = 0;
|
||
list6.forEach(item => {
|
||
sum = sum + item.交付数;
|
||
});
|
||
this.monthPayNum6 = sum;
|
||
});
|
||
//本月合格率
|
||
},
|
||
//获取昨日AVG的生产记录
|
||
getAVGDayData() {
|
||
let that = this;
|
||
let date = that.yesterday;
|
||
let date0 = that.yesterdayBefore;
|
||
this.$API.wpm.otherlog.list.req({ product: 'AVG', page: 0, handle_date__gte: date, handle_date__lte: date }).then(res => {
|
||
let list = res;
|
||
let count_ok = 0, count_delivered = 0;
|
||
if (list.length > 0) {
|
||
list.forEach(item => {
|
||
count_ok = count_ok + item.count_ok;
|
||
count_delivered = count_delivered + item.count_delivered;
|
||
})
|
||
that.dayAVGcountOk = count_ok;
|
||
that.dayAVGcountDelivered = count_delivered;
|
||
this.$API.wpm.otherlog.list.req({ product: 'AVG', page: 0, handle_date__gte: date0, handle_date__lte: date0 }).then(res0 => {
|
||
let list0 = res0;
|
||
let count_ok0 = 0, count_delivered0 = 0;
|
||
if (list0.length > 0) {
|
||
list0.forEach(item0 => {
|
||
count_ok0 = count_ok0 + item0.count_ok;
|
||
count_delivered0 = count_delivered0 + item0.count_delivered;
|
||
})
|
||
that.AVGOktongbi = Math.round((count_ok - count_ok0) / count_ok0 * 100);
|
||
that.AVGDelivertongbi = Math.round((count_delivered - count_delivered0) / count_delivered0 * 100);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getAVGMonthData() {
|
||
let that = this;
|
||
let start_date = that.year_s + '-' + that.month_s + '-01';
|
||
let end_date = that.year_s + '-' + that.month_s + '-' + that.day_s;
|
||
let obj = {
|
||
query: { start_date: start_date, end_date: end_date },
|
||
};
|
||
that.$API.bi.dataset.exec.req('AVGMonth', obj).then((res) => {
|
||
let list = res.data2.ds0;
|
||
let sum = 0, count_real = 0, count_ok = 0;
|
||
list.forEach(item => {
|
||
sum = sum + item.交付数;
|
||
count_ok = count_ok + item.count_ok;
|
||
count_real = count_real + item.count_real;
|
||
});
|
||
this.monthPayNumAVG = sum;
|
||
if (count_real != 0) {
|
||
this.monthRateAVG = Math.round((count_ok / count_real) * 100)
|
||
} else {
|
||
this.monthRateAVG = 0;
|
||
}
|
||
|
||
});
|
||
},
|
||
getProductStatistic() {
|
||
let that = this;
|
||
let start_date = that.year_s + '-' + that.month_s + '-01';
|
||
let end_date = that.year_s + '-' + that.month_s + '-' + that.day_s;
|
||
let obj = {
|
||
query: { start_date: start_date, end_date: end_date, dept_name: this.deptName },
|
||
};
|
||
that.$API.bi.dataset.exec.req('productStatistic', obj).then((res) => {
|
||
console.log('productStatistic:', res);
|
||
let list = res.data2.ds0;
|
||
let chartData = [], xAxisData = [];
|
||
for (let i = 0; i < that.day_s; i++) {
|
||
let dindex = i + 1;
|
||
xAxisData.push(dindex + '日')
|
||
for (let j = 0; j < list.length; j++) {
|
||
if (list[j].日 == i) {
|
||
chartData[i] = Math.round((list[j].合格数 / list[j].任务数) * 100);
|
||
}
|
||
}
|
||
}
|
||
this.chartData = chartData;
|
||
this.option.xAxis.data = xAxisData;
|
||
this.option.series.data = chartData;
|
||
//柱状图
|
||
var dom = document.getElementById("barCharts");
|
||
var myChart = echarts.init(dom);
|
||
myChart.setOption(this.option, true);
|
||
});
|
||
},
|
||
deptNameChange() {
|
||
this.getProductStatistic();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.retangleWrap {
|
||
width: 100%;
|
||
padding: 20px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.retangle {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.retangleImg {
|
||
height: 188px;
|
||
color: #ffffff;
|
||
padding-left: 43px;
|
||
background: linear-gradient(180.00deg, rgb(58, 149, 255), rgb(27, 92, 255) 100%);
|
||
}
|
||
|
||
.companyName {
|
||
padding-top: 28px;
|
||
font-size: 24px;
|
||
line-height: 28px;
|
||
padding-bottom: 23px;
|
||
}
|
||
|
||
.companyDesc {
|
||
padding-left: 4px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.topCardImg {
|
||
height: 188px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 0;
|
||
}
|
||
|
||
.countRetangle {
|
||
height: 180px;
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.countItem {
|
||
width: 20%;
|
||
padding-left: 24px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
|
||
.countItem:last-child {
|
||
border-right: 0;
|
||
}
|
||
|
||
.countname {
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
color: rgba(94, 94, 94);
|
||
}
|
||
|
||
.countnum {
|
||
font-size: 30px;
|
||
padding-bottom: 11px;
|
||
line-height: 38px;
|
||
}
|
||
|
||
.countrate {
|
||
line-height: 20px;
|
||
color: rgba(0, 0, 0, .45);
|
||
}
|
||
|
||
.redColor {
|
||
color: rgb(255, 73, 87);
|
||
}
|
||
|
||
.greenColor {
|
||
color: rgb(71, 201, 58);
|
||
}
|
||
|
||
.middleRetangle {
|
||
border-radius: 2px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.middleItem {
|
||
width: 25%;
|
||
padding-left: 34px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.middleItem:first-child {
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
|
||
.tableRetangle {
|
||
height: auto;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.bottomRetangle {
|
||
padding: 20px 0;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
}
|
||
</style>
|