fix:车间看板页面文件

This commit is contained in:
shijing 2025-07-07 09:12:10 +08:00
parent 85d60f1a0f
commit 973b755dc3
5 changed files with 3549 additions and 0 deletions

View File

@ -0,0 +1,697 @@
<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="margin-bottom: 1vh;">
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日工序报工量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在产产品数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月完工工单</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月计划产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="leftBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工序数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日完成工序</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;position: relative;">
<dv-border-box-1>
<div class="chartBlockTitle">车间各工段生产产品数</div>
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">产品占比</div>
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="middleBlock">
<div style="height: 38vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间工段任务展示</div>
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 41vh;">
<dv-border-box-1>
<div class="chartBlockTitle">设备列表</div>
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="rightBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工单数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月交付数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">每个人日产量</div>
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间整体产品统计</div>
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export default {
components: { scScrollTavle },
data() {
return {
runningStateEnum,
basicOption: {
backgroundColor: "",
tooltip: {
trigger: "axis",
},
legend: {
icon: "stack",
right: 0,
},
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",
},
},
series: [
{
name: "",
type: "bar",
barWidth: 30,
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: "#00aaff"},
{offset: 1,color: "#0033ff"},
]),
},
data: [1,2,3,4,5,6,7],
},
],
},
chartOption1:{
color: ['#2f89cf'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: 'category',
data: [], //
axisTick: {
alignWithLabel: true // 线
},
axisLabel: {
color: "rgb(255,255,255)",
fontSize: "8",
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
//
series: {
name: 'Direct',
type: 'bar',
barWidth: '15',
data: [],
itemStyle: {
barBorderRadius: 5
}
}
},
chartOption2: {
grid: {
top: "10%",
left: "10%",
bottom: "5%",
containLabel: true
},
xAxis: {
// show: false
splitLine: {
show:false
},
},
// Y Y
yAxis: [
{
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff"
},
splitLine: {
show:false
},
type: 'category',
inverse: true, //
data: []
},
{
show: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show:false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
},
inverse: true, //
data: [],
}
],
//
series: [
{
name: '柱状图',
type: 'bar',
data: [],
yAxisIndex: 0,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (params) {
return myColor[params.dataIndex];
}
},
label: {
normal: {
// show: true,
position: "outside",
color: "#fff",
// formatter: "{a}"
}
}
},
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 12,
itemStyle: {
color: "none",
shadowColor: '#999', //
shadowBlur: 3, //
shadowOffsetX: 0, //
shadowOffsetY: 0, //
borderColor: "rgba(153,153,153,0.6)", //
borderWidth: 0.5,
barBorderRadius: 5,
},
yAxisIndex: 1,
data: []
}
]
},
tableHeight: 100,
speed: 2000,
time: null,
deptId: "",
dayInterval: null,
chartInterval2: null,
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
configData:{
header:['物料名称','批次号','数量'],
headerBGC:'#0a3f44',
headerHeight:40,
align:'center',
data:[],
waitTime:1000,
},
configData1:{
headerBGC:'#0a3f44',
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
headerHeight:40,
data:[]
},
config_left1:{
data:[]
} ,
config_left2:{
data:[]
},
config_middle_top:{
rowNum:10,
headerBGC: 'rgba(47,102,107,.34)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['任务编号', '产出产品', '任务量', '合格数'],
data: []
},
config_middle_bottom:{
rowNum:10,
headerBGC: 'rgba(0,0,0,0)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
data: []
},
currentTime: "",
currentDay: "",
today: "",
end_time:'',
start_time:'',
};
},
mounted() {
this.showTime();
this.dayInterval = setInterval(() => {
this.showTime();
}, 1000);
let userInfo = this.$TOOL.data.get("USER_INFO");
this.deptId = userInfo.belong_dept;
this.deptName = userInfo.belong_dept_name;
this.getMgroups();
this.$nextTick(() => {
//
// this.getmgroupMaterial();
//
this.getMtask1();
//
this.getEquipment();
//
this.getCount();
//
//
// this.getMaterials();// this.getmgroupMaterial();
})
},
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;
},
getMgroups(){
let that = this;
that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
if(res.length > 0){
res.forEach((item,inde)=>{
that.mgroupsId += item.id + ',';
that.getmgroupMaterial(item);
//
if(inde==res.length-1){
that.getLastmgroupMaterial(item);
}
})
}
});
},
//
getMtask1() {
let that = this;
let params = {
state: 20,mgroup__belong_dept: that.deptId,page:0,
query: " { id, material_out_name, number, count, count_ok }"
};
that.config_middle_top.data = [];
that.$API.pm.mtask.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.number;
arr[1] = item.material_out_name;
arr[2] = item.count;
arr[3] = item.count_ok;
// arr[4] = item.count_ok/item.count*100+'%';
that.config_middle_top.data.push(arr);
})
}
});
},
//
getmgroupMaterial(item) {
let that = this;
let params = { tag: 'done',page_size:1,mgroup: item.id };
that.$API.wpm.wmaterial.list.req(params).then((res) => {
let obj = {};
obj.name = item.name;
obj.value = res.count;
that.config_left1.data.push(obj);
})
},
getLastmgroupMaterial(item){
let that = this;
let params = {
tag: 'done',page:0,mgroup: item.id ,
// query: " { id, material_name }"
};
that.$API.wpm.wmaterial.list.req(params).then((res) => {
if(res.length>0){
let namelist = [],valuelist = [],values=[];
res.forEach((item)=>{
let index = namelist.indexOf(item.material_.name);
if(index==-1){
namelist.push(item.material_.name);
valuelist.push(1);
values.push(1);
}else{
valuelist[index] += 1;
values[index] += 1;
}
})
let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
let arr = [];
valuelist.forEach((item)=>{
arr.push(maxNum)
})
that.chartOption2.yAxis[0].data = namelist;
that.chartOption2.yAxis[1].data = valuelist;
that.chartOption2.series[0].data = valuelist;
that.chartOption2.series[1].data = arr;
namelist.forEach((item,index)=>{
let obj = {};
obj.name = item;
obj.value = valuelist[index];
that.config_left2.data.push(obj);
})
}
})
},
getEquipment() {
let that = this;
let params = {
page: 0, belong_dept:that.deptId,
// query: " { id, name, number, model, state ,mgroup_name }"
};
that.config_middle_bottom.data = [];
that.$API.em.equipment.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
let state_ = that.state_[item.state];
let running_state_ = runningStateEnum[item.running_state]?.text;
arr[0] = item.name;
arr[1] = item.number;
arr[2] = state_;
arr[3] = running_state_;
arr[4] = item.mgroup_name;
that.config_middle_bottom.data.push(arr);
})
}
})
},
getCount(){
let that = this;
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
query: {start_date:date,end_date:date,dept_name:that.deptName},
// query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
};
let namelist = [],valuelist = [];
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
if(res.data2.ds0.length>0){
res.data2.ds0.forEach((item)=>{
namelist.push(item.操作人);
valuelist.push(item.合格数);
})
}
that.chartOption1.xAxis.data = namelist;
that.chartOption1.series.data = valuelist;
});
},
},
};
</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/head_bg.png"); */
background: url("/public/img/header_bgv.png");
border-bottom: none;
background-size: 100% 100%;
display: block;
height: 8vh;
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;
font-size:4vh;
letter-spacing: 10px;
}
.header > .timer {
font-size: 14px;
margin-top: 18px;
position: absolute;
top: 5px;
left: 20px;
}
.numBlock{
height: 10vh;
}
.numBlock_title{
height: 4vh;
width: 100%;
font-size: 1.5vh;
line-height: 4vh;
text-align: center;
}
.numBlock_value{
height:6vh;
width: 100%;
line-height: 5vh;
text-align: center;
font-size: 3vh;
font-family: "myfont";
}
.leftChartBlock1{
width: 90%;
height: 28vh;
z-index: 999;
left: 5%;
border-radius: 3vh;
}
.leftChartBlock2{
width:100%;
height: 28vh;
}
.middleTableBlock1{
width:94%;
height:31vh;
position: absolute;
left: 4%
}
.middleTableBlock2{
width:94%;
height:34vh;
position: absolute;
left: 4%
}
.chartBlockTitle{
width: 90%;
height: 5vh;
margin: auto;
line-height: 6vh;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.6vh;
font-weight: 600;
border-bottom: 1px solid rgb(83 198 243);
}
</style>

