数据大屏

This commit is contained in:
shijing 2023-11-23 11:25:33 +08:00
parent 1e18828985
commit 9682eadf4f
1 changed files with 400 additions and 355 deletions

View File

@ -125,15 +125,43 @@
<p>预制棒</p> <p>预制棒</p>
<p> <span class="numberFont">390</span><span class="numberUnit"></span></p> <p> <span class="numberFont">390</span><span class="numberUnit"></span></p>
</div> </div>
<!-- <div>
<p>总量</p>
<p> <span class="numberFont">140</span><span class="numberUnit"></span></p>
</div> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
<div class="border_corner border_left_top"></div>
<div class="border_corner border_right_top"></div>
<div class="border_corner border_left_bottom"></div>
<div class="border_corner border_right_bottom"></div>
<p class="title">{{currentObj.deptName}}</p>
<div class="infoCantier">
<div class="leftBlock">
<el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
id="dashbordProcess" />
<p style="text-align:center">完成进度</p>
</div>
<div class="rightBlock">
<div>
<p>昨日产量</p>
<p> <span class="numberFont">390</span><span class="numberUnit"></span></p>
</div>
<div class="countWrap">
<div>
<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>
</div>
<CircleClose class="circleClose" @click="circleClose"/>
</div>
</div>
</el-container> </el-container>
</template> </template>
<script> <script>
@ -183,14 +211,16 @@ export default {
loadedPercent: 0, loadedPercent: 0,
currentLightMesh: null, currentLightMesh: null,
infoVisibel: false, infoVisibel: false,
clickVisible:false,
updateTime: '2023-08-17 16:00:00', updateTime: '2023-08-17 16:00:00',
nodesLists: { nodesLists: {
'单身宿舍.004_primitive3': { total: '0', elec: '0', name: '办公楼' }, '单身宿舍.004_primitive3': '办公楼',
'立方体.024_primitive1': { total: '0', elec: '0', name: '成型10车间' }, '立方体.024_primitive1':'成型10车间',
'立方体.034_primitive1': { total: '0', elec: '0', name: '配料8车间' }, '立方体.034_primitive1': '配料8车间',
'立方体.026_primitive1': { total: '0', elec: '0', name: '成型7车间' }, '立方体.026_primitive1': '成型7车间',
'立方体.025_primitive1': { total: '0', elec: '0', name: '加工6车间' }, '立方体.025_primitive1': '加工6车间',
}, },
objs:{ total: '0', elec: '0' },
currentTime:'', currentTime:'',
currentWeek:'', currentWeek:'',
currentDay:'', currentDay:'',
@ -198,8 +228,12 @@ export default {
start_date:'', start_date:'',
end_date:'', end_date:'',
dialogData:{ dialogData:{
deptName:'办公楼' deptName:''
}, },
currentObj:{
deptName:''
},
heightTimer:null,
} }
}, },
mounted() { mounted() {
@ -230,8 +264,6 @@ export default {
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));// let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//
this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate(); this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate(); this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
console.log(this.start_date)
console.log(this.end_date);
this.getsaleOut(); this.getsaleOut();
}, },
methods: { methods: {
@ -241,15 +273,15 @@ export default {
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"}, query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
}; };
that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => { that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
console.log(res); // console.log(res);
debugger; // debugger;
}); });
}, },
showTime() { showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss'); this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week'); this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日') this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
}, },
initDomStyle() { initDomStyle() {
// //
var windowHeight = window.innerHeight; var windowHeight = window.innerHeight;
@ -310,7 +342,7 @@ export default {
camera.upperRadiusLimit = 6; camera.upperRadiusLimit = 6;
// //
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0)); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
light.intensity = 0.8; light.intensity = 3;
// GUI // GUI
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI"); const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
that.myui = advancedTexture; that.myui = advancedTexture;
@ -329,7 +361,7 @@ export default {
button_main.color = "white"; button_main.color = "white";
button_main.cornerRadius = 20; button_main.cornerRadius = 20;
button_main.background = "green"; button_main.background = "green";
button_main.top='80px'; button_main.top='100px';
button_main.left='0px'; button_main.left='0px';
control_main.addControl(button_main) control_main.addControl(button_main)
button_main.onPointerClickObservable.add(() => { button_main.onPointerClickObservable.add(() => {
@ -358,47 +390,59 @@ export default {
mesh_name.color = 'white'; mesh_name.color = 'white';
mesh_name.fontSize = '14px'; mesh_name.fontSize = '14px';
mesh_rect.addControl(mesh_name); mesh_rect.addControl(mesh_name);
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon4.glb";
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb"; // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) { // BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
console.log(scene) // console.log(scene)
// //
// scene.lights[1].setEnabled(false); // scene.lights[1].setEnabled(false);
engine.hideLoadingUI() engine.hideLoadingUI()
// for (let key in that.nodesLists) { // let arrKey = [];
// // const value = that.nodesLists[key]; // for (let key in that.nodesLists) {
// const mesh = scene.getMeshByName(key); // arrKey.push(key);
// if (mesh) { // }
// console.log('000000000000'); // let heightI = 0;
// console.log(mesh); // that.heightTimer = setInterval(() => {
// let heightKey = arrKey[heightI];
// mesh.actionManager.registerAction( // const meshTimer = scene.getMeshByName(heightKey);
// // new BABYLON.ExecuteCodeAction(trigger, func, condition) // const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);
// )
// mesh.onPointerDownObservable.add(() => { // if (meshTimer) {
// console.log('111111111111'); // if (that.nodesLists[heightKey]) {
// console.log(camera.target); // hl1Timer.removeAllMeshes();
// console.log(mesh.position); // if (highlightLayer) {
// debugger; // highlightLayer.removeAllMeshes();
// if (camera.target != mesh.position) { // }
// // console.log('fly to') // that.getDeptDetail(that.nodesLists[heightKey])
// // // // meshTimer
// let position = mesh._parentNode._position // highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
// if(mesh._parentNode.id=='__root__'){ // that.currentLightMesh = meshTimer;
// position = mesh.position // mesh_rect.linkWithMesh(meshTimer);
// } // let name = meshTimer.name.split('_')[0];
// const cameraPosition = new BABYLON.Vector3( // mesh_name.text = name;
// mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI), // that.infoVisibel = true;
// mesh.position.y + 9 * Math.cos(camera.beta), // hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
// mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI) // hl1Timer.blurVerticalSize = 5;
// ); // hl1Timer.blurHorizontalSize = 5;
// var ease = new BABYLON.CubicEase(); // function worldToScreen(point, camera, scene, engine) {
// ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); // return BABYLON.Vector3.Project(point,
// BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease); // BABYLON.Matrix.Identity(),
// BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease); // scene.getTransformMatrix(),
// } // camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
// }) // }
// } // var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
// } // let infoBlock = document.getElementById('inforBlock');
// infoBlock.style.left = (Math.floor(pos.x)) + 'px';
// infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
// }
// }
// heightI+=1;
// // if(heightI>4){
// // heightI=0
// // }
// }, 1000);
}, },
// //
function (evt) { function (evt) {
@ -418,7 +462,7 @@ export default {
checkbox.isChecked = false; checkbox.isChecked = false;
checkbox.marginLeft = '16px' checkbox.marginLeft = '16px'
checkbox.color = "green"; checkbox.color = "green";
checkbox.top='80px'; checkbox.top='100px';
checkbox.onIsCheckedChangedObservable.add(function (value) { checkbox.onIsCheckedChangedObservable.add(function (value) {
if (value) { if (value) {
camera.useAutoRotationBehavior = true; camera.useAutoRotationBehavior = true;
@ -432,10 +476,11 @@ export default {
header.width = "80px"; header.width = "80px";
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
header.color = "white"; header.color = "white";
header.top='80px'; header.top='100px';
control_main.addControl(header); control_main.addControl(header);
// //
const hl1 = new BABYLON.HighlightLayer("hl1", scene); const hl1 = new BABYLON.HighlightLayer("hl1", scene);
const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
canvas.addEventListener('mousemove', (event) => { canvas.addEventListener('mousemove', (event) => {
// 使 scene.pick // 使 scene.pick
const pickResult = scene.pick(scene.pointerX, scene.pointerY); const pickResult = scene.pick(scene.pointerX, scene.pointerY);
@ -447,27 +492,12 @@ export default {
} }
if (pickResult.hit) { if (pickResult.hit) {
const mesh = pickResult.pickedMesh; 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(); highlightLayer.removeAllMeshes();
let key = mesh.name; let key = mesh.name;
if (that.nodesLists[key]) { if (that.nodesLists[key]) {
that.getDeptDetail(that.nodesLists[key].name) hl1.removeAllMeshes();
highlightLayer.removeAllMeshes();
that.getDeptDetail(that.nodesLists[key])
//宿.003_primitive3 //宿.003_primitive3
// mesh // mesh
highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9)); highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
@ -476,7 +506,7 @@ export default {
let name = mesh.name.split('_')[0]; let name = mesh.name.split('_')[0];
mesh_name.text = name; mesh_name.text = name;
// mesh_rect.isVisible = true; // mesh_rect.isVisible = true;
that.infoVisibel = true;
hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true); hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
hl1.blurVerticalSize = 5; hl1.blurVerticalSize = 5;
hl1.blurHorizontalSize = 5; hl1.blurHorizontalSize = 5;
@ -500,22 +530,33 @@ export default {
const pickResult = scene.pick(scene.pointerX, scene.pointerY); const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) { if (pickResult.hit) {
const mesh = pickResult.pickedMesh; const mesh = pickResult.pickedMesh;
if (camera.target != mesh.position) { console.log('mesh',mesh)
console.log('fly to') if(that.nodesLists[mesh.name]){
// hl1Click.removeAllMeshes();
let position = mesh._parentNode._position highlightLayer.removeAllMeshes();
if (mesh._parentNode.id == '__root__') {
position = mesh.position 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);
const cameraPosition = new BABYLON.Vector3( hl1Click.blurVerticalSize = 5;
mesh.position.x + 2.5 * Math.sin(camera.beta) * Math.cos(1.8*Math.PI), hl1Click.blurHorizontalSize = 5;
mesh.position.y + 2.5 * Math.cos(camera.beta), that.currentObj.deptName = that.nodesLists[mesh.name];
mesh.position.z + 2.5 * Math.sin(camera.beta) * Math.sin(1.8*Math.PI) if (camera.target != mesh.position) {
); that.clickVisible = true;
var ease = new BABYLON.CubicEase(); //
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); let position = mesh._parentNode._position
BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0,ease); if (mesh._parentNode.id == '__root__') {
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease); 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);
}
} }
} }
}); });
@ -528,13 +569,18 @@ export default {
}); });
this.engine = engine; this.engine = engine;
this.scene = scene; this.scene = scene;
console.log('scene:',scene) // console.log('scene:',scene)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
engine.resize(); engine.resize();
}); });
}, },
getDeptDetail(name){ getDeptDetail(name){
this.dialogData.deptName = name; if(this.currentObj.deptName==name&&this.clickVisible){
this.dialogData.deptName = name;
}else{
this.infoVisibel = true;
this.dialogData.deptName = name;
}
}, },
initChart() { initChart() {
//1 //1
@ -621,7 +667,7 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name: "交付数", name: "交付数(个)",
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color: '#ffffff' color: '#ffffff'
@ -793,7 +839,7 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name: "(个)", name: "合格数(个)",
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color: '#ffffff' color: '#ffffff'
@ -943,7 +989,7 @@ export default {
}, },
yAxis: { yAxis: {
name: '温度', name: '合格率(%)',
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color: '#ffffff' color: '#ffffff'
@ -1229,7 +1275,6 @@ export default {
}, },
labelLine: { labelLine: {
lineStyle: { lineStyle: {
// type: [6]
}, },
length: 2, length: 2,
length2: 5 length2: 5
@ -1259,6 +1304,10 @@ export default {
}; };
pieChart.setOption(pieoption); pieChart.setOption(pieoption);
}, },
circleClose(){
this.clickVisible = false;
this.currentObj.deptName = '';
},
}, },
beforeDestoryed() { beforeDestoryed() {
clearInterval(timerTime); clearInterval(timerTime);
@ -1268,288 +1317,284 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
/* @font-face { @font-face {
font-family: 'youShe'; font-family: 'myfont'; /* 字体名称 */
src: url('./youShe.ttf') format('truetype'); src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
font-weight: normal; }
font-style: normal; .container {
} */ background: url('/public/img/photon_bg.png') no-repeat;
@font-face { background-size: cover;
font-family: 'myfont'; /* 字体名称 */ }
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
}
.container {
background: url('/public/img/photon_bg.png') no-repeat;
background-size: cover;
}
.pageHeader { .pageHeader {
/* height: 70px; */ font-size: 32px;
font-size: 32px; background: none;
background: none; border-bottom: none;
border-bottom: none; position: relative;
position: relative; display: block;
display: block; text-align: center;
text-align: center; color: #ffffff;
color: #ffffff; padding: 1px;
padding: 1px; font-family: "myfont";
font-family: "myfont"; background: url('/public/img/photon_header.png') no-repeat;
background: url('/public/img/photon_header.png') no-repeat; background-size: 100% 100%;
background-size: 100% 100%; }
}
.top-line { .top-line {
height: 1px; height: 1px;
width: 3%; width: 3%;
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
background: rgba(54, 217, 187, 1); background: rgba(54, 217, 187, 1);
} }
.top-line-left { .top-line-left {
left: 24%; left: 24%;
} }
.top-line-right { .top-line-right {
right: 24%; right: 24%;
} }
.flexItem { .flexItem {
margin-bottom: 10px; margin-bottom: 10px;
} }
.blockTitle { .blockTitle {
color: #fff; color: #fff;
height: 40px; height: 40px;
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 40px; line-height: 40px;
font-weight:bold; font-weight:bold;
background: url('/public/img/photon_title.png'); background: url('/public/img/photon_title.png');
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
} }
.blockTitleIcon { .blockTitleIcon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 10px; margin-top: 10px;
margin-right: 5px; margin-right: 5px;
display: inline-block; display: inline-block;
animation: rotate 3s infinite; animation: rotate 3s infinite;
transform-origin: center center; transform-origin: center center;
background: url('/public/img/photon_title_icon.png'); background: url('/public/img/photon_title_icon.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
25% { 25% {
transform: rotate(90deg); transform: rotate(90deg);
} }
50% { 50% {
transform: rotate(180deg); transform: rotate(180deg);
} }
75% { 75% {
transform: rotate(270deg); transform: rotate(270deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.row-item { .row-item {
height: 40px !important; height: 40px !important;
line-height: 40px !important; line-height: 40px !important;
/* background-color:rgb(10,63,68)!important; */ }
}
#scrollTable>.hader { #scrollTable>.hader {
background: rgb(10, 63, 68) !important; background: rgb(10, 63, 68) !important;
background-color: #0a3f44 !important; background-color: #0a3f44 !important;
} }
.model { .model {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#renderCanvas { #renderCanvas {
width: 100%; width: 100%;
height: 100% height: 100%
} }
#loadingScreen { #loadingScreen {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 260px; top: 260px;
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 30px; font-size: 30px;
} }
.inforBlock { .numberFont {
left: 60%; font-size: 22px;
top: 30%; font-weight: bold;
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); */ .numberUnit {
.border_corner { font-size: 12px;
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 { #dashbordProcess .el-progress-circle {
top: 0; height: 60px !important;
left: 0; width: 60px !important;
border-right: none; }
border-bottom: none;
}
.border_right_top { .el-progress--circle .el-progress__text {
top: 0; display: block;
right: 0; margin-top: 1px;
border-left: none; color: #fff;
border-bottom: none; 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%);
}
.border_left_bottom { .inforBlock {
bottom: 0; left: 60%;
left: 0; top: 30%;
border-right: none; width: 420px;
border-top: none; height: 150px;
} position: absolute;
font-weight: 500;
color: #fff;
padding: 20px;
font-size: 14px;
box-sizing: border-box;
background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
}
.inforBlock.clickBlock{
left: 50%;
width: 630px;
height: 225px;
padding:40px;
font-size:16px;
transform:translateX(-50%)
}
.inforBlock>.border_corner {
z-index: 2500;
position: absolute;
width: 10px;
height: 10px;
background: rgba(0, 0, 0, 0);
border: 2px solid rgba(54, 217, 187, 1);
}
.border_right_bottom { .inforBlock>.border_left_top {
bottom: 0; top: 0;
right: 0; left: 0;
border-left: none; border-right: none;
border-top: none; border-bottom: none;
} }
.title { .inforBlock>.border_right_top {
font-size: 20px; top: 0;
font-weight: 600; right: 0;
position: absolute; border-left: none;
top: -45px; border-bottom: none;
text-align: center; }
width: 100%;
left: 0;
/* margin-bottom:20px;
display: inline-block;
border-bottom: 3px solid green;
padding: 0 5px 5px; */
}
.infoCantier { .inforBlock>.border_left_bottom {
display: flex; bottom: 0;
left: 0;
border-right: none;
border-top: none;
}
.leftBlock { .inforBlock>.border_right_bottom {
width: 100px; bottom: 0;
margin-right: 30px; right: 0;
} border-left: none;
border-top: none;
}
.rightBlock { .inforBlock>.title {
display: flex; font-size: 20px;
flex-direction: column; font-weight: 600;
justify-content: space-between; position: absolute;
top: -45px;
text-align: center;
width: 100%;
left: 0;
}
.countWrap { .inforBlock>.infoCantier {
display: flex; 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%);
}
}
.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;
}
</style> </style>