zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 大屏及部分bug修复

This commit is contained in:
caoqianming 2023-11-13 08:51:08 +08:00
parent 155a4c7b7e
commit 283321f238
6 changed files with 1541 additions and 1598 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/photon_header - 副本.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
public/img/photon_header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 48 KiB

70
src/views/bigScreen/index_10dept.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<el-container class="dashboard"> <el-container class="dashboard">
<el-header class="header"> <el-header class="header">
<div>10车间生产数据大看板</div> <div style="font-weight: bold;">10车间生产数据看板</div>
<div style="font-size: 14px;margin-top:18px">2023-11-01 08:00</div>
</el-header> </el-header>
<el-main> <el-main>
<el-row style="height: 60%" :gutter="10"> <el-row style="height: 60%" :gutter="10">
<el-col :xs="24" :md="10"> <el-col :xs="24" :md="10">
<el-row style="height: 34%;" :gutter="10"> <el-row style="height: 38%;" :gutter="10">
<el-col :xs="8" :md="8"> <el-col :xs="8" :md="8">
<div class="box"> <div class="box">
<div class="boxtitle bgimg"> <div class="boxtitle bgimg">
<div class="boxlabel"></div> <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">今日任务</div>
<div>今日任务</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<div class="boxmain flex_center bigdata border"> <div class="boxmain flex_center bigdata border">
@ -24,8 +24,7 @@
<el-col :xs="8" :md="8"> <el-col :xs="8" :md="8">
<div class="box"> <div class="box">
<div class="boxtitle bgimg"> <div class="boxtitle bgimg">
<div class="boxlabel"></div> <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格</div>
<div>昨日合格</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;"> <!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
@ -38,8 +37,7 @@
<el-col :xs="8" :md="8"> <el-col :xs="8" :md="8">
<div class="box"> <div class="box">
<div class="boxtitle bgimg"> <div class="boxtitle bgimg">
<div class="boxlabel"></div> <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">累计合格</div>
<div>累计合格</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;"> <!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
@ -51,14 +49,15 @@
</el-col> </el-col>
</el-row> </el-row>
<div style="height:2%"></div> <div style="height:2%"></div>
<dv-decoration3 style="width:100%;height:4%;" /> <!-- <dv-decoration3 style="width:100%;height:4%;" /> -->
<el-row style="height:60%"> <el-row style="height:60%">
<el-col> <el-col>
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin:auto; font-size: 18px; margin-top: 6px">人员到岗 <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">人员到岗
</div> </div>
</div> </div>
<div style="height: 2px;"></div>
<div class="boxmain"> <div class="boxmain">
<dv-scroll-board :config="taskBoard" style="width:100%;height:100%" <dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
@mouseover="mouseoverHandler" @click="clickHandler" /> @mouseover="mouseoverHandler" @click="clickHandler" />
@ -129,7 +128,7 @@
<el-col :xs="24" :md="14"> <el-col :xs="24" :md="14">
<div class="box" :dur="20"> <div class="box" :dur="20">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin:auto; font-size: 18px; margin-top: 6px">任务进度</div> <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">任务进度</div>
</div> </div>
<div style="height: 2px;"></div> <div style="height: 2px;"></div>
<div class="boxmain"> <div class="boxmain">
@ -198,7 +197,7 @@
<el-col :xs="24" :md="9"> <el-col :xs="24" :md="9">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin:auto; font-size: 18px; margin-top: 6px">全年生产统计</div> <div style="margin-left: 6px;font-size: 18px; margin-top: 6px">全年生产统计</div>
</div> </div>
<div class="boxmain" id="chart1"> <div class="boxmain" id="chart1">
</div> </div>
@ -207,7 +206,7 @@
<el-col :xs="24" :md="9"> <el-col :xs="24" :md="9">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin:auto; font-size: 18px; margin-top: 6px">本月合格率统计</div> <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div>
</div> </div>
<div class="boxmain" id="chart2"> <div class="boxmain" id="chart2">
</div> </div>
@ -216,7 +215,7 @@
<el-col :xs="24" :md="6"> <el-col :xs="24" :md="6">
<div class="box"> <div class="box">
<div class="boxtitle"> <div class="boxtitle">
<div style="margin:auto; font-size: 18px; margin-top: 6px">昨日合格统计</div> <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
</div> </div>
<div class="boxmain" id="chart3"> <div class="boxmain" id="chart3">
</div> </div>
@ -231,7 +230,7 @@
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg"); background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
/* url("/public/img/bg.jpg"); */ /* url("/public/img/bg.jpg"); */
color: #fff; color: #fff;
font-family: "微软雅黑" !important; font-family: "Microsoft Yahei" !important;
} }
.header { .header {
@ -239,8 +238,13 @@
border-bottom: none; border-bottom: none;
/* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */ /* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
background-size: 100% 100%; background-size: 100% 100%;
font-size: 28px; font-size: 26px;
justify-content: center; display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
} }
@ -265,7 +269,7 @@
.bgimg { .bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png'); background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 100% 100%; background-size: 140% 100%;
} }
.boxlabel { .boxlabel {
@ -329,7 +333,7 @@ export default {
data() { data() {
return { return {
basicOption: { basicOption: {
// backgroundColor: '', backgroundColor: '',
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -576,7 +580,33 @@ export default {
chart2Option.series[0].type = 'line' chart2Option.series[0].type = 'line'
chart2Option.series[1].type = 'line' chart2Option.series[1].type = 'line'
let chart2 = this.setChart("chart2", chart2Option) let chart2 = this.setChart("chart2", chart2Option)
let chart3Option = deepCopy(this.basicOption) let chart3Option = {
backgroundColor: '',
legend: {
top: 'bottom'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
};
let chart3 = this.setChart("chart3", chart3Option) let chart3 = this.setChart("chart3", chart3Option)
}, },

315
src/views/bigScreen/index_enm.vue
View File

@ -10,7 +10,7 @@
<div class="panel_title">本月全厂主要数据</div> <div class="panel_title">本月全厂主要数据</div>
<el-row :gutter="16" style="height: 72px;margin-top: 4px"> <el-row :gutter="16" style="height: 72px;margin-top: 4px">
<el-col :span="12" class="panel_item"> <el-col :span="12" class="panel_item">
<div class="panel_label"><img src="img/elec.png" style="height: 24px;vertical-align:middle;"/>动力电消耗</div> <div class="panel_label"><img src="img/elec.png" style="height: 24px;vertical-align:middle;" />动力电消耗</div>
<div class="pannel_number"> <div class="pannel_number">
<span class="panel_value">{{ factoryData.elec_consume }}</span> <span class="panel_value">{{ factoryData.elec_consume }}</span>
<span class="panel_unit">(kW·h)</span> <span class="panel_unit">(kW·h)</span>
@ -66,7 +66,8 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="panel_item"> <el-col :span="12" class="panel_item">
<div class="panel_label"><img src="img/total_production.png" style="height: 24px;vertical-align:middle;" />产品产量</div> <div class="panel_label"><img src="img/total_production.png"
style="height: 24px;vertical-align:middle;" />产品产量</div>
<div class="pannel_number"> <div class="pannel_number">
<span class="panel_value">{{ sectionData.total_production }}</span> <span class="panel_value">{{ sectionData.total_production }}</span>
<span class="panel_unit">(t)</span> <span class="panel_unit">(t)</span>
@ -82,7 +83,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="panel_item" v-if="showKgcet"> <el-col :span="12" class="panel_item" v-if="showKgcet">
<div class="panel_label"><img src="img/coal.png" style="height: 24px;vertical-align:bottom;"/>单位产品标煤耗</div> <div class="panel_label"><img src="img/coal.png" style="height: 24px;vertical-align:bottom;" />单位产品标煤耗</div>
<div class="pannel_number"> <div class="pannel_number">
<span class="panel_value">{{ sectionData.coal_consume_unit }}</span> <span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
<span class="panel_unit">(kgce/t)</span> <span class="panel_unit">(kgce/t)</span>
@ -137,15 +138,15 @@ import 'animate.css';
export default { export default {
data() { data() {
return { return {
query:{ query: {
year_s:2023, year_s: 2023,
month_s:8, month_s: 8,
type:'month_s', type: 'month_s',
page:0 page: 0
}, },
factoryData: {}, factoryData: {},
sectionData: {}, sectionData: {},
nowDay:1, nowDay: 1,
initialAlpha: -Math.PI / 0.89, initialAlpha: -Math.PI / 0.89,
initialBeta: Math.PI / 3.3, initialBeta: Math.PI / 3.3,
initialRadius: 18, initialRadius: 18,
@ -175,12 +176,12 @@ export default {
xAxis: { xAxis: {
data: ['一月', '二月', '三月', '四月', '五月', '六月'], data: ['一月', '二月', '三月', '四月', '五月', '六月'],
}, },
yAxis: { type: 'value'}, yAxis: { type: 'value' },
series: [ series: [
{ {
name: '销量', name: '销量',
type: 'bar', type: 'bar',
barwidth:10, barwidth: 10,
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
@ -211,33 +212,33 @@ export default {
bottom: "15%" bottom: "15%"
} }
}, },
year_start:0, year_start: 0,
end_time:'', end_time: '',
start_time:'', start_time: '',
xAxisData:[], xAxisData: [],
arrMonth:[], arrMonth: [],
chart1Option: {}, chart1Option: {},
chart2Option: {}, chart2Option: {},
chart3Option: {}, chart3Option: {},
chart4Option: {}, chart4Option: {},
chart5Option: {}, chart5Option: {},
chart6Option: {}, chart6Option: {},
seriesData1:[0,0,0,0,0,0], seriesData1: [0, 0, 0, 0, 0, 0],
seriesData2:[0,0,0,0,0,0], seriesData2: [0, 0, 0, 0, 0, 0],
seriesData3:[0,0,0,0,0,0], seriesData3: [0, 0, 0, 0, 0, 0],
seriesData3_2:[0,0,0,0,0,0], seriesData3_2: [0, 0, 0, 0, 0, 0],
seriesData4:[0,0,0,0,0,0], seriesData4: [0, 0, 0, 0, 0, 0],
seriesData5:[0,0,0,0,0,0], seriesData5: [0, 0, 0, 0, 0, 0],
seriesData6:[0,0,0,0,0,0], seriesData6: [0, 0, 0, 0, 0, 0],
path:"ws://49.232.14.174:2226/ws/my/?token=", path: "ws://49.232.14.174:2226/ws/my/?token=",
ws:null, ws: null,
mgroupValues:{ mgroupValues: {
电石渣:{total:'0',elec:'0'}, 电石渣: { total: '0', elec: '0' },
原料磨:{total:'0',elec:'0'}, 原料磨: { total: '0', elec: '0' },
煤磨:{total:'0',elec:'0'}, 煤磨: { total: '0', elec: '0' },
回转窑:{total:'0',elec:'0'}, 回转窑: { total: '0', elec: '0' },
水泥磨:{total:'0',elec:'0'}, 水泥磨: { total: '0', elec: '0' },
水泥包装:{total:'0',elec:'0'} 水泥包装: { total: '0', elec: '0' }
}, },
} }
}, },
@ -247,35 +248,35 @@ export default {
this.addListener(); this.addListener();
let myDate = new Date(); let myDate = new Date();
let year = myDate.getFullYear(); let year = myDate.getFullYear();
let month = myDate.getMonth()+1; let month = myDate.getMonth() + 1;
let day = myDate.getDate(); let day = myDate.getDate();
that.nowDay = day; that.nowDay = day;
that.query.year_s = year; that.query.year_s = year;
that.query.month_s = month; that.query.month_s = month;
this.initDomStyle(); this.initDomStyle();
this.$nextTick(() => { this.$nextTick(() => {
this.$API.enm.enstat.req({type:'month_s',month_s:month,year_s:year,page:0}).then((res1) => { this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => {
console.log('工段数据：',res1) console.log('工段数据：', res1)
// debugger // debugger
res1.forEach(item=>{ res1.forEach(item => {
if(item.mgroup_name=='电石渣'){ if (item.mgroup_name == '电石渣') {
that.mgroupValues.电石渣.total = item.total_production+''; that.mgroupValues.电石渣.total = item.total_production + '';
that.mgroupValues.电石渣.elec=item.elec_consume_unit+''; that.mgroupValues.电石渣.elec = item.elec_consume_unit + '';
}else if(item.mgroup_name=='原料磨'){ } else if (item.mgroup_name == '原料磨') {
that.mgroupValues.原料磨.total=item.total_production+''; that.mgroupValues.原料磨.total = item.total_production + '';
that.mgroupValues.原料磨.elec=item.elec_consume_unit+''; that.mgroupValues.原料磨.elec = item.elec_consume_unit + '';
}else if(item.mgroup_name=='煤磨'){ } else if (item.mgroup_name == '煤磨') {
that.mgroupValues.煤磨.total=item.total_production+''; that.mgroupValues.煤磨.total = item.total_production + '';
that.mgroupValues.煤磨.elec=item.elec_consume_unit+''; that.mgroupValues.煤磨.elec = item.elec_consume_unit + '';
}else if(item.mgroup_name=='回转窑'){ } else if (item.mgroup_name == '回转窑') {
that.mgroupValues.回转窑.total=item.total_production+''; that.mgroupValues.回转窑.total = item.total_production + '';
that.mgroupValues.回转窑.elec=item.elec_consume_unit+''; that.mgroupValues.回转窑.elec = item.elec_consume_unit + '';
}else if(item.mgroup_name=='水泥磨'){ } else if (item.mgroup_name == '水泥磨') {
that.mgroupValues.水泥磨.total=item.total_production+''; that.mgroupValues.水泥磨.total = item.total_production + '';
that.mgroupValues.水泥磨.elec=item.elec_consume_unit+''; that.mgroupValues.水泥磨.elec = item.elec_consume_unit + '';
}else if(item.mgroup_name=='水泥包装'){ } else if (item.mgroup_name == '水泥包装') {
that.mgroupValues.水泥包装.total=item.total_production+''; that.mgroupValues.水泥包装.total = item.total_production + '';
that.mgroupValues.水泥包装.elec=item.elec_consume_unit+''; that.mgroupValues.水泥包装.elec = item.elec_consume_unit + '';
} }
}) })
}) })
@ -283,29 +284,29 @@ export default {
that.initFactory(); that.initFactory();
}, 1000); }, 1000);
}); });
let month1= month>9?month:'0'+month; let month1 = month > 9 ? month : '0' + month;
let end_time = year+'-'+month1+'-01 10:00:00'; let end_time = year + '-' + month1 + '-01 10:00:00';
let year_s=year; let year_s = year;
if(month<6){ if (month < 6) {
year_s = year-1; year_s = year - 1;
} }
let arr = [],xAxisData = []; let arr = [], xAxisData = [];
let monthItem = month; let monthItem = month;
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
arr.push(monthItem); arr.push(monthItem);
if(monthItem === 1) { if (monthItem === 1) {
monthItem = 12; monthItem = 12;
} else { } else {
monthItem--; monthItem--;
} }
} }
arr.reverse(); arr.reverse();
for(let i=0;i<6;i++){ for (let i = 0; i < 6; i++) {
let item = arr[i]+'月' let item = arr[i] + '月'
xAxisData.push(item); xAxisData.push(item);
} }
let month0= arr[0]>9?arr[0]:'0'+arr[0]; let month0 = arr[0] > 9 ? arr[0] : '0' + arr[0];
let start_time = year_s+'-'+month0+'-01 10:00:00'; let start_time = year_s + '-' + month0 + '-01 10:00:00';
that.arrMonth = arr; that.arrMonth = arr;
that.year_start = year_s; that.year_start = year_s;
that.xAxisData = xAxisData; that.xAxisData = xAxisData;
@ -325,10 +326,12 @@ export default {
}, },
methods: { methods: {
// 动态绑定Class // 动态绑定Class
bindClass(type){ bindClass(type) {
let classInfo = { socketDom: true, redColor: false, let classInfo = {
orangeColor:false, yellowColor:false, blueColor:true } socketDom: true, redColor: false,
if(type==''){ orangeColor: false, yellowColor: false, blueColor: true
}
if (type == '') {
classInfo.redColor = true classInfo.redColor = true
} }
return classInfo return classInfo
@ -336,34 +339,34 @@ export default {
init() { init() {
var that = this var that = this
// console.log(tool.cookie.get("TOKEN")) // console.log(tool.cookie.get("TOKEN"))
if(typeof(WebSocket) === "undefined"){ if (typeof (WebSocket) === "undefined") {
alert("您的浏览器不支持socket") alert("您的浏览器不支持socket")
}else{ } else {
this.ws = new WebSocket(this.path+tool.cookie.get("TOKEN")) this.ws = new WebSocket(this.path + tool.cookie.get("TOKEN"))
//监听是否连接成功 //监听是否连接成功
this.ws.onopen = ()=> { this.ws.onopen = () => {
// console.log("socket连接成功"); // console.log("socket连接成功");
setTimeout(()=>{ setTimeout(() => {
that.ws.send(JSON.stringify({'type': 'event'})) that.ws.send(JSON.stringify({ 'type': 'event' }))
},500) }, 500)
} }
//接听服务器发回的信息并处理展示 //接听服务器发回的信息并处理展示
this.ws.onmessage = (msg)=>{ this.ws.onmessage = (msg) => {
let data = JSON.parse(msg.data) let data = JSON.parse(msg.data)
console.log(data) console.log(data)
if(data.type=='event'){ if (data.type == 'event') {
that.bindClass(); that.bindClass();
}if(data.type=='ticket'){ } if (data.type == 'ticket') {
}if(data.type=='remaind'){ } if (data.type == 'remaind') {
} }
}; };
// 监听并处理error事件 // 监听并处理error事件
this.ws.onerror = function(error) { this.ws.onerror = function (error) {
console.log('ws断开,尝试重连') console.log('ws断开,尝试重连')
setTimeout(()=>{ setTimeout(() => {
this.ws = null; this.ws = null;
this.init() this.init()
}, 5000) }, 5000)
@ -389,34 +392,34 @@ export default {
getFactoryData() { getFactoryData() {
var that = this; var that = this;
that.$API.enm.enstat2.req(that.query).then((res) => { that.$API.enm.enstat2.req(that.query).then((res) => {
if(res.length>0){ if (res.length > 0) {
that.factoryData = res[0] that.factoryData = res[0]
}else{} } else { }
}) })
//图表数据 //图表数据
let obj = {}; let obj = {};
obj.type = 'month_s'; obj.type = 'month_s';
obj.start_time = that.start_time; obj.start_time = that.start_time;
obj.end_time = that.end_time; obj.end_time = that.end_time;
obj.page=0; obj.page = 0;
this.$API.enm.enstat2.req(obj).then((res1) => { this.$API.enm.enstat2.req(obj).then((res1) => {
let list0 = res1.sort(this.compare('month_s')); let list0 = res1.sort(this.compare('month_s'));
let list = list0.sort(this.compare('year_s')); let list = list0.sort(this.compare('year_s'));
let seriesData1 = [0,0,0,0,0,0], let seriesData1 = [0, 0, 0, 0, 0, 0],
seriesData2 = [0,0,0,0,0,0], seriesData2 = [0, 0, 0, 0, 0, 0],
seriesData3 = [0,0,0,0,0,0], seriesData3 = [0, 0, 0, 0, 0, 0],
seriesData3_2 = [0,0,0,0,0,0]; seriesData3_2 = [0, 0, 0, 0, 0, 0];
list.forEach(item=>{ list.forEach(item => {
let index = that.arrMonth.indexOf(item.month_s); let index = that.arrMonth.indexOf(item.month_s);
seriesData1[index] = Number(item.elec_consume) seriesData1[index] = Number(item.elec_consume)
seriesData2[index] = Number(item.pcoal_consume) seriesData2[index] = Number(item.pcoal_consume)
seriesData3[index] = Number(item.water_consume) seriesData3[index] = Number(item.water_consume)
seriesData3_2[index] = Number(item.cair_consume) seriesData3_2[index] = Number(item.cair_consume)
}) })
that.seriesData1=seriesData1; that.seriesData1 = seriesData1;
that.seriesData2=seriesData2; that.seriesData2 = seriesData2;
that.seriesData3=seriesData3; that.seriesData3 = seriesData3;
that.seriesData3_2=seriesData3_2; that.seriesData3_2 = seriesData3_2;
that.initCharts(); that.initCharts();
}) })
}, },
@ -426,35 +429,35 @@ export default {
obj.type = 'month_s'; obj.type = 'month_s';
obj.start_time = that.start_time; obj.start_time = that.start_time;
obj.end_time = that.end_time; obj.end_time = that.end_time;
obj.mgroup__name=that.activeSectionName; obj.mgroup__name = that.activeSectionName;
obj.page=0; obj.page = 0;
this.$API.enm.enstat.req(obj).then((res) => { this.$API.enm.enstat.req(obj).then((res) => {
let list0 = res.sort(this.compare('month_s')); let list0 = res.sort(this.compare('month_s'));
let list = list0.sort(this.compare('year_s')); let list = list0.sort(this.compare('year_s'));
let seriesData4 = [0,0,0,0,0,0], let seriesData4 = [0, 0, 0, 0, 0, 0],
seriesData5 = [0,0,0,0,0,0], seriesData5 = [0, 0, 0, 0, 0, 0],
seriesData6 = [0,0,0,0,0,0]; seriesData6 = [0, 0, 0, 0, 0, 0];
list.forEach(item=>{ list.forEach(item => {
let index = that.arrMonth.indexOf(item.month_s); let index = that.arrMonth.indexOf(item.month_s);
seriesData4[index] = Number(item.elec_consume_unit) seriesData4[index] = Number(item.elec_consume_unit)
seriesData5[index] = Number(item.total_production) seriesData5[index] = Number(item.total_production)
seriesData6[index] = Number(item.run_rate) seriesData6[index] = Number(item.run_rate)
}) })
that.seriesData4=seriesData4; that.seriesData4 = seriesData4;
that.seriesData5=seriesData5; that.seriesData5 = seriesData5;
that.seriesData6=seriesData6; that.seriesData6 = seriesData6;
that.initCharts1(); that.initCharts1();
}) })
}, },
getDayData(){ getDayData() {
var that = this; var that = this;
let obj = {}; let obj = {};
obj.type = 'day_s'; obj.type = 'day_s';
obj.year_s = that.query.year_s; obj.year_s = that.query.year_s;
obj.month_s = that.query.month_s; obj.month_s = that.query.month_s;
obj.day_s = that.nowDay; obj.day_s = that.nowDay;
obj.mgroup__name=that.activeSectionName; obj.mgroup__name = that.activeSectionName;
obj.page=0; obj.page = 0;
this.$API.enm.enstat.req(obj).then((res) => { this.$API.enm.enstat.req(obj).then((res) => {
that.sectionData = res[0]; that.sectionData = res[0];
}) })
@ -481,12 +484,12 @@ export default {
}, },
data: that.seriesData1 data: that.seriesData1
}] }]
that.setChart('chart1',that.chart1Option); that.setChart('chart1', that.chart1Option);
this.chart2Option = deepCopy(that.basicOption) this.chart2Option = deepCopy(that.basicOption)
this.chart2Option.series[0].type = 'line'; this.chart2Option.series[0].type = 'line';
this.chart2Option.series[0].data = that.seriesData2; this.chart2Option.series[0].data = that.seriesData2;
this.setChart('chart2', this.chart2Option); this.setChart('chart2', this.chart2Option);
this.chart3Option =deepCopy(that.basicOption) this.chart3Option = deepCopy(that.basicOption)
this.chart3Option.series = [ this.chart3Option.series = [
{ {
name: '工业水', name: '工业水',
@ -629,7 +632,7 @@ export default {
setTimeout(() => { setTimeout(() => {
try { try {
myChart.setOption(option); myChart.setOption(option);
} catch (error) {} } catch (error) { }
}, 500) }, 500)
}, },
initFactory() { initFactory() {
@ -794,7 +797,7 @@ export default {
rect1.addControl(label); rect1.addControl(label);
rect1.linkWithMesh(mesh); rect1.linkWithMesh(mesh);
rect1.linkOffsetY = -30; rect1.linkOffsetY = -30;
if(value=='电石渣'){ if (value == '电石渣') {
rect1.linkOffsetY = -200; rect1.linkOffsetY = -200;
var line = new BABYLON_GUI.Line(); var line = new BABYLON_GUI.Line();
line.lineWidth = 4; line.lineWidth = 4;
@ -817,7 +820,7 @@ export default {
// console.log('fly to') // console.log('fly to')
// 计算新的相机位置 // 计算新的相机位置
let position = mesh._parentNode._position let position = mesh._parentNode._position
if(mesh._parentNode.id=='__root__'){ if (mesh._parentNode.id == '__root__') {
position = mesh.position position = mesh.position
} }
const cameraPosition = new BABYLON.Vector3( const cameraPosition = new BABYLON.Vector3(
@ -856,7 +859,7 @@ export default {
mgroupName.shadowOffsetX = -2; mgroupName.shadowOffsetX = -2;
mgroupName.shadowOffsetY = 2; mgroupName.shadowOffsetY = 2;
data_view.addControl(mgroupName); data_view.addControl(mgroupName);
const mgroup =new BABYLON_GUI.Rectangle('mgroup'); const mgroup = new BABYLON_GUI.Rectangle('mgroup');
mgroup.height = "3px"; mgroup.height = "3px";
mgroup.width = "160px"; mgroup.width = "160px";
mgroup.thickness = 0; mgroup.thickness = 0;
@ -869,34 +872,34 @@ export default {
var wd = 2; var wd = 2;
var hd = 2; var hd = 2;
for (let i = 0; i < wd; i++) { for (let i = 0; i < wd; i++) {
grid.addRowDefinition(1/wd); grid.addRowDefinition(1 / wd);
} }
for (let j = 0; j < hd; j++) { for (let j = 0; j < hd; j++) {
grid.addColumnDefinition(1/hd); grid.addColumnDefinition(1 / hd);
} }
for (let i = 0; i < wd; i++) { for (let i = 0; i < wd; i++) {
for (let j = 0; j < hd; j++) { for (let j = 0; j < hd; j++) {
var rc= new BABYLON_GUI.TextBlock("rc"+i+j); var rc = new BABYLON_GUI.TextBlock("rc" + i + j);
rc.width = "100%"; rc.width = "100%";
// rc.height = "100%"; // rc.height = "100%";
rc.thickness = 0; rc.thickness = 0;
if(j==0&&i==0){ if (j == 0 && i == 0) {
rc.width = "120px"; rc.width = "120px";
rc.text = "产品产量："; rc.text = "产品产量：";
rc.color = "white"; rc.color = "white";
rc.fontSize = '16px'; rc.fontSize = '16px';
}else if(j==0&&i==1){ } else if (j == 0 && i == 1) {
rc.width = "120px"; rc.width = "120px";
rc.color = "white"; rc.color = "white";
rc.fontSize = '16px'; rc.fontSize = '16px';
rc.text = "单位产品电耗："; rc.text = "单位产品电耗：";
}else if(j==1&&i==0){ } else if (j == 1 && i == 0) {
// rc.text = that.mgroupValues[value].total; // rc.text = that.mgroupValues[value].total;
rc.text = "123"; rc.text = "123";
rc.width = "80px"; rc.width = "80px";
rc.fontSize = '18px'; rc.fontSize = '18px';
rc.color = "rgb(44,237,255)"; rc.color = "rgb(44,237,255)";
}else if(j==1&&i==1){ } else if (j == 1 && i == 1) {
// rc.text = that.mgroupValues[value].total; // rc.text = that.mgroupValues[value].total;
rc.text = "456"; rc.text = "456";
rc.width = "80px"; rc.width = "80px";
@ -907,7 +910,7 @@ export default {
} }
} }
data_view.addControl(grid); data_view.addControl(grid);
var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close"+value,'关闭'); var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭');
mgroup_close.width = "70px" mgroup_close.width = "70px"
mgroup_close.height = "25px"; mgroup_close.height = "25px";
mgroup_close.color = "white"; mgroup_close.color = "white";
@ -916,7 +919,7 @@ export default {
mgroup_close.background = 'rgb(44,237,255,.5)'; mgroup_close.background = 'rgb(44,237,255,.5)';
mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5; mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
mgroup_close.onPointerClickObservable.add(() => { mgroup_close.onPointerClickObservable.add(() => {
console.log('data_view',data_view) console.log('data_view', data_view)
data_view.isVisible = false; data_view.isVisible = false;
}) })
data_view.addControl(mgroup_close); data_view.addControl(mgroup_close);
@ -924,7 +927,7 @@ export default {
advancedTexture.addControl(data_view); advancedTexture.addControl(data_view);
data_view.linkWithMesh(mesh); data_view.linkWithMesh(mesh);
data_view.linkOffsetY = -120; data_view.linkOffsetY = -120;
if(value=='电石渣'){ if (value == '电石渣') {
data_view.linkOffsetY = -290; data_view.linkOffsetY = -290;
} }
} }
@ -1009,7 +1012,7 @@ export default {
if (pickResult.hit) { if (pickResult.hit) {
const mesh = pickResult.pickedMesh; const mesh = pickResult.pickedMesh;
highlightLayer.removeAllMeshes(); highlightLayer.removeAllMeshes();
if(/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name)&&mesh.name!=='地面1'&&mesh.name!=='绿地'&&mesh.name!=='停车场') { if (/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && mesh.name !== '地面1' && mesh.name !== '绿地' && mesh.name !== '停车场') {
// 在选中的 mesh 上添加高亮效果 // 在选中的 mesh 上添加高亮效果
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5)); highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
that.currentLightMesh = mesh; that.currentLightMesh = mesh;
@ -1051,23 +1054,23 @@ export default {
obj.type = 'month_s'; obj.type = 'month_s';
obj.start_time = that.start_time; obj.start_time = that.start_time;
obj.end_time = that.end_time; obj.end_time = that.end_time;
obj.mgroup__name=val; obj.mgroup__name = val;
obj.page=0; obj.page = 0;
this.$API.enm.enstat.req(obj).then((res) => { this.$API.enm.enstat.req(obj).then((res) => {
let list0 = res.sort(this.compare('month_s')); let list0 = res.sort(this.compare('month_s'));
let list = list0.sort(this.compare('year_s')); let list = list0.sort(this.compare('year_s'));
let seriesData4 = [0,0,0,0,0,0], let seriesData4 = [0, 0, 0, 0, 0, 0],
seriesData5 = [0,0,0,0,0,0], seriesData5 = [0, 0, 0, 0, 0, 0],
seriesData6 = [0,0,0,0,0,0]; seriesData6 = [0, 0, 0, 0, 0, 0];
list.forEach(item=>{ list.forEach(item => {
let index = that.arrMonth.indexOf(item.month_s); let index = that.arrMonth.indexOf(item.month_s);
seriesData4[index] = Number(item.elec_consume_unit) seriesData4[index] = Number(item.elec_consume_unit)
seriesData5[index] = Number(item.total_production) seriesData5[index] = Number(item.total_production)
seriesData6[index] = Number(item.run_rate) seriesData6[index] = Number(item.run_rate)
}) })
that.seriesData4=seriesData4; that.seriesData4 = seriesData4;
that.seriesData5=seriesData5; that.seriesData5 = seriesData5;
that.seriesData6=seriesData6; that.seriesData6 = seriesData6;
that.initCharts1(); that.initCharts1();
const element_main = document.querySelector('.right_main'); const element_main = document.querySelector('.right_main');
element_main.classList.add('animate__animated', 'animate__fadeIn'); element_main.classList.add('animate__animated', 'animate__fadeIn');
@ -1081,35 +1084,35 @@ export default {
// 移除属性 // 移除属性
element.classList.remove('animate__fadeIn'); element.classList.remove('animate__fadeIn');
}); });
const sectionUI = this.myui.getControlByName(val+'_rect') const sectionUI = this.myui.getControlByName(val + '_rect')
sectionUI.onPointerDownObservable.notifyObservers(); sectionUI.onPointerDownObservable.notifyObservers();
}) })
}, },
getMgroupChartData(name){ getMgroupChartData(name) {
var that = this; var that = this;
let obj = {}; let obj = {};
obj.type = 'month_s'; obj.type = 'month_s';
obj.start_time = that.start_time; obj.start_time = that.start_time;
obj.end_time = that.end_time; obj.end_time = that.end_time;
obj.mgroup__name=name; obj.mgroup__name = name;
obj.page=0; obj.page = 0;
this.$API.enm.enstat.req(obj).then((res) => { this.$API.enm.enstat.req(obj).then((res) => {
let list0 = res.sort(this.compare('month_s')); let list0 = res.sort(this.compare('month_s'));
let list = list0.sort(this.compare('year_s')); let list = list0.sort(this.compare('year_s'));
let seriesData4 = [0,0,0,0,0,0], let seriesData4 = [0, 0, 0, 0, 0, 0],
seriesData5 = [0,0,0,0,0,0], seriesData5 = [0, 0, 0, 0, 0, 0],
seriesData6 = [0,0,0,0,0,0]; seriesData6 = [0, 0, 0, 0, 0, 0];
list.forEach(item=>{ list.forEach(item => {
let index = that.arrMonth.indexOf(item.month_s); let index = that.arrMonth.indexOf(item.month_s);
seriesData4[index] = Number(item.elec_consume_unit) seriesData4[index] = Number(item.elec_consume_unit)
seriesData5[index] = Number(item.total_production) seriesData5[index] = Number(item.total_production)
seriesData6[index] = Number(item.run_rate) seriesData6[index] = Number(item.run_rate)
}) })
that.seriesData4=seriesData4; that.seriesData4 = seriesData4;
that.seriesData5=seriesData5; that.seriesData5 = seriesData5;
that.seriesData6=seriesData6; that.seriesData6 = seriesData6;
that.initCharts1(); that.initCharts1();
}) })
}, },
@ -1181,23 +1184,30 @@ header {
justify-content: center; justify-content: center;
font-size: 30px; font-size: 30px;
} }
.left_main,.right_main {
.left_main,
.right_main {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 40px; top: 40px;
width: 20%; width: 20%;
} }
.right_main { .right_main {
right: 0; right: 0;
} }
.left_other,.right_other {
.left_other,
.right_other {
position: absolute; position: absolute;
top: 240px; top: 240px;
width: 20%; width: 20%;
} }
.right_other { .right_other {
right: 0 right: 0
} }
.panel { .panel {
padding: 4px 8px; padding: 4px 8px;
overflow: auto; overflow: auto;
@ -1209,6 +1219,7 @@ header {
border: 1px solid transparent; border: 1px solid transparent;
margin: 6px 6px; margin: 6px 6px;
} }
.panel_title { .panel_title {
height: 30px; height: 30px;
margin-bottom: 4px; margin-bottom: 4px;
@ -1216,24 +1227,29 @@ header {
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
} }
.panel_item { .panel_item {
color: #fff; color: #fff;
padding: 6px; padding: 6px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335)); background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
} }
.panel_label { .panel_label {
font-size: 16px; font-size: 16px;
margin-bottom: 6px; margin-bottom: 6px;
} }
.pannel_number{
.pannel_number {
position: relative; position: relative;
} }
.panel_value { .panel_value {
padding-left: 1em; padding-left: 1em;
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
} }
.panel_unit { .panel_unit {
right: 5px; right: 5px;
color: #aebfe9; color: #aebfe9;
@ -1241,10 +1257,12 @@ header {
text-align: right; text-align: right;
position: absolute; position: absolute;
} }
.chart { .chart {
width: 100%; width: 100%;
height: 220px; height: 220px;
} }
.dropdown { .dropdown {
/* top: 20%; /* top: 20%;
font-size: 18px; font-size: 18px;
@ -1281,6 +1299,7 @@ header {
line-height: 3.7vw; line-height: 3.7vw;
margin: 0 0.1vw 0.1vw 0.1vw; margin: 0 0.1vw 0.1vw 0.1vw;
} }
.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item.active { .dropdown-item.active {
/* background-color: #ddd; */ /* background-color: #ddd; */
@ -1295,6 +1314,4 @@ header {
text-align: center; text-align: center;
background: url(./../../../public/img/menu_active.png) no-repeat; background: url(./../../../public/img/menu_active.png) no-repeat;
background-size: 100%; background-size: 100%;
} }</style>
</style>

519
src/views/bigScreen/textIndex.vue
View File

@ -7,22 +7,28 @@
</el-header> </el-header>
<el-main style="padding:0" id="mainBlock"> <el-main style="padding:0" id="mainBlock">
<el-row style="height:100%"> <el-row style="height:100%">
<!-- <div style="position: absolute;left: 0;width:20%;z-index:10"> <div style="position: absolute;left: 0;width:20%;z-index:10">
<div style="display:flex;flex-direction: column;height:100%;padding:20px"> <div style="display:flex;flex-direction: column;height:100%;padding:20px">
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块一</div> <div class="blockTitle">
<div class="blockTitleIcon"></div>模块一
</div>
<div id="line1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div> <div id="line1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块二</div> <div class="blockTitle">
<div class="blockTitleIcon"></div>模块二
</div>
<div id="bar1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div> <div id="bar1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块三</div> <div class="blockTitle">
<div class="blockTitleIcon"></div>模块三
</div>
<div id="line2" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div> <div id="line2" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
</div> </div>
</div> </div>
</div> --> </div>
<el-col :span="24"> <el-col :span="24">
<div class="model"> <div class="model">
<div id="loadingScreen"> <div id="loadingScreen">
@ -36,22 +42,29 @@
<canvas id="renderCanvas"></canvas> <canvas id="renderCanvas"></canvas>
</div> </div>
</el-col> </el-col>
<!-- <div style="position: absolute;right: 0;width:20%;z-index:10"> <div style="position: absolute;right: 0;width:20%;z-index:10">
<div style="display:flex;flex-direction: column;height:100%;padding:20px"> <div style="display:flex;flex-direction: column;height:100%;padding:20px">
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块四</div> <div class="blockTitle">
<div class="blockTitleIcon"></div>模块四
</div>
<div id="pie" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div> <div id="pie" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块五</div> <div class="blockTitle">
<div class="blockTitleIcon"></div>模块五
</div>
<div id="line3" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div> <div id="line3" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div> <div class="blockTitle">
<dv-scroll-board id="scrollTable" :config="taskBoard" :style="{'width':'100%','height':blockHeight}"/> <div class="blockTitleIcon"></div>模块六
</div>
<dv-scroll-board id="scrollTable" :config="taskBoard"
:style="{ 'width': '100%', 'height': blockHeight }" />
</div>
</div> </div>
</div> </div>
</div> -->
</el-row> </el-row>
</el-main> </el-main>
<div id="inforBlock" class="inforBlock" v-show="infoVisibel"> <div id="inforBlock" class="inforBlock" v-show="infoVisibel">
@ -62,7 +75,8 @@
<p class="title">10车间</p> <p class="title">10车间</p>
<div class="infoCantier"> <div class="infoCantier">
<div class="leftBlock"> <div class="leftBlock">
<el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25" id="dashbordProcess"/> <el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
id="dashbordProcess" />
<span>完成进度</span> <span>完成进度</span>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
@ -102,7 +116,7 @@ import 'animate.css';
export default { export default {
data() { data() {
return { return {
blockHeight:null, blockHeight: null,
taskBoard: { taskBoard: {
header: ['姓名', '车间', '到岗'], header: ['姓名', '车间', '到岗'],
headerBGC: 'rgb(10,63,68)', headerBGC: 'rgb(10,63,68)',
@ -120,13 +134,13 @@ export default {
index: true, index: true,
columnWidth: [50], columnWidth: [50],
align: ['center'], align: ['center'],
loadedPercent:0, loadedPercent: 0,
percentage:0, percentage: 0,
percentage:0 percentage: 0
}, },
initialAlpha: -Math.PI / 1.2, initialAlpha: -Math.PI / 4.5,
initialBeta: Math.PI / 2.5, initialBeta: Math.PI / 2,
initialRadius: 15, initialRadius: 3,
initialTarget: null, initialTarget: null,
scene: null, scene: null,
myui: null, myui: null,
@ -134,28 +148,28 @@ export default {
engine: null, engine: null,
loadedPercent: 0, loadedPercent: 0,
currentLightMesh: null, currentLightMesh: null,
infoVisibel:false, infoVisibel: false,
updateTime: '2023-08-17 16:00:00', updateTime: '2023-08-17 16:00:00',
nodesLists:{ nodesLists: {
'单身宿舍.005_primitive3':{total:'0',elec:'0',name:'办公楼'}, '单身宿舍.005_primitive3': { total: '0', elec: '0', name: '办公楼' },
'立方体.015_primitive1':{total:'0',elec:'0',name:'加工车间'}, '立方体.015_primitive1': { total: '0', elec: '0', name: '加工车间' },
'立方体.004_primitive1':{total:'0',elec:'0',name:'配料车间'}, '立方体.004_primitive1': { total: '0', elec: '0', name: '配料车间' },
'立方体.003_primitive1':{total:'0',elec:'0',name:'成型车间'}, '立方体.003_primitive1': { total: '0', elec: '0', name: '成型车间' },
'立立方体.002_primitive1':{total:'0',elec:'0',name:'成型车间'}, '立立方体.002_primitive1': { total: '0', elec: '0', name: '成型车间' },
}, },
} }
}, },
mounted() { mounted() {
let height = document.getElementById('mainBlock').clientHeight; let height = document.getElementById('mainBlock').clientHeight;
let height0 = height/3-50; let height0 = height / 3 - 50;
this.blockHeight = height0+'px' this.blockHeight = height0 + 'px'
this.$nextTick(() => { this.$nextTick(() => {
// this.initChart(); this.initChart();
this.initDomStyle(); this.initDomStyle();
this.initFactory(); this.initFactory();
}) })
}, },
methods:{ methods: {
initDomStyle() { initDomStyle() {
// 获取窗口的总高度 // 获取窗口的总高度
var windowHeight = window.innerHeight; var windowHeight = window.innerHeight;
@ -165,9 +179,9 @@ export default {
if (windowWidth > 960) { if (windowWidth > 960) {
dashboard.style.overflow = 'hidden'; dashboard.style.overflow = 'hidden';
model.style.position = 'absolute'; model.style.position = 'absolute';
model.style.height = (windowHeight - 3) + 'px'; model.style.height = (windowHeight - 70) + 'px';
model.style.top = 0 model.style.top = 0
}else { } else {
dashboard.style.overflow = 'auto'; dashboard.style.overflow = 'auto';
var chartHeight = windowWidth * 0.6; var chartHeight = windowWidth * 0.6;
model.style.position = 'relative'; model.style.position = 'relative';
@ -180,6 +194,7 @@ export default {
}, },
initFactory() { initFactory() {
var that = this; var that = this;
const canvas = document.getElementById("renderCanvas"); // Get the canvas element const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () { BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
@ -192,6 +207,9 @@ export default {
const createScene = function () { const createScene = function () {
const scene = new BABYLON.Scene(engine); const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
// 创建材质
var material = new BABYLON.PBRMaterial("groundMaterial", scene);
material.metallic = 1; // 材质金属度
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 }); const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene); const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
groundMaterial.majorUnitFrequency = 5; groundMaterial.majorUnitFrequency = 5;
@ -202,18 +220,19 @@ export default {
// 加载背景图片 // 加载背景图片
const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true); const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true);
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.5, 0.2)); const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.5, 0.3));
that.initialTarget = camera.getTarget(); that.initialTarget = camera.getTarget();
// camera.lowerBetaLimit = Math.PI / 2.6; // camera.lowerBetaLimit = Math.PI / 2.6;
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下 camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
camera.attachControl(canvas, true); camera.attachControl(canvas, true);
camera.maxZ = 1000; // 调整适当的值 camera.maxZ = 1000; // 调整适当的值
camera.wheelDeltaPercentage = 0.02;
// 相机限制 // 相机限制
camera.lowerRadiusLimit = 3; camera.lowerRadiusLimit = 2;
camera.upperRadiusLimit = 3; camera.upperRadiusLimit = 6;
// 灯光 // 灯光
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0)); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
light.intensity =0.1; light.intensity = 0.3;
// 全屏GUI // 全屏GUI
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI"); const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
that.myui = advancedTexture; that.myui = advancedTexture;
@ -261,8 +280,8 @@ export default {
mesh_name.color = 'white'; mesh_name.color = 'white';
mesh_name.fontSize = '14px'; mesh_name.fontSize = '14px';
mesh_rect.addControl(mesh_name); mesh_rect.addControl(mesh_name);
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb"; // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) { BABYLON.SceneLoader.Append('glb/', "photon3.glb", scene, function (scene) {
//关闭灯光 //关闭灯光
// scene.lights[1].setEnabled(false); // scene.lights[1].setEnabled(false);
// setEnable // setEnable
@ -378,7 +397,7 @@ export default {
// mesh_rect.isVisible = true; // mesh_rect.isVisible = true;
// that.infoVisibel = true; // that.infoVisibel = true;
// } // }
if(mesh.name=='单身宿舍.005_primitive3') { if (mesh.name == '单身宿舍.005_primitive3') {
//单身宿舍.003_primitive3 //单身宿舍.003_primitive3
// 在选中的 mesh 上添加高亮效果 // 在选中的 mesh 上添加高亮效果
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5)); highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
@ -389,21 +408,21 @@ export default {
// mesh_rect.isVisible = true; // mesh_rect.isVisible = true;
that.infoVisibel = true; that.infoVisibel = true;
hl1.addMesh(mesh, new BABYLON.Color3(12/255, 250/255, 252/255), true); hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
hl1.blurVerticalSize = 5; hl1.blurVerticalSize = 5;
hl1.blurHorizontalSize = 5; hl1.blurHorizontalSize = 5;
function worldToScreen(point, camera, scene,engine) { function worldToScreen(point, camera, scene, engine) {
return BABYLON.Vector3.Project(point, return BABYLON.Vector3.Project(point,
BABYLON.Matrix.Identity(), BABYLON.Matrix.Identity(),
scene.getTransformMatrix(), scene.getTransformMatrix(),
camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight())); camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
} }
var pos = worldToScreen(mesh.absolutePosition,camera,scene,engine); var pos = worldToScreen(mesh.absolutePosition, camera, scene, engine);
let infoBlock = document.getElementById('inforBlock'); let infoBlock = document.getElementById('inforBlock');
infoBlock.style.left = (Math.floor(pos.x)+250)+'px'; infoBlock.style.left = (Math.floor(pos.x)) + 'px';
infoBlock.style.top = (Math.floor(pos.y)-250)+'px'; infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
} }
}else{ } else {
that.infoVisibel = false; that.infoVisibel = false;
} }
}); });
@ -413,13 +432,13 @@ export default {
const pickResult = scene.pick(scene.pointerX, scene.pointerY); const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) { if (pickResult.hit) {
console.log('000000000000'); console.log('000000000000');
console.log('pickResult',pickResult); console.log('pickResult', pickResult);
const mesh = pickResult.pickedMesh; const mesh = pickResult.pickedMesh;
if (camera.target != mesh.position) { if (camera.target != mesh.position) {
// console.log('fly to') // console.log('fly to')
// 计算新的相机位置 // 计算新的相机位置
let position = mesh._parentNode._position let position = mesh._parentNode._position
if(mesh._parentNode.id=='__root__'){ if (mesh._parentNode.id == '__root__') {
position = mesh.position position = mesh.position
} }
const cameraPosition = new BABYLON.Vector3( const cameraPosition = new BABYLON.Vector3(
@ -436,42 +455,42 @@ export default {
}); });
// checkbox.isChecked = true; //默认开启自动旋转 // checkbox.isChecked = true; //默认开启自动旋转
// scene.onPointerObservable.add((pointerInfo) => {
// switch (pointerInfo.type) {
// case BABYLON.PointerEventTypes.POINTERDOWN:
// console.log(scene.pointerX, scene.pointerY);
// const pickResult = scene.pick(scene.pointerX, scene.pointerY);
// if (pickResult.hit) {
// console.log('000000000000');
// console.log('pickResult', pickResult);
// const mesh = pickResult.pickedMesh;
// if (camera.target != mesh.position) {
// // console.log('fly to')
// // 计算新的相机位置
// let position = mesh._parentNode._position
// if (mesh._parentNode.id == '__root__') {
// position = mesh.position
// }
// const cameraPosition = new BABYLON.Vector3(
// mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
// mesh.position.y + 9 * Math.cos(camera.beta),
// mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
// );
// var ease = new BABYLON.CubicEase();
// ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
// BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
// BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
// }
// }
// }
// })
return scene; return scene;
}; };
const scene = createScene(); //Call the createScene function const scene = createScene(); //Call the createScene function
scene.debugLayer.show() // scene.debugLayer.show()
engine.runRenderLoop(function () { engine.runRenderLoop(function () {
scene.render(); scene.render();
scene.onPointerObservable.add((pointerInfo) => {
switch (pointerInfo.type) {
case BABYLON.PointerEventTypes.POINTERDOWN:
console.log(scene.pointerX, scene.pointerY);
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
console.log('000000000000');
console.log('pickResult',pickResult);
const mesh = pickResult.pickedMesh;
if (camera.target != mesh.position) {
// console.log('fly to')
// 计算新的相机位置
let position = mesh._parentNode._position
if(mesh._parentNode.id=='__root__'){
position = mesh.position
}
const cameraPosition = new BABYLON.Vector3(
mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
mesh.position.y + 9 * Math.cos(camera.beta),
mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
);
var ease = new BABYLON.CubicEase();
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
}
}
}
})
}); });
this.engine = engine; this.engine = engine;
this.scene = scene; this.scene = scene;
@ -479,7 +498,7 @@ export default {
engine.resize(); engine.resize();
}); });
}, },
initChart(){ initChart() {
//左1 //左1
let chartDom = document.getElementById('line1'); let chartDom = document.getElementById('line1');
chartDom.style.height = this.blockHeight; chartDom.style.height = this.blockHeight;
@ -496,11 +515,11 @@ export default {
}, },
legend: { legend: {
icon: "stack", icon: "stack",
right:0, right: 0,
data: [{ data: [{
backgroundColor:'rgb(1,235,239)', backgroundColor: 'rgb(1,235,239)',
name:'Line 1', name: 'Line 1',
itemStyle:{ itemStyle: {
// color:'rgb(1,235,239)', // color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -512,15 +531,16 @@ export default {
color: 'rgb(5, 158, 163)' color: 'rgb(5, 158, 163)'
}]) }])
}, },
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
} }
}, { }, {
name:'Line 2', name: 'Line 2',
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
}}], }
itemStyle:{ }],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
@ -550,10 +570,10 @@ export default {
boundaryGap: false, boundaryGap: false,
data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'], data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
} }
], ],
@ -562,10 +582,10 @@ export default {
name: "合格率(%)", name: "合格率(%)",
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -587,7 +607,7 @@ export default {
stack: 'Total', stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 1,color:'rgb(1,235,239)' width: 1, color: 'rgb(1,235,239)'
}, },
showSymbol: false, showSymbol: false,
@ -615,7 +635,7 @@ export default {
stack: 'Total', stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 1,color:'rgb(250,205,0)' width: 1, color: 'rgb(250,205,0)'
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
@ -651,14 +671,14 @@ export default {
} }
}, },
legend: { legend: {
right:0, right: 0,
data:[ data: [
{ {
name:'棒', name: '棒',
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
}, },
itemStyle:{ itemStyle: {
// color:'rgb(1,235,239)', // color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -671,11 +691,11 @@ export default {
}]) }])
}, },
}, { }, {
name:'管', name: '管',
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
}, },
itemStyle:{ itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
@ -701,10 +721,10 @@ export default {
type: 'category', type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'], data: ['1月', '2月', '3月', '4月', '5月', '6月'],
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
} }
], ],
@ -713,10 +733,10 @@ export default {
name: "数量(个)", name: "数量(个)",
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -736,7 +756,7 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
itemStyle:{ itemStyle: {
// color:'rgb(1,235,239)', // color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -748,18 +768,18 @@ export default {
color: 'rgb(5, 158, 163)' color: 'rgb(5, 158, 163)'
}]) }])
}, },
barWidth:15, barWidth: 15,
data: [120, 132, 101, 134, 90, 230] data: [120, 132, 101, 134, 90, 230]
}, },
{ {
name: '管', name: '管',
type: 'bar', type: 'bar',
stack: 'Ad', stack: 'Ad',
barWidth:20, barWidth: 20,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
itemStyle:{ itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
@ -785,14 +805,14 @@ export default {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
right:0, right: 0,
data: [{ data: [{
name:'温度', name: '温度',
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
}, },
itemStyle:{ itemStyle: {
// color:'rgb(1,235,239)', // color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -820,23 +840,23 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6','7','8','9','10'], data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
}, },
yAxis: { yAxis: {
name:'温度', name: '温度',
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -852,8 +872,8 @@ export default {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
symbolSize:8, //设置折线上圆点大小 symbolSize: 8, //设置折线上圆点大小
symbol:'circle', symbol: 'circle',
itemStyle: { itemStyle: {
// 设置symbol的颜色 // 设置symbol的颜色
normal: { normal: {
@ -869,7 +889,7 @@ export default {
} }
}, },
smooth: 0.5, // 设置折线弧度 smooth: 0.5, // 设置折线弧度
data: [10, 10, 0, 0, -10, -8, 0,10, 10, 0, 0, -10, -8, 0], data: [10, 10, 0, 0, -10, -8, 0, 10, 10, 0, 0, -10, -8, 0],
lineStyle: { lineStyle: {
color: { color: {
type: 'linear', type: 'linear',
@ -909,10 +929,10 @@ export default {
containLabel: true containLabel: true
}, },
legend: { legend: {
right:0, right: 0,
data: ['数量', '合格率'], data: ['数量', '合格率'],
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
} }
}, },
xAxis: [ xAxis: [
@ -923,10 +943,10 @@ export default {
type: 'shadow' type: 'shadow'
}, },
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
} }
], ],
@ -937,10 +957,10 @@ export default {
min: 0, min: 0,
interval: 50, interval: 50,
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
axisLabel: { axisLabel: {
color:'#ffffff' color: '#ffffff'
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -959,10 +979,10 @@ export default {
interval: 20, interval: 20,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: '{value} %',
color:'#ffffff' color: '#ffffff'
}, },
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color: '#ffffff'
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -983,9 +1003,9 @@ export default {
return value; return value;
} }
}, },
barWidth:15, barWidth: 15,
data: [120, 132, 101, 134, 90, 230], data: [120, 132, 101, 134, 90, 230],
itemStyle:{ itemStyle: {
borderRadius: [5, 5, 0, 0], borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
@ -1005,21 +1025,21 @@ export default {
// 255,120,0 // 255,120,0
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value ; return value;
} }
}, },
symbol:'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
itemStyle: { itemStyle: {
// 设置symbol的颜色 // 设置symbol的颜色
normal: { normal: {
color:'rgb(255,120,0)' color: 'rgb(255,120,0)'
} }
}, },
lineStyle:{ lineStyle: {
color:'rgb(255,120,0)' color: 'rgb(255,120,0)'
}, },
data:[50, 55, 40, 60, 38, 95] data: [50, 55, 40, 60, 38, 95]
} }
] ]
}; };
@ -1029,11 +1049,11 @@ export default {
pieDom.style.height = this.blockHeight; pieDom.style.height = this.blockHeight;
let pieChart = echarts.init(pieDom); let pieChart = echarts.init(pieDom);
let pieoption = { let pieoption = {
color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'], color: ['rgb(155,248,249)', 'rgb(248,189,118)', 'rgb(110,181,249)'],
legend: { legend: {
top: 'bottom', top: 'bottom',
textStyle:{ textStyle: {
color:'#fff' color: '#fff'
} }
}, },
grid: { grid: {
@ -1059,7 +1079,7 @@ export default {
center: ['50%', '50%'], center: ['50%', '50%'],
roseType: 'area', roseType: 'area',
itemStyle: { itemStyle: {
borderRadius:2 borderRadius: 2
}, },
data: [ data: [
{ value: 40, name: '棒' }, { value: 40, name: '棒' },
@ -1075,80 +1095,106 @@ export default {
} }
</script> </script>
<style> <style>
.container{ .container {
background:url('/public/img/photon_bg.png') no-repeat; background: url('/public/img/photon_bg.png') no-repeat;
background-size:cover; background-size: cover;
} }
.pageHeader{
height:70px; .pageHeader {
height: 70px;
font-size: 28px; font-size: 28px;
background:none; background: none;
border-bottom:none; border-bottom: none;
position:relative; position: relative;
display:block; display: block;
text-align:center; text-align: center;
color:#ffffff; color: #ffffff;
padding:1px; padding: 1px;
background:url('/public/img/photon_header.png') no-repeat; background: url('/public/img/photon_header.png') no-repeat;
background-size:100% 100%; background-size: 100% 100%;
} }
.top-line{
.top-line {
height: 1px; height: 1px;
width: 3%; width: 3%;
position: absolute; position: absolute;
bottom: 13px; bottom: 13px;
background: rgba(54, 217, 187, 1); background: rgba(54, 217, 187, 1);
} }
.top-line-left{
.top-line-left {
left: 24%; left: 24%;
} }
.top-line-right{
.top-line-right {
right: 24%; right: 24%;
} }
.flexItem{
.flexItem {
/* padding:40px; */ /* padding:40px; */
} }
.blockTitle{
color:#fff; .blockTitle {
height:40px; color: #fff;
padding-left:10px; height: 40px;
font-size:16px; padding-left: 10px;
line-height:30px; font-size: 16px;
background:url('/public/img/photon_title.png'); line-height: 30px;
background: url('/public/img/photon_title.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.blockTitleIcon{
width:20px; .blockTitleIcon {
height:20px; width: 20px;
margin-top:10px;margin-right:5px; height: 20px;
display:inline-block; margin-top: 10px;
margin-right: 5px;
display: inline-block;
animation: rotate 3s infinite; animation: rotate 3s infinite;
transform-origin: center center; transform-origin: center center;
background:url('/public/img/photon_title_icon.png'); background: url('/public/img/photon_title_icon.png');
background-size: 100% 100%; background-size: 100% 100%;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
} }
@keyframes rotate {
0% { transform: rotate(0deg); } 25% {
25% { transform: rotate(90deg); } transform: rotate(90deg);
50% { transform: rotate(180deg); }
75% { transform: rotate(270deg); }
100% { transform: rotate(360deg); }
} }
.row-item{
height:40px!important; 50% {
line-height:40px!important; transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.row-item {
height: 40px !important;
line-height: 40px !important;
/* background-color:rgb(10,63,68)!important; */ /* background-color:rgb(10,63,68)!important; */
} }
#scrollTable>.hader{
background:rgb(10,63,68)!important; #scrollTable>.hader {
background-color:#0a3f44!important; background: rgb(10, 63, 68) !important;
background-color: #0a3f44 !important;
} }
.model { .model {
top: 0; top: 0;
width: 100%; width: 100%;
height:100%; height: 100%;
} }
#renderCanvas { #renderCanvas {
width: 100%; width: 100%;
height: 100% height: 100%
@ -1166,17 +1212,18 @@ export default {
} }
.inforBlock { .inforBlock {
left:60%; left: 60%;
top:30%; top: 30%;
width:420px; width: 420px;
height:150px; height: 150px;
position:absolute; position: absolute;
font-weight:500; font-weight: 500;
color:#fff; color: #fff;
padding:20px; padding: 20px;
font-size:14px; font-size: 14px;
box-sizing:border-box; box-sizing: border-box;
background: linear-gradient(to bottom left,rgba(25,154,118,.5),rgba(31,44,50,.5)); background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
/* border:1px solid rgba(1,235,239,.2); */ /* border:1px solid rgba(1,235,239,.2); */
.border_corner { .border_corner {
z-index: 2500; z-index: 2500;
@ -1186,31 +1233,36 @@ export default {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 2px solid rgba(54, 217, 187, 1); border: 2px solid rgba(54, 217, 187, 1);
} }
.border_left_top { .border_left_top {
top: 0; top: 0;
left: 0; left: 0;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
} }
.border_right_top { .border_right_top {
top: 0; top: 0;
right: 0; right: 0;
border-left: none; border-left: none;
border-bottom: none; border-bottom: none;
} }
.border_left_bottom { .border_left_bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.border_right_bottom { .border_right_bottom {
bottom: 0; bottom: 0;
right: 0; right: 0;
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
.title{
.title {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
position: absolute; position: absolute;
@ -1223,41 +1275,50 @@ export default {
border-bottom: 3px solid green; border-bottom: 3px solid green;
padding: 0 5px 5px; */ padding: 0 5px 5px; */
} }
.infoCantier{
display:flex; .infoCantier {
.leftBlock{ display: flex;
width:80px;
margin-right:30px; .leftBlock {
width: 80px;
margin-right: 30px;
} }
.rightBlock{
display:flex; .rightBlock {
flex-direction:column; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
.countWrap{
display:flex; .countWrap {
justify-content:space-between; display: flex;
width:280px; justify-content: space-between;
margin-top:10px width: 280px;
margin-top: 10px
} }
} }
} }
} }
.numberFont{
font-size:22px;font-weight:bold; .numberFont {
font-size: 22px;
font-weight: bold;
} }
.numberUnit{
font-size:12px; .numberUnit {
font-size: 12px;
} }
#dashbordProcess .el-progress-circle{
height: 60px!important; #dashbordProcess .el-progress-circle {
width: 60px!important; height: 60px !important;
width: 60px !important;
} }
.el-progress--circle .el-progress__text { .el-progress--circle .el-progress__text {
display: block; display: block;
margin-top: 1px; margin-top: 1px;
color:#fff; color: #fff;
font-size: 20px!important; font-size: 20px !important;
font-weight: bold!important; font-weight: bold !important;
} }
</style> </style>

551
src/views/wpm/worktask.vue
View File

@ -3,26 +3,19 @@
<el-main id="topContainer" class="nopadding" style="position: relative;height: 50%;margin-bottom: 10px;"> <el-main id="topContainer" class="nopadding" style="position: relative;height: 50%;margin-bottom: 10px;">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="activeSpan" style="border-right: 1px solid #eeeeee;position: relative;"> <el-col :span="activeSpan" style="border-right: 1px solid #eeeeee;position: relative;">
<div class="right-panel btnWrap" v-if="activeName=='8车间'||activeName=='退火'"> <div class="right-panel btnWrap" v-if="activeName == '8车间' || activeName == '退火'">
<el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button> <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
</div> </div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="混料工序" name="8车间"> <el-tab-pane label="混料工序" name="8车间">
<scTable <scTable ref="table8" :apiObj="apiObjMlog" row-key="id" stripe :height="tableHeightHalf" :params="params8"
ref="table8" hidePagination hideDo>
:apiObj="apiObjMlog" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeightHalf"
:params="params8"
hidePagination
hideDo
>
<el-table-column type="index" width="50"/>
<el-table-column label="配料日期" prop="handle_date"> <el-table-column label="配料日期" prop="handle_date">
</el-table-column> </el-table-column>
<el-table-column label="产物" prop="material" show-overflow-tooltip> <el-table-column label="产物" prop="material" show-overflow-tooltip>
<template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span> <template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name
}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备" prop="equipment_name"> <el-table-column label="设备" prop="equipment_name">
@ -37,59 +30,39 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="180"> <el-table-column label="操作" fixed="right" align="center" width="180">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="table_edit(scope.row)" v-auth="'equipment'">
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment'"
>
编辑 编辑
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="primary" @click="addHandover(scope.row)" v-auth="'equipment'">
type="primary"
@click="addHandover(scope.row)"
v-auth="'equipment'"
>
转交接单 转交接单
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="danger" @click="table_del(scope.row, '8车间')" v-auth="'equipment'">
type="danger"
@click="table_del(scope.row,'8车间')"
v-auth="'equipment'"
>
删除 删除
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
<div class="tableTitle">交接记录</div> <div class="tableTitle">交接记录</div>
<scTable <scTable ref="table8" :apiObj="apiObjHandover" row-key="id" stripe :height="tableHeightHalf"
ref="table8" :params="params82" hidePagination hideDo @selection-change="handleSelectionChange">
:apiObj="apiObjHandover" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeightHalf"
:params="params82"
hidePagination
hideDo
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="50"/>
<el-table-column type="selection" width="40" /> <el-table-column type="selection" width="40" />
<el-table-column label="送料日期" prop="send_date"> <el-table-column label="送料日期" prop="send_date">
</el-table-column> </el-table-column>
<el-table-column label="产物" prop="material" show-overflow-tooltip> <el-table-column label="产物" prop="material" show-overflow-tooltip>
<template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span> <template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name
}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备" prop="equipment_name"> <el-table-column label="设备" prop="equipment_name">
</el-table-column> </el-table-column>
<el-table-column label="批次" prop="batch"> <el-table-column label="批次" prop="batch">
</el-table-column> </el-table-column>
<el-table-column label="数量/桶数" prop="count_real"> <el-table-column label="数量/桶数" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="每桶重量/kg" prop="count_real_eweight"> <el-table-column label="每桶重量/kg" prop="count_eweight">
</el-table-column> </el-table-column>
<el-table-column label="交送人" prop="send_user_name"> <el-table-column label="交送人" prop="send_user_name">
</el-table-column> </el-table-column>
@ -97,19 +70,11 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="left"> <el-table-column label="操作" fixed="right" align="left">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="handover_edit(scope.row)" v-auth="'equipment'">
type="primary"
@click="handover_edit(scope.row)"
v-auth="'equipment'"
>
编辑 编辑
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="danger" @click="table_del(scope.row, '8车间')" v-auth="'equipment'">
type="danger"
@click="table_del(scope.row,'8车间')"
v-auth="'equipment'"
>
删除 删除
</el-link> </el-link>
</template> </template>
@ -117,21 +82,14 @@
</scTable> </scTable>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="退火" name="退火"> <el-tab-pane label="退火" name="退火">
<scTable <scTable ref="table8" :apiObj="apiObjMlog" row-key="id" stripe :height="tableHeightHalf" :params="paramsth"
ref="table8" hidePagination hideDo>
:apiObj="apiObjMlog" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeightHalf"
:params="paramsth"
hidePagination
hideDo
>
<el-table-column type="index" width="50"/>
<el-table-column label="配料日期" prop="handle_date"> <el-table-column label="配料日期" prop="handle_date">
</el-table-column> </el-table-column>
<el-table-column label="产物" prop="material" show-overflow-tooltip> <el-table-column label="产物" prop="material" show-overflow-tooltip>
<template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span> <template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name
}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备" prop="equipment_name"> <el-table-column label="设备" prop="equipment_name">
@ -146,19 +104,11 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="180"> <el-table-column label="操作" fixed="right" align="center" width="180">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="table_edit(scope.row)" v-auth="'equipment'">
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment'"
>
编辑 编辑
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="danger" @click="table_del(scope.row, '8车间')" v-auth="'equipment'">
type="danger"
@click="table_del(scope.row,'8车间')"
v-auth="'equipment'"
>
删除 删除
</el-link> </el-link>
</template> </template>
@ -172,17 +122,9 @@
<el-button type="primary" icon="el-icon-plus" @click="addHandover2">新增</el-button> <el-button type="primary" icon="el-icon-plus" @click="addHandover2">新增</el-button>
</div> </div>
</div> </div>
<scTable <scTable ref="table8" :apiObj="apiObjHandover" row-key="id" stripe :height="tableHeightHalf"
ref="table8" :params="params82" hidePagination hideDo>
:apiObj="apiObjHandover" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeightHalf"
:params="params82"
hidePagination
hideDo
>
<el-table-column type="index" width="50"/>
<el-table-column label="交接日期" prop="send_date"> <el-table-column label="交接日期" prop="send_date">
</el-table-column> </el-table-column>
<el-table-column label="批次号" prop="batch" show-overflow-tooltip> <el-table-column label="批次号" prop="batch" show-overflow-tooltip>
@ -195,19 +137,11 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="180"> <el-table-column label="操作" fixed="right" align="center" width="180">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="editHandover2(scope.row)" v-auth="'equipment'">
type="primary"
@click="editHandover2(scope.row)"
v-auth="'equipment'"
>
编辑 编辑
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="danger" @click="delHandover2(scope.row, '8车间')" v-auth="'equipment'">
type="danger"
@click="delHandover2(scope.row,'8车间')"
v-auth="'equipment'"
>
删除 删除
</el-link> </el-link>
</template> </template>
@ -221,23 +155,15 @@
<el-button type="primary" @click="getMaterial">领料</el-button> <el-button type="primary" @click="getMaterial">领料</el-button>
</div> </div>
</div> </div>
<scTable <scTable ref="table8" :apiObj="apiObjMetarial" row-key="id" stripe :height="tableHeightHalf"
ref="table8" :params="paramsMaterial" hidePagination hideDo @selection-change="handleSelectionChange">
:apiObj="apiObjMetarial" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeightHalf"
:params="paramsMaterial"
hidePagination
hideDo
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="50"/>
<el-table-column type="selection" width="40" /> <el-table-column type="selection" width="40" />
<el-table-column label="送料日期" prop="send_date"> <el-table-column label="送料日期" prop="send_date">
</el-table-column> </el-table-column>
<el-table-column label="产物" prop="material" show-overflow-tooltip> <el-table-column label="产物" prop="material" show-overflow-tooltip>
<template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span> <template #default="scope"><span v-if="scope.row.material_out_">{{ scope.row.material_out_.name
}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备" prop="equipment_name"> <el-table-column label="设备" prop="equipment_name">
@ -276,18 +202,9 @@
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="7车间" name="7车间"> <el-tab-pane label="7车间" name="7车间">
<scTable <scTable ref="table7" :apiObj="apiObjMtask" row-key="id" stripe :height="tableHeight" :params="params7"
ref="table7" hidePagination hideDo @row-click="rowClick">
:apiObj="apiObjMtask" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeight"
:params="params7"
hidePagination
hideDo
@row-click="rowClick"
>
<el-table-column type="index" width="50"/>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip> <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span> <span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span>
@ -312,7 +229,7 @@
</el-table-column> </el-table-column>
<el-table-column label="状态" prop="state"> <el-table-column label="状态" prop="state">
<template #default="scope"> <template #default="scope">
<el-tag v-if="scope.row.state!==40" type="primary"> <el-tag v-if="scope.row.state !== 40" type="primary">
{{ state_[scope.row.state] }} {{ state_[scope.row.state] }}
</el-tag> </el-tag>
<el-tag v-else type="success"> <el-tag v-else type="success">
@ -322,30 +239,17 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" width="60"> <el-table-column label="操作" fixed="right" width="60">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="table_submit(scope.row)" v-auth="'equipment'"
type="primary" :disabled="scope.row.state == 40">提交
@click="table_submit(scope.row)"
v-auth="'equipment'"
:disabled="scope.row.state==40"
>提交
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="10车间" name="10车间"> <el-tab-pane label="10车间" name="10车间">
<scTable <scTable ref="table10" :apiObj="apiObjMtask" row-key="id" stripe :height="tableHeight" :params="params10"
ref="table10" hidePagination hideDo @row-click="rowClick">
:apiObj="apiObjMtask" <el-table-column type="index" width="50" />
row-key="id"
stripe
:height="tableHeight"
:params="params10"
hidePagination
hideDo
@row-click="rowClick"
>
<el-table-column type="index" width="50"/>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip> <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span> <span v-if="scope.row.material_out_">{{ scope.row.material_out_.name }}</span>
@ -367,7 +271,7 @@
</el-table-column> </el-table-column>
<el-table-column label="状态" prop="state"> <el-table-column label="状态" prop="state">
<template #default="scope"> <template #default="scope">
<el-tag v-if="scope.row.state!==40" type="primary"> <el-tag v-if="scope.row.state !== 40" type="primary">
{{ state_[scope.row.state] }} {{ state_[scope.row.state] }}
</el-tag> </el-tag>
<el-tag v-else type="success"> <el-tag v-else type="success">
@ -377,12 +281,8 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" width="60"> <el-table-column label="操作" fixed="right" width="60">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="table_submit(scope.row)" v-auth="'equipment'"
type="primary" :disabled="scope.row.state == 40">提交
@click="table_submit(scope.row)"
v-auth="'equipment'"
:disabled="scope.row.state==40"
>提交
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
@ -390,18 +290,18 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
<el-col :span="12" v-if="activeName!=='8车间'&&activeName!=='退火'"> <el-col :span="12" v-if="activeName !== '8车间' && activeName !== '退火'">
<div v-if="activeName=='退火'" style="font-size:16px;padding:10px 0;border-bottom:1px solid #eeeeee">退火日志</div> <div v-if="activeName == '退火'" style="font-size:16px;padding:10px 0;border-bottom:1px solid #eeeeee">退火日志</div>
<el-form v-else label-width="100px" style="border-bottom: 1px solid #eeeeee;padding: 4px 0;"> <el-form v-else label-width="100px" style="border-bottom: 1px solid #eeeeee;padding: 4px 0;">
<el-row> <el-row>
<el-col :md="8" :sm="12" :xs="24"> <el-col :md="8" :sm="12" :xs="24">
<el-form-item class="infoForm" label="产品名称："> <el-form-item class="infoForm" label="产品名称：">
<span v-if="choseData&&choseData.material_out_">{{ choseData.material_out_.name }}</span> <span v-if="choseData && choseData.material_out_">{{ choseData.material_out_.name }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="8" :sm="12" :xs="24"> <el-col :md="8" :sm="12" :xs="24">
<el-form-item class="infoForm" label="产品型号："> <el-form-item class="infoForm" label="产品型号：">
<span v-if="choseData&&choseData.material_out_">{{ choseData.material_out_.number }}</span> <span v-if="choseData && choseData.material_out_">{{ choseData.material_out_.number }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="8" :sm="12" :xs="24"> <el-col :md="8" :sm="12" :xs="24">
@ -425,19 +325,13 @@
</el-row> </el-row>
</el-form> </el-form>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<el-button type="primary" icon="el-icon-plus" @click="add" :disabled="choseData&&choseData.state==40">新增</el-button> <el-button type="primary" icon="el-icon-plus" @click="add"
:disabled="choseData && choseData.state == 40">新增</el-button>
</div> </div>
<!-- 7车间 --> <!-- 7车间 -->
<scTable <scTable ref="table" :data="flogs" row-key="id" stripe :height="rightHeight" :params="query"
ref="table" v-if="activeName == '7车间'">
:data="flogs" <el-table-column type="index" width="40" />
row-key="id"
stripe
:height="rightHeight"
:params="query"
v-if="activeName=='7车间'"
>
<el-table-column type="index" width="40"/>
<el-table-column label="锅号" prop="equipment_name"> <el-table-column label="锅号" prop="equipment_name">
</el-table-column> </el-table-column>
<el-table-column label="产品名称" prop="material_out_"> <el-table-column label="产品名称" prop="material_out_">
@ -456,7 +350,7 @@
</el-table-column> </el-table-column>
<el-table-column label="合格率" prop="count"> <el-table-column label="合格率" prop="count">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.count_ok/scope.row.count_real }}</span> <span>{{ scope.row.count_ok / scope.row.count_real }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="不合格原因及数量" align="center"> <el-table-column label="不合格原因及数量" align="center">
@ -483,34 +377,19 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" width="100" align="center"> <el-table-column label="操作" fixed="right" width="100" align="center">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="table_edit(scope.row)" v-auth="'equipment'"
type="primary" :disabled="choseData.state == 40">编辑
@click="table_edit(scope.row)"
v-auth="'equipment'"
:disabled="choseData.state==40"
>编辑
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="primary" @click="table_del(scope.row)" :disabled="choseData.state == 40">删除
type="primary"
@click="table_del(scope.row)"
:disabled="choseData.state==40"
>删除
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
<!-- 10车间 --> <!-- 10车间 -->
<scTable <scTable ref="table" :data="flogs" row-key="id" stripe :height="rightHeight" :params="query"
ref="table" v-if="activeName == '10车间'">
:data="flogs" <el-table-column type="index" width="40" />
row-key="id"
stripe
:height="rightHeight"
:params="query"
v-if="activeName=='10车间'"
>
<el-table-column type="index" width="40"/>
<el-table-column label="班次" prop="shift_name"> <el-table-column label="班次" prop="shift_name">
</el-table-column> </el-table-column>
<el-table-column label="出管总数" prop="count_real"> <el-table-column label="出管总数" prop="count_real">
@ -527,7 +406,7 @@
</el-table-column> </el-table-column>
<el-table-column label="合格率" prop="count"> <el-table-column label="合格率" prop="count">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.count_ok/scope.row.count_real }}</span> <span>{{ scope.row.count_ok / scope.row.count_real }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="不合格原因及数量" align="center"> <el-table-column label="不合格原因及数量" align="center">
@ -554,19 +433,11 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" width="100" align="center"> <el-table-column label="操作" fixed="right" width="100" align="center">
<template #default="scope"> <template #default="scope">
<el-link <el-link type="primary" @click="table_edit(scope.row)" v-auth="'equipment'"
type="primary" :disabled="choseData.state == 40">编辑
@click="table_edit(scope.row)"
v-auth="'equipment'"
:disabled="choseData.state==40"
>编辑
</el-link> </el-link>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link type="primary" :disabled="choseData.state == 40" @click="table_del(scope.row)">删除
type="primary"
:disabled="choseData.state==40"
@click="table_del(scope.row)"
>删除
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
@ -574,45 +445,24 @@
</el-col> </el-col>
</el-row> </el-row>
</el-main> </el-main>
<save-dialog <save-dialog v-if="dialog.save" ref="saveDialog" :mtask="mtask" :brothersList="brothersList" :activeType="activeName"
v-if="dialog.save" @success="handleSaveSuccess" @closed="dialog.save = false"></save-dialog>
ref="saveDialog"
:mtask = "mtask"
:brothersList="brothersList"
:activeType = "activeName"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
<handover-dialog <handover-dialog v-if="dialog.handover" ref="handoverDialog2" @success="handleSuccess"
v-if="dialog.handover" @closed="dialog.handover = false"></handover-dialog>
ref="handoverDialog2" <el-dialog title="交接单" ref="handoverDialog" v-model="handoverVisible" :size="1000" destroy-on-close
@success="handleSuccess" @closed="handoverVisible = false">
@closed="dialog.handover = false"
></handover-dialog>
<el-dialog
title="交接单"
ref="handoverDialog"
v-model="handoverVisible"
:size="1000"
destroy-on-close
@closed="handoverVisible = false"
>
<el-form ref="dialogForm" :model="handoverForm" :rules="rules" label-width="120px"> <el-form ref="dialogForm" :model="handoverForm" :rules="rules" label-width="120px">
<el-row> <el-row>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="送料日期" prop="send_date"> <el-form-item label="送料日期" prop="send_date">
<el-date-picker <el-date-picker v-model="handoverForm.send_date" type="date" value-format="YYYY-MM-DD" style="width:100%" />
v-model="handoverForm.send_date"
type="date"
value-format="YYYY-MM-DD"
style="width:100%"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="接收部门" prop="recive_dept"> <el-form-item label="接收部门" prop="recive_dept">
<el-select v-model="handoverForm.recive_dept" placeholder="接收部门" clearable style="width:100%" @change="getUserList2"> <el-select v-model="handoverForm.recive_dept" placeholder="接收部门" clearable style="width:100%"
@change="getUserList2">
<el-option v-for="item in group" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in group" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -626,35 +476,15 @@
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="接收人" prop="recive_user"> <el-form-item label="接收人" prop="recive_user">
<el-select <el-select v-model="handoverForm.recive_user" placeholder="接收人" clearable style="width:100%">
v-model="handoverForm.recive_user" <el-option v-for="item in userList2" :key="item.id" :label="item.name" :value="item.id" />
placeholder="接收人"
clearable
style="width:100%"
>
<el-option
v-for="item in userList2"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="交送人" prop="send_user"> <el-form-item label="交送人" prop="send_user">
<el-select <el-select v-model="handoverForm.send_user" placeholder="交送人" clearable style="width:100%">
v-model="handoverForm.send_user" <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
placeholder="交送人"
clearable
style="width:100%"
>
<el-option
v-for="item in userList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -668,14 +498,14 @@
</el-container> </el-container>
</template> </template>
<script> <script>
import {generateExcel} from "@/utils/exportExcel.js"; import { generateExcel } from "@/utils/exportExcel.js";
import saveDialog from "./worktask_form.vue"; import saveDialog from "./worktask_form.vue";
import handoverDialog from "./handover_form.vue"; import handoverDialog from "./handover_form.vue";
import GanttComponent from '@/components/GanttComponent.vue'; import GanttComponent from '@/components/GanttComponent.vue';
export default { export default {
name: "rparty", name: "rparty",
components: { components: {
GanttComponent,saveDialog,handoverDialog GanttComponent, saveDialog, handoverDialog
}, },
data() { data() {
return { return {
@ -684,34 +514,34 @@ export default {
projectId: '', projectId: '',
tasks: { tasks: {
data: [ data: [
{number:'GZ20231012',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-12",id:'2023101800',duration: 2,progress: 1}, { number: 'GZ20231012', model: 'GB2', cate: '100*50*2', count: 300, text: "一天任务", start_date: "2023-10-12", id: '2023101800', duration: 2, progress: 1 },
{number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-13",id:'2023101801',duration: 1,progress: 1}, { number: 'GZ20231013', model: 'GB2', cate: '100*50*2', count: 300, text: "一天任务", start_date: "2023-10-13", id: '2023101801', duration: 1, progress: 1 },
{number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-14",id:'2023101802',duration: 1,progress: 0.8}, { number: 'GZ20231014', model: 'GB2', cate: '100*50*2', count: 200, text: "一天任务", start_date: "2023-10-14", id: '2023101802', duration: 1, progress: 0.8 },
{number:'GZ20231015',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-15",id:'2023101803',duration: 1,progress: 0.6}, { number: 'GZ20231015', model: 'ZB2', cate: '100*50*2', count: 100, text: "一天任务", start_date: "2023-10-15", id: '2023101803', duration: 1, progress: 0.6 },
] ]
}, },
dialog: { dialog: {
save: false, save: false,
handover:false handover: false
}, },
handoverVisible:false, handoverVisible: false,
// apiObj: this.$API.pm.mtask.list, // apiObj: this.$API.pm.mtask.list,
params7:{ params7: {
belong_dept_name:'7车间', belong_dept_name: '7车间',
date:'2023-10-24' date: '2023-10-24'
}, },
params10: { params10: {
belong_dept_name:'10车间', belong_dept_name: '10车间',
date:'2023-10-20' date: '2023-10-20'
}, },
params8:{ params8: {
mgroup__belong_dept__name:'8车间', mgroup__belong_dept__name: '8车间',
}, },
params82:{ params82: {
send_dept__name:'8车间', send_dept__name: '8车间',
}, },
paramsth:{ paramsth: {
belong_dept_name:'8车间', belong_dept_name: '8车间',
}, },
apiObjMlog: null, apiObjMlog: null,
apiObjHandover: null, apiObjHandover: null,
@ -719,19 +549,19 @@ export default {
apiObjMtask: null, apiObjMtask: null,
apiObj: null, apiObj: null,
apiObjMetarial:this.$API.wpm.wmaterial.list, apiObjMetarial: this.$API.wpm.wmaterial.list,
paramsMaterial:{belong_dept__name:'8车间',page:0}, paramsMaterial: { belong_dept__name: '8车间', page: 0 },
form:{}, form: {},
handoverForm:{}, handoverForm: {},
flogs:[], flogs: [],
selectedIds:[], selectedIds: [],
flogsData: [{id: 1, name: 'John Doe', dob: new Date(1970,1,1)}], flogsData: [{ id: 1, name: 'John Doe', dob: new Date(1970, 1, 1) }],
columns : [ columns: [
{ header: 'Id', key: 'id', wpx: 40 }, { header: 'Id', key: 'id', wpx: 40 },
{ header: 'Name', key: 'name', wch: 15 }, { header: 'Name', key: 'name', wch: 15 },
{ header: 'D.O.B.', key: 'dob', width: 32 } { header: 'D.O.B.', key: 'dob', width: 32 }
], ],
activeName:'8车间', activeName: '8车间',
selection: [], selection: [],
state_: { state_: {
10: '创建中', 10: '创建中',
@ -739,45 +569,45 @@ export default {
30: '生产中', 30: '生产中',
40: '已提交', 40: '已提交',
}, },
choseData:{}, choseData: {},
mtask:'', mtask: '',
activeSpan:24, activeSpan: 24,
rightHeight:null, rightHeight: null,
tableHeight:null, tableHeight: null,
tableHeightHalf:null, tableHeightHalf: null,
formList:[ formList: [
{ {
count1:0, count1: 0,
count2:0, count2: 0,
rate:0, rate: 0,
count_no1:0, count_no1: 0,
count_no2:0, count_no2: 0,
count_no3:0, count_no3: 0,
count_noall:0, count_noall: 0,
material:0, material: 0,
} }
], ],
peifen_kg:0, peifen_kg: 0,
userList:[], userList: [],
userList2:[], userList2: [],
brothersList:[] brothersList: []
}; };
}, },
created() { created() {
//清空gantt数据 //清空gantt数据
gantt.clearAll(); gantt.clearAll();
}, },
mounted(){ mounted() {
let heights = document.getElementById('topContainer').clientHeight; let heights = document.getElementById('topContainer').clientHeight;
console.log('heights',heights) console.log('heights', heights)
this.tableHeight = (heights-50)+'px'; this.tableHeight = (heights - 50) + 'px';
this.tableHeightHalf = (heights-100)/2+'px'; this.tableHeightHalf = (heights - 100) / 2 + 'px';
let rightHeight = heights-100; let rightHeight = heights - 100;
this.rightHeight = rightHeight/2+'px'; this.rightHeight = rightHeight / 2 + 'px';
let NowDate = new Date(); let NowDate = new Date();
let month = NowDate.getMonth()>8?NowDate.getMonth()+1:'0'+(NowDate.getMonth()+1) let month = NowDate.getMonth() > 8 ? NowDate.getMonth() + 1 : '0' + (NowDate.getMonth() + 1)
this.params7.date = NowDate.getFullYear()+'-'+(NowDate.getMonth()+1)+'-'+NowDate.getDate(); this.params7.date = NowDate.getFullYear() + '-' + (NowDate.getMonth() + 1) + '-' + NowDate.getDate();
this.params10.date = NowDate.getFullYear()+'-'+(NowDate.getMonth()+1)+'-'+NowDate.getDate(); this.params10.date = NowDate.getFullYear() + '-' + (NowDate.getMonth() + 1) + '-' + NowDate.getDate();
this.apiObjMtask = this.$API.pm.mtask.daylist; this.apiObjMtask = this.$API.pm.mtask.daylist;
this.apiObjMlog = this.$API.wpm.mlog.list; this.apiObjMlog = this.$API.wpm.mlog.list;
this.apiObjHandover = this.$API.wpm.handover.list; this.apiObjHandover = this.$API.wpm.handover.list;
@ -791,33 +621,33 @@ export default {
this.group = res; this.group = res;
}); });
}, },
getUserList(){ getUserList() {
let that = this; let that = this;
this.$API.system.user.list.req({belong_dept__name:this.activeName,page:0}).then(res=>{ this.$API.system.user.list.req({ belong_dept__name: this.activeName, page: 0 }).then(res => {
that.userList = res; that.userList = res;
}); });
}, },
getUserList2(){ getUserList2() {
let that = this; let that = this;
this.$API.system.user.list.req({belong_dept:this.handoverForm.recive_dept,page:0}).then(res=>{ this.$API.system.user.list.req({ belong_dept: this.handoverForm.recive_dept, page: 0 }).then(res => {
that.userList2 = res; that.userList2 = res;
}); });
}, },
handleClick(val){ handleClick(val) {
console.log(val.index); console.log(val.index);
if(val.index==0||val.index==1){ if (val.index == 0 || val.index == 1) {
this.activeSpan = 24 this.activeSpan = 24
}else{ } else {
this.activeSpan = 12 this.activeSpan = 12
} }
this.choseData = null; this.choseData = null;
this.flogs = []; this.flogs = [];
}, },
table_submit(row){ table_submit(row) {
let obj = {}; let obj = {};
obj.ids = []; obj.ids = [];
obj.ids.push(row.id); obj.ids.push(row.id);
this.$API.pm.mtask.submit.req(obj).then(res=>{ this.$API.pm.mtask.submit.req(obj).then(res => {
debugger; debugger;
}) })
}, },
@ -834,18 +664,18 @@ export default {
}, },
//添加 //添加
add() { add() {
if(this.activeName=='8车间'||this.activeName=='退火'){ if (this.activeName == '8车间' || this.activeName == '退火') {
this.dialog.save = true; this.dialog.save = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.saveDialog.open("add"); this.$refs.saveDialog.open("add");
}); });
}else{ } else {
if(this.choseData&&this.choseData.id){ if (this.choseData && this.choseData.id) {
this.dialog.save = true; this.dialog.save = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.saveDialog.open("add"); this.$refs.saveDialog.open("add");
}); });
}else{ } else {
this.$message.warning("请选择任务"); this.$message.warning("请选择任务");
} }
} }
@ -865,7 +695,7 @@ export default {
}); });
}, },
//删除 //删除
async table_del(row,type) { async table_del(row, type) {
this.$confirm(`确定删除吗？`, "提示", { this.$confirm(`确定删除吗？`, "提示", {
type: "warning", type: "warning",
}).then(() => { }).then(() => {
@ -875,16 +705,16 @@ export default {
}).catch((err) => { }).catch((err) => {
return err; return err;
}); });
}).catch(() => {}); }).catch(() => { });
}, },
rowClick(row){ rowClick(row) {
this.choseData = row; this.choseData = row;
this.mtask = row.id; this.mtask = row.id;
this.$API.wpm.mlog.list.req({mtask:row.id,page:0}).then(res=>{ this.$API.wpm.mlog.list.req({ mtask: row.id, page: 0 }).then(res => {
this.flogs = res; this.flogs = res;
}) })
this.$TOOL.data.set("MATERIAL_OBJECT", row.material_out_); this.$TOOL.data.set("MATERIAL_OBJECT", row.material_out_);
if(this.activeName == '10车间'){ if (this.activeName == '10车间') {
this.brothersList = []; this.brothersList = [];
this.brothersList = row.material_out_.brothers; this.brothersList = row.material_out_.brothers;
} }
@ -895,19 +725,19 @@ export default {
this.$refs.table8.refresh(); this.$refs.table8.refresh();
this.$refs.table10.refresh(); this.$refs.table10.refresh();
}, },
handleSuccess(){ handleSuccess() {
}, },
handleQuery() { handleQuery() {
// this.$refs.table.queryData(this.query) // this.$refs.table.queryData(this.query)
debugger; debugger;
generateExcel(this.columns,this.flogsData,'测试') generateExcel(this.columns, this.flogsData, '测试')
}, },
resetQuery() { resetQuery() {
this.query = {}; this.query = {};
}, },
//从生产日志生成交接记录 //从生产日志生成交接记录
addHandover(row){ addHandover(row) {
this.handoverForm.send_date = ''; this.handoverForm.send_date = '';
this.handoverForm.mlog = row.id; this.handoverForm.mlog = row.id;
this.handoverForm.batch = row.batch; this.handoverForm.batch = row.batch;
@ -919,7 +749,7 @@ export default {
this.handoverForm.recive_user = ''; this.handoverForm.recive_user = '';
this.handoverVisible = true; this.handoverVisible = true;
}, },
addHandover2(){ addHandover2() {
let that = this; let that = this;
that.dialog.handover = true; that.dialog.handover = true;
that.$nextTick(() => { that.$nextTick(() => {
@ -933,7 +763,7 @@ export default {
this.$refs.handoverDialog2.open("edit").setData(row); this.$refs.handoverDialog2.open("edit").setData(row);
}); });
}, },
delHandover2(row){ delHandover2(row) {
this.$confirm(`确定删除吗？`, "提示", { this.$confirm(`确定删除吗？`, "提示", {
type: "warning", type: "warning",
}).then(() => { }).then(() => {
@ -943,68 +773,73 @@ export default {
}).catch((err) => { }).catch((err) => {
return err; return err;
}); });
}).catch(() => {}); }).catch(() => { });
}, },
handover_edit(row){ handover_edit(row) {
Object.assign(this.handoverForm, row); Object.assign(this.handoverForm, row);
this.getUserList2(); this.getUserList2();
console.log('this.handoverVisible:',this.handoverForm) console.log('this.handoverVisible:', this.handoverForm)
this.handoverVisible = true; this.handoverVisible = true;
}, },
submitHandover(){ submitHandover() {
this.$API.wpm.handover.create.req(this.handoverForm).then(res=>{ this.$API.wpm.handover.create.req(this.handoverForm).then(res => {
}) })
}, },
handleSelectionChange(selection){ handleSelectionChange(selection) {
this.selectedIds = []; this.selectedIds = [];
selection.forEach(item => { selection.forEach(item => {
this.selectedIds.push(item.id) this.selectedIds.push(item.id)
}); });
}, },
submitMaterialCount(){ submitMaterialCount() {
let obj = {}; let obj = {};
obj = this.choseData; obj = this.choseData;
obj.peifen_kg = this.peifen_kg; obj.peifen_kg = this.peifen_kg;
this.$API.pm.mtask.update.req(this.mtask,obj).then(res=>{ this.$API.pm.mtask.update.req(this.mtask, obj).then(res => {
console.log('配粉料数'); console.log('配粉料数');
}) })
}, },
getMaterial(){ getMaterial() {
this.$router.push({ name: "mio" }) this.$router.push({ name: "mio" })
}, },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.btnWrap{ .btnWrap {
display: inline-block; display: inline-block;
position:absolute; position: absolute;
right:20px; right: 20px;
margin-top:4px; margin-top: 4px;
z-index:100 z-index: 100
} }
.el-main.nopadding{
padding:0 20px 0 20px .el-main.nopadding {
} padding: 0 20px 0 20px
.gantt-container { }
.gantt-container {
height: 30%; height: 30%;
} }
.ganntClass {
.ganntClass {
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
} }
.cateItem{
.cateItem {
justify-content: space-between; justify-content: space-between;
display:flex; display: flex;
border-bottom:1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
} }
.tableTitle{
height:40px; .tableTitle {
height: 40px;
font-size: 16px; font-size: 16px;
padding-top: 5px; padding-top: 5px;
margin-top: 10px; margin-top: 10px;
border-top: 1px solid rgb(238, 238, 238); border-top: 1px solid rgb(238, 238, 238);
} }
</style> </style>