1404 lines
35 KiB
Vue
1404 lines
35 KiB
Vue
<template>
|
||
<div class="container">
|
||
<header class="pageHeader">
|
||
<div class="header_center_text">{{ bigScreenName }}</div>
|
||
<div class="header_left">
|
||
<!-- <span>{{ currentYear }}年{{ currentMonth }}月{{ currentDay }}日{{currentWeek}}</span> -->
|
||
<span>{{ currentDate }}{{currentWeek}}</span>
|
||
</div>
|
||
<div class="header_right">
|
||
<span>{{ currentTime }}</span>
|
||
<span style="margin: 0 5px;">|</span>
|
||
<img src="img/v_track.png" style="margin-right: 5px;">
|
||
<span>枣庄</span>
|
||
</div>
|
||
<img class="header_bg" src="img/photon_header.png" />
|
||
<div class="header_line header_line1"></div>
|
||
<div class="header_line header_line2"></div>
|
||
</header>
|
||
<div id="model" class="model">
|
||
<div id="loadingScreen">
|
||
<el-progress
|
||
type="circle"
|
||
:percentage="loadedPercent"
|
||
:width="220"
|
||
status="warning"
|
||
>
|
||
<template #default="{ percentage }">
|
||
<div class="loadPercent">{{ percentage }}%</div>
|
||
<div class="loadText">工厂模型加载中</div>
|
||
</template>
|
||
</el-progress>
|
||
</div>
|
||
<canvas id="renderCanvas"></canvas>
|
||
</div>
|
||
<div class="left_block">
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div>任务产量</div>
|
||
</div>
|
||
<div class="itemBody itemBody1">
|
||
<div style="display: flex;justify-content: space-around;">
|
||
<div class="block1NumberWrap">
|
||
<div class="block1Numberinner">
|
||
<span class="block1Text">今日产量</span>
|
||
<span class="block1Number">{{ count_day }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;justify-content: space-around;">
|
||
<div class="block1NumberWrap">
|
||
<div class="block1Numberinner">
|
||
<span class="block1Text">本周产量</span>
|
||
<span class="block1Number">{{ count_week }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;justify-content: space-around;">
|
||
<div class="block1NumberWrap">
|
||
<div class="block1Numberinner">
|
||
<span class="block1Text">本月产量</span>
|
||
<span class="block1Number">{{ count_month }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="left_block2">
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div>生产不合格分布统计</div>
|
||
</div>
|
||
<div class="itemBody">
|
||
<div id="notokPieChart" style="width:20vw;height:21vh;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="left_block3">
|
||
<div class="flexItem">
|
||
<div class="itemTitle2">
|
||
<div>库存</div>
|
||
<el-carousel height="4vh" :interval="30000" indicator-position="none"
|
||
style="position: absolute;top: 0;right: 0;width: 100px;">
|
||
<el-carousel-item>
|
||
<div style="color: #ffffff; z-index: 10;font-size: 18px;">成品库</div>
|
||
</el-carousel-item>
|
||
<el-carousel-item>
|
||
<div style="color: #ffffff; z-index: 10;font-size: 18px;">原料库</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="itemBody itemBody1">
|
||
<el-carousel height="14vh" :interval="30000" indicator-position="none">
|
||
<el-carousel-item>
|
||
<dv-scroll-board
|
||
:config="configDataProd"
|
||
class="boxmain"
|
||
/>
|
||
</el-carousel-item>
|
||
<el-carousel-item>
|
||
<dv-scroll-board
|
||
:config="configData30"
|
||
class="boxmain"
|
||
/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem">
|
||
<div class="itemTitle2">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>质量分析</div>
|
||
</div>
|
||
<div class="itemBody3">
|
||
<scEcharts v-if="visibal0" :height="pieHeight" :width="pieWidth" :option="option0"></scEcharts>
|
||
<scEcharts v-if="visibal1" :height="pieHeight" :width="pieWidth" :option="option1"></scEcharts>
|
||
<scEcharts v-if="visibal2" :height="pieHeight" :width="pieWidth" :option="option2"></scEcharts>
|
||
<scEcharts v-if="visibal3" :height="pieHeight" :width="pieWidth" :option="option3"></scEcharts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_block">
|
||
<div class="flexItem videoFlexItem">
|
||
<div class="itemTitle2">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>实时视频</div>
|
||
</div>
|
||
<div class="itemBody" style="height: 32.5vh;">
|
||
<video width="100%" height="100%" autoplay controls loop>
|
||
<source src="img/gx/gx_video.mp4" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem newsFlexItem">
|
||
<div class="itemTitle2">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>宣传公告</div>
|
||
</div>
|
||
<div class="itemBody">
|
||
<div class="viewsItem">
|
||
<div class="viewsItem_wrap">
|
||
<img style="float: left;" class="viewsItem_img" :src="articleObj.poster">
|
||
<article>
|
||
{{ articleObj.content }}
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom_block">
|
||
<div id="scroll" class="bottom_block2">
|
||
<div class="flexItem3">
|
||
<div class="flexItem3_title">黑化</div>
|
||
<div class="flexItem3Body">
|
||
<dv-scroll-board
|
||
:config="configData0"
|
||
class="inmBoxmain"
|
||
/>
|
||
<scEcharts v-if="visibals0" :width="lineWidth" :height="lineHeight" :option="options0" style="margin-top: 0.5vh;"></scEcharts>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem3">
|
||
<div class="flexItem3_title">减薄A</div>
|
||
<div class="flexItem3Body">
|
||
<dv-scroll-board
|
||
:config="configData1"
|
||
class="inmBoxmain"
|
||
/>
|
||
<scEcharts v-if="visibals1" :width="lineWidth" :height="lineHeight" :option="options1" style="margin-top: 0.5vh;"></scEcharts>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem3">
|
||
<div class="flexItem3_title">倒角</div>
|
||
<div class="flexItem3Body">
|
||
<dv-scroll-board
|
||
:config="configData2"
|
||
class="inmBoxmain"
|
||
/>
|
||
<scEcharts v-if="visibals2" :width="lineWidth" :height="lineHeight" :option="options2" style="margin-top: 0.5vh;"></scEcharts>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem3">
|
||
<div class="flexItem3_title">成品抛</div>
|
||
<div class="flexItem3Body">
|
||
<dv-scroll-board
|
||
:config="configData3"
|
||
class="inmBoxmain"
|
||
/>
|
||
<scEcharts v-if="visibals3" :width="lineWidth" :height="lineHeight" :option="options3" style="margin-top: 0.5vh;"></scEcharts>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem3">
|
||
<div class="flexItem3_title">检测</div>
|
||
<div class="flexItem3Body">
|
||
<dv-scroll-board
|
||
:config="configData4"
|
||
class="inmBoxmain"
|
||
/>
|
||
<scEcharts v-if="visibals4" :width="lineWidth" :height="lineHeight" :option="options4" style="margin-top: 0.5vh;"></scEcharts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import scEcharts from '@/components/scEcharts';
|
||
import config from "@/config";
|
||
import "animate.css";
|
||
import baseUrl from "@/config";
|
||
|
||
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');
|
||
};
|
||
|
||
const configData={
|
||
header : ['物料批次','未加工','进行中','已完成','合格数'],
|
||
headerBGC : '#0a3f44',
|
||
rowNum : 4,
|
||
headerHeight : 35,
|
||
align : 'center',
|
||
waitTime : 1000,
|
||
columnWidth: [110,68,68,68,68],
|
||
data : [],
|
||
}
|
||
const baseOption={
|
||
color: ['rgb(255,160,0)','rgb(64,158,255)','rgb(54,256,158)'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
grid:{
|
||
top: '20%',
|
||
bottom: 0,
|
||
},
|
||
xAxis:{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 40,
|
||
fontSize: 10,
|
||
color: '#fff',
|
||
},
|
||
data:[1,2,3,4,5,6,7]
|
||
},
|
||
yAxis:[
|
||
{
|
||
type: 'value',
|
||
// name: '数量',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
fontSize: 8,
|
||
color: '#fff',
|
||
top: 10,
|
||
},
|
||
|
||
},
|
||
{
|
||
type: "value",
|
||
// name: "合格率",
|
||
position: "right",
|
||
alignTicks: true,
|
||
offset: 0,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
fontSize: 8,
|
||
color: "rgb(54,256,158)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
}
|
||
],
|
||
legend: {
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
left: 'center',
|
||
top: '0.5%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name:'生产数',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
yAxisIndex: 0,
|
||
itemStyle: {
|
||
borderRadius: [ 5, 5, 0,0]
|
||
},
|
||
data: [0,0,0,0,0,0,0]
|
||
},
|
||
{
|
||
name: '合格数',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
yAxisIndex: 0,
|
||
itemStyle: {
|
||
borderRadius: [ 5, 5, 0,0]
|
||
},
|
||
data: [0,0,0,0,0,0,0]
|
||
},
|
||
{
|
||
name: '合格率',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: [0,0,0,0,0,0,0]
|
||
}
|
||
]
|
||
}
|
||
const baseOption2= {
|
||
color: ['rgb(64,158,255)','rgb(255,160,0)'],
|
||
title: {
|
||
text: '棒料',
|
||
left: 'center',
|
||
textStyle:{
|
||
fontSize: 16,
|
||
color: '#fff',
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
left: 'center',
|
||
bottom: '1%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
series: {
|
||
type: 'pie',
|
||
radius: ['10%', '60%'],
|
||
center: ['50%', '50%'],
|
||
// label: false,
|
||
itemStyle: {
|
||
borderRadius: 10
|
||
},
|
||
label: {
|
||
formatter: '{c} ({d}%)',
|
||
position: 'inside',
|
||
textStyle: {
|
||
color: '#fff',
|
||
// color: 'rgb(54,256,158)',
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
data: [
|
||
{value: 0, name: '合格'},
|
||
{value: 0, name: '不合格'},
|
||
]
|
||
}
|
||
}
|
||
export default {
|
||
components: {
|
||
scEcharts
|
||
},
|
||
data() {
|
||
return {
|
||
initialAlpha: Math.PI / 2,
|
||
initialBeta: Math.PI / 5,
|
||
initialRadius: 2.3,
|
||
initialTarget: null,
|
||
resizeTimeout: null,
|
||
loadedPercent: 0,
|
||
percentage: 25,
|
||
baseUrl: baseUrl.HOST_URL,
|
||
updateTime: "2023-08-17 16:00:00",
|
||
//当前时间
|
||
currentTime: "",
|
||
currentWeek: "",
|
||
currentYear: "",
|
||
currentMonth: "",
|
||
currentDay: "",
|
||
currentDate:"",
|
||
days:0,
|
||
timerTime: null,
|
||
start_date: "",
|
||
end_date: "",
|
||
heightTimer: null,
|
||
count_day:0,
|
||
count_week:0,
|
||
count_month:0,
|
||
myChart: null,
|
||
sectionNames: {
|
||
'地面': "一层",//
|
||
'一层地面': "一层",// 地面
|
||
'地面.001': "二层",// 地面
|
||
'二层地面': "二层",//地面.001
|
||
},
|
||
// 质量分析饼状图option
|
||
option0: {},
|
||
option1: {},
|
||
option2: {},
|
||
option3: {},
|
||
visibal0: false,
|
||
visibal1: false,
|
||
visibal2: false,
|
||
visibal3: false,
|
||
//设备状态饼状图option
|
||
option_eq: {
|
||
color: ['rgb(145,204,117)', '#ffa500 ', 'rgb(250,200,88)', 'rgb(215,102,97)', 'rgb(185,51,46)' ],
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
// },
|
||
// legend: {
|
||
// show:true,
|
||
// itemWidth: 12,
|
||
// itemHeight: 12,
|
||
// orient: 'vertical',
|
||
// right: '1%',
|
||
// textStyle:{
|
||
// color:"#ffffff"
|
||
// },
|
||
// },
|
||
series:{
|
||
name:'不良占比分布',
|
||
type: 'pie',
|
||
radius: ['55%', '90%'],
|
||
center: ['50%', '50%'],
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
formatter: '{b} {d}%',
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
},
|
||
labelLine: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 20,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
data: []
|
||
}
|
||
},
|
||
//成品table数据
|
||
configDataProd:{
|
||
header:['物料名称','物料批次','物料数量'],
|
||
headerBGC:'#0a3f44',
|
||
headerHeight:35,
|
||
align:'center',
|
||
data:[],
|
||
rowNum : 3,
|
||
waitTime:3000,
|
||
columnWidth: [260,260,100],
|
||
},
|
||
//原料table数据
|
||
configData30:{
|
||
header:['物料名称','物料批次','物料数量'],
|
||
headerBGC:'#0a3f44',
|
||
headerHeight:35,
|
||
align:'center',
|
||
data:[],
|
||
rowNum : 3,
|
||
waitTime:3000,
|
||
columnWidth: [260,260,100],
|
||
},
|
||
//工序库存table数据
|
||
configData0:{},
|
||
configData1:{},
|
||
configData2:{},
|
||
configData3:{},
|
||
configData4:{},
|
||
configData5:{},
|
||
scrollNum:0,
|
||
scrollInterval:null,
|
||
//近七天日数组
|
||
dayArr:[],
|
||
visibals0: false,
|
||
visibals1: false,
|
||
visibals2: false,
|
||
visibals3: false,
|
||
visibals4: false,
|
||
//工序柱状图option
|
||
options0:{},
|
||
options1:{},
|
||
options2:{},
|
||
options3:{},
|
||
options4:{},
|
||
articleObj:{},
|
||
videoUrl:'',
|
||
pieWidth:0,
|
||
lineWidth:0,
|
||
pieHeight:0,
|
||
lineHeight:0,
|
||
setIntervals:null,
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
let nowDate = new Date();
|
||
let firstDay = new Date(nowDate.getTime()-6*24*60*60*1000);
|
||
let start_date = that.$TOOL.dateFormat(firstDay, 'yyyy-MM-dd');
|
||
let end_date = that.$TOOL.dateFormat(nowDate, 'yyyy-MM-dd');
|
||
that.start_date = start_date;
|
||
that.end_date = end_date;
|
||
this.bigScreenName = this.$TOOL.data.get("BASE_INFO").base.bigScreen_name;
|
||
this.showTime();
|
||
loadBabylon().then(()=>{
|
||
this.initView()
|
||
})
|
||
this.timerTime = setInterval(() => {
|
||
this.showTime();
|
||
}, 1000);
|
||
},
|
||
methods: {
|
||
//初始化视图
|
||
initView(){
|
||
let that = this;
|
||
var windowHeight = window.innerHeight;
|
||
var windowWidth = window.innerWidth;
|
||
that.pieWidth =Math.round((windowWidth/100*33)/4)+'px';
|
||
that.pieHeight = Math.round((windowHeight/100)*14)+'px';
|
||
that.lineWidth = (windowWidth/5-10)+'px';
|
||
that.lineHeight = (windowHeight/100)*12.5+'px';
|
||
|
||
//一天的毫秒数
|
||
let nowDate = new Date();
|
||
let year = nowDate.getFullYear();
|
||
let month = nowDate.getMonth() + 1;
|
||
let day = nowDate.getDate();
|
||
that.days = new Date(year, month, 0).getDate();
|
||
that.currentYear = year;
|
||
that.currentMonth = month;
|
||
that.currentDay = day;
|
||
let dayArr = [];
|
||
for(let i=6;i>-1;i--){
|
||
let date = new Date(nowDate.getTime()-i*24*60*60*1000);
|
||
let day = date.getDate();
|
||
dayArr.push(day);
|
||
}
|
||
that.dayArr = dayArr;
|
||
|
||
that.myChart = echarts.init(document.getElementById('notokPieChart'));
|
||
that.myChart.setOption(that.option_eq);
|
||
let index2 = 0;
|
||
that.chartInterval2 = setInterval(function () {
|
||
if (index2 < that.option_eq.series.data.length) {
|
||
that.myChart.dispatchAction({
|
||
type: "downplay",
|
||
seriesIndex: 0,
|
||
});
|
||
that.myChart.dispatchAction({
|
||
type: "highlight",
|
||
seriesIndex: 0,
|
||
dataIndex: index2,
|
||
});
|
||
that.myChart.dispatchAction({
|
||
type: "showTip",
|
||
seriesIndex: 0,
|
||
dataIndex: index2,
|
||
});
|
||
index2++;
|
||
} else {
|
||
index2 = 0;
|
||
}
|
||
}, 3000);
|
||
that.$nextTick(function () {
|
||
// that.getEquipments();
|
||
that.getCountnotok();
|
||
that.getMaterials();
|
||
that.getMgroup();
|
||
that.getTaskNumber();
|
||
that.getArticles();
|
||
that.getpurinrate();
|
||
that.initFactory();
|
||
that.addListener();
|
||
})
|
||
that.setIntervals = setInterval(function () {
|
||
let nowDate = new Date();
|
||
that.currentYear = nowDate.getFullYear();
|
||
that.currentMonth = nowDate.getMonth() + 1;
|
||
that.currentDay = nowDate.getDate();
|
||
let dayArr = [];
|
||
for(let i=6;i>-1;i--){
|
||
let date = new Date(nowDate.getTime()-i*24*60*60*1000);
|
||
let day = date.getDate();
|
||
dayArr.push(day);
|
||
}
|
||
that.dayArr = dayArr;
|
||
that.getCountnotok();
|
||
that.getMaterials();
|
||
that.getMgroup();
|
||
that.getTaskNumber();
|
||
that.getArticles();
|
||
that.getpurinrate();
|
||
}, 300000);
|
||
},
|
||
//获取公告和视频
|
||
getArticles(){
|
||
let that = this;
|
||
that.$API.cms.article.list.req({page:0}).then((res) => {
|
||
if(res.length>0){
|
||
let articleList = [],videoList = [];
|
||
res.forEach((item)=>{
|
||
if(item.video == ''){
|
||
articleList.push(item);
|
||
}else{
|
||
videoList.push(item);
|
||
}
|
||
})
|
||
that.articleObj = articleList[0];
|
||
that.videoUrl = that.baseUrl+videoList[0].video;
|
||
}
|
||
})
|
||
},
|
||
//时间
|
||
showTime() {
|
||
console.log(this.currentDate, this.currentWeek)
|
||
this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss");
|
||
this.currentWeek = this.$TOOL.dateFormat(new Date(), "week");
|
||
this.currentDate = this.$TOOL.dateFormat(new Date(),"yyyy年MM月dd日");
|
||
},
|
||
//屏幕监听
|
||
addListener() {
|
||
let that = this;
|
||
window.addEventListener("resize", function () {
|
||
if (that.scrollInterval!=null) {
|
||
clearInterval(that.scrollInterval);
|
||
}
|
||
if (this.resizeTimeout) {
|
||
clearTimeout(this.resizeTimeout);
|
||
}
|
||
// 设置一个新的 resizeTimeout，延迟调整样式
|
||
this.resizeTimeout = setTimeout(function () {
|
||
that.initDomStyle();
|
||
}, 300); // 延迟 300 毫秒，可以根据需要调整
|
||
});
|
||
},
|
||
//初始化模型容器大小
|
||
initDomStyle() {
|
||
let that = this;
|
||
// 获取窗口的总高度
|
||
var windowHeight = window.innerHeight;
|
||
var windowWidth = window.innerWidth;
|
||
var container = document.getElementsByClassName("container")[0];
|
||
var model = document.getElementsByClassName("model")[0];
|
||
that.pieWidth = windowWidth/500*33+'px';
|
||
that.lineWidth = (windowWidth/5-10)+'px';
|
||
that.pieHeight = windowHeight/100*13+'px';
|
||
that.lineHeight = windowHeight/100*12.8+'px';
|
||
if (windowWidth > 960) {
|
||
container.style.overflow = "hidden";
|
||
model.style.position = "absolute";
|
||
model.style.height = windowHeight - 3 + "px";
|
||
model.style.top = 0;
|
||
} else {
|
||
container.style.overflow = "auto";
|
||
var chartHeight = windowWidth * 0.6;
|
||
model.style.position = "relative";
|
||
model.style.height = chartHeight;
|
||
}
|
||
if (that.engine != null) {
|
||
that.engine.resize();
|
||
}
|
||
that.resizeChart();
|
||
},
|
||
//更新图表数据
|
||
resizeChart(name) {
|
||
// 根据name resize chart
|
||
var myChart = echarts.getInstanceByDom(
|
||
document.getElementById(name)
|
||
);
|
||
if (myChart != undefined) {
|
||
myChart.resize();
|
||
}
|
||
},
|
||
//获取日/周/月产量
|
||
getTaskNumber(){
|
||
let that = this;
|
||
let month = that.currentMonth>9?that.currentMonth:'0'+that.currentMonth;
|
||
let day = that.currentDay>9?that.currentDay:'0'+that.currentDay;
|
||
let current_date = that.currentYear+'-'+month+'-'+day;
|
||
let objDay = {query:{start_date:current_date,end_date:current_date,mgroup_name:'一次超洗'}};
|
||
that.$API.bi.dataset.exec.req('lineDay_m2', objDay).then((res0) => {
|
||
if(res0.data2.ds0&&res0.data2.ds0.length>0){
|
||
that.count_day = res0.data2.ds0[0].生产数;
|
||
}else{
|
||
that.count_day = 0;
|
||
}
|
||
console.log('that.count_day',that.count_day)
|
||
});
|
||
let ondDayTime = 86400000;
|
||
let nowDate = new Date();
|
||
let week = nowDate.getDay();//当前时间的week数
|
||
let weekFirst = week-1;//第一天对应的天数
|
||
let weekLast = 7-week;//最后一天对应的天数
|
||
let first = that.$TOOL.dateFormat2(new Date(nowDate.getTime() - (weekFirst * ondDayTime)));//本周周一
|
||
let last = that.$TOOL.dateFormat2(new Date(nowDate.getTime() + (weekLast * ondDayTime)));//本周周日
|
||
let objWeek = {query:{
|
||
start_date:first,end_date:last,mgroup_name:'一次超洗',
|
||
group_bys_date:',月,周',order_bys_date:',月,周',
|
||
select_cols_date:', EXTRACT ( MONTH FROM mlog.handle_date) AS 月,EXTRACT(WEEK FROM mlog.handle_date) AS 周'
|
||
}};
|
||
that.$API.bi.dataset.exec.req('lineDay_m2', objWeek).then((res1) => {
|
||
if(res1.data2.ds0&&res1.data2.ds0.length>0){
|
||
that.count_week = res1.data2.ds0[0].生产数;
|
||
}else{
|
||
that.count_week = 0;
|
||
}
|
||
console.log('that.count_week',that.count_week)
|
||
});
|
||
let start_month = that.currentYear+'-'+month+'-01';
|
||
let end_month = that.currentYear+'-'+month+'-'+new Date(that.currentYear, month, 0).getDate();
|
||
let objMonth = {query:{
|
||
start_date:start_month,end_date:end_month,mgroup_name:'一次超洗',
|
||
group_bys_date:',月',order_bys_date:',月',
|
||
select_cols_date:', EXTRACT ( MONTH FROM mlog.handle_date) AS 月'
|
||
}};
|
||
that.$API.bi.dataset.exec.req('lineDay_m2', objMonth).then((res2) => {
|
||
if(res2.data2.ds0&&res2.data2.ds0.length>0){
|
||
that.count_month = res2.data2.ds0[0].生产数;
|
||
}else{
|
||
that.count_month = 0;
|
||
}
|
||
console.log('that.count_month',that.count_month)
|
||
});
|
||
},
|
||
//不合格分布
|
||
getCountnotok(){
|
||
let that = this;
|
||
let obj = {query:{start_date:that.start_date,end_date:that.end_date}};
|
||
that.$API.bi.dataset.exec.req('notok_dis', obj).then((res) => {
|
||
let seriesData = [];
|
||
if(res.data2.ds0){
|
||
res.data2.ds0.forEach((item) => {
|
||
let obj = {};
|
||
obj.name = item.不合格项;
|
||
obj.value = item.数量;
|
||
seriesData.push(obj);
|
||
})
|
||
}
|
||
that.option_eq.series.data = seriesData;
|
||
that.myChart.setOption({series:{data:seriesData}});
|
||
})
|
||
},
|
||
getpurinrate(){
|
||
let that = this;
|
||
that.visibal0 = true;
|
||
that.option0 = that.deepCopy(baseOption2);
|
||
that.option0.title.text = '原料棒';
|
||
console.log('that.option0',that.option0);
|
||
let obj = {query:{start_date:that.start_date,end_date:that.end_date}};
|
||
that.$API.bi.dataset.exec.req('mio_okrate', obj).then((res)=>{
|
||
if(res.data2.ds0){
|
||
let obj = res.data2.ds0[0];
|
||
that.option0.series.data[0].value = obj.总数-obj.不合格数;
|
||
that.option0.series.data[1].value = obj.不合格数;
|
||
}
|
||
})
|
||
},
|
||
//库存统计列表(原料30库库存和成品10库库存)
|
||
getMaterials() {
|
||
let that = this;
|
||
that.$API.inm.warehouse.batch.req({ page: 0,material__type:10,count__gte:1}).then((res10) => {
|
||
that.configDataProd.data = [];
|
||
if(res10.length>0){
|
||
res10.forEach((item) => {
|
||
let arr = [];
|
||
arr[0] = item.material_name;
|
||
arr[1] = item.batch;
|
||
arr[2] = item.count;
|
||
that.configDataProd.data.push(arr);
|
||
})
|
||
}
|
||
})
|
||
that.$API.inm.warehouse.batch.req({ page: 0,material__type:30,count__gte:1}).then((res30) => {
|
||
that.configData30.data = [];
|
||
if(res30.length>0){
|
||
res30.forEach((item) => {
|
||
let arr = [];
|
||
arr[0] = item.material_name;
|
||
arr[1] = item.batch;
|
||
arr[2] = item.count;
|
||
that.configData30.data.push(arr);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//获取工段中各个批次的数量
|
||
initFactory() {
|
||
let 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);
|
||
// 加载背景图片
|
||
const backgroundImage = new BABYLON.Layer("","img/gx/gx_bj.jpg",scene,true);
|
||
const camera = new BABYLON.ArcRotateCamera(
|
||
"camera",
|
||
that.initialAlpha,
|
||
that.initialBeta,
|
||
that.initialRadius,
|
||
new BABYLON.Vector3(0, -4.5, 1.2)
|
||
);
|
||
that.camera = camera;
|
||
that.initialTarget = camera.getTarget();
|
||
camera.upperBetaLimit = Math.PI / 3.1; //无法移动到地面以下
|
||
camera.attachControl(canvas, true);
|
||
camera.maxZ = 1000; // 调整适当的值
|
||
// 相机限制
|
||
camera.lowerRadiusLimit = 29;
|
||
camera.upperRadiusLimit = 50;
|
||
// camera.useAutoRotationBehavior = true;//自动旋转
|
||
// 灯光
|
||
const light = new BABYLON.HemisphericLight(
|
||
"light",
|
||
new BABYLON.Vector3(1, 1, 0)
|
||
);
|
||
light.intensity = 1.8;
|
||
|
||
// 全屏GUI
|
||
const advancedTexture =
|
||
BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI(
|
||
"myUI"
|
||
);
|
||
that.myui = advancedTexture;
|
||
// 主控制区
|
||
var control_main = new BABYLON_GUI.StackPanel();
|
||
control_main.isVertical = false;
|
||
control_main.top = "40%";
|
||
control_main.left = "-15%";
|
||
advancedTexture.addControl(control_main);
|
||
var remoteGlbUrl = config.HOST_URL + "/media/model/gx.glb";
|
||
BABYLON.SceneLoader.Append(remoteGlbUrl,"",scene,
|
||
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;
|
||
}
|
||
);
|
||
return scene;
|
||
};
|
||
const scene = createScene(); //Call the createScene function
|
||
engine.runRenderLoop(function () {
|
||
scene.render();
|
||
});
|
||
this.engine = engine;
|
||
this.scene = scene;
|
||
window.addEventListener("resize", function () {
|
||
engine.resize();
|
||
});
|
||
},
|
||
deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
},
|
||
//获取所有工段
|
||
getMgroup(){
|
||
let that = this;
|
||
that.$API.mtm.mgroup.list.req({page:0}).then((res) => {
|
||
let data = res;
|
||
that.mgroupsData = res;
|
||
for(let i=0;i<data.length;i++){
|
||
if(data[i].name=='黑化'){
|
||
that.getProcessDatas(data[i].name,0);
|
||
that.getProcessCount(data[i].name,0);
|
||
}else if(data[i].name=='减薄A'){
|
||
that.getProcessDatas(data[i].name,1);
|
||
that.getProcessCount(data[i].name,1);
|
||
}else if(data[i].name=='倒角'){
|
||
that.getProcessDatas(data[i].name,2);
|
||
that.getProcessCount(data[i].name,2);
|
||
}else if(data[i].name=='成品抛'){
|
||
that.getProcessDatas(data[i].name,3);
|
||
that.getProcessCount(data[i].name,3);
|
||
}else if(data[i].name=='外观检验'){
|
||
that.getProcessDatas(data[i].name,4);
|
||
that.getProcessCount(data[i].name,4);
|
||
}
|
||
if(data[i].name=='外协白片抛'){
|
||
that.getProcessCount0(data[i].name,1);
|
||
}else if(data[i].name=='外协一次抛'){
|
||
that.getProcessCount0(data[i].name,2);
|
||
}else if(data[i].name=='外扫'){
|
||
that.getProcessCount0(data[i].name,3);
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
//获取工序批次数据
|
||
getProcessDatas(name,index){
|
||
let that = this;
|
||
// let month = that.currentMonth>9?that.currentMonth:'0'+that.currentMonth;
|
||
// let day = that.currentDay>9?that.currentDay:'0'+that.currentDay;
|
||
// let current_date = that.currentYear+'-'+month+'-'+day;
|
||
// let obj = {query:{current_date:current_date,mgroup_name:name}};
|
||
// that.$API.bi.dataset.exec.req('batch_search', obj).then((res) => {
|
||
let keys = 'configData'+index;
|
||
that[keys] = that.deepCopy(configData);
|
||
that[keys].data = [];
|
||
that.$API.wpm.ana.batchwork.req({mgroup_name:name}).then((res) => {
|
||
if(res.length>0){
|
||
//根据工段名称分组
|
||
res.forEach((item) => {
|
||
let arr = [];
|
||
arr[0] = item.batch;
|
||
arr[1] = item.count_todo;
|
||
arr[2] = item.count_working;
|
||
arr[3] = item.count_real;
|
||
arr[4] = item.count_ok;
|
||
that[keys].data.push(arr);
|
||
})
|
||
}
|
||
});
|
||
},
|
||
//获取工序近七天的柱状图数据
|
||
getProcessCount(name,index){
|
||
let that = this;
|
||
let visibalKey = 'visibals'+index;
|
||
let optionKey = 'options'+index;
|
||
that[optionKey] = that.deepCopy(baseOption);
|
||
that[optionKey].xAxis.data =that.dayArr;
|
||
that[visibalKey] = true;
|
||
if(index==4){
|
||
that[optionKey].yAxis.pop();
|
||
that[optionKey].series.pop();
|
||
}
|
||
let obj = {query:{end_date:that.end_date,start_date:that.start_date,mgroup_name:name}};
|
||
that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => {
|
||
if(res.data2.ds0){
|
||
let lists = res.data2.ds0;
|
||
if(lists.length>0){
|
||
let data0=[],data1=[],data2=[];
|
||
lists.forEach((item) => {
|
||
let index = that.dayArr.indexOf(item.日);
|
||
data0[index] = item.生产数;
|
||
data1[index] = item.合格数;
|
||
data2[index] = item.合格率;
|
||
})
|
||
that[optionKey].series[0].data = data0;
|
||
that[optionKey].series[1].data = data1;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取质量分析饼状图数据
|
||
getProcessCount0(name,index){
|
||
let that = this;
|
||
let visibalKey = 'visibal'+index;
|
||
let optionKey = 'option'+index;
|
||
that[optionKey] = that.deepCopy(baseOption2);
|
||
that[visibalKey] = true;
|
||
if(index==1){
|
||
that.option1.title.text = '白片抛';
|
||
}else if(index==2){
|
||
that.option2.title.text = '一次抛';
|
||
}else if(index==3){
|
||
that.option3.title.text = '外形抛光';
|
||
}
|
||
let obj = {query:{end_date:that.end_date,start_date:that.start_date,mgroup_name:name}};
|
||
that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => {
|
||
if(res.data2.ds0){
|
||
let lists = res.data2.ds0;
|
||
if(lists.length>0){
|
||
let count_ok=0 ,count_notok=0;
|
||
lists.forEach((item) => {
|
||
count_ok += Number(item.合格数);
|
||
count_notok += Number(item.不合格数) ;
|
||
})
|
||
that[optionKey].series.data[0].value = count_ok;
|
||
that[optionKey].series.data[1].value = count_notok;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
},
|
||
beforeUnmount() {
|
||
let that = this;
|
||
this.scene = null;
|
||
clearInterval(that.timerTime);
|
||
clearInterval(that.scrollInterval);
|
||
clearInterval(that.setIntervals);
|
||
that.timerTime = null;
|
||
that.scrollInterval = null;
|
||
that.setIntervals = null;
|
||
},
|
||
beforeDestoryed() {
|
||
let that = this;
|
||
this.scene = null;
|
||
clearInterval(that.timerTime);
|
||
clearInterval(that.scrollInterval);
|
||
clearInterval(that.setIntervals);
|
||
that.timerTime = null;
|
||
that.scrollInterval = null;
|
||
that.setIntervals = null;
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
@font-face {
|
||
font-family: "myfont";
|
||
/* 字体名称 */
|
||
src: url("../../utils/youShe.ttf");
|
||
/* 字体文件相对路径 */
|
||
}
|
||
.loadPercent{
|
||
font-size: 30px;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
.loadText{
|
||
font-size: 18px;
|
||
color: white;
|
||
margin-top: 10px;
|
||
}
|
||
.container {
|
||
/* background: url("/public/img/gx/gx_bj.jpg") no-repeat; */
|
||
background-size: cover;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
/* header-start */
|
||
.pageHeader {
|
||
z-index: 100;
|
||
height: 6.48vh;
|
||
width: 100vw;
|
||
padding: 0 1vw;
|
||
line-height:6.48vh;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
/* border-bottom: 1px solid rgba(54, 217, 187, 0.3); */
|
||
}
|
||
.header_left{
|
||
position: absolute;top: 0;left: 1vw;font-size: 18px;
|
||
}
|
||
.header_center_text{
|
||
font-family: myfont;letter-spacing: 0.2em; font-size: 3vh;line-height:5vh;z-index: 100;
|
||
}
|
||
.header_right{
|
||
position: absolute;top: 0;right: 1vw;font-size: 18px;
|
||
}
|
||
.header_bg{
|
||
z-index: -1;position: absolute;top:0;left:0;width:100vw;height:6.48vh;
|
||
}
|
||
.header_line{
|
||
top:6vh;
|
||
height: 1px;
|
||
position: absolute;
|
||
background: rgb(54,217,187);
|
||
}
|
||
.header_line1{
|
||
width: 0.5vw;
|
||
right: 8vw;
|
||
}
|
||
.header_line2{
|
||
width: 1.5vw;
|
||
right: 4vw;
|
||
}
|
||
/* header-end */
|
||
|
||
/* 两边的模块 */
|
||
.left_block,
|
||
.left_block2,
|
||
.right_block{
|
||
top:6.48vh;
|
||
width:16.5vw;
|
||
z-index: 10;
|
||
display: flex;
|
||
position:absolute;
|
||
overflow:hidden;
|
||
flex-direction: column;
|
||
padding: 0 5px;
|
||
height: 20vh;
|
||
box-sizing: border-box;
|
||
background: rgba(9, 31, 43, 0.5);
|
||
}
|
||
.left_block{
|
||
width:13vw;
|
||
}
|
||
.left_block2{
|
||
width:20vw;
|
||
}
|
||
.left_block3{
|
||
top:31.48vh;
|
||
left: 0;
|
||
width:33vw;
|
||
display: flex;
|
||
position:absolute;
|
||
overflow:hidden;
|
||
flex-direction: column;
|
||
padding: 0 5px;
|
||
height: 37vh;
|
||
background: rgba(9, 31, 43, 0.5);
|
||
}
|
||
.left_block3 .flexItem{
|
||
width:32.8vw;
|
||
height: 38vh;
|
||
}
|
||
.left_block {
|
||
left: 0;
|
||
height: 25vh;
|
||
}
|
||
.right_block {
|
||
right: 0;
|
||
width:33vw;
|
||
height: 62vh;
|
||
}
|
||
.left_block2{
|
||
left: 13vw;
|
||
height: 25vh;
|
||
padding: 0 5px;
|
||
}
|
||
.left_block2 .flexItem{
|
||
width:16vw;
|
||
}
|
||
.flexItem{
|
||
width: 16.5vw;
|
||
}
|
||
.left_block>.flexItem,.left_block>.flexItem>.itemTitle{
|
||
width:13vw;
|
||
}
|
||
.left_block2>.flexItem,.left_block2>.flexItem>.itemTitle{
|
||
width:20vw;
|
||
}
|
||
.videoFlexItem{
|
||
width: 32.8vw;
|
||
height: 37vh;
|
||
}
|
||
.newsFlexItem{
|
||
width: 32.8vw;
|
||
height: 25vh;
|
||
}
|
||
/* //短标题 */
|
||
.itemTitle{
|
||
color: #fff;
|
||
height: 4.2vh;
|
||
padding-left: 1.5em;
|
||
font-size: 1.3vh;
|
||
line-height: 4vh;
|
||
width: 16vw;
|
||
background-size: 100% 100%;
|
||
background-image: url("/public/img/gx/title_bg2.png");
|
||
}
|
||
/* //长标题 */
|
||
.itemTitle2 {
|
||
color: #fff;
|
||
height:4.2vh;
|
||
padding-left: 1.5em;
|
||
font-size: 1.3vh;
|
||
line-height: 4vh;
|
||
background: url("/public/img/gx/title_bg.png") ;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
/* 下面的工序表格标题 */
|
||
|
||
.itemTitle_b{
|
||
height: 40px;
|
||
line-height: 40px;
|
||
width: 370px;
|
||
font-size: 14px;
|
||
padding-left: 2.5em;
|
||
}
|
||
|
||
.block1NumberWrap{
|
||
width:11vw;
|
||
border: 1px solid rgba(54, 217, 187, 0.3);
|
||
padding: 3px;
|
||
text-align: center;
|
||
}
|
||
.block1Numberinner{
|
||
background: rgba(54, 217, 187, 0.3);
|
||
color: #fff;
|
||
height: 6vh;
|
||
line-height: 7.5vh;
|
||
position: relative;
|
||
}
|
||
.block1Text{
|
||
top: 0;
|
||
left: 10px;
|
||
height: 2vh;
|
||
line-height: 2vh;
|
||
position: absolute;
|
||
font-size: 0.8vh;
|
||
}
|
||
.block1Number{
|
||
font-size: 3vh;
|
||
vertical-align: bottom;
|
||
margin: 0 0.5em;
|
||
color: orange;
|
||
font-weight: bold;
|
||
}
|
||
.itemBody {
|
||
width: 100%;
|
||
border-radius: 20px;
|
||
/* margin-top: 5px; */
|
||
}
|
||
.itemBody1{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content:space-around;
|
||
}
|
||
.eqItem{
|
||
width: 50%;
|
||
display: inline-block;
|
||
}
|
||
.inmItemBody{
|
||
display: flex;
|
||
}
|
||
.boxmain{
|
||
height: 13vh;
|
||
width:100%;
|
||
margin:auto;
|
||
}
|
||
/* 下面的工序表模块 */
|
||
.bottom_block{
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 31vh;
|
||
overflow: hidden;
|
||
}
|
||
.bottom_block2{
|
||
width: 300%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 31.4vh;
|
||
display: flex;
|
||
transition: left 2s ease;
|
||
}
|
||
|
||
.flexItem3 {
|
||
width: 20vw;
|
||
height: 31.5vh;
|
||
position: relative;
|
||
background: rgba(9, 31, 43, 0.5)
|
||
}
|
||
.flexItem3_title{
|
||
left: 50%;
|
||
width: 7.8vw;
|
||
height: 2.8vh;
|
||
line-height: 2.5vh;
|
||
font-size: 16px;
|
||
color: #00ffff;
|
||
text-align: center;
|
||
border: 1px solid #00ffff;
|
||
border-radius: 5px;
|
||
box-shadow: inset 0 0 5px 5px rgb(0 255 255 / 32%);
|
||
z-index: 99;
|
||
position: absolute;
|
||
top: 0.6vh;
|
||
transform: translateX(-50%);
|
||
background: rgb(4 50 83);
|
||
}
|
||
.flexItem3Body{
|
||
width: 19.8vw;
|
||
height: 28.5vh;
|
||
padding-top: 2vh;
|
||
border: 1px solid #00ffff;
|
||
border-radius: 5px;
|
||
position: absolute;
|
||
top: 2vh;
|
||
box-shadow: inset 0 0 15px 5px rgb(0 255 255 / 32%);
|
||
}
|
||
|
||
.inmBoxmain{
|
||
flex: 1;
|
||
height:12.4vh;
|
||
width:98%;
|
||
margin:auto;
|
||
/* margin-bottom: 0.5vh; */
|
||
/* border-left: 2px solid #0f5b8e; */
|
||
box-shadow: -4px 0px 4px -1px #0f5b8e;
|
||
}
|
||
.itemBody3{
|
||
display: flex;
|
||
}
|
||
.viewsItem {
|
||
color: #ffffff;
|
||
width: 32.3vw;
|
||
height: 9.26vh;
|
||
font-size: 15px;
|
||
display: inline-block;
|
||
margin-bottom: 1vh;
|
||
}
|
||
.viewsItem_wrap {
|
||
/* height: 9.26vh; */
|
||
flex-direction: column;
|
||
/* border-left: 5px solid rgba(28, 169, 231, 0.81); */
|
||
padding-left: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
.viewsItem_img{
|
||
height: 20vh;
|
||
width: 49%;
|
||
}
|
||
article{
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
text-indent: 2em;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 13; /* 限制显示 5 行 */
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
}
|
||
|
||
/deep/ .header-item{
|
||
padding: 0 5px!important;
|
||
font-size: 12px!important;
|
||
}
|
||
/deep/ .dv-scroll-board .rows .ceil {
|
||
font-size: 12px!important;
|
||
padding: 0 5px!important;
|
||
}
|
||
.model {
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#renderCanvas {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#loadingScreen {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 260px;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.numberFont {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.numberUnit {
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
</style>
|