factory_web/src/views/bigScreen/index_photon.vue

1555 lines
58 KiB
Vue

<template>
<el-container class="container">
<el-header class="pageHeader">
<span class="top-line top-line-left"></span>
中建材光子科技有限公司
<span class="top-line top-line-right"></span>
</el-header>
<el-main style="padding:0;overflow: hidden;" id="mainBlock">
<el-row style="height:100%">
<div style="position: absolute;left: 0;width:20%;z-index:10">
<div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
<div class="flexItem" style="flex:1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周交付数</div>
</div>
<div id="line1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周合格数</div>
</div>
<div id="bar1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周合格率</div>
</div>
<div id="line2" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
</div>
</div>
</div>
<el-col :span="24">
<div class="model">
<div style="position: absolute;width: 100%;text-align: center;">
<div style="margin:5px 0 50px 0;color: #fff;font-size: 12px;font-weight: bold;">
<img src="img/photon_top_line.png">
<span>枣庄</span>
{{ currentDay }}{{ currentWeek }}{{ currentTime }}
<img src="img/photon_top_line.png" style="transform: rotateY(180deg);">
</div>
<div class="totalNumContnier">
<div class="totalNumWrap totalNum_orange">
<img class="" src="img/number_bg_orange.png">
<span class="totalNumText">AVG合格数</span>
<div class="totalNumber">36520</div>
</div>
<div class="totalNumWrap totalNumWrap_green">
<img src="img/number_bg_green.png">
<span class="totalNumText">预制棒合格数</span>
<div class="totalNumber">36520</div>
</div>
<div class="totalNumWrap totalNum_blue">
<img src="img/number_bg_blue.png">
<span class="totalNumText">预制管合格数</span>
<div class="totalNumber">36520</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>
</div>
<div id="pie" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周计划完成度</div>
</div>
<div id="line3" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>库存情况</div>
</div>
<dv-scroll-board id="scrollTable" :config="taskBoard"
:style="{ 'width': '100%', 'height': blockTableHeight,'margin-top':'5px'}" />
</div>
</div>
</div>
</el-row>
</el-main>
<div id="inforBlock" class="inforBlock" v-show="infoVisibel">
<div class="border_corner border_left_top"></div>
<div class="border_corner border_right_top"></div>
<div class="border_corner border_left_bottom"></div>
<div class="border_corner border_right_bottom"></div>
<p class="title">{{dialogData.deptName}}</p>
<div class="infoCantier">
<div class="leftBlock">
<el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
id="dashbordProcess" />
<span>完成进度</span>
</div>
<div class="rightBlock">
<div>
<p>昨日产量</p>
<p> <span class="numberFont">390</span><span class="numberUnit"></span></p>
</div>
<div class="countWrap">
<div>
<p>预制管</p>
<p> <span class="numberFont">390</span><span class="numberUnit"></span></p>
</div>
<div>
<p>预制棒</p>
<p> <span class="numberFont">390</span><span class="numberUnit"></span></p>
</div>
<!-- <div>
<p>总量</p>
<p> <span class="numberFont">140</span><span class="numberUnit"></span></p>
</div> -->
</div>
</div>
</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";
import 'babylonjs-loaders';
import 'animate.css';
export default {
data() {
return {
blockHeight: null,
taskBoard: {
header: ['名称', '规格', '数量'],
headerBGC: 'rgb(10,63,68)',
// waitTime: 1000,
columnWidth: [1, 1, 1],
data: [
['ZB2-1', '6车间', '<span style="color:green;">30000</span>'],
['ZB2-2', '7车间', '<span style="color:green;">40000</span>'],
['ZB2-3', '8车间', '<span style="color:green;">50000</span>'],
['ZJ2-1', '8车间', '<span style="color:green;">35000</span>'],
['ZJ2-2', '10车间', '<span style="color:green;">30000</span>'],
['ZJ2-3', '10车间', '<span style="color:red;">100</span>'],
['ZT2-1', '10车间', '<span style="color:red;">100</span>'],
['ZT2-2', '10车间', '<span style="color:red;">100</span>'],
['ZT2-3', '10车间', '<span style="color:red;">100</span>'],
],
index: true,
columnWidth: [50],
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,
updateTime: '2023-08-17 16:00:00',
nodesLists: {
'单身宿舍.004_primitive3': { total: '0', elec: '0', name: '办公楼' },
'立方体.024_primitive1': { total: '0', elec: '0', name: '成型10车间' },
'立方体.034_primitive1': { total: '0', elec: '0', name: '配料8车间' },
'立方体.026_primitive1': { total: '0', elec: '0', name: '成型7车间' },
'立方体.025_primitive1': { total: '0', elec: '0', name: '加工6车间' },
},
currentTime:'',
currentWeek:'',
currentDay:'',
timerTime:null,
start_date:'',
end_date:'',
dialogData:{
deptName:'办公楼'
},
}
},
mounted() {
let that = this;
let height = document.getElementById('mainBlock').clientHeight;
let height0 = height / 3 - 55;
let height1 = height0- 20;
this.blockHeight = height0 + 'px';
this.blockTableHeight = height1 + 'px';
document.getElementById('scrollTable').style.height = height1 + 'px'
this.showTime();
this.$nextTick(() => {
that.initChart();
that.initDomStyle();
that.initFactory();
that.timerTime = setInterval(() => {
that.showTime();
}, 1000);
})
//一天的毫秒数
const ondDayTime = 86400000
let cDate = new Date();
let week = cDate.getDay();//当前时间的week数
// let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
let weekFirst = week-1;//第一天对应的天数
let weekLast = 7-week;//最后一天对应的天数
let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
console.log(this.start_date)
console.log(this.end_date);
this.getsaleOut();
},
methods: {
getsaleOut(){
let that = this;
let obj ={
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
};
that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
console.log(res);
debugger;
});
},
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 = 0.8;
// 全屏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='80px';
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/photon3.glb";
BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
console.log(scene)
//关闭灯光
// scene.lights[1].setEnabled(false);
engine.hideLoadingUI()
// for (let key in that.nodesLists) {
// // const value = that.nodesLists[key];
// const mesh = scene.getMeshByName(key);
// if (mesh) {
// console.log('000000000000');
// console.log(mesh);
// mesh.actionManager.registerAction(
// // new BABYLON.ExecuteCodeAction(trigger, func, condition)
// )
// mesh.onPointerDownObservable.add(() => {
// console.log('111111111111');
// console.log(camera.target);
// console.log(mesh.position);
// debugger;
// if (camera.target != mesh.position) {
// // console.log('fly to')
// // 计算新的相机位置
// let position = mesh._parentNode._position
// if(mesh._parentNode.id=='__root__'){
// position = mesh.position
// }
// const cameraPosition = new BABYLON.Vector3(
// mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
// mesh.position.y + 9 * Math.cos(camera.beta),
// mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
// );
// var ease = new BABYLON.CubicEase();
// ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
// BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
// BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
// }
// })
// }
// }
},
//进度条
function (evt) {
var loadedPercent = 0;
if (evt.lengthComputable) {
loadedPercent = parseInt(evt.loaded * 100 / evt.total);
} else {
var dlCount = evt.loaded / (1024 * 1024);
loadedPercent = Math.floor(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='80px';
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='80px';
control_main.addControl(header);
// 添加抓取事件
const hl1 = new BABYLON.HighlightLayer("hl1", 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;
// if (camera.target != mesh.position) {
// // console.log('fly to')
// // 计算新的相机位置
// let position = mesh._parentNode._position
// if(mesh._parentNode.id=='__root__'){
// position = mesh.position
// }
// const cameraPosition = new BABYLON.Vector3(
// mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
// mesh.position.y + 9 * Math.cos(camera.beta),
// mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
// );
// var ease = new BABYLON.CubicEase();
// ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
// BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
// BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
// }
highlightLayer.removeAllMeshes();
let key = mesh.name;
if (that.nodesLists[key]) {
that.getDeptDetail(that.nodesLists[key].name)
//单身宿舍.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;
that.infoVisibel = 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;
if (camera.target != mesh.position) {
console.log('fly to')
// 计算新的相机位置
let position = mesh._parentNode._position
if (mesh._parentNode.id == '__root__') {
position = mesh.position
}
const cameraPosition = new BABYLON.Vector3(
mesh.position.x + 2.5 * Math.sin(camera.beta) * Math.cos(1.8*Math.PI),
mesh.position.y + 2.5 * Math.cos(camera.beta),
mesh.position.z + 2.5 * Math.sin(camera.beta) * Math.sin(1.8*Math.PI)
);
var ease = new BABYLON.CubicEase();
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0,ease);
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
}
}
});
return scene;
};
const scene = createScene(); //Call the createScene function
// scene.debugLayer.show()
engine.runRenderLoop(function () {
scene.render();
});
this.engine = engine;
this.scene = scene;
console.log('scene:',scene)
window.addEventListener("resize", function () {
engine.resize();
});
},
getDeptDetail(name){
this.dialogData.deptName = name;
},
initChart() {
//左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)'
}])
},
}],
},
toolbox: {
feature: {
// saveAsImage: {}
}
},
grid: {
left: '2%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
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: [140, 232, 101, 264, 90, 340, 250]
},
{
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: [120, 282, 111, 234, 220, 340, 310]
},
]
};
myChart.setOption(option);
//左边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: [120, 132, 101, 134, 90, 230, 300]
},
{
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: [220, 182, 191, 234, 290, 330, 200]
},
{
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: [220, 182, 191, 234, 290, 330, 150]
}
]
};
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',
boundaryGap: false,
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的颜色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'orange'
},
{
offset: 1,
color: 'yellow'
}])
}
},
smooth: 0.5, // 设置折线弧度
data: [75, 60 ,80 ,78, 66 , 71, 81],
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的颜色
normal: {
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: [65, 50 ,70 ,68, 55 , 60, 69],
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 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'
},
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: [220, 250, 280, 290, 250, 300, 210],
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的颜色
normal: {
color: 'rgb(255,120,0)'
}
},
lineStyle: {
color: 'rgb(255,120,0)'
},
data: [63, 80, 71, 82, 60, 70, 85],
}
]
};
line3Chart.setOption(line3option);
//饼状图
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: 10,
// top: 'bottom',
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: {
// type: [6]
},
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: [
{ value: 250, name: '合格' },
{ value: 8, name: '椭圆弯曲' },
{ value: 0, name: '大小头' },
{ value: 2, name: '偏壁' },
{ value: 6, name: '结石气线' },
]
}
]
};
pieChart.setOption(pieoption);
},
},
beforeDestoryed() {
clearInterval(timerTime);
this.timerTime = null;
},
}
</script>
<style scoped>
/* @font-face {
font-family: 'youShe';
src: url('./youShe.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} */
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
}
.container {
background: url('/public/img/photon_bg.png') no-repeat;
background-size: cover;
}
.pageHeader {
/* height: 70px; */
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;
/* background-color:rgb(10,63,68)!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;
}
.inforBlock {
left: 60%;
top: 30%;
width: 420px;
height: 150px;
position: absolute;
font-weight: 500;
color: #fff;
padding: 20px;
font-size: 14px;
box-sizing: border-box;
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
/* border:1px solid rgba(1,235,239,.2); */
.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);
}
.border_left_top {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
.border_right_top {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
}
.border_left_bottom {
bottom: 0;
left: 0;
border-right: none;
border-top: none;
}
.border_right_bottom {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
.title {
font-size: 20px;
font-weight: 600;
position: absolute;
top: -45px;
text-align: center;
width: 100%;
left: 0;
/* margin-bottom:20px;
display: inline-block;
border-bottom: 3px solid green;
padding: 0 5px 5px; */
}
.infoCantier {
display: flex;
.leftBlock {
width: 100px;
margin-right: 30px;
}
.rightBlock {
display: flex;
flex-direction: column;
justify-content: space-between;
.countWrap {
display: flex;
justify-content: space-between;
width: 280px;
margin-top: 10px
}
}
}
}
.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;
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: 16px;
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
}
</style>