1905 lines
77 KiB
Vue
1905 lines
77 KiB
Vue
<template>
|
|
<el-container class="container">
|
|
<el-header class="pageHeader">
|
|
<span class="top-line top-line-left"></span>
|
|
光子科技生产管理系统
|
|
<span class="top-line top-line-right"></span>
|
|
</el-header>
|
|
<el-main style="padding:0;overflow: hidden;" id="mainBlock">
|
|
<el-row style="height:100%">
|
|
<div style="position: absolute;left: 0;width:20%;z-index:10">
|
|
<div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
|
|
<div class="flexItem" style="flex:1">
|
|
<div class="blockTitle">
|
|
<div class="blockTitleIcon"></div>
|
|
<div>本周交付数</div>
|
|
</div>
|
|
<div id="line1"
|
|
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
|
|
</div>
|
|
</div>
|
|
<div class="flexItem" style="flex:1">
|
|
<div class="blockTitle">
|
|
<div class="blockTitleIcon"></div>
|
|
<div>本周合格数</div>
|
|
</div>
|
|
<div id="bar1"
|
|
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
|
|
</div>
|
|
</div>
|
|
<div class="flexItem" style="flex:1">
|
|
<div class="blockTitle">
|
|
<div class="blockTitleIcon"></div>
|
|
<div>本周合格率</div>
|
|
</div>
|
|
<div id="line2"
|
|
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-col :span="24">
|
|
<div class="model">
|
|
<div style="position: absolute;width: 100%;text-align: center;">
|
|
<div style="margin:5px 0 50px 0;color: #fff;font-size: 12px;font-weight: bold;">
|
|
<img src="img/photon_top_line.png">
|
|
<span>枣庄</span>
|
|
{{ currentDay }}{{ currentWeek }}{{ currentTime }}
|
|
<img src="img/photon_top_line.png" style="transform: rotateY(180deg);">
|
|
</div>
|
|
<div class="totalNumContnier">
|
|
<div class="totalNumWrap totalNum_orange">
|
|
<img class="" src="img/number_bg_orange.png">
|
|
<span class="totalNumText">AVG合格数</span>
|
|
<div class="totalNumber">{{ countOk_AVG }}</div>
|
|
</div>
|
|
<div class="totalNumWrap totalNumWrap_green">
|
|
<img src="img/number_bg_green.png">
|
|
<span class="totalNumText">预制棒合格数</span>
|
|
<div class="totalNumber">{{ countOk_dept7 }}</div>
|
|
</div>
|
|
<div class="totalNumWrap totalNum_blue">
|
|
<img src="img/number_bg_blue.png">
|
|
<span class="totalNumText">预制管合格数</span>
|
|
<div class="totalNumber">{{ countOk_dept10 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="loadingScreen">
|
|
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
|
|
<template #default="{ percentage }">
|
|
<div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
|
|
<div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
|
|
</template>
|
|
</el-progress>
|
|
</div>
|
|
<canvas id="renderCanvas"></canvas>
|
|
</div>
|
|
</el-col>
|
|
<div style="position: absolute;right: 0;width:20%;z-index:10">
|
|
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
|
<div class="flexItem" style="flex:1">
|
|
<div class="blockTitle">
|
|
<div class="blockTitleIcon"></div>
|
|
<div>本周不合格占比</div>
|
|
<el-radio-group v-model="deptName" @change="deptNameChange">
|
|
<el-radio label="7车间">7车间</el-radio>
|
|
<el-radio label="10车间">10车间</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div id="pie"
|
|
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
|
|
</div>
|
|
</div>
|
|
<div class="flexItem" style="flex:1">
|
|
<div class="blockTitle">
|
|
<div class="blockTitleIcon"></div>
|
|
<div>本周计划完成度</div>
|
|
</div>
|
|
<div id="line3"
|
|
style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
|
|
</div>
|
|
</div>
|
|
<div class="flexItem" style="flex:1">
|
|
<div class="blockTitle">
|
|
<div class="blockTitleIcon"></div>
|
|
<div>库存情况</div>
|
|
</div>
|
|
<dv-scroll-board id="scrollTable" :config="taskBoard"
|
|
:style="{ 'width': '100%', 'height': blockTableHeight, 'margin-top': '5px' }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
</el-main>
|
|
<div id="inforBlock" class="inforBlock" v-show="infoVisibel">
|
|
<div class="border_corner border_left_top"></div>
|
|
<div class="border_corner border_right_top"></div>
|
|
<div class="border_corner border_left_bottom"></div>
|
|
<div class="border_corner border_right_bottom"></div>
|
|
<p class="title">{{ dialogData.deptName }}</p>
|
|
<div class="infoCantier">
|
|
<div class="leftBlock">
|
|
<el-progress :width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
|
|
id="dashbordProcess">
|
|
<template #default="{ percentage }">
|
|
<span class="percentage-value" style="font-size: 16px">{{ percentage }}%</span>
|
|
</template>
|
|
</el-progress>
|
|
<span>完成进度</span>
|
|
</div>
|
|
<div class="rightBlock">
|
|
<div>
|
|
<p>昨日产量</p>
|
|
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
|
</div>
|
|
<div class="countWrap">
|
|
<div v-if="currentObj.deptName == '10车间' || currentObj.deptName == '6车间'">
|
|
<p>光纤预制管</p>
|
|
<p> <span class="numberFont">390{{ currentObj.生产数 }}</span><span class="numberUnit">件</span></p>
|
|
</div>
|
|
<div v-if="currentObj.deptName == '7车间' || currentObj.deptName == '6车间'">
|
|
<p>光纤预制棒</p>
|
|
<p> <span class="numberFont">390{{ currentObj.生产数 }}</span><span class="numberUnit">件</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- click -->
|
|
<div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
|
|
<div class="border_corner border_left_top"></div>
|
|
<div class="border_corner border_right_top"></div>
|
|
<div class="border_corner border_left_bottom"></div>
|
|
<div class="border_corner border_right_bottom"></div>
|
|
<p class="title">{{ currentObj.deptName }}</p>
|
|
<div class="infoCantier">
|
|
<div class="leftBlock">
|
|
<el-progress :width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
|
|
id="dashbordProcess">
|
|
<template #default="{ percentage }">
|
|
<span class="percentage-value">{{ percentage }}%</span>
|
|
</template>
|
|
</el-progress>
|
|
<p style="text-align:center">完成进度</p>
|
|
</div>
|
|
<div class="rightBlock">
|
|
<div>
|
|
<p>昨日产量</p>
|
|
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
|
</div>
|
|
<div class="countWrap">
|
|
<div v-if="dialogData.deptName=='10车间'||dialogData.deptName=='6车间'">
|
|
<p>预制管</p>
|
|
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
|
</div>
|
|
<div v-if="dialogData.deptName=='7车间'||dialogData.deptName=='6车间'">
|
|
<p>预制棒</p>
|
|
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CircleClose class="circleClose" @click="circleClose" />
|
|
</div>
|
|
</div>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import * as BABYLON from "babylonjs";
|
|
import * as BABYLON_GUI from "babylonjs-gui";
|
|
import * as BABYLON_GRID from "@/utils/gridMaterial";
|
|
import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
|
|
BABYLON.DracoCompression.Configuration.decoder.wasmUrl ='./draco_wasm_wrapper_gltf.js'
|
|
BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = './draco_decoder_gltf.wasm'
|
|
BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = './draco_decoder_gltf.js'
|
|
import 'babylonjs-loaders';
|
|
import 'animate.css';
|
|
export default {
|
|
data() {
|
|
return {
|
|
dept7Data: [
|
|
{ value: 0, name: '炸纹' },
|
|
{ value: 0, name: '条纹' },
|
|
{ value: 0, name: '气泡' },
|
|
{ value: 0, name: '弯曲' },
|
|
{ value: 0, name: '其他' },
|
|
{ value: 0, name: '合格' },
|
|
],
|
|
dept10Data: [
|
|
{ value: 0, name: '椭圆弯曲' },
|
|
{ value: 0, name: '大小头' },
|
|
{ value: 0, name: '偏壁' },
|
|
{ value: 0, name: '结石' },
|
|
{ value: 0, name: '气线' },
|
|
{ value: 0, name: '合格' },
|
|
],
|
|
blockHeight: null,
|
|
taskBoard: {
|
|
header: ['名称','数量'],
|
|
headerBGC: 'rgb(10,63,68)',
|
|
// waitTime: 1000,
|
|
// columnWidth: [4, 1],
|
|
data: [],
|
|
index: true,
|
|
columnWidth: [50,180],
|
|
align: ['center'],
|
|
loadedPercent: 0,
|
|
percentage: 0,
|
|
percentage: 0
|
|
},
|
|
initialAlpha: -Math.PI / 4.5,
|
|
initialBeta: Math.PI / 2,
|
|
initialRadius: 2.5,
|
|
initialTarget: null,
|
|
scene: null,
|
|
myui: null,
|
|
resizeTimeout: null,
|
|
engine: null,
|
|
loadedPercent: 0,
|
|
currentLightMesh: null,
|
|
infoVisibel: false,
|
|
clickVisible: false,
|
|
updateTime: '2023-08-17 16:00:00',
|
|
nodesLists: {
|
|
'单身宿舍.004_primitive3': '办公楼',
|
|
'立方体.024_primitive1': '光纤预制管生产车间',
|
|
'立方体.034_primitive1': '玻璃配合料制备车间',
|
|
'立方体.026_primitive1': '光纤预制棒生产车间',
|
|
'立方体.025_primitive1': '光学精密加工车间',
|
|
},
|
|
objs: { total: '0', elec: '0' },
|
|
currentTime: '',
|
|
currentWeek: '',
|
|
currentDay: '',
|
|
timerTime: null,
|
|
start_date: '',
|
|
end_date: '',
|
|
dialogData: {
|
|
deptName: ''
|
|
},
|
|
currentObj: {
|
|
deptName: ''
|
|
},
|
|
deptName: '10车间',
|
|
heightTimer: null,
|
|
countOk_AVG: 0,
|
|
countOk_dept7: 0,
|
|
countOk_dept10: 0,
|
|
blockTableHeight: 0,
|
|
weekDateList: [],
|
|
//表一数据
|
|
saleOutdept6: [0, 0, 0, 0, 0, 0, 0],
|
|
saleOutAVG: [0, 0, 0, 0, 0, 0, 0],
|
|
//表二数据
|
|
countOkAVG: [0, 0, 0, 0, 0, 0, 0],
|
|
countOkDept7: [0, 0, 0, 0, 0, 0, 0],
|
|
countOkDept10: [0, 0, 0, 0, 0, 0, 0],
|
|
//表三数据
|
|
countRateDept7: [0, 0, 0, 0, 0, 0, 0],
|
|
countRateDept10: [0, 0, 0, 0, 0, 0, 0],
|
|
pieoption: {
|
|
color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)', 'rgb(248,189,118)'],
|
|
legend: {
|
|
bottom: 1,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
},
|
|
series: {
|
|
name: '不合格占比',
|
|
type: 'pie',
|
|
radius: [30, 60],
|
|
center: ['50%', '45%'],
|
|
// roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 2
|
|
},
|
|
label: {
|
|
minMargin: 10,
|
|
edgeDistance: 10,
|
|
fontSize: '12px'
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
},
|
|
length: 2,
|
|
length2: 5
|
|
},
|
|
labelLayout: function (params) {
|
|
var isLeft = params.labelRect.x < myChart.getWidth() / 2
|
|
var points = params.labelLinePoints;
|
|
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
|
|
return {
|
|
labelLinePoints: points,
|
|
dy: -10,
|
|
dx: 0
|
|
}
|
|
},
|
|
data: []
|
|
}
|
|
},
|
|
yesterday:''
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
let height = document.getElementById('mainBlock').clientHeight;
|
|
let height0 = height / 3 - 55;
|
|
let height1 = height0 - 20;
|
|
this.blockHeight = height0 + 'px';
|
|
this.blockTableHeight = height1 + 'px';
|
|
document.getElementById('scrollTable').style.height = height1 + 'px'
|
|
this.showTime();
|
|
this.$nextTick(() => {
|
|
that.getsaleOut();
|
|
that.initDomStyle();
|
|
that.initFactory();
|
|
that.timerTime = setInterval(() => {
|
|
that.showTime();
|
|
}, 1000);
|
|
that.notokTimer = setInterval(() => {
|
|
if (that.deptName == '10车间') {
|
|
that.deptName = '7车间'
|
|
} else {
|
|
that.deptName = '10车间'
|
|
}
|
|
that.deptNameChange(that.deptName);
|
|
}, 5000);
|
|
|
|
that.initChart();
|
|
})
|
|
//一天的毫秒数
|
|
const ondDayTime = 86400000
|
|
let cDate = new Date();
|
|
|
|
let week = cDate.getDay();//当前时间的week数
|
|
// let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
|
|
let weekFirst = week - 1;//第一天对应的天数
|
|
let weekLast = 7 - week;//最后一天对应的天数
|
|
let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
|
|
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
|
|
let dateArr = [];
|
|
for(let i=0;i<7;i++){
|
|
let itemDate = new Date(first.getTime()+i*ondDayTime);
|
|
let item = itemDate.getDate();
|
|
dateArr.push(item);
|
|
}
|
|
console.log('weekDateList',dateArr)
|
|
this.weekDateList = dateArr;
|
|
this.start_date = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
|
|
this.end_date = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
|
|
let yesterday = new Date(cDate.getTime()-ondDayTime);
|
|
this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
|
|
this.getsaleOut();
|
|
this.getPlanRate();
|
|
this.getMaterialList();
|
|
},
|
|
methods: {
|
|
//本周6车间交付数----棒管交付数
|
|
getsaleOut() {
|
|
let that = this;
|
|
let obj = {
|
|
query: { start_date: that.start_date, end_date: that.end_date },
|
|
};
|
|
that.$API.bi.dataset.exec.req('saleOutDay', obj).then((res6) => {
|
|
let list = res6.data2.ds0;
|
|
let saleOutdept6 = [0, 0, 0, 0, 0, 0, 0];//棒管交付数
|
|
if (list.length > 0) {
|
|
list.forEach(item => {
|
|
for(let i=0;i<this.weekDateList.length;i++){
|
|
if( item.日==that.weekDateList[i]){
|
|
saleOutdept6[i] = item.交付数;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
that.saleOutdept6 = saleOutdept6;
|
|
that.getAVGDayData();
|
|
});
|
|
},
|
|
//获取AVG的交付数$合格数
|
|
getAVGDayData() {
|
|
let that = this;
|
|
this.$API.wpm.otherlog.list.req({ product: 'AVG', page: 0, handle_date__gte: that.start_date, handle_date__lte: that.end_date }).then(res => {
|
|
let list = res;
|
|
let count_ok = 0, saleOutAVG = [0, 0, 0, 0, 0, 0, 0], countOkAVG = [0, 0, 0, 0, 0, 0, 0];
|
|
if (list.length > 0) {
|
|
list.forEach(item => {
|
|
count_ok = count_ok + item.count_ok;
|
|
let day = item.handle_date.split('-');
|
|
let index = this.weekDateList.indexOf(day[2]);
|
|
saleOutAVG[index] = item.count_delivered;
|
|
countOkAVG[index] = item.count_ok;
|
|
})
|
|
that.saleOutAVG = saleOutAVG;
|
|
that.countOkAVG = countOkAVG;
|
|
that.countOk_AVG = count_ok;
|
|
}
|
|
that.getCountDept7();
|
|
//左1---本周交付数
|
|
let chartDom = document.getElementById('line1');
|
|
chartDom.style.height = this.blockHeight;
|
|
let myChart = echarts.init(chartDom);
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: "stack",
|
|
top: 5,
|
|
right: 5,
|
|
data: [
|
|
{
|
|
backgroundColor: 'rgb(1,235,239)',
|
|
name: '预制棒管',
|
|
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(250,205,0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(254,129,0)'
|
|
}
|
|
])
|
|
}
|
|
}, {
|
|
name: 'AVG',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
// color:'rgb(1,235,239)',
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(1,235,239)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(5, 158, 163)'
|
|
}])
|
|
},
|
|
}],
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "",
|
|
type: 'value',
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
type: 'dashed', //y轴分割线类型
|
|
color: 'rgba(102,102,102,0.9)',
|
|
width: 1,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '预制棒管',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 1, color: 'rgb(1,235,239)'
|
|
},
|
|
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(1,235,239)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(5, 158, 163)'
|
|
}
|
|
])
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: that.saleOutdept6
|
|
},
|
|
{
|
|
name: 'AVG',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 1, color: 'rgb(250,205,0)'
|
|
},
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(254,129,0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(250,205,0)'
|
|
}
|
|
])
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: that.saleOutAVG
|
|
},
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
})
|
|
},
|
|
//7车间合格数&&合格率
|
|
getCountDept7() {
|
|
let that = this;
|
|
let obj = {
|
|
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "7车间" },
|
|
};
|
|
that.$API.bi.dataset.exec.req('lineDay', obj).then((res) => {
|
|
let list = res.data2.ds0;
|
|
let countOkDept7 = [0,0,0,0,0,0,0],countRateDept7 = [0,0,0,0,0,0,0];
|
|
let countOk_dept7=0;
|
|
if(list.length>0){
|
|
list.forEach(item => {
|
|
let date = item.年+'-'+item.月+'-'+item.日;
|
|
for(let i=0;i<this.weekDateList.length;i++){
|
|
if( item.日==that.weekDateList[i]){
|
|
countOkDept7[i] = item.合格数;
|
|
countRateDept7[i] = Math.round(item.合格率);
|
|
}
|
|
}
|
|
countOk_dept7 = countOk_dept7+item.合格数;
|
|
that.dept7Data[0].value= that.dept7Data[0].value+item.炸纹;
|
|
that.dept7Data[1].value= that.dept7Data[1].value+item.条纹;
|
|
that.dept7Data[2].value= that.dept7Data[2].value+item.气泡;
|
|
that.dept7Data[3].value= that.dept7Data[3].value+item.弯曲;
|
|
that.dept7Data[4].value= that.dept7Data[4].value+item.其他;
|
|
that.dept7Data[5].value= that.dept7Data[5].value+item.合格数;
|
|
});
|
|
}
|
|
that.countOkDept7 = countOkDept7;
|
|
that.deptData = that.dept7Data;
|
|
that.countRateDept7 = countRateDept7;
|
|
that.countOk_dept7 = countOk_dept7;
|
|
that.getCountDept10();
|
|
});
|
|
},
|
|
//10车间合格数&&合格率
|
|
getCountDept10() {
|
|
let that = this;
|
|
let obj = {
|
|
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "10车间" },
|
|
};
|
|
that.$API.bi.dataset.exec.req('lineDay', obj).then((res) => {
|
|
let list = res.data2.ds0;
|
|
let countOkDept10 = [0,0,0,0,0,0,0],countRateDept10 = [0,0,0,0,0,0,0];
|
|
let countOk_dept10=0;
|
|
if(list.length>0){
|
|
console.log(this.weekDateList)
|
|
list.forEach(item => {
|
|
let index = that.weekDateList.indexOf(item.日);
|
|
countOkDept10[index] = item.合格数;
|
|
countRateDept10[index] = Math.round(item.合格率);
|
|
countOk_dept10 = countOk_dept10+item.合格数;
|
|
});
|
|
}
|
|
that.countOkDept10 = countOkDept10;
|
|
that.countRateDept10 = countRateDept10;
|
|
that.countOk_dept10 = countOk_dept10;
|
|
that.initChart();
|
|
});
|
|
},
|
|
//本周计划完成度
|
|
getPlanRate() {
|
|
let that = this;
|
|
let obj = {
|
|
query: { start_date: that.start_date, end_date: that.end_date, dept_name: that.deptName },
|
|
};
|
|
that.$API.bi.dataset.exec.req('productStatistic', obj).then((res) => {
|
|
let list = res.data2.ds0;
|
|
let PlanRate = [0, 0, 0, 0, 0, 0, 0];
|
|
if (list.length > 0) {
|
|
list.forEach(item => {
|
|
let index = this.weekDateList.indexOf( item.日);
|
|
PlanRate[index] = Math.round((item.合格数 / item.任务数) * 100);
|
|
});
|
|
}
|
|
//柱状图折线
|
|
let line3Dom = document.getElementById('line3');
|
|
line3Dom.style.height = this.blockHeight;
|
|
let line3Chart = echarts.init(line3Dom);
|
|
let line3option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
right: 0,
|
|
data: ['数量', '合格率'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '',
|
|
min: 0,
|
|
interval: 50,
|
|
nameTextStyle: {
|
|
color: '#ffffff',
|
|
formatter: '{value} %',
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
// {
|
|
// type: 'value',
|
|
// name: '完成度',
|
|
// min: 0,
|
|
// max: 100,
|
|
// interval: 20,
|
|
// axisLabel: {
|
|
// formatter: '{value} %',
|
|
// color: '#ffffff'
|
|
// },
|
|
// nameTextStyle: {
|
|
// color: '#ffffff'
|
|
// },
|
|
// splitLine: {
|
|
// show: false,
|
|
// },
|
|
// }
|
|
],
|
|
series: [
|
|
{
|
|
name: '完成度',
|
|
type: 'bar',
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
}
|
|
},
|
|
barWidth: 15,
|
|
data: PlanRate,
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(13,176,176)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(246,163,58)'
|
|
}])
|
|
},
|
|
},
|
|
// {
|
|
// name: '合格率',
|
|
// type: 'line',
|
|
// yAxisIndex: 1,
|
|
// // 255,120,0
|
|
// tooltip: {
|
|
// valueFormatter: function (value) {
|
|
// return value;
|
|
// }
|
|
// },
|
|
// symbol: 'circle',
|
|
// symbolSize: 8,
|
|
// itemStyle: {
|
|
// // 设置symbol的颜色
|
|
// color: 'rgb(255,120,0)'
|
|
// },
|
|
// lineStyle: {
|
|
// color: 'rgb(255,120,0)'
|
|
// },
|
|
// data: [63, 80, 71, 82, 60, 70, 85],
|
|
// }
|
|
]
|
|
};
|
|
line3Chart.setOption(line3option);
|
|
})
|
|
},
|
|
deptNameChange(deptName) {
|
|
let that = this;
|
|
let obj = {
|
|
query: { start_date: that.start_date, end_date: that.end_date, dept_name: deptName },
|
|
};
|
|
that.$API.bi.dataset.exec.req('lineDay', obj).then((res) => {
|
|
let list = res.data2.ds0;
|
|
let deptData = [];
|
|
if (list.length > 0) {
|
|
list.forEach(item => {
|
|
if (that.deptName == '7车间') {
|
|
that.dept7Data[0].value = that.dept7Data[0].value + item.炸纹;
|
|
that.dept7Data[1].value = that.dept7Data[1].value + item.条纹;
|
|
that.dept7Data[2].value = that.dept7Data[2].value + item.气泡;
|
|
that.dept7Data[3].value = that.dept7Data[3].value + item.弯曲;
|
|
that.dept7Data[4].value = that.dept7Data[4].value + item.其他;
|
|
that.dept7Data[5].value = that.dept7Data[5].value + item.合格数;
|
|
deptData = that.dept7Data;
|
|
} else {
|
|
that.dept10Data[0].value = that.dept10Data[0].value + item.弯曲;
|
|
that.dept10Data[1].value = that.dept10Data[1].value + item.大小头;
|
|
that.dept10Data[2].value = that.dept10Data[2].value + item.偏壁;
|
|
that.dept10Data[3].value = that.dept10Data[3].value + item.结石;
|
|
that.dept10Data[4].value = that.dept10Data[4].value + item.气线;
|
|
that.dept10Data[5].value = that.dept10Data[5].value + item.合格数;
|
|
deptData = that.dept10Data;
|
|
}
|
|
});
|
|
} else {
|
|
if (that.deptName == '7车间') {
|
|
deptData = that.dept7Data;
|
|
} else {
|
|
deptData = that.dept10Data;
|
|
}
|
|
}
|
|
console.log(deptData)
|
|
that.deptData = deptData;
|
|
that.pieoption.series.data = deptData;
|
|
let pieoption = that.pieoption;
|
|
let pieDom = document.getElementById('pie');
|
|
let pieChart = echarts.init(pieDom);
|
|
pieChart.clear();
|
|
pieChart.setOption(pieoption, true);
|
|
});
|
|
},
|
|
//库存情况
|
|
getMaterialList() {
|
|
let that = this;
|
|
this.$API.mtm.material.list.req({ page: 0, type: 10 ,count__gte:1 }).then(res => {
|
|
let data = [];
|
|
if(res.length>0){
|
|
res.forEach(item => {
|
|
let arr = [];
|
|
let colorText = '';
|
|
if (item.count_safe !== null && item.count_safe < item.count) {
|
|
colorText = '<span style="color:red;">' + item.count + '</span>'
|
|
} else {
|
|
colorText = '<span style="color:green;">' + item.count + '</span>'
|
|
}
|
|
arr[0] = item.name+'|'+item.specification+'|'+item.model;
|
|
arr[1] = item.count;
|
|
data.push(arr)
|
|
});
|
|
}
|
|
that.taskBoard.data = data;
|
|
console.log('getMaterialList', data)
|
|
})
|
|
},
|
|
showTime() {
|
|
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
|
|
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
|
|
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
|
},
|
|
initDomStyle() {
|
|
// 获取窗口的总高度
|
|
var windowHeight = window.innerHeight;
|
|
var windowWidth = window.innerWidth;
|
|
var dashboard = document.getElementsByClassName('container')[0];
|
|
var model = document.getElementsByClassName('model')[0];
|
|
if (windowWidth > 960) {
|
|
dashboard.style.overflow = 'hidden';
|
|
model.style.position = 'absolute';
|
|
model.style.height = (windowHeight - 70) + 'px';
|
|
model.style.top = 0
|
|
} else {
|
|
dashboard.style.overflow = 'auto';
|
|
var chartHeight = windowWidth * 0.6;
|
|
model.style.position = 'relative';
|
|
model.style.height = chartHeight;
|
|
}
|
|
if (this.engine != null) {
|
|
this.engine.resize();
|
|
}
|
|
|
|
},
|
|
initFactory() {
|
|
var that = this;
|
|
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
|
|
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
|
|
BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
|
|
}
|
|
BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
|
|
document.getElementById("loadingScreen").style.display = "none";
|
|
}
|
|
engine.displayLoadingUI();
|
|
const createScene = function () {
|
|
const scene = new BABYLON.Scene(engine);
|
|
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 groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
|
// groundMaterial.majorUnitFrequency = 60;
|
|
// groundMaterial.minorUnitVisibility = 0.1;
|
|
// groundMaterial.gridRatio = 0.1;
|
|
// ground.material = groundMaterial;
|
|
// ground.position.y = -0.01
|
|
|
|
// 加载背景图片
|
|
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.1, 0.3));
|
|
that.initialTarget = camera.getTarget();
|
|
camera.lowerBetaLimit = Math.PI / 2.6;
|
|
camera.upperBetaLimit = Math.PI / 2.6; //无法移动到地面以下
|
|
camera.attachControl(canvas, true);
|
|
camera.maxZ = 700; // 调整适当的值
|
|
camera.wheelDeltaPercentage = 0.02;
|
|
// 相机限制
|
|
camera.lowerRadiusLimit = 2;
|
|
camera.upperRadiusLimit = 6;
|
|
// 灯光
|
|
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
|
light.intensity = 3;
|
|
// 全屏GUI
|
|
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
|
that.myui = advancedTexture;
|
|
// 创建一个高亮层
|
|
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
|
|
// 主控制区
|
|
var control_main = new BABYLON_GUI.StackPanel();
|
|
control_main.isVertical = false
|
|
control_main.top = '-40%';
|
|
control_main.left = '-20%';
|
|
advancedTexture.addControl(control_main);
|
|
|
|
var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
|
|
button_main.width = "80px"
|
|
button_main.height = "30px";
|
|
button_main.color = "white";
|
|
button_main.cornerRadius = 20;
|
|
button_main.background = "green";
|
|
button_main.top = '100px';
|
|
button_main.left = '0px';
|
|
control_main.addControl(button_main)
|
|
button_main.onPointerClickObservable.add(() => {
|
|
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
|
|
var cameraPosition = new BABYLON.Vector3(
|
|
0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
|
|
0 + that.initialRadius * Math.cos(that.initialBeta),
|
|
0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
|
|
);
|
|
var ease = new BABYLON.CubicEase();
|
|
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
|
BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
|
BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
|
|
}
|
|
})
|
|
// 高亮显示mesh名
|
|
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
|
mesh_rect.width = "200px";
|
|
mesh_rect.height = "45px";
|
|
mesh_rect.background = 'rgb(75,240,234)';
|
|
mesh_rect.alpha = 0.6;
|
|
mesh_rect.isVisible = false;
|
|
advancedTexture.addControl(mesh_rect);
|
|
var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
|
|
mesh_name.text = "";
|
|
mesh_name.color = 'white';
|
|
mesh_name.fontSize = '14px';
|
|
mesh_rect.addControl(mesh_name);
|
|
|
|
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon4.glb";
|
|
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
|
// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
|
|
// BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
|
|
// console.log(scene)
|
|
//关闭灯光
|
|
// scene.lights[1].setEnabled(false);
|
|
engine.hideLoadingUI()
|
|
// let arrKey = [];
|
|
// for (let key in that.nodesLists) {
|
|
// arrKey.push(key);
|
|
// }
|
|
// let heightI = 0;
|
|
// that.heightTimer = setInterval(() => {
|
|
// let heightKey = arrKey[heightI];
|
|
// const meshTimer = scene.getMeshByName(heightKey);
|
|
// const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);
|
|
|
|
// if (meshTimer) {
|
|
// if (that.nodesLists[heightKey]) {
|
|
// hl1Timer.removeAllMeshes();
|
|
// if (highlightLayer) {
|
|
// highlightLayer.removeAllMeshes();
|
|
// }
|
|
// that.getDeptDetail(that.nodesLists[heightKey])
|
|
// // 在选中的 meshTimer 上添加高亮效果
|
|
// highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
|
|
// that.currentLightMesh = meshTimer;
|
|
// mesh_rect.linkWithMesh(meshTimer);
|
|
// let name = meshTimer.name.split('_')[0];
|
|
// mesh_name.text = name;
|
|
// that.infoVisibel = true;
|
|
// hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
|
|
// hl1Timer.blurVerticalSize = 5;
|
|
// hl1Timer.blurHorizontalSize = 5;
|
|
// function worldToScreen(point, camera, scene, engine) {
|
|
// return BABYLON.Vector3.Project(point,
|
|
// BABYLON.Matrix.Identity(),
|
|
// scene.getTransformMatrix(),
|
|
// camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
|
|
// }
|
|
// var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
|
|
// let infoBlock = document.getElementById('inforBlock');
|
|
// infoBlock.style.left = (Math.floor(pos.x)) + 'px';
|
|
// infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
|
|
// }
|
|
// }
|
|
// heightI+=1;
|
|
// // if(heightI>4){
|
|
// // heightI=0
|
|
// // }
|
|
// }, 1000);
|
|
},
|
|
//进度条
|
|
function (evt) {
|
|
var loadedPercent = 0;
|
|
if (evt.lengthComputable) {
|
|
loadedPercent = parseInt(evt.loaded * 100 / evt.total);
|
|
} else {
|
|
var dlCount = evt.loaded / (1024 * 1024);
|
|
loadedPercent = Math.round(dlCount * 100.0) / 100.0;
|
|
}
|
|
that.loadedPercent = loadedPercent;
|
|
})
|
|
// 自动旋转checkbox
|
|
var checkbox = new BABYLON_GUI.Checkbox();
|
|
checkbox.width = "20px";
|
|
checkbox.height = "20px";
|
|
checkbox.isChecked = false;
|
|
checkbox.marginLeft = '16px'
|
|
checkbox.color = "green";
|
|
checkbox.top = '100px';
|
|
checkbox.onIsCheckedChangedObservable.add(function (value) {
|
|
if (value) {
|
|
camera.useAutoRotationBehavior = true;
|
|
} else {
|
|
camera.useAutoRotationBehavior = false;
|
|
}
|
|
});
|
|
control_main.addControl(checkbox);
|
|
var header = new BABYLON_GUI.TextBlock();
|
|
header.text = "自动旋转";
|
|
header.width = "80px";
|
|
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
|
header.color = "white";
|
|
header.top = '100px';
|
|
control_main.addControl(header);
|
|
// 添加抓取事件
|
|
const hl1 = new BABYLON.HighlightLayer("hl1", scene);
|
|
const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
|
|
canvas.addEventListener('mousemove', (event) => {
|
|
// 使用 scene.pick 检测鼠标拾取
|
|
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
|
if (that.currentLightMesh) {
|
|
that.infoVisibel = false;
|
|
mesh_rect.isVisible = false;
|
|
hl1.removeAllMeshes();
|
|
highlightLayer.removeAllMeshes();
|
|
}
|
|
if (pickResult.hit) {
|
|
const mesh = pickResult.pickedMesh;
|
|
highlightLayer.removeAllMeshes();
|
|
let key = mesh.name;
|
|
if (that.nodesLists[key]) {
|
|
hl1.removeAllMeshes();
|
|
highlightLayer.removeAllMeshes();
|
|
that.getDeptDetail(that.nodesLists[key])
|
|
//单身宿舍.003_primitive3
|
|
// 在选中的 mesh 上添加高亮效果
|
|
highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
|
|
that.currentLightMesh = mesh;
|
|
mesh_rect.linkWithMesh(mesh);
|
|
let name = mesh.name.split('_')[0];
|
|
mesh_name.text = name;
|
|
// mesh_rect.isVisible = true;
|
|
|
|
hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
|
|
hl1.blurVerticalSize = 5;
|
|
hl1.blurHorizontalSize = 5;
|
|
function worldToScreen(point, camera, scene, engine) {
|
|
return BABYLON.Vector3.Project(point,
|
|
BABYLON.Matrix.Identity(),
|
|
scene.getTransformMatrix(),
|
|
camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
|
|
}
|
|
var pos = worldToScreen(mesh.absolutePosition, camera, scene, engine);
|
|
let infoBlock = document.getElementById('inforBlock');
|
|
infoBlock.style.left = (Math.floor(pos.x)) + 'px';
|
|
infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
|
|
}
|
|
} else {
|
|
that.infoVisibel = false;
|
|
}
|
|
});
|
|
canvas.addEventListener('click', (event) => {
|
|
// 使用 scene.pick 检测鼠标拾取
|
|
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
|
if (pickResult.hit) {
|
|
const mesh = pickResult.pickedMesh;
|
|
console.log('mesh', mesh)
|
|
if (that.nodesLists[mesh.name]) {
|
|
hl1Click.removeAllMeshes();
|
|
highlightLayer.removeAllMeshes();
|
|
|
|
highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
|
|
hl1Click.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
|
|
hl1Click.blurVerticalSize = 5;
|
|
hl1Click.blurHorizontalSize = 5;
|
|
that.currentObj.deptName = that.nodesLists[mesh.name];
|
|
if (camera.target != mesh.position) {
|
|
that.clickVisible = true;
|
|
// 计算新的相机位置
|
|
let position = mesh._parentNode._position
|
|
if (mesh._parentNode.id == '__root__') {
|
|
position = mesh.position
|
|
}
|
|
const cameraPosition = new BABYLON.Vector3(
|
|
position.x + 1.8 * Math.sin(camera.beta),
|
|
position.y + 4 * Math.cos(camera.beta),
|
|
position.z - 0.2 * Math.sin(camera.beta)
|
|
);
|
|
var ease = new BABYLON.CubicEase();
|
|
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
|
BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
|
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return scene;
|
|
};
|
|
const scene = createScene(); //Call the createScene function
|
|
// scene.debugLayer.show()
|
|
engine.runRenderLoop(function () {
|
|
scene.render();
|
|
});
|
|
this.engine = engine;
|
|
this.scene = scene;
|
|
// console.log('scene:',scene)
|
|
window.addEventListener("resize", function () {
|
|
engine.resize();
|
|
});
|
|
},
|
|
getDeptDetail(name) {
|
|
let that = this;
|
|
if (that.currentObj.deptName == name && that.clickVisible) {
|
|
that.dialogData.deptName = name;
|
|
} else {
|
|
that.infoVisibel = true;
|
|
that.dialogData.deptName = name;
|
|
}
|
|
let obj = {
|
|
query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: name },
|
|
};
|
|
that.$API.bi.dataset.exec.req('lineDay', obj).then((res1) => {
|
|
console.log('生产车间按日统计:', res1);
|
|
let list1 = res1.data2.ds0;
|
|
if (name == '6车间') {
|
|
that.currentObj = list1[0];
|
|
that.currentObj = list1[0]
|
|
} else if (name == '7车间' || name == '10车间') {
|
|
that.currentObj = list1[0];
|
|
}
|
|
|
|
debugger;
|
|
});
|
|
},
|
|
initChart() {
|
|
let that = this;
|
|
//左边2
|
|
let bar1 = document.getElementById('bar1');
|
|
bar1.style.height = this.blockHeight;
|
|
let bar1Chart = echarts.init(bar1);
|
|
let bar1option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
top: 5,
|
|
right: 5,
|
|
data: [
|
|
{
|
|
name: 'AVG',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(5,245,2)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(7,137,43)'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
|
|
{
|
|
name: '预制管',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(250,205,0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(254,129,0)'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
{
|
|
name: '预制棒',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
// color:'rgb(1,235,239)',
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(1,235,239)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(5, 158, 163)'
|
|
}])
|
|
},
|
|
},
|
|
]
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: "",
|
|
type: 'value',
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '预制棒',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
// color:'rgb(1,235,239)',
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(1,235,239)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(5, 158, 163)'
|
|
}])
|
|
},
|
|
barWidth: 15,
|
|
data: that.countOkDept7
|
|
},
|
|
{
|
|
name: '预制管',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
barWidth: 20,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(250,205,0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(254,129,0)'
|
|
}
|
|
])
|
|
},
|
|
data: that.countOkDept10
|
|
},
|
|
{
|
|
name: 'AVG',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
barWidth: 20,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(5,245,2)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(7,137,43)'
|
|
}
|
|
])
|
|
},
|
|
data: that.countOkAVG
|
|
}
|
|
]
|
|
};
|
|
bar1Chart.setOption(bar1option);
|
|
//左3
|
|
let line2Dom = document.getElementById('line2');
|
|
line2Dom.style.height = this.blockHeight;
|
|
let line2Chart = echarts.init(line2Dom);
|
|
let line2option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
top: 5,
|
|
right: 5,
|
|
data: [
|
|
{
|
|
name: '预制棒',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'orange'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'yellow'
|
|
}])
|
|
},
|
|
},
|
|
{
|
|
name: '预制管',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(1,235,239)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(5, 158, 163)'
|
|
}])
|
|
},
|
|
},
|
|
],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: '',
|
|
type: 'value',
|
|
nameTextStyle: {
|
|
color: '#ffffff'
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff'
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed', //y轴分割线类型
|
|
color: 'rgba(102,102,102,0.9)',
|
|
width: 1,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '预制棒',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
symbolSize: 8, //设置折线上圆点大小
|
|
symbol: 'circle',
|
|
itemStyle: {
|
|
// 设置symbol的颜色
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'orange'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'yellow'
|
|
}])
|
|
},
|
|
smooth: 0.5, // 设置折线弧度
|
|
data: that.countRateDept7,
|
|
lineStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0, color: 'orange' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'yellow' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name: '预制管',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
symbolSize: 8, //设置折线上圆点大小
|
|
symbol: 'circle',
|
|
itemStyle: {
|
|
// 设置symbol的颜色
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(1,235,239)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(5, 158, 163)'
|
|
}])
|
|
},
|
|
smooth: 0.5, // 设置折线弧度
|
|
data: that.countRateDept10,
|
|
lineStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgb(1,235,239)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgb(5, 158, 163)' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
}
|
|
},
|
|
}
|
|
]
|
|
};
|
|
line2Chart.setOption(line2option);
|
|
//饼状图
|
|
let pieDom = document.getElementById('pie');
|
|
pieDom.style.height = this.blockHeight;
|
|
let pieChart = echarts.init(pieDom);
|
|
let pieoption = {
|
|
color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)', 'rgb(248,189,118)'],
|
|
legend: {
|
|
bottom: 1,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
},
|
|
series: {
|
|
name: '不合格占比',
|
|
type: 'pie',
|
|
radius: [30, 60],
|
|
center: ['50%', '45%'],
|
|
// roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 2
|
|
},
|
|
// label: {
|
|
// fontSize: 12,
|
|
// alignTo: 'edge',
|
|
// formatter: '{b}\n',
|
|
// edgeDistance: 10,
|
|
// lineHeight: 20,
|
|
// rich: {
|
|
// title: {
|
|
// fontSize: 12,
|
|
// color: '#999',
|
|
// lineHeight: 50,
|
|
// },
|
|
// }
|
|
// },
|
|
// labelLayout: function (params) {
|
|
// var isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
|
// var points = params.labelLinePoints;
|
|
// points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;
|
|
// return {
|
|
// labelLinePoints: points
|
|
// };
|
|
// },
|
|
|
|
label: {
|
|
minMargin: 10,
|
|
edgeDistance: 10,
|
|
fontSize: '12px'
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
},
|
|
length: 2,
|
|
length2: 5
|
|
},
|
|
labelLayout: function (params) {
|
|
var isLeft = params.labelRect.x < pieChart.getWidth() / 2
|
|
var points = params.labelLinePoints;
|
|
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
|
|
return {
|
|
labelLinePoints: points,
|
|
dy: -10,
|
|
dx: 0
|
|
}
|
|
},
|
|
data: that.deptData
|
|
}
|
|
};
|
|
that.pieoption = pieoption;
|
|
pieChart.setOption(pieoption);
|
|
},
|
|
circleClose() {
|
|
this.clickVisible = false;
|
|
this.currentObj.deptName = '';
|
|
},
|
|
},
|
|
beforeDestoryed() {
|
|
clearInterval(timerTime);
|
|
this.timerTime = null;
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
@font-face {
|
|
font-family: 'myfont';
|
|
/* 字体名称 */
|
|
src: url('../../utils/youShe.ttf');
|
|
/* 字体文件相对路径 */
|
|
}
|
|
|
|
.container {
|
|
background: url('/public/img/photon_bg.png') no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.pageHeader {
|
|
font-size: 32px;
|
|
background: none;
|
|
border-bottom: none;
|
|
position: relative;
|
|
display: block;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
padding: 1px;
|
|
font-family: "myfont";
|
|
background: url('/public/img/photon_header.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.top-line {
|
|
height: 1px;
|
|
width: 3%;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
background: rgba(54, 217, 187, 1);
|
|
}
|
|
|
|
.top-line-left {
|
|
left: 24%;
|
|
}
|
|
|
|
.top-line-right {
|
|
right: 24%;
|
|
}
|
|
|
|
.flexItem {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.blockTitle {
|
|
color: #fff;
|
|
height: 40px;
|
|
padding-left: 10px;
|
|
font-size: 16px;
|
|
line-height: 40px;
|
|
font-weight: bold;
|
|
background: url('/public/img/photon_title.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.blockTitleIcon {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 10px;
|
|
margin-right: 5px;
|
|
display: inline-block;
|
|
animation: rotate 3s infinite;
|
|
transform-origin: center center;
|
|
background: url('/public/img/photon_title_icon.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
75% {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.row-item {
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
#scrollTable>.hader {
|
|
background: rgb(10, 63, 68) !important;
|
|
background-color: #0a3f44 !important;
|
|
}
|
|
|
|
.model {
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#renderCanvas {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
#loadingScreen {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 260px;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.numberFont {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.numberUnit {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#dashbordProcess .el-progress-circle {
|
|
height: 60px !important;
|
|
width: 60px !important;
|
|
}
|
|
|
|
.el-progress--circle .el-progress__text {
|
|
display: block;
|
|
margin-top: 1px;
|
|
color: #fff;
|
|
font-size: 20px !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.totalNumContnier {
|
|
display: flex;
|
|
width: fit-content;
|
|
margin: auto;
|
|
}
|
|
|
|
.totalNumWrap {
|
|
margin: 0 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.totalNumWrap>img {
|
|
width: 10vw;
|
|
}
|
|
|
|
.totalNumWrap_green>.totalNumber {
|
|
color: rgb(5, 245, 2);
|
|
}
|
|
|
|
.totalNum_orange>.totalNumber {
|
|
color: orange;
|
|
}
|
|
|
|
.totalNum_blue>.totalNumber {
|
|
color: rgb(2, 245, 242);
|
|
}
|
|
|
|
.totalNumber {
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
.totalNumText {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 0.7vw;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.inforBlock {
|
|
left: 60%;
|
|
top: 30%;
|
|
width: 420px;
|
|
height: 150px;
|
|
position: absolute;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
padding: 20px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
|
|
}
|
|
|
|
.inforBlock.clickBlock {
|
|
left: 50%;
|
|
width: 630px;
|
|
height: 225px;
|
|
padding: 40px;
|
|
font-size: 16px;
|
|
transform: translateX(-50%)
|
|
}
|
|
|
|
.inforBlock>.border_corner {
|
|
z-index: 2500;
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: rgba(0, 0, 0, 0);
|
|
border: 2px solid rgba(54, 217, 187, 1);
|
|
}
|
|
|
|
.inforBlock>.border_left_top {
|
|
top: 0;
|
|
left: 0;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.inforBlock>.border_right_top {
|
|
top: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.inforBlock>.border_left_bottom {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-right: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.inforBlock>.border_right_bottom {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.inforBlock>.title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
position: absolute;
|
|
top: -45px;
|
|
text-align: center;
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.inforBlock>.infoCantier {
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.infoCantier>.leftBlock {
|
|
width: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.infoCantier>.rightBlock {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.infoCantier>.rightBlock>.countWrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 280px;
|
|
margin-top: 10px
|
|
}
|
|
|
|
/* .clickBlock{
|
|
position:relative;
|
|
} */
|
|
.circleClose {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.percentage-value {
|
|
display: block;
|
|
margin-top: 6px;
|
|
font-size: 28px;
|
|
color: white;
|
|
}
|
|
</style> |