View File

@ -0,0 +1,713 @@
<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="margin-bottom: 1vh;">
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日工序报工量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在产产品数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月完工工单</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月计划产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="leftBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工序数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日完成工序</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;position: relative;">
<dv-border-box-1>
<div class="chartBlockTitle">车间各工段生产产品数</div>
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">产品占比</div>
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="middleBlock">
<div style="height: 38vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间工段任务展示</div>
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 41vh;">
<dv-border-box-1>
<div class="chartBlockTitle">设备列表</div>
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="rightBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工单数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月交付数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">每个人日产量</div>
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间整体产品统计</div>
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export default {
components: { scScrollTavle },
data() {
return {
runningStateEnum,
basicOption: {
backgroundColor: "",
tooltip: {
trigger: "axis",
},
legend: {
icon: "stack",
right: 0,
},
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",
},
},
series: [
{
name: "",
type: "bar",
barWidth: 30,
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: "#00aaff"},
{offset: 1,color: "#0033ff"},
]),
},
data: [1,2,3,4,5,6,7],
},
],
},
chartOption1:{
color: ['#2f89cf'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: 'category',
data: [], //
axisTick: {
alignWithLabel: true // 线
},
axisLabel: {
color: "rgb(255,255,255)",
fontSize: "8",
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
//
series: {
name: 'Direct',
type: 'bar',
barWidth: '15',
data: [],
itemStyle: {
barBorderRadius: 5
}
}
},
chartOption2: {
grid: {
top: "10%",
left: "10%",
bottom: "5%",
containLabel: true
},
xAxis: {
// show: false
splitLine: {
show:false
},
},
// Y Y
yAxis: [
{
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff"
},
splitLine: {
show:false
},
type: 'category',
inverse: true, //
data: []
},
{
show: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show:false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
},
inverse: true, //
data: [],
}
],
//
series: [
{
name: '柱状图',
type: 'bar',
data: [],
yAxisIndex: 0,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (params) {
return myColor[params.dataIndex];
}
},
label: {
normal: {
// show: true,
position: "outside",
color: "#fff",
// formatter: "{a}"
}
}
},
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 12,
itemStyle: {
color: "none",
shadowColor: '#999', //
shadowBlur: 3, //
shadowOffsetX: 0, //
shadowOffsetY: 0, //
borderColor: "rgba(153,153,153,0.6)", //
borderWidth: 0.5,
barBorderRadius: 5,
},
yAxisIndex: 1,
data: []
}
]
},
tableHeight: 100,
speed: 2000,
time: null,
deptId: "",
dayInterval: null,
chartInterval2: null,
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
configData:{
header:['物料名称','批次号','数量'],
headerBGC:'#0a3f44',
headerHeight:40,
align:'center',
data:[],
waitTime:1000,
},
configData1:{
headerBGC:'#0a3f44',
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
headerHeight:40,
data:[]
},
config_left1:{
data:[]
} ,
config_left2:{
data:[]
},
config_middle_top:{
rowNum:10,
headerBGC: 'rgba(47,102,107,.34)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['任务编号', '产出产品', '任务量', '合格数'],
data: []
},
config_middle_bottom:{
rowNum:10,
headerBGC: 'rgba(0,0,0,0)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
data: []
},
currentTime: "",
currentDay: "",
today: "",
end_time:'',
start_time:'',
};
},
mounted() {
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;
let userInfo = this.$TOOL.data.get("USER_INFO");
this.deptId = userInfo.belong_dept;
this.deptName = userInfo.belong_dept_name;
this.getMgroups();
this.$nextTick(() => {
//
// this.getmgroupMaterial();
//
this.getMtask1();
//
this.getEquipment();
//
this.getCount();
//
//
// this.getMaterials();// this.getmgroupMaterial();
})
},
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;
},
getMgroups(){
let that = this;
that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
if(res.length > 0){
res.forEach((item,inde)=>{
that.mgroupsId += item.id + ',';
that.getmgroupMaterial(item);
//
if(inde==res.length-1){
that.getLastmgroupMaterial(item);
}
})
}
});
},
//
getMtask1() {
let that = this;
let params = {
state: 20,mgroup__belong_dept: that.deptId,page:0,
query: " { id, material_out_name, number, count, count_ok }"
};
that.config_middle_top.data = [];
that.$API.pm.mtask.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.number;
arr[1] = item.material_out_name;
arr[2] = item.count;
arr[3] = item.count_ok;
// arr[4] = item.count_ok/item.count*100+'%';
that.config_middle_top.data.push(arr);
})
}
});
},
//
getmgroupMaterial(item) {
let that = this;
let params = { tag: 'done',page_size:1,mgroup: item.id };
that.$API.wpm.wmaterial.list.req(params).then((res) => {
let obj = {};
obj.name = item.name;
obj.value = res.count;
that.config_left1.data.push(obj);
})
},
getLastmgroupMaterial(item){
let that = this;
let params = {
tag: 'done',page:0,mgroup: item.id ,
// query: " { id, material_name }"
};
that.$API.wpm.wmaterial.list.req(params).then((res) => {
if(res.length>0){
let namelist = [],valuelist = [],values=[];
res.forEach((item)=>{
let index = namelist.indexOf(item.material_.name);
if(index==-1){
namelist.push(item.material_.name);
valuelist.push(1);
values.push(1);
}else{
valuelist[index] += 1;
values[index] += 1;
}
})
let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
let arr = [];
valuelist.forEach((item)=>{
arr.push(maxNum)
})
that.chartOption2.yAxis[0].data = namelist;
that.chartOption2.yAxis[1].data = valuelist;
that.chartOption2.series[0].data = valuelist;
that.chartOption2.series[1].data = arr;
namelist.forEach((item,index)=>{
let obj = {};
obj.name = item;
obj.value = valuelist[index];
that.config_left2.data.push(obj);
})
}
})
},
getEquipment() {
let that = this;
let params = {
page: 0, belong_dept:that.deptId,
// query: " { id, name, number, model, state ,mgroup_name }"
};
that.config_middle_bottom.data = [];
that.$API.em.equipment.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
let state_ = that.state_[item.state];
let running_state_ = runningStateEnum[item.running_state]?.text;
arr[0] = item.name;
arr[1] = item.number;
arr[2] = state_;
arr[3] = running_state_;
arr[4] = item.mgroup_name;
that.config_middle_bottom.data.push(arr);
})
}
})
},
getCount(){
let that = this;
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
query: {start_date:date,end_date:date,dept_name:that.deptName},
// query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
};
let namelist = [],valuelist = [];
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
if(res.data2.ds0.length>0){
res.data2.ds0.forEach((item)=>{
namelist.push(item.操作人);
valuelist.push(item.合格数);
})
}
that.chartOption1.xAxis.data = namelist;
that.chartOption1.series.data = valuelist;
});
},
},
};
</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/head_bg.png"); */
background: url("/public/img/header_bgv.png");
border-bottom: none;
background-size: 100% 100%;
display: block;
height: 8vh;
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;
font-size:4vh;
letter-spacing: 10px;
}
.header > .timer {
font-size: 14px;
margin-top: 18px;
position: absolute;
top: 5px;
left: 20px;
}
.numBlock{
height: 10vh;
}
.numBlock_title{
height: 4vh;
width: 100%;
font-size: 1.5vh;
line-height: 4vh;
text-align: center;
}
.numBlock_value{
height:6vh;
width: 100%;
line-height: 5vh;
text-align: center;
font-size: 3vh;
font-family: "myfont";
}
.leftChartBlock1{
width: 90%;
height: 28vh;
z-index: 999;
left: 5%;
border-radius: 3vh;
}
.leftChartBlock2{
width:100%;
height: 28vh;
}
.middleTableBlock1{
width:94%;
height:31vh;
position: absolute;
left: 4%
}
.middleTableBlock2{
width:94%;
height:34vh;
position: absolute;
left: 4%
}
.chartBlockTitle{
width: 90%;
height: 5vh;
margin: auto;
line-height: 6vh;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.6vh;
font-weight: 600;
border-bottom: 1px solid rgb(83 198 243);
}
</style>

