2359 lines
56 KiB
Vue
2359 lines
56 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 id="mainBlock">
|
||
<el-row style="height: 100%">
|
||
<div class="leftPosition">
|
||
<div class="leftPositionContainer">
|
||
<div class="flexItem" style="flex: 1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleIcon"></div>
|
||
<div>本周交付数</div>
|
||
</div>
|
||
<div id="line1"></div>
|
||
</div>
|
||
<div class="flexItem" style="flex: 1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleIcon"></div>
|
||
<div>本周合格数</div>
|
||
</div>
|
||
<div id="bar1"></div>
|
||
</div>
|
||
<div class="flexItem" style="flex: 1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleIcon"></div>
|
||
<div>本周合格率</div>
|
||
</div>
|
||
<div id="line2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-col :span="24">
|
||
<div class="model">
|
||
<div class="modelContainer">
|
||
<div class="modeltopTitle">
|
||
<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 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 class="progressNum">{{ percentage }}%</div>
|
||
<div class="progressText">工厂模型加载中</div>
|
||
</template>
|
||
</el-progress>
|
||
</div>
|
||
<canvas id="renderCanvas"></canvas>
|
||
</div>
|
||
</el-col>
|
||
<div class="rightPosition">
|
||
<div class="rightPositionContainer">
|
||
<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"></div>
|
||
</div>
|
||
<div class="flexItem" style="flex: 1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleIcon"></div>
|
||
<div>本周计划完成度</div>
|
||
</div>
|
||
<div id="line3"></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 config from "@/config";
|
||
import "animate.css";
|
||
|
||
let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
|
||
// 需要时动态加载 Babylon.js 和其他依赖
|
||
const loadBabylon = async () => {
|
||
if (BABYLON) return;
|
||
BABYLON = await import('babylonjs');
|
||
BABYLON_GUI = await import('babylonjs-gui');
|
||
BABYLON_GRID = await import('@/utils/gridMaterial');
|
||
BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
|
||
|
||
// 配置 Draco 编解码器
|
||
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";
|
||
|
||
// 加载 Babylon.js 加载器
|
||
await import('babylonjs-loaders');
|
||
};
|
||
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_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,
|
||
},
|
||
isUnmounted: false,
|
||
pieChart: null,
|
||
line1Chart: null,
|
||
line2Chart: null,
|
||
line3Chart: null,
|
||
bar1Chart: null,
|
||
onResize: null,
|
||
onCanvasMouseMove: null,
|
||
onCanvasClick: null,
|
||
canvasEl: null,
|
||
};
|
||
},
|
||
mounted() {
|
||
loadBabylon().then(() => {
|
||
if (this.isUnmounted) return;
|
||
this.initView();
|
||
})
|
||
},
|
||
methods: {
|
||
initView() {
|
||
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(() => {
|
||
if (that.isUnmounted) return;
|
||
let pieDom = document.getElementById("pie");
|
||
if (!pieDom) return;
|
||
if (that.deptName == "10车间") {
|
||
that.deptName = "7车间";
|
||
} else {
|
||
that.deptName = "10车间";
|
||
}
|
||
let deptData =
|
||
that.deptName == "7车间" ? that.dept7Data : that.dept10Data;
|
||
that.pieoption.series.data = deptData;
|
||
if (!that.pieChart || that.pieChart.isDisposed()) {
|
||
that.pieChart = echarts.init(pieDom);
|
||
}
|
||
that.pieChart.setOption(that.pieoption, true);
|
||
}, 60000);
|
||
that.timerData = setInterval(() => {
|
||
that.getDeptDetail();
|
||
}, 60000);
|
||
that.initChart();
|
||
});
|
||
this.getPlanRate();
|
||
this.getMaterialList();
|
||
},
|
||
//本周棒管交付数
|
||
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.getCountDept7();
|
||
//左1---本周交付数
|
||
let chartDom = document.getElementById("line1");
|
||
if (!chartDom) return;
|
||
chartDom.style.height = this.blockHeight;
|
||
if (!that.line1Chart || that.line1Chart.isDisposed()) {
|
||
that.line1Chart = echarts.init(chartDom);
|
||
}
|
||
let myChart = that.line1Chart;
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
},
|
||
},
|
||
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)",
|
||
},
|
||
]
|
||
),
|
||
},
|
||
},
|
||
],
|
||
},
|
||
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",
|
||
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.saleOutdept6,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
});
|
||
},
|
||
//获取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;
|
||
}
|
||
|
||
});
|
||
},
|
||
//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: "",
|
||
group_bys_material_name: "",
|
||
order_bys_material_name: "",
|
||
select_cols_material_name: ""
|
||
},
|
||
};
|
||
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: "",
|
||
group_bys_material_name: "",
|
||
order_bys_material_name: "",
|
||
select_cols_material_name: ""
|
||
},
|
||
};
|
||
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");
|
||
if (!line3Dom) return;
|
||
line3Dom.style.height = this.blockHeight;
|
||
if (!that.line3Chart || that.line3Chart.isDisposed()) {
|
||
that.line3Chart = echarts.init(line3Dom);
|
||
}
|
||
let line3Chart = that.line3Chart;
|
||
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,
|
||
},
|
||
},
|
||
],
|
||
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)",
|
||
},
|
||
]
|
||
),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
line3Chart.setOption(line3option);
|
||
});
|
||
},
|
||
getMaterialList() {
|
||
let that = this;
|
||
let obj = {
|
||
query: {
|
||
"select_dept": "",
|
||
"groupby_dept": "",
|
||
"material_types": "20",
|
||
"select_material": "material.name as material_name",
|
||
"groupby_material": "material.name",
|
||
"select_material_name": "",
|
||
"groupby_material_name": ""
|
||
}
|
||
};
|
||
that.$API.bi.dataset.exec.req("materialCount", obj).then((res) => {
|
||
let data = [];
|
||
let list = res.data2.ds0;
|
||
if (list.length > 0) {
|
||
list.forEach((item) => {
|
||
let arr = [];
|
||
arr[0] = item.material_name ;
|
||
arr[1] = item.count;
|
||
data.push(arr);
|
||
});
|
||
}
|
||
that.taskBoard.data = 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 = 1.5;
|
||
// 全屏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 = config.HOST_URL + "/media/model/photon4.glb";
|
||
// 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);
|
||
that.onCanvasMouseMove = (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("mousemove", that.onCanvasMouseMove);
|
||
that.onCanvasClick = (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
|
||
);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
canvas.addEventListener("click", that.onCanvasClick);
|
||
return scene;
|
||
};
|
||
const scene = createScene(); //Call the createScene function
|
||
// scene.debugLayer.show()
|
||
engine.runRenderLoop(function () {
|
||
scene.render();
|
||
});
|
||
this.engine = engine;
|
||
this.scene = scene;
|
||
this.canvasEl = canvas;
|
||
this.onResize = () => engine.resize();
|
||
window.addEventListener("resize", this.onResize);
|
||
},
|
||
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");
|
||
if (!bar1) return;
|
||
bar1.style.height = this.blockHeight;
|
||
if (!that.bar1Chart || that.bar1Chart.isDisposed()) {
|
||
that.bar1Chart = echarts.init(bar1);
|
||
}
|
||
let bar1Chart = that.bar1Chart;
|
||
let bar1option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: 5,
|
||
right: 5,
|
||
data: [
|
||
{
|
||
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: 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: 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,
|
||
},
|
||
],
|
||
};
|
||
bar1Chart.setOption(bar1option);
|
||
//左3
|
||
let line2Dom = document.getElementById("line2");
|
||
if (!line2Dom) return;
|
||
line2Dom.style.height = this.blockHeight;
|
||
if (!that.line2Chart || that.line2Chart.isDisposed()) {
|
||
that.line2Chart = echarts.init(line2Dom);
|
||
}
|
||
let line2Chart = that.line2Chart;
|
||
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: {
|
||
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,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "预制管",
|
||
type: "line",
|
||
stack: "Total",
|
||
symbolSize: 8, //设置折线上圆点大小
|
||
symbol: "circle",
|
||
itemStyle: {
|
||
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,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
line2Chart.setOption(line2option);
|
||
//饼状图
|
||
let pieDom = document.getElementById("pie");
|
||
if (!pieDom) return;
|
||
pieDom.style.height = this.blockHeight;
|
||
if (!that.pieChart || that.pieChart.isDisposed()) {
|
||
that.pieChart = echarts.init(pieDom);
|
||
}
|
||
let pieChart = that.pieChart;
|
||
let pieoption = {
|
||
color: [
|
||
"rgb(237,224,45)",
|
||
"rgb(155,248,249)",
|
||
"rgb(110,181,249)",
|
||
"rgb(205,248,248)",
|
||
"rgb(248,189,118)",
|
||
"rgb(3,195,198)",
|
||
],
|
||
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%"],
|
||
itemStyle: {
|
||
borderRadius: 2,
|
||
},
|
||
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() {
|
||
this.isUnmounted = true;
|
||
// 定时器
|
||
clearInterval(this.timerTime);
|
||
clearInterval(this.timerData);
|
||
clearInterval(this.notokTimer);
|
||
clearInterval(this.heightTimer);
|
||
this.timerTime = null;
|
||
this.timerData = null;
|
||
this.notokTimer = null;
|
||
this.heightTimer = null;
|
||
// echarts 实例
|
||
[
|
||
this.pieChart,
|
||
this.line1Chart,
|
||
this.line2Chart,
|
||
this.line3Chart,
|
||
this.bar1Chart,
|
||
].forEach((c) => {
|
||
if (c && !c.isDisposed()) c.dispose();
|
||
});
|
||
this.pieChart = this.line1Chart = this.line2Chart = this.line3Chart = this.bar1Chart = null;
|
||
// 事件监听器
|
||
if (this.onResize) {
|
||
window.removeEventListener("resize", this.onResize);
|
||
this.onResize = null;
|
||
}
|
||
if (this.canvasEl) {
|
||
if (this.onCanvasMouseMove) {
|
||
this.canvasEl.removeEventListener("mousemove", this.onCanvasMouseMove);
|
||
}
|
||
if (this.onCanvasClick) {
|
||
this.canvasEl.removeEventListener("click", this.onCanvasClick);
|
||
}
|
||
this.canvasEl = null;
|
||
}
|
||
this.onCanvasMouseMove = null;
|
||
this.onCanvasClick = null;
|
||
// babylon 引擎
|
||
if (this.scene) {
|
||
try { this.scene.dispose(); } catch (e) {}
|
||
this.scene = null;
|
||
}
|
||
if (this.engine) {
|
||
try { this.engine.stopRenderLoop(); } catch (e) {}
|
||
try { this.engine.dispose(); } catch (e) {}
|
||
this.engine = 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;
|
||
}
|
||
.leftPosition{
|
||
position: absolute;
|
||
left: 0;
|
||
width: 20%;
|
||
z-index: 10
|
||
}
|
||
.leftPositionContainer{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
padding: 0 10px;
|
||
}
|
||
#line1,#bar1,#line2,#pie,#line3{
|
||
width: 100%;
|
||
height: 92%;
|
||
background: rgba(9, 31, 43, 0.5);
|
||
border-radius: 20px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.rightPosition{
|
||
position: absolute;
|
||
right: 0;
|
||
width: 20%;
|
||
z-index: 10;
|
||
}
|
||
.rightPositionContainer{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
padding: 0 10px;
|
||
}
|
||
#mainBlock{
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.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%;
|
||
}
|
||
.modelContainer{
|
||
position: absolute;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.modeltopTitle{
|
||
margin: 5px 0 50px 0;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
.progressNum{
|
||
font-size: 30px;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
.progressText{
|
||
font-size: 18px;
|
||
color: white;
|
||
margin-top: 10px;
|
||
}
|
||
#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: 12vw;
|
||
}
|
||
|
||
.totalNumWrap_green > .totalNumber {
|
||
color: rgb(5, 245, 2);
|
||
}
|
||
|
||
.totalNum_orange > .totalNumber {
|
||
color: orange;
|
||
}
|
||
|
||
.totalNum_blue > .totalNumber {
|
||
color: rgb(2, 245, 242);
|
||
}
|
||
|
||
.totalNumber {
|
||
font-size: 2vw;
|
||
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>
|