2577 lines
59 KiB
Vue
2577 lines
59 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, 0.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, 0.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, 0.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">
|
|
<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, 0.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, 0.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" v-if="dialogData.deptName == '办公楼'">
|
|
<img src="img/gz_logo.png" alt="" style="width: 100%" />
|
|
</div>
|
|
<div class="leftBlock" v-else>
|
|
<el-progress
|
|
:width="70"
|
|
type="circle"
|
|
color="rgba(54, 217, 187, 1)"
|
|
:percentage="dialogData.percentage"
|
|
id="dashbordProcess"
|
|
>
|
|
<span class="percentage-value" style="font-size: 16px"
|
|
>{{ dialogData.percentage }}%</span
|
|
>
|
|
</el-progress>
|
|
<span>完成进度</span>
|
|
</div>
|
|
<div class="rightBlock">
|
|
<div>
|
|
<p v-if="dialogData.deptName !== '办公楼'">昨日产量</p>
|
|
</div>
|
|
<div class="countWrap">
|
|
<div
|
|
v-if="
|
|
dialogData.deptName == '光纤预制管生产车间' ||
|
|
dialogData.deptName == '光学精密加工车间'
|
|
"
|
|
>
|
|
<p>光纤预制管</p>
|
|
<p>
|
|
<span class="numberFont">{{
|
|
dialogData.count_guan
|
|
}}</span
|
|
><span class="numberUnit">件</span>
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
dialogData.deptName == '光纤预制棒生产车间' ||
|
|
dialogData.deptName == '光学精密加工车间'
|
|
"
|
|
>
|
|
<p>光纤预制棒</p>
|
|
<p>
|
|
<span class="numberFont">{{
|
|
dialogData.count_bang
|
|
}}</span
|
|
><span class="numberUnit">件</span>
|
|
</p>
|
|
</div>
|
|
<div v-if="dialogData.deptName == '玻璃配合料制备车间'">
|
|
<p>配粉重量</p>
|
|
<p>
|
|
<span class="numberFont">{{
|
|
dialogData.count
|
|
}}</span
|
|
><span class="numberUnit">kg</span>
|
|
</p>
|
|
</div>
|
|
<div v-if="dialogData.deptName == '办公楼'">
|
|
<p style="font-size: 12px">
|
|
公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价值观，努力成长为具有创新精神和全球视野的光子材料领先企业。
|
|
</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">{{ currentData.deptName }}</p>
|
|
<div class="infoCantier">
|
|
<div class="leftBlock" v-if="currentData.deptName == '办公楼'">
|
|
<img
|
|
src="img/gz_logo.png"
|
|
alt=""
|
|
style="margin-top: 10px"
|
|
/>
|
|
</div>
|
|
<div class="leftBlock" v-else>
|
|
<el-progress
|
|
:width="100"
|
|
type="circle"
|
|
color="rgba(54, 217, 187, 1)"
|
|
:percentage="currentData.percentage"
|
|
id="dashbordProcess"
|
|
>
|
|
<span class="percentage-value" style="font-size: 16px"
|
|
>{{ currentData.percentage }}%</span
|
|
>
|
|
</el-progress>
|
|
<p style="text-align: center">完成进度</p>
|
|
</div>
|
|
<div class="rightBlock">
|
|
<div>
|
|
<p v-if="currentData.deptName !== '办公楼'">昨日产量</p>
|
|
</div>
|
|
<div class="countWrap">
|
|
<div
|
|
v-if="
|
|
currentData.deptName == '光纤预制管生产车间' ||
|
|
currentData.deptName == '光学精密加工车间'
|
|
"
|
|
>
|
|
<p>光纤预制管</p>
|
|
<p>
|
|
<span class="numberFont">{{
|
|
currentData.count_guan
|
|
}}</span
|
|
><span class="numberUnit">件</span>
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
currentData.deptName == '光纤预制棒生产车间' ||
|
|
currentData.deptName == '光学精密加工车间'
|
|
"
|
|
>
|
|
<p>光纤预制棒</p>
|
|
<p>
|
|
<span class="numberFont">{{
|
|
currentData.count_bang
|
|
}}</span
|
|
><span class="numberUnit">件</span>
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="currentData.deptName == '玻璃配合料制备车间'"
|
|
>
|
|
<p>配粉重量</p>
|
|
<p>
|
|
<span class="numberFont">{{
|
|
currentData.count
|
|
}}</span
|
|
><span class="numberUnit">kg</span>
|
|
</p>
|
|
</div>
|
|
<div v-if="currentData.deptName == '办公楼'">
|
|
<p>
|
|
公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价值观，努力成长为具有创新精神和全球视野的光子材料领先企业。
|
|
</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,
|
|
timerData: null,
|
|
start_date: "",
|
|
end_date: "",
|
|
dialogData: {
|
|
deptName: "",
|
|
},
|
|
currentData: {
|
|
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: [null, null, null, null, null, null, null],
|
|
countRateDept10: [null, null, null, null, null, null, null],
|
|
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",
|
|
formatter: "{b}: {c}",
|
|
},
|
|
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: "",
|
|
dept6Obj: {
|
|
deptName: "光学精密加工车间",
|
|
percentage: 100,
|
|
count_bang: 0,
|
|
count_guan: 0,
|
|
},
|
|
dept7Obj: {
|
|
deptName: "光纤预制棒生产车间",
|
|
percentage: 100,
|
|
count_bang: 0,
|
|
},
|
|
dept8Obj: {
|
|
deptName: "玻璃配合料制备车间",
|
|
percentage: 100,
|
|
count: 0,
|
|
},
|
|
dept10Obj: {
|
|
deptName: "光纤预制管生产车间",
|
|
percentage: 100,
|
|
count_guan: 0,
|
|
},
|
|
};
|
|
},
|
|
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();
|
|
//一天的毫秒数
|
|
const ondDayTime = 86400000;
|
|
let cDate = new Date();
|
|
let yesterday = new Date(cDate.getTime() - ondDayTime);
|
|
let week = yesterday.getDay(); //当前时间的week数
|
|
// console.log(week);
|
|
let weekFirst = week - 1; //第一天对应的天数
|
|
let weekLast = 7 - week; //最后一天对应的天数
|
|
if (week == 0) {
|
|
weekFirst = 6;
|
|
weekLast = 0; //周日特殊处理
|
|
} else {
|
|
weekFirst = week - 1;
|
|
weekLast = 7 - week;
|
|
}
|
|
let first = new Date(
|
|
new Date(yesterday.getTime() - weekFirst * ondDayTime)
|
|
); //本周周一
|
|
let last = new Date(
|
|
new Date(yesterday.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);
|
|
}
|
|
this.weekDateList = dateArr;
|
|
this.start_date =
|
|
first.getFullYear() +
|
|
"-" +
|
|
(first.getMonth() + 1) +
|
|
"-" +
|
|
first.getDate();
|
|
this.end_date =
|
|
last.getFullYear() +
|
|
"-" +
|
|
(last.getMonth() + 1) +
|
|
"-" +
|
|
last.getDate();
|
|
this.yesterday =
|
|
yesterday.getFullYear() +
|
|
"-" +
|
|
(yesterday.getMonth() + 1) +
|
|
"-" +
|
|
yesterday.getDate();
|
|
|
|
this.$nextTick(() => {
|
|
this.getDeptDetail();
|
|
that.getsaleOut();
|
|
that.initDomStyle();
|
|
that.initFactory();
|
|
that.timerTime = setInterval(() => {
|
|
that.showTime();
|
|
}, 1000);
|
|
that.notokTimer = setInterval(() => {
|
|
let pieDom = document.getElementById("pie");
|
|
if (pieDom) {
|
|
if (that.deptName == "10车间") {
|
|
that.deptName = "7车间";
|
|
} else {
|
|
that.deptName = "10车间";
|
|
}
|
|
let deptData = [];
|
|
if (that.deptName == "7车间") {
|
|
deptData = that.dept7Data;
|
|
} else {
|
|
deptData = that.dept10Data;
|
|
}
|
|
that.pieoption.series.data = deptData;
|
|
let pieoption = that.pieoption;
|
|
|
|
let pieChart = echarts.init(pieDom);
|
|
pieChart.clear();
|
|
pieChart.setOption(pieoption, true);
|
|
}
|
|
}, 5000);
|
|
that.timerData = setInterval(() => {
|
|
that.getDeptDetail();
|
|
}, 60000);
|
|
that.initChart();
|
|
});
|
|
this.getPlanRate();
|
|
this.getMaterialList();
|
|
},
|
|
methods: {
|
|
//本周6车间交付数----棒管交付数
|
|
getsaleOut() {
|
|
let that = this;
|
|
let obj = {
|
|
query: {
|
|
start_date: that.start_date,
|
|
end_date: that.end_date,
|
|
mio_type: "sale_out",
|
|
material_id: "",
|
|
},
|
|
};
|
|
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车间",
|
|
group_bys_material: "",
|
|
order_bys_material: "",
|
|
select_cols_material: "",
|
|
},
|
|
};
|
|
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 = [null, null, null, null, null, null, null];
|
|
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车间",
|
|
group_bys_material: "",
|
|
order_bys_material: "",
|
|
select_cols_material: "",
|
|
},
|
|
};
|
|
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 = [
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
null,
|
|
];
|
|
let countOk_dept10 = 0;
|
|
if (list.length > 0) {
|
|
list.forEach((item) => {
|
|
let index = that.weekDateList.indexOf(item.日);
|
|
countOkDept10[index] = item.合格数;
|
|
countRateDept10[index] = Math.round(item.合格率);
|
|
countOk_dept10 = countOk_dept10 + item.合格数;
|
|
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.合格数;
|
|
});
|
|
}
|
|
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);
|
|
});
|
|
},
|
|
getMaterialList() {
|
|
let that = this;
|
|
this.$API.mtm.material.list
|
|
.req({ page: 0, type: 20, 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();
|
|
},
|
|
//进度条
|
|
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.getDeptData(that.nodesLists[key]);
|
|
that.dialogData.deptName = 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]) {
|
|
that.getDeptClickData(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.currentData.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;
|
|
window.addEventListener("resize", function () {
|
|
engine.resize();
|
|
});
|
|
},
|
|
getDeptData(name) {
|
|
this.infoVisibel = true;
|
|
// console.log('hoverName', name)
|
|
if (name == "光学精密加工车间") {
|
|
//6
|
|
this.dialogData = this.dept6Obj;
|
|
} else if (name == "光纤预制棒生产车间") {
|
|
//7
|
|
this.dialogData = this.dept7Obj;
|
|
} else if (name == "光纤预制管生产车间") {
|
|
//8
|
|
this.dialogData = this.dept8Obj;
|
|
} else if (name == "玻璃配合料制备车间") {
|
|
//10
|
|
this.dialogData = this.dept10Obj;
|
|
}
|
|
},
|
|
getDeptClickData(name) {
|
|
// console.log('clickName', name)
|
|
if (name == "光学精密加工车间") {
|
|
//6
|
|
this.currentData = this.dept6Obj;
|
|
} else if (name == "光纤预制棒生产车间") {
|
|
//7
|
|
this.currentData = this.dept7Obj;
|
|
} else if (name == "玻璃配合料制备车间") {
|
|
//8
|
|
this.currentData = this.dept8Obj;
|
|
} else if (name == "光纤预制管生产车间") {
|
|
//10
|
|
this.currentData = this.dept10Obj;
|
|
}
|
|
},
|
|
getDeptDetail() {
|
|
let that = this;
|
|
let obj6 = {
|
|
query: {
|
|
start_date: that.yesterday,
|
|
end_date: that.yesterday,
|
|
dept_name: "6车间",
|
|
},
|
|
};
|
|
let obj7 = {
|
|
query: {
|
|
start_date: that.yesterday,
|
|
end_date: that.yesterday,
|
|
dept_name: "7车间",
|
|
},
|
|
};
|
|
let obj8 = {
|
|
handle_date: that.yesterday,
|
|
page: 0,
|
|
mgroup__belong_dept__name: "8车间",
|
|
};
|
|
let obj10 = {
|
|
query: {
|
|
start_date: that.yesterday,
|
|
end_date: that.yesterday,
|
|
dept_name: "10车间",
|
|
},
|
|
};
|
|
that.$API.bi.dataset.exec.req("lineDay", obj6).then((res6) => {
|
|
// console.log('6生产车间昨日统计:', res6);
|
|
let data = res6.data2.ds0;
|
|
let count = 0,
|
|
count_real = 0;
|
|
if (data.length > 0) {
|
|
data.forEach((item) => {
|
|
if (item.物料名.indexOf("棒")) {
|
|
that.dept6Obj.count_bang = item.合格数;
|
|
count += item.合格数;
|
|
count_real += item.生产数;
|
|
}
|
|
if (item.物料名.indexOf("管")) {
|
|
that.dept6Obj.count_guan = item.合格数;
|
|
count += item.合格数;
|
|
count_real += item.生产数;
|
|
}
|
|
});
|
|
if (count_real !== 0) {
|
|
that.dept6Obj.percentage =
|
|
(count / count_real).toFixed(2) * 100 + "%";
|
|
}
|
|
}
|
|
});
|
|
that.$API.bi.dataset.exec.req("lineDay", obj7).then((res7) => {
|
|
// console.log('7生产车间昨日统计:', res7);
|
|
let data = res7.data2.ds0;
|
|
if (data.length > 0) {
|
|
that.dept7Obj.count_bang = data[0].合格数;
|
|
if (data[0].生产数 !== 0) {
|
|
that.dept7Obj.percentage =
|
|
(data[0].合格数 / data[0].生产数).toFixed(2) * 100 +
|
|
"%";
|
|
}
|
|
}
|
|
});
|
|
//8车间配粉接口调用
|
|
that.$API.wpm.mlog.list.req(obj8).then((res8) => {
|
|
// console.log('8生产车间昨日统计:', res8);
|
|
let count = 0;
|
|
if (res8.length > 0) {
|
|
res8.forEach((item) => {
|
|
let itemcount =
|
|
item.count_real * item.count_real_eweight;
|
|
count += itemcount;
|
|
});
|
|
}
|
|
that.dept8Obj.count = count;
|
|
});
|
|
that.$API.bi.dataset.exec.req("lineDay", obj10).then((res10) => {
|
|
// console.log('10生产车间昨日统计:', res10);
|
|
let data = res10.data2.ds0;
|
|
if (data.length > 0) {
|
|
that.dept10Obj.count_guan = data[0].合格数;
|
|
if (data[0].生产数 !== 0) {
|
|
that.dept10Obj.percentage =
|
|
(data[0].合格数 / data[0].生产数).toFixed(2) * 100 +
|
|
"%";
|
|
}
|
|
}
|
|
});
|
|
},
|
|
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.currentData.deptName = "";
|
|
},
|
|
},
|
|
beforeUnmount() {
|
|
let that = this;
|
|
clearInterval(that.timerTime);
|
|
clearInterval(that.timerData);
|
|
clearInterval(that.notokTimer);
|
|
that.timerTime = null;
|
|
that.timerData = null;
|
|
that.notokTimer = null;
|
|
},
|
|
beforeDestoryed() {
|
|
let that = this;
|
|
clearInterval(that.timerTime);
|
|
clearInterval(that.timerData);
|
|
clearInterval(that.notokTimer);
|
|
that.timerTime = null;
|
|
that.timerData = null;
|
|
that.notokTimer = 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, 0.5),
|
|
rgba(31, 44, 50, 0.5)
|
|
);
|
|
}
|
|
|
|
.inforBlock.clickBlock {
|
|
left: 50%;
|
|
width: 520px;
|
|
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>
|