View File

@ -0,0 +1,713 @@
<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="margin-bottom: 1vh;">
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日工序报工量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在产产品数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月完工工单</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月计划产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="leftBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工序数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日完成工序</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;position: relative;">
<dv-border-box-1>
<div class="chartBlockTitle">车间各工段生产产品数</div>
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">产品占比</div>
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="middleBlock">
<div style="height: 38vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间工段任务展示</div>
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 41vh;">
<dv-border-box-1>
<div class="chartBlockTitle">设备列表</div>
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="rightBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工单数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月交付数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">每个人日产量</div>
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间整体产品统计</div>
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export default {
components: { scScrollTavle },
data() {
return {
runningStateEnum,
basicOption: {
backgroundColor: "",
tooltip: {
trigger: "axis",
},
legend: {
icon: "stack",
right: 0,
},
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",
},
},
series: [
{
name: "",
type: "bar",
barWidth: 30,
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: "#00aaff"},
{offset: 1,color: "#0033ff"},
]),
},
data: [1,2,3,4,5,6,7],
},
],
},
chartOption1:{
color: ['#2f89cf'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: 'category',
data: [], //
axisTick: {
alignWithLabel: true // 线
},
axisLabel: {
color: "rgb(255,255,255)",
fontSize: "8",
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
//
series: {
name: 'Direct',
type: 'bar',
barWidth: '15',
data: [],
itemStyle: {
barBorderRadius: 5
}
}
},
chartOption2: {
grid: {
top: "10%",
left: "10%",
bottom: "5%",
containLabel: true
},
xAxis: {
// show: false
splitLine: {
show:false
},
},
// Y Y
yAxis: [
{
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff"
},
splitLine: {
show:false
},
type: 'category',
inverse: true, //
data: []
},
{
show: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show:false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
},
inverse: true, //
data: [],
}
],
//
series: [
{
name: '柱状图',
type: 'bar',
data: [],
yAxisIndex: 0,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (params) {
return myColor[params.dataIndex];
}
},
label: {
normal: {
// show: true,
position: "outside",
color: "#fff",
// formatter: "{a}"
}
}
},
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 12,
itemStyle: {
color: "none",
shadowColor: '#999', //
shadowBlur: 3, //
shadowOffsetX: 0, //
shadowOffsetY: 0, //
borderColor: "rgba(153,153,153,0.6)", //
borderWidth: 0.5,
barBorderRadius: 5,
},
yAxisIndex: 1,
data: []
}
]
},
tableHeight: 100,
speed: 2000,
time: null,
deptId: "",
dayInterval: null,
chartInterval2: null,
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
configData:{
header:['物料名称','批次号','数量'],
headerBGC:'#0a3f44',
headerHeight:40,
align:'center',
data:[],
waitTime:1000,
},
configData1:{
headerBGC:'#0a3f44',
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
headerHeight:40,
data:[]
},
config_left1:{
data:[]
} ,
config_left2:{
data:[]
},
config_middle_top:{
rowNum:10,
headerBGC: 'rgba(47,102,107,.34)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['任务编号', '产出产品', '任务量', '合格数'],
data: []
},
config_middle_bottom:{
rowNum:10,
headerBGC: 'rgba(0,0,0,0)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
data: []
},
currentTime: "",
currentDay: "",
today: "",
end_time:'',
start_time:'',
};
},
mounted() {
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;
let userInfo = this.$TOOL.data.get("USER_INFO");
this.deptId = userInfo.belong_dept;
this.deptName = userInfo.belong_dept_name;
this.getMgroups();
this.$nextTick(() => {
//
// this.getmgroupMaterial();
//
this.getMtask1();
//
this.getEquipment();
//
this.getCount();
//
//
// this.getMaterials();// this.getmgroupMaterial();
})
},
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;
},
getMgroups(){
let that = this;
that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
if(res.length > 0){
res.forEach((item,inde)=>{
that.mgroupsId += item.id + ',';
that.getmgroupMaterial(item);
//
if(inde==res.length-1){
that.getLastmgroupMaterial(item);
}
})
}
});
},
//
getMtask1() {
let that = this;
let params = {
state: 20,mgroup__belong_dept: that.deptId,page:0,
query: " { id, material_out_name, number, count, count_ok }"
};
that.config_middle_top.data = [];
that.$API.pm.mtask.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.number;
arr[1] = item.material_out_name;
arr[2] = item.count;
arr[3] = item.count_ok;
// arr[4] = item.count_ok/item.count*100+'%';
that.config_middle_top.data.push(arr);
})
}
});
},
//
getmgroupMaterial(item) {
let that = this;
let params = { tag: 'done',page_size:1,mgroup: item.id };
that.$API.wpm.wmaterial.list.req(params).then((res) => {
let obj = {};
obj.name = item.name;
obj.value = res.count;
that.config_left1.data.push(obj);
})
},
getLastmgroupMaterial(item){
let that = this;
let params = {
tag: 'done',page:0,mgroup: item.id ,
// query: " { id, material_name }"
};
that.$API.wpm.wmaterial.list.req(params).then((res) => {
if(res.length>0){
let namelist = [],valuelist = [],values=[];
res.forEach((item)=>{
let index = namelist.indexOf(item.material_.name);
if(index==-1){
namelist.push(item.material_.name);
valuelist.push(1);
values.push(1);
}else{
valuelist[index] += 1;
values[index] += 1;
}
})
let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
let arr = [];
valuelist.forEach((item)=>{
arr.push(maxNum)
})
that.chartOption2.yAxis[0].data = namelist;
that.chartOption2.yAxis[1].data = valuelist;
that.chartOption2.series[0].data = valuelist;
that.chartOption2.series[1].data = arr;
namelist.forEach((item,index)=>{
let obj = {};
obj.name = item;
obj.value = valuelist[index];
that.config_left2.data.push(obj);
})
}
})
},
getEquipment() {
let that = this;
let params = {
page: 0, belong_dept:that.deptId,
// query: " { id, name, number, model, state ,mgroup_name }"
};
that.config_middle_bottom.data = [];
that.$API.em.equipment.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
let state_ = that.state_[item.state];
let running_state_ = runningStateEnum[item.running_state]?.text;
arr[0] = item.name;
arr[1] = item.number;
arr[2] = state_;
arr[3] = running_state_;
arr[4] = item.mgroup_name;
that.config_middle_bottom.data.push(arr);
})
}
})
},
getCount(){
let that = this;
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
query: {start_date:date,end_date:date,dept_name:that.deptName},
// query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
};
let namelist = [],valuelist = [];
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
if(res.data2.ds0.length>0){
res.data2.ds0.forEach((item)=>{
namelist.push(item.操作人);
valuelist.push(item.合格数);
})
}
that.chartOption1.xAxis.data = namelist;
that.chartOption1.series.data = valuelist;
});
},
},
};
</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/head_bg.png"); */
background: url("/public/img/header_bgv.png");
border-bottom: none;
background-size: 100% 100%;
display: block;
height: 8vh;
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;
font-size:4vh;
letter-spacing: 10px;
}
.header > .timer {
font-size: 14px;
margin-top: 18px;
position: absolute;
top: 5px;
left: 20px;
}
.numBlock{
height: 10vh;
}
.numBlock_title{
height: 4vh;
width: 100%;
font-size: 1.5vh;
line-height: 4vh;
text-align: center;
}
.numBlock_value{
height:6vh;
width: 100%;
line-height: 5vh;
text-align: center;
font-size: 3vh;
font-family: "myfont";
}
.leftChartBlock1{
width: 90%;
height: 28vh;
z-index: 999;
left: 5%;
border-radius: 3vh;
}
.leftChartBlock2{
width:100%;
height: 28vh;
}
.middleTableBlock1{
width:94%;
height:31vh;
position: absolute;
left: 4%
}
.middleTableBlock2{
width:94%;
height:34vh;
position: absolute;
left: 4%
}
.chartBlockTitle{
width: 90%;
height: 5vh;
margin: auto;
line-height: 6vh;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.6vh;
font-weight: 600;
border-bottom: 1px solid rgb(83 198 243);
}
</style>

