This commit is contained in:
caoqianming 2024-12-25 15:24:49 +08:00
commit e2595bf3c9
3 changed files with 894 additions and 1 deletions

View File

@ -1378,7 +1378,7 @@ const routes = [
meta: {
title: "生产二部记录",
// icon: "el-icon-cellphone",
// perms: ["wpm"],
perms: ["wpm"],
hidden: true,
},
component: "wpm/worktaskFlog",
@ -3217,6 +3217,17 @@ const routes = [
},
component: "bigScreen/index_heihuadept.vue",
},
{
path: "/bigScreenP_jianbo",
name: "bigScreenP_jianbo",
meta: {
title: "减薄车间",
icon: "el-icon-trend-charts",
perms: ["bigScreenP_dept_jb"],
fullpage: true,
},
component: "bigScreen/index_jianbodept.vue",
},
{
path: "/bigScreenP_10",
name: "bigScreenP_10",

View File

@ -0,0 +1,875 @@
<template>
<el-container class="dashboard">
<el-header class="header">
<div class="title">减薄车间生产数据看板</div>
<div class="timer">{{ currentDay }} {{ currentTime }}</div>
</el-header>
<el-main>
<!-- 减薄 -->
<el-row style="height: 30%" :gutter="10">
<!-- 设备状态 -->
<el-col :span="10" style="height: 100%">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">
设备状态
</div>
<div class="boxlabel">
<span class="stateIcon bwIcon"></span>
<span>保温中</span>
<span class="eqNum">{{hh.bw}}</span>
</div>
<div class="boxlabel">
<span class="stateIcon lqIcon"></span>
<span>冷却中</span>
<span class="eqNum">{{hh.lq}}</span>
</div>
<div class="boxlabel">
<span class="stateIcon wyxIcon"></span>
<span>未运行</span>
<span class="eqNum">{{hh.wyx}}</span>
</div>
<div class="boxlabel">
<span class="stateIcon gzIcon"></span>
<span>故障</span>
<span class="eqNum">{{hh.gz}}</span>
</div>
</div>
<div style="height: 2px"></div>
<div class="boxmain" id="scrollContainer">
<dv-scroll-board :config="configDataEq" style="width:98%;margin:auto" />
</div>
</div>
</el-col>
<!-- 任务列表 -->
<el-col :span="14" style="height: 100%">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">减薄任务列表</div>
</div>
<div style="height: 2px"></div>
<div class="boxmain" id="scrollContainer">
<dv-scroll-board :config="configDataTask" style="width:98%;margin:auto" />
</div>
</div>
</el-col>
</el-row>
<div style="height: 0.3%"></div>
<el-row style="height: 30%" :gutter="10">
<!-- 库存 -->
<el-col :span="10" style="height: 100%">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">
减薄车间库存
</div>
</div>
<div style="height: 2px"></div>
<div class="boxmain" id="scrollContainer">
<dv-scroll-board :config="configDataInm" style="width:98%;margin:auto" />
</div>
</div>
</el-col>
<!-- 交接 -->
<el-col :span="14" style="height: 100%">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">减薄交接</div>
</div>
<div style="height: 2px"></div>
<div class="boxmain" id="scrollContainer">
<dv-scroll-board :config="configDataHandover" style="width:98%;margin:auto" />
</div>
</div>
</el-col>
</el-row>
<!-- 生产统计 分析 -->
<div style="height: 0.3%"></div>
<el-row style="height: 39%" :gutter="10">
<!-- 折线图 日加工数日合格数日合格率近七天数据 -->
<el-col :xs="8" :md="8" style="height: 100%;">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">合格数统计</div>
</div>
<div class="boxmain boxmainbottom" id="chart1"></div>
</div>
</el-col>
<!-- 饼状图 各不合格品 原因占比 -->
<el-col :xs="8" :md="8" style="height: 100%;">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">不合格占比统计</div>
</div>
<div class="boxmain boxmainbottom" id="chart2"></div>
</div>
</el-col>
<el-col :xs="8" :md="8" style="height: 100%;">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">生产数统计</div>
</div>
<div class="totalStatic">
<span class="totalStaticItem">日投产量</span>
<span class="totalStaticItem">日加工数</span>
<span class="totalStaticItem">日加工前不良数</span>
<span class="totalStaticItem">日合格数</span>
<span class="totalStaticItem">日不合格数</span>
</div>
<div class="totalStatic">
<span class="totalStaticItem totalStaticItemNum">{{ kctj.dhh }}</span>
<span class="totalStaticItem totalStaticItemNum">{{ kctj.hhz }}</span>
<span class="totalStaticItem totalStaticItemNum">{{ kctj.thz }}</span>
<span class="totalStaticItem totalStaticItemNum">{{ kctj.thok }}</span>
<span class="totalStaticItem totalStaticItemNum">{{ kctj.thok }}</span>
</div>
<dv-scroll-board :config="configDatas" class="boxmain boxmainbottom" style="width:98%;margin:auto" />
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
export default {
components: { scScrollTavle },
data() {
return {
basicOption: {
backgroundColor: "",
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
icon: "stack",
right: 0,
data: [
{
backgroundColor: "rgb(1,235,239)",
name: "减薄",
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(250,205,0)",
},
{
offset: 1,
color: "rgb(254,129,0)",
},
]
),
},
textStyle: {
color: "#fff",
},
},
{
backgroundColor: "rgb(250,205,0)",
name: "退火",
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(1,235,239)",
},
{
offset: 1,
color: "rgb(5, 158, 163)",
},
]
),
},
textStyle: {
color: "#fff",
},
},
],
},
toolbox: {
feature: {
// saveAsImage: {}
},
},
grid: {
left: "3%",
right: "2%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
data: [],
nameTextStyle: {
color: "#ffffff",
},
axisLabel: {
color: "#ffffff",
},
},
yAxis: {
name: "",
type: "value",
nameTextStyle: {
color: "#ffffff",
},
axisLabel: {
color: "#ffffff",
},
splitLine: {
show: false,
lineStyle: {
type: "dashed", //y线
color: "rgba(102,102,102,0.9)",
width: 1,
},
},
},
series: [
{
name: "今日统计",
type: "bar",
// stack: "Ad",
barWidth: 10,
emphasis: {
focus: "series",
},
label: {
show: true,
position: "top",
color: "#fff",
},
itemStyle: {
borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(250,205,0)",
},
{
offset: 1,
color: "rgb(254,129,0)",
},
]
),
},
data: [],
},
{
name: "",
type: "bar",
// stack: "Ad",
barWidth: 10,
emphasis: {
focus: "series",
},
label: {
show: true,
position: "top",
color: "#fff",
},
itemStyle: {
borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(1,235,239)",
},
{
offset: 1,
color: "rgb(5, 158, 163)",
},
]
),
},
data: [],
},
],
},
tableHeight: 100,
speed: 2000,
time: null,
hh:{
bw:0,
lq:0,
wyx:0,
gz:0,
},
th:{
bw:0,
lq:0,
wyx:0,
gz:0,
},
sctj_ysetday:{
hh:0,
th:0
},
tcfx:{
yesterday:0,
today:0,
tomorrow:0,
},
kctj:{
dhh:0,
hhz:0,
thz:0,
thok:0,
},
dayInterval: null,
chartInterval2: null,
//
configDataInm:{
header:['物料名称','批次号','数量','生产中数量'],
headerBGC:'#0a3f44',
headerHeight:40,
align:'center',
data:[],
waitTime:1000,
},
//
configDataTask:{
headerBGC:'#0a3f44',
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
headerHeight:40,
data:[]
},
//
configDataHandover:{
headerBGC:'#0a3f44',
header:['物料','数量','交接类型','交接类别','交接日期'],
headerHeight:40,
data:[]
},
//
configDataEq:{
headerBGC:'#0a3f44',
header:['设备名称','设备编号','设备状态','生产进度','物料数量'],
headerHeight:40,
data:[]
},
//
configDatas :{
headerBGC:'#0a3f44',
header:['投产量','加工数','加工前不良数','合格数','不合格数'],
headerHeight:40,
data:[]
},
currentTime: "",
currentDay: "",
today: "",
end_time:'',
start_time:'',
};
},
mounted() {
//table
this.tableHeight = document.getElementById("scrollContainer").clientHeight;
this.showTime();
this.dayInterval = setInterval(() => {
this.showTime();
}, 1000);
//
let daysArr = this.getMondayOfCurrentWeek();
this.daysArr = daysArr;
let xAxisData = [];
daysArr.forEach((item)=>{
let dates = item.split('-');
let obj = dates[1]+'-'+dates[2];
xAxisData.push(obj);
})
this.xAxisData = xAxisData;
let startDate = new Date(daysArr[0]).getTime()-(1000*60*60*24);
let endDate = new Date(daysArr[6]).getTime()+(1000*60*60*24);
let start_time = this.$TOOL.dateFormat(new Date(startDate), "yyyy-MM-dd hh:mm:ss");
let end_time = this.$TOOL.dateFormat(new Date(endDate), "yyyy-MM-dd hh:mm:ss");
this.start_time = start_time;
this.end_time = end_time;
this.$nextTick(() => {
//
this.getEqState();
//
this.getMtask();
//
this.getMaterials();
//
this.getHandover();
///
this.getProductLine1();
this.getProductLine2();
})
},
methods: {
getMondayOfCurrentWeek() {
let today = new Date();
let days = [];
for (let i = 6; i >= 0; i--) {
let date = new Date(today);
date.setDate(today.getDate() - i);
days.push(date.toISOString().split('T')[0]); // YYYY-MM-DD
}
return days;
},
//
showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
this.currentDay = this.$TOOL.dateFormat(
new Date(),
"yyyy年MM月dd日"
);
},
setChart(name, option = null) {
var myChart = echarts.getInstanceByDom(document.getElementById(name));
if (myChart == undefined) {
myChart = echarts.init(document.getElementById(name), "dark", {
renderer: "svg",
});
}
if (option == null) {
option = Object.assign({}, this.basicOption);
}
setTimeout(() => {
try {
myChart.setOption(option);
} catch (error) {}
}, 500);
return myChart;
},
//
getProductLine1() {
let that = this;
let obj = {
query: {start_time: that.start_time,end_time: that.end_time},
};
that.$API.bi.dataset.exec.req("thslrk", obj).then((res) => {
let list = res.data2.ds0;
let seriesData1 = [];
for (let i = 0; i < that.xAxisData.length; i++) {
seriesData1[i] = 0;
}
if (list.length > 0) {
list.forEach((item) => {
let date = item.日期.split("-")[1]+'-'+item.日期.split("-")[2];
let index = that.xAxisData.indexOf(date);
seriesData1[index] = item.送料数+item.入库数;
});
}
that.tcfx.yesterday = seriesData1[5];
let chart1Option = deepCopy(this.basicOption);
chart1Option.xAxis.data = that.xAxisData;
chart1Option.series[0].data = seriesData1;
let chart1 = this.setChart("chart1", chart1Option);
let index1 = 0;
this.chartInterval2 = setInterval(function () {
if (index1 < chart1Option.series[0].data.length) {
chart1.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
chart1.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index1,
});
chart1.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index1,
});
index1++;
} else {
index1 = 0;
}
}, 3000);
});
},
//
getProductLine2() {
let that = this;
let obj = {
query: {start_time: that.start_time,end_time: that.end_time},
};
that.$API.bi.dataset.exec.req("jltj", obj).then((res) => {
let list = res.data2.ds0;
let seriesData1 = [],seriesData2 = [];
for (let i = 0; i < that.xAxisData.length; i++) {
seriesData1[i] = 0;
seriesData2[i] = 0;
}
if (list.length > 0) {
list.forEach((item) => {
let date = item.日期.split("-")[1]+'-'+item.日期.split("-")[2];
let index = that.xAxisData.indexOf(date);
seriesData1[index] = item.黑化数;
seriesData2[index] = item.退火数;
});
}
that.sctj_ysetday.hh = seriesData1[5];
that.sctj_ysetday.th = seriesData2[5];
let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis.data = that.xAxisData;
chart2Option.series[0].name = '黑化数';
chart2Option.series[1].name = '退火数';
chart2Option.series[0].data = seriesData1;
chart2Option.series[1].data = seriesData2;
let chart2 = this.setChart("chart2", chart2Option);
let index2 = 0;
this.chartInterval2 = setInterval(function () {
if (index2 < chart2Option.series[0].data.length) {
chart2.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
chart2.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index2,
});
chart2.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index2,
});
index2++;
} else {
index2 = 0;
}
}, 3000);
});
},
//
getEqState() {
let that = this;
that.$API.wpm.ana.equipLastMlog.req({mgroup_name: '减薄'}).then((res) => {
that.hh.bw = res.保温;
that.hh.lq = res.冷却;
that.hh.wyx = res.未运行;
that.hh.gz = res.故障;
that.configDataEq.data = [];
let nowTime = new Date(res.now).getTime();
if(res.rows.length>0){
res.rows.forEach((item) => {
let arr = [];
arr[0] = item.name;
arr[1] = item.number;
if(item.mstate=='保温'){
arr[2] = '<span style="color:rgb(245, 196, 0)">保温</span>';
}else if(item.mstate=='冷却'){
arr[2] = '<span style="color:rgb(0,163,245)">冷却</span>';
}else if(item.mstate=='未运行'){
arr[2] = '<span style="color:rgb(69,176,118)">未运行</span>';
}else if(item.mstate=='故障'){
arr[2] = '<span style="color:rgb(222,60,54)">故障</span>';
}
let process = null, workTime =0,saveTime=null,sumTime=0;
if(item.reminder_interval_list&&item.reminder_interval_list.length>0){
item.reminder_interval_list.forEach(item=>{
sumTime += item;
})
let startTime = new Date(item.work_start_time).getTime();
workTime = (nowTime-startTime)/60000;//
process = Math.round((workTime/sumTime)*100);
process = process>100?'100%':process+'%';
let bwSaveTime = Math.round(item.reminder_interval_list[0]-workTime);
if(bwSaveTime>0){
saveTime = bwSaveTime;
}else{
saveTime = 0;
}
}else{
process = '';
saveTime = '';
}
arr[3] = process;
arr[4] = item.t_count_use?item.t_count_use:0;
that.configDataEq.data.push(arr);
});
}
});
},
//
getMtask() {
let that = this;
let obj = {};
obj.mgroup__name = '黑化';
obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => {
that.configDataTask.data = [];
res.forEach((item) => {
let arr = [];
arr[0] = item.material_out_.name;
arr[1] = item.material_out_.specification;
arr[2] = item.material_out_.model;
arr[3] = item.start_date;
arr[4] = item.end_date;
let process = Math.round((item.count_ok / item.count) * 100)+'%';
arr[5] = process;
arr[6] = item.count_ok;
if(item.state==20){
arr[7]='<span style="color:rgb(0,163,245);displaydisplay:inline-block;padding:2px 6px;background:rgb(226,241,245);border:1px solid rgb(0,163,245);border-radius:3px">已下达</span>';
}else if(item.state==34){
arr[7]='<span style="color:rgb(222,60,54);displaydisplay:inline-block;padding:2px 6px;background:rgb(247,231,231);border:1px solid rgb(222,60,54);border-radius:3px">已停止</span>';
}else if(item.state==40){
arr[7]='<span style="color:rgb(69,176,118);displaydisplay:inline-block;padding:2px 6px;background:rgb(231,247,232);border:1px solid rgb(69,176,118);border-radius:3px">已提交</span>';
}
that.configDataTask.data.push(arr);
});
});
},
//
getHandover() {
let that = this;
let obj = {};
obj.mgroup__name = '减薄';
obj.page = 0;
that.$API.wpm.handover.list.req(obj).then((res) => {
that.configDataHandover.data = [];
res.forEach((item) => {
let arr = [];
arr[0] = item.material_name;
arr[1] = item.count;
arr[2] = item.material_out_.model;
if(item.state==10){
arr[3]='<span style="color:rgb(0,163,245);displaydisplay:inline-block;padding:2px 6px;background:rgb(226,241,245);border:1px solid rgb(0,163,245);border-radius:3px">正常</span>';
}else if(item.state==20){
arr[3]='<span style="color:rgb(222,60,54);displaydisplay:inline-block;padding:2px 6px;background:rgb(247,231,231);border:1px solid rgb(222,60,54);border-radius:3px">返工</span>';
}else if(item.state==30){
arr[3]='<span style="color:rgb(69,176,118);displaydisplay:inline-block;padding:2px 6px;background:rgb(231,247,232);border:1px solid rgb(69,176,118);border-radius:3px">检验</span>';
}else if(item.state==40){
arr[3]='<span style="color:rgb(69,176,118);displaydisplay:inline-block;padding:2px 6px;background:rgb(231,247,232);border:1px solid rgb(69,176,118);border-radius:3px">报废</span>';
}
arr[4] = item.send_user_name;
arr[5] = item.recive_user_name;
arr[6] = item.send_date;
that.configDataHandover.data.push(arr);
});
});
},
//
getMaterials() {
let that = this;
that.$API.wpm.wmaterial.list.req({ page: 0,mgroup__name__in:'减薄' }).then((res) => {
that.configDataInm.data = [];
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.material_name;
arr[1] = item.batch;
arr[2] = item.count;
arr[2] = item.count_working;
that.configDataInm.data .push(arr);
})
}
})
},
},
};
</script>
<style scoped>
@font-face {
font-family: "myfont";
/* 字体名称 */
src: url("../../utils/youShe.ttf");
/* 字体文件相对路径 */
}
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
font-family: "Microsoft Yahei" !important;
background-size: cover;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: "Microsoft Yahei";
text-align: center;
padding: 12px 0px;
}
.header > .title {
font-weight: bold;
font-family: "myfont";
font-size: 32px;
}
.header > .timer {
font-size: 14px;
margin-top: 18px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
line-height: 36px;
background: linear-gradient(
40deg,
rgba(11, 101, 140, 0.451),
rgba(0, 34, 48, 0.335),
rgba(11, 101, 140, 0.451)
);
}
.bgimg {
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png");
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
/* margin-top: 6px; */
}
.stateIcon{
width:16px;
height: 16px;
margin: 0 5px;
border-radius: 8px;
display: inline-block;
}
.bwIcon{
background-color: rgb(245, 196, 0);
}
.lqIcon{
background-color: rgb(0,163,245);
}
.wyxIcon{
background-color: rgb(69,176,118);
}
.gzIcon{
background-color: rgb(222,60,54);
}
.eqNum{
margin: 0 10px;
}
.boxmain {
height: calc(100% - 50px);
}
.boxmain.boxmainbottom{
height: calc(100% - 120px);
}
.lineDiv {
height: 40px;
line-height: 40px;
padding-left: 0.5em;
}
.boxmainItemNumber {
color: rgb(42,234,200);
margin-left: 10px;
font-weight: bold;
font-face:24px;
font-family: electronicFont;
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center;
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 20px;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall {
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData {
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n + 1) {
background-color: rgb(0, 59, 81);
}
.halfBox {
height: 50%;
}
.totalStatic{
display: flex;
}
.totalStaticItem{
flex: 1;
height: 25px;
text-align: center;
line-height: 25px;
font-size: 14px;
margin-top: 5px;
}
.totalStaticItemNum{
font-size: 24px;
height: 40px;
line-height: 40px;
font-family: "myfont";
text-align: center;
margin-top: 0;
color: rgb(149, 255, 255);
}
</style>

View File

@ -25,6 +25,7 @@
<el-tag :type="typeCpmpute(scope.row.okcate)" effect="plain">{{ okcate_[scope.row.okcate] }}</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" prop="note"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="140">
<template #default="scope">
<el-button link size="small" @click="defectEdit(scope.row, scope.$index)" v-auth="'role.update'" type="primary">编辑</el-button>
@ -69,6 +70,9 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="addForm.note" clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="limitedVisible=false" > </el-button>
@ -82,6 +86,7 @@
name: "",
code: "",
cate: "尺寸",
note: "",
okcate:10,
};
export default {
@ -144,6 +149,7 @@
this.addForm.id="";
this.addForm.name="";
this.addForm.code="";
this.addForm.note="";
this.addForm.cate="尺寸";
this.addForm.okcate=10;
this.limitedVisible = true;
@ -180,6 +186,7 @@
this.addForm.name=row.name;
this.addForm.code=row.code;
this.addForm.cate=row.cate;
this.addForm.note=row.note;
this.addForm.okcate=row.okcate;
this.limitedVisible = true;
},