View File

@ -0,0 +1,713 @@
<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="margin-bottom: 1vh;">
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日工序报工量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在产产品数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月完工工单</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月计划产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="leftBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工序数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日完成工序</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;position: relative;">
<dv-border-box-1>
<div class="chartBlockTitle">车间各工段生产产品数</div>
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">产品占比</div>
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="middleBlock">
<div style="height: 38vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间工段任务展示</div>
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 41vh;">
<dv-border-box-1>
<div class="chartBlockTitle">设备列表</div>
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="rightBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工单数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月交付数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">每个人日产量</div>
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间整体产品统计</div>
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export default {
components: { scScrollTavle },
data() {
return {
runningStateEnum,
basicOption: {
backgroundColor: "",
tooltip: {
trigger: "axis",
},
legend: {
icon: "stack",
right: 0,
},
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",
},
},
series: [
{
name: "",
type: "bar",
barWidth: 30,
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: "#00aaff"},
{offset: 1,color: "#0033ff"},
]),
},
data: [1,2,3,4,5,6,7],
},
],
},
chartOption1:{
color: ['#2f89cf'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: 'category',
data: [], //
axisTick: {
alignWithLabel: true // 线
},
axisLabel: {
color: "rgb(255,255,255)",
fontSize: "8",
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
//
series: {
name: 'Direct',
type: 'bar',
barWidth: '15',
data: [],
itemStyle: {
barBorderRadius: 5
}
}
},
chartOption2: {
grid: {
top: "10%",
left: "10%",
bottom: "5%",
containLabel: true
},
xAxis: {
// show: false
splitLine: {
show:false
},
},
// Y Y
yAxis: [
{
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff"
},
splitLine: {
show:false
},
type: 'category',
inverse: true, //
data: []
},
{
show: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show:false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
},
inverse: true, //
data: [],
}
],
//
series: [
{
name: '柱状图',
type: 'bar',
data: [],
yAxisIndex: 0,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (params) {
return myColor[params.dataIndex];
}
},
label: {
normal: {
// show: true,
position: "outside",
color: "#fff",
// formatter: "{a}"
}
}
},
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 12,
itemStyle: {
color: "none",
shadowColor: '#999', //
shadowBlur: 3, //
shadowOffsetX: 0, //
shadowOffsetY: 0, //
borderColor: "rgba(153,153,153,0.6)", //
borderWidth: 0.5,
barBorderRadius: 5,
},
yAxisIndex: 1,
data: []
}
]
},
tableHeight: 100,
speed: 2000,
time: null,
deptId: "",
dayInterval: null,
chartInterval2: null,
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
configData:{
header:['物料名称','批次号','数量'],
headerBGC:'#0a3f44',
headerHeight:40,
align:'center',
data:[],
waitTime:1000,
},
configData1:{
headerBGC:'#0a3f44',
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
headerHeight:40,
data:[]
},
config_left1:{
data:[]
} ,
config_left2:{
data:[]
},
config_middle_top:{
rowNum:10,
headerBGC: 'rgba(47,102,107,.34)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['任务编号', '产出产品', '任务量', '合格数'],
data: []
},
config_middle_bottom:{
rowNum:10,
headerBGC: 'rgba(0,0,0,0)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
data: []
},
currentTime: "",
currentDay: "",
today: "",
end_time:'',
start_time:'',
};
},
mounted() {
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;
let userInfo = this.$TOOL.data.get("USER_INFO");
this.deptId = userInfo.belong_dept;
this.deptName = userInfo.belong_dept_name;
this.getMgroups();
this.$nextTick(() => {
//
// this.getmgroupMaterial();
//
this.getMtask1();
//
this.getEquipment();
//
this.getCount();
//
//
// this.getMaterials();// this.getmgroupMaterial();
})
},
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;
},
getMgroups(){
let that = this;
that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
if(res.length > 0){
res.forEach((item,inde)=>{
that.mgroupsId += item.id + ',';
that.getmgroupMaterial(item);
//
if(inde==res.length-1){
that.getLastmgroupMaterial(item);
}
})
}
});
},
//
getMtask1() {
let that = this;
let params = {
state: 20,mgroup__belong_dept: that.deptId,page:0,
query: " { id, material_out_name, number, count, count_ok }"
};
that.config_middle_top.data = [];
that.$API.pm.mtask.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.number;
arr[1] = item.material_out_name;
arr[2] = item.count;
arr[3] = item.count_ok;
// arr[4] = item.count_ok/item.count*100+'%';
that.config_middle_top.data.push(arr);
})
}
});
},
//
getmgroupMaterial(item) {
let that = this;
let params = { tag: 'done',page_size:1,mgroup: item.id };
that.$API.wpm.wmaterial.list.req(params).then((res) => {
let obj = {};
obj.name = item.name;
obj.value = res.count;
that.config_left1.data.push(obj);
})
},
getLastmgroupMaterial(item){
let that = this;
let params = {
tag: 'done',page:0,mgroup: item.id ,
// query: " { id, material_name }"
};
that.$API.wpm.wmaterial.list.req(params).then((res) => {
if(res.length>0){
let namelist = [],valuelist = [],values=[];
res.forEach((item)=>{
let index = namelist.indexOf(item.material_.name);
if(index==-1){
namelist.push(item.material_.name);
valuelist.push(1);
values.push(1);
}else{
valuelist[index] += 1;
values[index] += 1;
}
})
let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
let arr = [];
valuelist.forEach((item)=>{
arr.push(maxNum)
})
that.chartOption2.yAxis[0].data = namelist;
that.chartOption2.yAxis[1].data = valuelist;
that.chartOption2.series[0].data = valuelist;
that.chartOption2.series[1].data = arr;
namelist.forEach((item,index)=>{
let obj = {};
obj.name = item;
obj.value = valuelist[index];
that.config_left2.data.push(obj);
})
}
})
},
getEquipment() {
let that = this;
let params = {
page: 0, belong_dept:that.deptId,
// query: " { id, name, number, model, state ,mgroup_name }"
};
that.config_middle_bottom.data = [];
that.$API.em.equipment.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
let state_ = that.state_[item.state];
let running_state_ = runningStateEnum[item.running_state]?.text;
arr[0] = item.name;
arr[1] = item.number;
arr[2] = state_;
arr[3] = running_state_;
arr[4] = item.mgroup_name;
that.config_middle_bottom.data.push(arr);
})
}
})
},
getCount(){
let that = this;
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
query: {start_date:date,end_date:date,dept_name:that.deptName},
// query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
};
let namelist = [],valuelist = [];
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
if(res.data2.ds0.length>0){
res.data2.ds0.forEach((item)=>{
namelist.push(item.操作人);
valuelist.push(item.合格数);
})
}
that.chartOption1.xAxis.data = namelist;
that.chartOption1.series.data = valuelist;
});
},
},
};
</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/head_bg.png"); */
background: url("/public/img/header_bgv.png");
border-bottom: none;
background-size: 100% 100%;
display: block;
height: 8vh;
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;
font-size:4vh;
letter-spacing: 10px;
}
.header > .timer {
font-size: 14px;
margin-top: 18px;
position: absolute;
top: 5px;
left: 20px;
}
.numBlock{
height: 10vh;
}
.numBlock_title{
height: 4vh;
width: 100%;
font-size: 1.5vh;
line-height: 4vh;
text-align: center;
}
.numBlock_value{
height:6vh;
width: 100%;
line-height: 5vh;
text-align: center;
font-size: 3vh;
font-family: "myfont";
}
.leftChartBlock1{
width: 90%;
height: 28vh;
z-index: 999;
left: 5%;
border-radius: 3vh;
}
.leftChartBlock2{
width:100%;
height: 28vh;
}
.middleTableBlock1{
width:94%;
height:31vh;
position: absolute;
left: 4%
}
.middleTableBlock2{
width:94%;
height:34vh;
position: absolute;
left: 4%
}
.chartBlockTitle{
width: 90%;
height: 5vh;
margin: auto;
line-height: 6vh;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.6vh;
font-weight: 600;
border-bottom: 1px solid rgb(83 198 243);
}
</style>

View File

@ -0,0 +1,713 @@
<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="margin-bottom: 1vh;">
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日工序报工量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在产产品数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月完工工单</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月计划产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="3" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月产量</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="leftBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工序数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">今日完成工序</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;position: relative;">
<dv-border-box-1>
<div class="chartBlockTitle">车间各工段生产产品数</div>
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">产品占比</div>
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="middleBlock">
<div style="height: 38vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间工段任务展示</div>
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 41vh;">
<dv-border-box-1>
<div class="chartBlockTitle">设备列表</div>
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
</dv-border-box-1>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="rightBlock">
<el-row style="margin-bottom: 1vh;">
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">在制工单数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
<el-col :span="12" class="numBlock">
<dv-border-box-12>
<div class="numBlock_title">本月交付数</div>
<div class="numBlock_value">123</div>
</dv-border-box-12>
</el-col>
</el-row>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">每个人日产量</div>
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">车间整体产品统计</div>
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export default {
components: { scScrollTavle },
data() {
return {
runningStateEnum,
basicOption: {
backgroundColor: "",
tooltip: {
trigger: "axis",
},
legend: {
icon: "stack",
right: 0,
},
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",
},
},
series: [
{
name: "",
type: "bar",
barWidth: 30,
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: "#00aaff"},
{offset: 1,color: "#0033ff"},
]),
},
data: [1,2,3,4,5,6,7],
},
],
},
chartOption1:{
color: ['#2f89cf'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: 'category',
data: [], //
axisTick: {
alignWithLabel: true // 线
},
axisLabel: {
color: "rgb(255,255,255)",
fontSize: "8",
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
},
//
series: {
name: 'Direct',
type: 'bar',
barWidth: '15',
data: [],
itemStyle: {
barBorderRadius: 5
}
}
},
chartOption2: {
grid: {
top: "10%",
left: "10%",
bottom: "5%",
containLabel: true
},
xAxis: {
// show: false
splitLine: {
show:false
},
},
// Y Y
yAxis: [
{
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff"
},
splitLine: {
show:false
},
type: 'category',
inverse: true, //
data: []
},
{
show: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show:false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
},
inverse: true, //
data: [],
}
],
//
series: [
{
name: '柱状图',
type: 'bar',
data: [],
yAxisIndex: 0,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (params) {
return myColor[params.dataIndex];
}
},
label: {
normal: {
// show: true,
position: "outside",
color: "#fff",
// formatter: "{a}"
}
}
},
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 12,
itemStyle: {
color: "none",
shadowColor: '#999', //
shadowBlur: 3, //
shadowOffsetX: 0, //
shadowOffsetY: 0, //
borderColor: "rgba(153,153,153,0.6)", //
borderWidth: 0.5,
barBorderRadius: 5,
},
yAxisIndex: 1,
data: []
}
]
},
tableHeight: 100,
speed: 2000,
time: null,
deptId: "",
dayInterval: null,
chartInterval2: null,
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
configData:{
header:['物料名称','批次号','数量'],
headerBGC:'#0a3f44',
headerHeight:40,
align:'center',
data:[],
waitTime:1000,
},
configData1:{
headerBGC:'#0a3f44',
header:['产出名称','规格','型号','开始时间','结束时间','完成进度','产量','状态'],
headerHeight:40,
data:[]
},
config_left1:{
data:[]
} ,
config_left2:{
data:[]
},
config_middle_top:{
rowNum:10,
headerBGC: 'rgba(47,102,107,.34)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['任务编号', '产出产品', '任务量', '合格数'],
data: []
},
config_middle_bottom:{
rowNum:10,
headerBGC: 'rgba(0,0,0,0)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
data: []
},
currentTime: "",
currentDay: "",
today: "",
end_time:'',
start_time:'',
};
},
mounted() {
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;
let userInfo = this.$TOOL.data.get("USER_INFO");
this.deptId = userInfo.belong_dept;
this.deptName = userInfo.belong_dept_name;
this.getMgroups();
this.$nextTick(() => {
//
// this.getmgroupMaterial();
//
this.getMtask1();
//
this.getEquipment();
//
this.getCount();
//
//
// this.getMaterials();// this.getmgroupMaterial();
})
},
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;
},
getMgroups(){
let that = this;
that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
if(res.length > 0){
res.forEach((item,inde)=>{
that.mgroupsId += item.id + ',';
that.getmgroupMaterial(item);
//
if(inde==res.length-1){
that.getLastmgroupMaterial(item);
}
})
}
});
},
//
getMtask1() {
let that = this;
let params = {
state: 20,mgroup__belong_dept: that.deptId,page:0,
query: " { id, material_out_name, number, count, count_ok }"
};
that.config_middle_top.data = [];
that.$API.pm.mtask.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.number;
arr[1] = item.material_out_name;
arr[2] = item.count;
arr[3] = item.count_ok;
// arr[4] = item.count_ok/item.count*100+'%';
that.config_middle_top.data.push(arr);
})
}
});
},
//
getmgroupMaterial(item) {
let that = this;
let params = { tag: 'done',page_size:1,mgroup: item.id };
that.$API.wpm.wmaterial.list.req(params).then((res) => {
let obj = {};
obj.name = item.name;
obj.value = res.count;
that.config_left1.data.push(obj);
})
},
getLastmgroupMaterial(item){
let that = this;
let params = {
tag: 'done',page:0,mgroup: item.id ,
// query: " { id, material_name }"
};
that.$API.wpm.wmaterial.list.req(params).then((res) => {
if(res.length>0){
let namelist = [],valuelist = [],values=[];
res.forEach((item)=>{
let index = namelist.indexOf(item.material_.name);
if(index==-1){
namelist.push(item.material_.name);
valuelist.push(1);
values.push(1);
}else{
valuelist[index] += 1;
values[index] += 1;
}
})
let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
let arr = [];
valuelist.forEach((item)=>{
arr.push(maxNum)
})
that.chartOption2.yAxis[0].data = namelist;
that.chartOption2.yAxis[1].data = valuelist;
that.chartOption2.series[0].data = valuelist;
that.chartOption2.series[1].data = arr;
namelist.forEach((item,index)=>{
let obj = {};
obj.name = item;
obj.value = valuelist[index];
that.config_left2.data.push(obj);
})
}
})
},
getEquipment() {
let that = this;
let params = {
page: 0, belong_dept:that.deptId,
// query: " { id, name, number, model, state ,mgroup_name }"
};
that.config_middle_bottom.data = [];
that.$API.em.equipment.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
let state_ = that.state_[item.state];
let running_state_ = runningStateEnum[item.running_state]?.text;
arr[0] = item.name;
arr[1] = item.number;
arr[2] = state_;
arr[3] = running_state_;
arr[4] = item.mgroup_name;
that.config_middle_bottom.data.push(arr);
})
}
})
},
getCount(){
let that = this;
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
query: {start_date:date,end_date:date,dept_name:that.deptName},
// query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
};
let namelist = [],valuelist = [];
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
if(res.data2.ds0.length>0){
res.data2.ds0.forEach((item)=>{
namelist.push(item.操作人);
valuelist.push(item.合格数);
})
}
that.chartOption1.xAxis.data = namelist;
that.chartOption1.series.data = valuelist;
});
},
},
};
</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/head_bg.png"); */
background: url("/public/img/header_bgv.png");
border-bottom: none;
background-size: 100% 100%;
display: block;
height: 8vh;
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;
font-size:4vh;
letter-spacing: 10px;
}
.header > .timer {
font-size: 14px;
margin-top: 18px;
position: absolute;
top: 5px;
left: 20px;
}
.numBlock{
height: 10vh;
}
.numBlock_title{
height: 4vh;
width: 100%;
font-size: 1.5vh;
line-height: 4vh;
text-align: center;
}
.numBlock_value{
height:6vh;
width: 100%;
line-height: 5vh;
text-align: center;
font-size: 3vh;
font-family: "myfont";
}
.leftChartBlock1{
width: 90%;
height: 28vh;
z-index: 999;
left: 5%;
border-radius: 3vh;
}
.leftChartBlock2{
width:100%;
height: 28vh;
}
.middleTableBlock1{
width:94%;
height:31vh;
position: absolute;
left: 4%
}
.middleTableBlock2{
width:94%;
height:34vh;
position: absolute;
left: 4%
}
.chartBlockTitle{
width: 90%;
height: 5vh;
margin: auto;
line-height: 6vh;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.6vh;
font-weight: 600;
border-bottom: 1px solid rgb(83 198 243);
}
</style>