2552 lines
61 KiB
Vue
2552 lines
61 KiB
Vue
<template>
|
||
<div class="container">
|
||
<header class="pageHeader">
|
||
<span class="top-line top-line-left"></span>
|
||
{{ bigScreenName }}
|
||
<span class="top-line top-line-right"></span>
|
||
</header>
|
||
<div id="model" class="model">
|
||
<div class="top_block">
|
||
<div class="top_block_time">
|
||
<img src="img/photon_top_line.png" />
|
||
{{ 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">本月熟料产量</span>
|
||
<div class="totalNumber">
|
||
{{ totalData.shuliao }}
|
||
</div>
|
||
</div>
|
||
<div class="totalNumWrap totalNumWrap_green">
|
||
<img src="img/number_bg_green.png" />
|
||
<span class="totalNumText">本月水泥产量</span>
|
||
<div class="totalNumber">
|
||
{{ totalData.cement }}
|
||
</div>
|
||
</div>
|
||
<div class="totalNumWrap totalNum_blue">
|
||
<img src="img/number_bg_blue.png" />
|
||
<span class="totalNumText">本月水泥出厂</span>
|
||
<div class="totalNumber">
|
||
{{ totalData.out_cement }}
|
||
</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>
|
||
<div class="left_block">
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>产量</div>
|
||
</div>
|
||
<div class="itemBody" id="line1"></div>
|
||
</div>
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>本月台时产量</div>
|
||
</div>
|
||
<div class="itemBody itemBodyCircle">
|
||
<div
|
||
class="item_circle"
|
||
v-for="item in rateData"
|
||
:key="item.name"
|
||
>
|
||
<el-progress
|
||
class="elProgress"
|
||
type="circle"
|
||
:stroke-width="15"
|
||
:percentage="item.rate"
|
||
:color="colors"
|
||
>
|
||
<!-- <template > -->
|
||
<span class="percentage-value"
|
||
>{{ item.value }}t/h</span
|
||
>
|
||
<p class="percentage-label">{{ item.name }}</p>
|
||
<!-- </template> -->
|
||
</el-progress>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>车间用水量</div>
|
||
</div>
|
||
<div class="itemBody" id="line2"></div>
|
||
</div>
|
||
<!-- <div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>数据采集</div>
|
||
</div>
|
||
<div class="itemBody itemBodyFlex">
|
||
<div
|
||
id="pieChart"
|
||
style="width: 100px; height: 300px"
|
||
></div>
|
||
<el-table
|
||
id="elTable"
|
||
style="width: 250px"
|
||
:data="tableData"
|
||
:header-cell-style="{
|
||
'text-align': 'center',
|
||
color: '#fff',
|
||
}"
|
||
:cell-style="{ 'text-align': 'center', color: '#fff' }"
|
||
>
|
||
<el-table-column
|
||
prop="code"
|
||
label="位号"
|
||
></el-table-column>
|
||
<el-table-column label="数值">
|
||
<template #default="scope">
|
||
{{ scope.row.last_data.last_val }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="50">
|
||
<template #default="scope">
|
||
<div
|
||
v-if="scope.row.gather_state == 0"
|
||
class="successCircle"
|
||
></div>
|
||
<div v-else class="warningCircle"></div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="right_block">
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>本月主机设备电耗</div>
|
||
</div>
|
||
<div class="itemBody itemBodyFlex">
|
||
<div id="radar" style="height: 100%"></div>
|
||
<div class="bodyList">
|
||
<table>
|
||
<tbody>
|
||
<tr class="bodyListItem tableHeader">
|
||
<th class="bodyListItem_name">工序</th>
|
||
<th class="bodyListItem_name">
|
||
电耗<span
|
||
style="
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
"
|
||
>kw.h</span
|
||
>
|
||
</th>
|
||
</tr>
|
||
<tr
|
||
v-for="item in elecData"
|
||
:key="item"
|
||
class="bodyListItem bodyListItemBg"
|
||
>
|
||
<td class="bodyListItem_name">
|
||
{{ item.name }}
|
||
</td>
|
||
<td class="bodyListItem_num">
|
||
{{ item.value }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>能源消耗</div>
|
||
</div>
|
||
<div class="itemBody" id="line3"></div>
|
||
</div>
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>本月能源数据</div>
|
||
</div>
|
||
<div class="itemBody" style="padding: 5%">
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>熟料综合电耗</span>
|
||
<p class="elec_number">
|
||
{{ hotData.celec_consume_unit }}
|
||
<span class="elec_unit">kw.h/t</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>熟料综合煤耗</span>
|
||
<p class="elec_number">
|
||
{{ hotData.coal_consume_unit }}
|
||
<span class="elec_unit">kgce/t</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>熟料综合能耗</span>
|
||
<p class="elec_number">
|
||
{{ hotData.cen_consume_unit }}
|
||
<span class="elec_unit">kgce/t</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>水泥综合能耗</span>
|
||
<p class="elec_number">
|
||
{{ hotData.sn_cen_consume_unit}}
|
||
<span class="elec_unit">kgce/t</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>水泥工序电耗</span>
|
||
<p class="elec_number">
|
||
{{ hotData.sn_elec_consume_unit }}
|
||
<span class="elec_unit">kw.h/t</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>水泥包装工序电耗</span>
|
||
<p class="elec_number">
|
||
{{ hotData.bz_elec_consume_unit }}
|
||
<span class="elec_unit">kw.h/t</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 value from "./../enm_energy/value.vue";
|
||
import config from "@/config";
|
||
BABYLON.DracoCompression.Configuration.decoder.wasmUrl =
|
||
"./draco_wasm_wrapper_gltf.js";
|
||
BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl =
|
||
"./draco_decoder_gltf.wasm";
|
||
BABYLON.DracoCompression.Configuration.decoder.fallbackUrl =
|
||
"./draco_decoder_gltf.js";
|
||
import "babylonjs-loaders";
|
||
import "animate.css";
|
||
export default {
|
||
beforeRouteLeave(to, from, next) {
|
||
// 页面离开时刷新页面
|
||
window.location.reload();
|
||
next();
|
||
},
|
||
components: { value },
|
||
data() {
|
||
return {
|
||
colors: [
|
||
{ color: "#f95050", percentage: 20 },
|
||
{ color: "#e6a23c", percentage: 40 },
|
||
{ color: "#1989fa", percentage: 60 },
|
||
{ color: "#02f5f2", percentage: 80 },
|
||
{ color: "#5cb87a", percentage: 100 },
|
||
],
|
||
shengliaoData: {
|
||
KH: [
|
||
1.081, 0.922, 1.034, 1.079, 1.088, 0.983, 0.917, 1.125,
|
||
1.03, 0.995, 1.019, 1.074, 0.925, 0.943, 1.067, 1.048,
|
||
0.964, 0.884, 0.947, 1.017, 1.011, 1.022, 0.994, 1.025,
|
||
1.031, 1.003, 0.941, 0.982, 1.067, 0.982, 0.987,
|
||
],
|
||
SM: [
|
||
2.18, 2.46, 2.63, 2.34, 2.14, 2.52, 2.41, 2.65, 2.45, 2.5,
|
||
2.52, 2.49, 2.49, 2.45, 2.44, 2.38, 2.38, 2.3, 2.65, 2.53,
|
||
2.49, 2.41, 2.57, 2.69, 2.64, 2.74, 2.81, 2.38, 2.54, 2.54,
|
||
2.38,
|
||
],
|
||
IM: [
|
||
1.67, 1.6, 1.4, 1.41, 1.61, 1.41, 1.53, 1.35, 1.33, 1.35,
|
||
1.29, 1.27, 0.61, 0.72, 0.66, 1.14, 1.18, 1.21, 1.48, 1.48,
|
||
1.49, 1.45, 1.41, 1.48, 1.35, 1.22, 1.33, 1.68, 1.45, 1.36,
|
||
1.49,
|
||
],
|
||
},
|
||
shuliaoData: {
|
||
KH: [
|
||
0.873, 0.861, 0.873, 0.876, 0.883, 0.882, 0.83, 0.882,
|
||
0.913, 0.92, 0.893, 0.93, 0.94, 0.851, 0.87, 0.958, 0.935,
|
||
0.886, 0.873, 0.886, 0.939, 0.919, 0.941, 0.948, 0.899,
|
||
0.906, 0.914, 0.852, 0.852, 0.923, 0.884,
|
||
],
|
||
SM: [
|
||
2.37, 2.51, 2.66, 2.44, 2.58, 2.54, 2.41, 2.52, 2.41, 2.51,
|
||
2.56, 2.49, 2.54, 2.44, 2.6, 2.44, 2.42, 2.46, 2.53, 2.54,
|
||
2.53, 2.45, 2.64, 2.64, 2.73, 2.59, 2.79, 2.39, 2.4, 2.6,
|
||
2.52,
|
||
],
|
||
IM: [
|
||
1.65, 1.48, 1.43, 1.53, 1.39, 1.41, 1.52, 1.43, 1.4, 1.39,
|
||
1.28, 1.31, 0.75, 0.92, 0.83, 1.1, 1.21, 1.18, 1.28, 1.45,
|
||
1.51, 1.45, 1.37, 1.35, 1.35, 1.34, 1.31, 1.6, 1.54, 1.37,
|
||
1.41,
|
||
],
|
||
},
|
||
KHData: [],
|
||
SMData: [],
|
||
IMData: [],
|
||
factoryName: "",
|
||
initialAlpha: 2.73,
|
||
initialBeta: 1.24,
|
||
initialRadius: 8,
|
||
initialTarget: null,
|
||
resizeTimeout: null,
|
||
loadedPercent: 0,
|
||
currentLightMesh: null,
|
||
infoVisibel: false,
|
||
clickVisible: false,
|
||
percentage: 25,
|
||
updateTime: "2023-08-17 16:00:00",
|
||
yurefadianId: "",
|
||
currentTime: "",
|
||
currentWeek: "",
|
||
currentYear: "",
|
||
currentMonth: "",
|
||
currentDay: "",
|
||
timerTime: null,
|
||
timerData: null,
|
||
start_date: "",
|
||
end_date: "",
|
||
dialogData: {
|
||
deptName: "",
|
||
},
|
||
currentData: {
|
||
deptName: "",
|
||
},
|
||
deptName: "入窑生料",
|
||
heightTimer: null,
|
||
count_shuliao: 0,
|
||
count_meihao: 0,
|
||
count_elec: 0,
|
||
blockTableHeight: 0,
|
||
xAxisDate: [],
|
||
linearGradientColors: [
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(255, 255, 0)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(255, 255, 0)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(0, 221, 255)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(77, 119, 255)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(255, 162, 255)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(116, 21, 219)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(255, 0, 135)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(135, 0, 157)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(255, 191, 0)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(224, 62, 76)",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(246, 5, 213)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(244, 130, 9 )",
|
||
},
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(18, 6, 248)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(6, 248, 80)",
|
||
},
|
||
]),
|
||
],
|
||
sectionNames: {
|
||
电石渣堆棚: "电石渣",
|
||
原料磨及废气处理: "原料磨",
|
||
窑: "回转窑",
|
||
窑头: "煤磨",
|
||
水泥配料库: "水泥磨",
|
||
水泥储存及散装库: "水泥包装",
|
||
},
|
||
totalData: {
|
||
shuliao: 0,
|
||
cement: 0,
|
||
out_cement: 0,
|
||
},
|
||
rateData: [
|
||
{ name: "原料磨", value: 0, rate:0 },
|
||
{ name: "煤磨", value: 0, rate:0 },
|
||
{ name: "回转窑", value: 0, rate:0 },
|
||
{ name: "水泥磨", value: 0 , rate:0 },
|
||
],
|
||
elecData: [
|
||
{ name: "电石渣", value: 0 },
|
||
{ name: "原料磨", value: 0 },
|
||
{ name: "煤磨", value: 0 },
|
||
{ name: "回转窑", value: 0 },
|
||
{ name: "水泥磨", value: 0 },
|
||
{ name: "水泥包装", value: 0 },
|
||
],
|
||
hotData: {
|
||
celec_consume_unit: "", //综合电耗
|
||
coal_consume_unit: "", //单位煤耗
|
||
cen_consume_unit: "", //综合能耗
|
||
sn_cen_consume_unit: "", //水泥综合能耗
|
||
sn_elec_consume_unit: "",//水泥分布电耗
|
||
bz_elec_consume_unit: "",//水泥包装分布电耗
|
||
},
|
||
tableData: [],
|
||
tezhongData: [],
|
||
option: {
|
||
// color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
textStyle: {
|
||
color: "#02f5f2",
|
||
},
|
||
backgroundColor: "rgba(255,255,255,0.3)",
|
||
},
|
||
legend: {
|
||
icon: "stack",
|
||
top: 5,
|
||
right: 5,
|
||
data: [],
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
right: "4%",
|
||
bottom: "5%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
nameTextStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
axisLabel: {
|
||
color: "#ffffff",
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: "",
|
||
type: "value",
|
||
position: "left",
|
||
alignTicks: true,
|
||
nameTextStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
axisLabel: {
|
||
color: "#ffffff",
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed", //y轴分割线类型
|
||
color: "rgba(102,102,102,0.9)",
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "",
|
||
type: "value",
|
||
position: "right",
|
||
alignTicks: true,
|
||
nameTextStyle: {
|
||
color: "#00DDFF",
|
||
},
|
||
axisLabel: {
|
||
color: "#00DDFF",
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed", //y轴分割线类型
|
||
color: "rgba(102,102,102,0.9)",
|
||
width: 1,
|
||
},
|
||
},
|
||
}
|
||
],
|
||
series: [],
|
||
},
|
||
radarSeriesData: [0, 0, 0, 0, 0],
|
||
radarOption: {
|
||
radar: {
|
||
indicator: [
|
||
{ name: "电石渣" },
|
||
{ name: "原料磨" },
|
||
{ name: "煤磨" },
|
||
{ name: "回转窑" },
|
||
{ name: "水泥磨" },
|
||
{ name: "水泥包装" },
|
||
],
|
||
name: {
|
||
textStyle: {
|
||
padding: [20, 20], // 控制文字padding
|
||
},
|
||
},
|
||
nameGap: 2,
|
||
radius: 63, //缩放
|
||
center: ["50%", "50%"], //位置
|
||
// shape: "circle",
|
||
splitNumber: 4,
|
||
axisName: {
|
||
color: "#2adbbc",
|
||
padding: [10, 10],
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: [
|
||
"rgba(238, 197, 102, 0.1)",
|
||
"rgba(238, 197, 102, 0.2)",
|
||
"rgba(238, 197, 102, 0.4)",
|
||
"rgba(238, 197, 102, 0.7)",
|
||
"rgba(238, 197, 102, 1)",
|
||
].reverse(),
|
||
},
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(238, 197, 102, 0.5)",
|
||
},
|
||
},
|
||
},
|
||
series: {
|
||
name: "工序电耗",
|
||
type: "radar",
|
||
lineStyle: {
|
||
width: 1,
|
||
opacity: 0.5,
|
||
},
|
||
data: [
|
||
{
|
||
value: [120, 118, 130, 100, 99],
|
||
name: "Data C",
|
||
// symbol: "rect",
|
||
symbolSize: 5,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
},
|
||
//点的颜色
|
||
itemStyle: {
|
||
color: "#ffa500",
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.7,
|
||
color: new echarts.graphic.RadialGradient(
|
||
0.1,
|
||
0.6,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgb(241, 56, 4)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(12, 35, 196)",
|
||
},
|
||
]
|
||
),
|
||
},
|
||
label: {
|
||
show: true,
|
||
color: "#df6d14",
|
||
formatter: function (params) {
|
||
return params.value;
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.bigScreenName =
|
||
that.$TOOL.data.get("BASE_INFO").base.bigScreen_name;
|
||
that.showTime();
|
||
that.addListener();
|
||
//一天的毫秒数
|
||
let nowDate = new Date();
|
||
let year = nowDate.getFullYear();
|
||
let month = nowDate.getMonth() + 1;
|
||
let day = nowDate.getDate();
|
||
let days = new Date(year, month, 0).getDate();
|
||
// month = month < 10 ? "0" + month : month;
|
||
that.currentYear = year;
|
||
that.currentMonth = month;
|
||
that.currentDay = day;
|
||
let datelist = [];
|
||
let tezhongData = [];
|
||
function getRandomNumber(min, max) {
|
||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
}
|
||
for (let i = 0; i < days; i++) {
|
||
datelist.push(i + 1);
|
||
}
|
||
for (let i = 0; i < day; i++) {
|
||
let randomNumber = getRandomNumber(50, 5000);
|
||
tezhongData.push(randomNumber);
|
||
}
|
||
that.tezhongData = tezhongData;
|
||
that.option.xAxis.data = datelist;
|
||
that.xAxisDate = datelist;
|
||
that.$nextTick(() => {
|
||
that.initDomStyle();
|
||
that.initFactory();
|
||
this.productNum();
|
||
this.waterAirData();
|
||
this.getMonthData();
|
||
this.eqRate();
|
||
this.generation();
|
||
this.proceElec();
|
||
this.qualAnalys();
|
||
this.dataCollect();
|
||
that.timerTime = setInterval(() => {
|
||
that.showTime();
|
||
}, 1000);
|
||
that.timerOther = setInterval(() => {
|
||
that.initializeData();
|
||
}, 180000); // 3分钟更新一次
|
||
});
|
||
},
|
||
beforeUnmount() {
|
||
// 清除所有定时器，避免内存泄漏
|
||
if (this.timerTime) {
|
||
clearInterval(this.timerTime);}
|
||
if (this.timerOther) {
|
||
clearInterval(this.timerOther);}
|
||
},
|
||
methods: {
|
||
initializeData() {
|
||
this.productNum();
|
||
this.waterAirData();
|
||
this.getMonthData();
|
||
this.eqRate();
|
||
this.generation();
|
||
this.proceElec();
|
||
this.qualAnalys();
|
||
this.dataCollect();
|
||
},
|
||
productNum() {
|
||
let that = this;
|
||
// 初始化option1和图表
|
||
let option1 = that.deepCopy(that.option);
|
||
let chartDom = document.getElementById("line1");
|
||
let myChart = echarts.init(chartDom);
|
||
|
||
let seriesData = new Array(31).fill(0); // 假设有31天的数据，初始化为0
|
||
let seriesData1 = new Array(31).fill(0);
|
||
let seriesData2 = new Array(31).fill(0);
|
||
|
||
// 获取回转窑数据
|
||
this.$API.mtm.mgroup.list.req({ page: 0, search: "回转窑" }).then((res) => {
|
||
that.huihzuanyaoId = res[0]?.id;
|
||
let query = {
|
||
page: 0,
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
type: "day_s",
|
||
mgroup: that.huihzuanyaoId,
|
||
};
|
||
return this.$API.enm.enstat.req(query);
|
||
}).then((response) => {
|
||
response.forEach((item) => {
|
||
let ind = item.day_s - 1;
|
||
seriesData[ind] = item.total_production || 0; // 防止空数据
|
||
|
||
});
|
||
}).then(() => {
|
||
// 获取水泥磨数据
|
||
return this.$API.mtm.mgroup.list.req({ page: 0, search: "水泥磨" });
|
||
}).then((res) => {
|
||
that.shuinimoId = res[0]?.id;
|
||
let query = {
|
||
page: 0,
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
type: "day_s",
|
||
mgroup: that.shuinimoId,
|
||
};
|
||
return this.$API.enm.enstat.req(query);
|
||
}).then((response) => {
|
||
response.forEach((item) => {
|
||
let ind = item.day_s - 1;
|
||
seriesData1[ind] = item.total_production || 0;
|
||
});
|
||
}).then(() => {
|
||
// 获取水泥包装数据
|
||
return this.$API.mtm.mgroup.list.req({ page: 0, search: "水泥包装" });
|
||
}).then((res) => {
|
||
that.shuinimoId = res[0]?.id;
|
||
let query = {
|
||
page: 0,
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
type: "day_s",
|
||
mgroup: that.shuinimoId,
|
||
};
|
||
return this.$API.enm.enstat.req(query);
|
||
}).then((response) => {
|
||
let maxId;
|
||
response.forEach((item) => {
|
||
let ind = item.day_s - 1;
|
||
maxId = ind;
|
||
seriesData2[ind] = item.total_production || 0;
|
||
});
|
||
// 更新图表数据
|
||
option1.color = ['#FFFF00','#CC00FF', '#FFBF00']
|
||
option1.legend.data = [
|
||
{
|
||
name: "熟料",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
},
|
||
{
|
||
name: "水泥",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[2],
|
||
},
|
||
},
|
||
{
|
||
name: "出厂水泥",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[4],
|
||
},
|
||
},
|
||
];
|
||
option1.series = [
|
||
{
|
||
name: "熟料",
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: seriesData,
|
||
},
|
||
{
|
||
name: "水泥",
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[2],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: seriesData1,
|
||
},
|
||
{
|
||
name: "出厂水泥",
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[4],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: seriesData2,
|
||
},
|
||
];
|
||
myChart.setOption(option1);
|
||
let index2 = 0;
|
||
intervalId = setInterval(function () {
|
||
if (index2 <= maxId) {
|
||
myChart.dispatchAction({
|
||
type: "downplay",
|
||
seriesIndex: 0,
|
||
});
|
||
myChart.dispatchAction({
|
||
type: "highlight",
|
||
seriesIndex: 0,
|
||
dataIndex: index2,
|
||
});
|
||
myChart.dispatchAction({
|
||
type: "showTip",
|
||
seriesIndex: 0,
|
||
dataIndex: index2,
|
||
});
|
||
index2++;
|
||
} else {
|
||
index2 = 0;
|
||
// clearInterval(intervalId);
|
||
}
|
||
}, 1000);
|
||
});
|
||
},
|
||
getMonthData() {
|
||
// 获取回转窑数据
|
||
let that = this;
|
||
this.$API.mtm.mgroup.list.req({ page: 0, search: "回转窑" }).then((res) => {
|
||
that.huihzuanyaoId = res[0]?.id; //回转窑id
|
||
let query = {
|
||
page: 0,
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
type: "month_s",
|
||
mgroup: that.huihzuanyaoId,
|
||
};
|
||
return this.$API.enm.enstat.req(query);
|
||
}).then((response) => {
|
||
response.forEach((item) => {
|
||
if (item.month_s == that.currentMonth) {
|
||
that.totalData.shuliao = item.total_production; //总产量
|
||
}
|
||
})
|
||
}).then(() => {
|
||
// 获取水泥磨数据
|
||
return this.$API.mtm.mgroup.list.req({ page: 0, search: "水泥磨" });
|
||
}).then((res) => {
|
||
that.shuinimoId = res[0]?.id; //水泥磨id
|
||
let query = {
|
||
page: 0,
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
type: "month_s",
|
||
mgroup: that.shuinimoId,
|
||
};
|
||
return that.$API.enm.enstat.req(query);
|
||
}).then((response) => {
|
||
response.forEach((item) => {
|
||
if (item.month_s == that.currentMonth) {
|
||
that.totalData.cement = item.total_production; //水泥磨产量
|
||
}
|
||
})
|
||
}).then(() => {
|
||
// 获取出厂水泥数据
|
||
return this.$API.mtm.mgroup.list.req({ page: 0, search: "水泥包装" });
|
||
}).then((res) => {
|
||
that.out_cement = res[0]?.id; //水泥包装id
|
||
|
||
let query = {
|
||
page: 0,
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
type: "month_s",
|
||
mgroup: that.out_cement,
|
||
};
|
||
return that.$API.enm.mpointstat.list.req(query);
|
||
}).then((response) => {
|
||
response.forEach((item) => {
|
||
if (item.mpoint_name == '出厂水泥') {
|
||
that.totalData.out_cement = item.val || 0; //出厂水泥
|
||
}
|
||
})
|
||
})
|
||
},
|
||
waterAirData() {
|
||
let that = this;
|
||
// 初始化option2和图表
|
||
let option3 = that.deepCopy(that.option); // 假设你有this.option作为基础配置
|
||
let chartDom = document.getElementById("line2");
|
||
let myChart = echarts.init(chartDom);
|
||
|
||
// 初始化各个series数据数组
|
||
let seriesData1 = new Array(31).fill(0); // 原料车间用水
|
||
let seriesData3 = new Array(31).fill(0); // 烧成车间用水
|
||
let seriesData5 = new Array(31).fill(0); // 水泥车间用水
|
||
|
||
// 定义查询参数的生成函数
|
||
function generateQuery(mpointId) {
|
||
return {
|
||
page: 0,
|
||
year: that.currentYear,
|
||
month: that.currentMonth,
|
||
type: "day",
|
||
mpoint: mpointId,
|
||
};
|
||
}
|
||
|
||
// 第一个API查询
|
||
let query1 = generateQuery("3631858687335112704");
|
||
this.$API.enm.mpointstat.list.req(query1).then((response) => {
|
||
//反转response数据
|
||
response.reverse();
|
||
response.forEach((item) => {
|
||
let ind = item.day - 1;
|
||
seriesData1[ind] = item.val || 0;
|
||
});
|
||
|
||
// 第二个API查询
|
||
let query2 = generateQuery("3631858394648182784");
|
||
return this.$API.enm.mpointstat.list.req(query2);
|
||
|
||
}).then((response) => {
|
||
response.reverse();
|
||
|
||
response.forEach((item) => {
|
||
let ind = item.day - 1;
|
||
seriesData3[ind] = item.val || 0;
|
||
});
|
||
// 第三个API查询
|
||
let query3 = generateQuery("3631858982832218112");
|
||
response.reverse();
|
||
return this.$API.enm.mpointstat.list.req(query3);
|
||
}).then((response) => {
|
||
response.reverse();
|
||
let maxId;
|
||
response.forEach((item) => {
|
||
let ind = item.day - 1;
|
||
maxId = ind;
|
||
seriesData5[ind] = item.val || 0;
|
||
});
|
||
// 更新图表数据
|
||
option3.color = ['#FFBF00','#6495ED', '#CC00FF']
|
||
option3.legend.data = [
|
||
{
|
||
name: "生活水",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
},
|
||
{
|
||
name: "绿化水",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[1],
|
||
},
|
||
},
|
||
{
|
||
name: "工业水",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[2],
|
||
},
|
||
},
|
||
];
|
||
option3.series = [
|
||
{
|
||
name: '生活水',
|
||
type: 'line',
|
||
data: seriesData1,
|
||
lineStyle: {
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
},
|
||
{
|
||
name: '绿化水',
|
||
type: 'line',
|
||
data: seriesData3,
|
||
lineStyle: {
|
||
color: that.linearGradientColors[1],
|
||
},
|
||
},
|
||
{
|
||
name: '工业水',
|
||
type: 'line',
|
||
data: seriesData5,
|
||
lineStyle: {
|
||
color: that.linearGradientColors[2]
|
||
},
|
||
},
|
||
]
|
||
myChart.setOption(option3); // 设置更新后的图表
|
||
let index3 = 0;
|
||
intervalId = setInterval(function () {
|
||
if (index3 <= maxId) {
|
||
myChart.dispatchAction({
|
||
type: "downplay",
|
||
seriesIndex: 0,
|
||
});
|
||
myChart.dispatchAction({
|
||
type: "highlight",
|
||
seriesIndex: 0,
|
||
dataIndex: index3,
|
||
});
|
||
myChart.dispatchAction({
|
||
type: "showTip",
|
||
seriesIndex: 0,
|
||
dataIndex: index3,
|
||
});
|
||
index3++;
|
||
} else {
|
||
index3 = 0;
|
||
// clearInterval(intervalId);
|
||
}
|
||
}, 1000);
|
||
});
|
||
},
|
||
//水泥磨
|
||
getShiNengMouData() {
|
||
let that = this;
|
||
let query = {};
|
||
query.page = 0;
|
||
query.year_s = that.currentYear;
|
||
query.month_s = that.currentMonth;
|
||
query.type = "month_s";
|
||
this.$API.enm.enstat.req(query).then((response) => {
|
||
|
||
})
|
||
},
|
||
//台时产量
|
||
eqRate() {
|
||
let that = this;
|
||
let query = {};
|
||
query.page = 0;
|
||
query.year_s = that.currentYear;
|
||
query.month_s = that.currentMonth;
|
||
query.type = "month_s";
|
||
this.$API.enm.enstat.req(query).then((response) => {
|
||
let seriesData = [];
|
||
let data = response;
|
||
data.forEach((item) => {
|
||
if (item.mgroup_name == "原料磨") {
|
||
that.rateData[0].value = item.production_hour
|
||
that.rateData[0].rate = item.run_rate
|
||
;
|
||
} else if (item.mgroup_name == "煤磨") {
|
||
that.rateData[1].value = item.production_hour
|
||
that.rateData[1].rate = item.run_rate
|
||
;
|
||
} else if (item.mgroup_name == "回转窑") {
|
||
that.rateData[2].value = item.production_hour
|
||
that.rateData[2].rate = item.run_rate
|
||
;
|
||
} else if (item.mgroup_name == "水泥磨") {
|
||
that.rateData[3].value = item.production_hour
|
||
that.rateData[3].rate = item.run_rate
|
||
};
|
||
});
|
||
});
|
||
},
|
||
generation() {
|
||
let that = this;
|
||
this.$API.mtm.mgroup.list
|
||
.req({ page: 0, search: "回转窑" })
|
||
.then((res) => {
|
||
that.yurefadianId = res[0].id;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.year_s = that.currentYear;
|
||
params.month_s = that.currentMonth;
|
||
params.type = "month_s";
|
||
params.mgroup = that.yurefadianId;
|
||
this.$API.enm.enstat.req(params).then((ress) => {
|
||
that.hotData.celec_consume_unit =
|
||
ress[0].celec_consume_unit;
|
||
that.hotData.coal_consume_unit =
|
||
ress[0].coal_consume_unit;
|
||
that.hotData.cen_consume_unit = ress[0].cen_consume_unit;
|
||
});
|
||
});
|
||
this.$API.mtm.mgroup.list
|
||
.req({ page: 0, search: "水泥磨" })
|
||
.then((res) => {
|
||
that.yurefadianId = res[0].id;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.year_s = that.currentYear;
|
||
params.month_s = that.currentMonth;
|
||
params.type = "month_s";
|
||
params.mgroup = that.yurefadianId;
|
||
this.$API.enm.enstat.req(params).then((ress) => {
|
||
that.hotData.sn_elec_consume_unit =
|
||
ress[0].elec_consume_unit;
|
||
that.hotData.sn_cen_consume_unit = ress[0].cen_consume_unit;
|
||
});
|
||
});
|
||
this.$API.mtm.mgroup.list
|
||
.req({ page: 0, search: "水泥包装" })
|
||
.then((res) => {
|
||
that.yurefadianId = res[0].id;
|
||
let params = {};
|
||
params.page = 0;
|
||
params.year_s = that.currentYear;
|
||
params.month_s = that.currentMonth;
|
||
params.type = "month_s";
|
||
params.mgroup = that.yurefadianId;
|
||
this.$API.enm.enstat.req(params).then((ress) => {
|
||
that.hotData.bz_elec_consume_unit =
|
||
ress[0].elec_consume_unit;
|
||
});
|
||
});
|
||
},
|
||
//工序电耗
|
||
proceElec() {
|
||
let that = this;
|
||
let params = {
|
||
type: "month_s",
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
};
|
||
that.$API.enm.enstat.req(params).then((res) => {
|
||
let data = res.results;
|
||
let seriesData = [0, 0, 0, 0, 0];
|
||
data.forEach((item, index) => {
|
||
if (item.mgroup_name == "电石渣") {
|
||
seriesData[0] = that.elecData[0].value =
|
||
item.elec_consume;
|
||
} else if (item.mgroup_name == "原料磨") {
|
||
seriesData[1] = that.elecData[1].value =
|
||
item.elec_consume;
|
||
} else if (item.mgroup_name == "煤磨") {
|
||
seriesData[2] = that.elecData[2].value =
|
||
item.elec_consume;
|
||
} else if (item.mgroup_name == "回转窑") {
|
||
seriesData[3] = that.elecData[3].value =
|
||
item.elec_consume;
|
||
} else if (item.mgroup_name == "水泥磨") {
|
||
seriesData[4] = that.elecData[4].value =
|
||
item.elec_consume;
|
||
} else if (item.mgroup_name == "水泥包装") {
|
||
seriesData[5] = that.elecData[5].value =
|
||
item.elec_consume;
|
||
}
|
||
});
|
||
that.radarOption.series.data[0].value = seriesData;
|
||
//右1---工序电耗---雷达图
|
||
let radarDom = document.getElementById("radar");
|
||
let radarChart = echarts.init(radarDom);
|
||
radarChart.setOption(that.radarOption);
|
||
});
|
||
},
|
||
//能源消耗
|
||
qualAnalys() {
|
||
let that = this;
|
||
// 初始化option2和图表
|
||
let option5 = that.deepCopy(that.option); // 假设你有this.option作为基础配置
|
||
let chartDom = document.getElementById("line3");
|
||
let myChart = echarts.init(chartDom);
|
||
|
||
// 初始化各个series数据数组
|
||
let seriesData = new Array(12).fill(0);
|
||
let seriesData1 = new Array(12).fill(0);
|
||
|
||
// 定义查询参数的生成函数
|
||
function generateQuery(mgroupId) {
|
||
return {
|
||
page: 0,
|
||
//获取当前年的第一个月
|
||
start_time: that.currentYear + "-01-01 00:00:00",
|
||
end_time: that.currentYear + "-12-31 00:00:00",
|
||
type: "month_s",
|
||
mgroup: mgroupId,
|
||
};
|
||
}
|
||
function generateQueryMpoint(mpointId) {
|
||
return {
|
||
page: 0,
|
||
type: "month",
|
||
year: that.currentYear,
|
||
mpoint: mpointId,
|
||
};
|
||
}
|
||
// 第一个API查询 煤磨总产量 月数据
|
||
let query1 = generateQuery("3626253029718056960");
|
||
this.$API.enm.enstat.req(query1).then((response) => {
|
||
response.forEach((item) => {
|
||
if (item.qua_data.length > 0) {
|
||
let ind = item.month_s - 1;
|
||
seriesData[ind] = item.total_production || 0;
|
||
}
|
||
});
|
||
// 获取每个月的全厂电量
|
||
let query2 = generateQueryMpoint("3631880992400515072");
|
||
return this.$API.enm.mpointstat.list.req(query2);
|
||
}).then((response) => {
|
||
let maxId;
|
||
response.forEach((item) => {
|
||
let ind = item.month - 1;
|
||
maxId = 12;
|
||
seriesData1[ind] = item.val || 0;
|
||
});
|
||
// 更新图表数据
|
||
option5.color = ["#cd1e4b", "#3cee10", "#37A2FF", "#FF0087", "#FFBF00"],
|
||
option5.legend.data = [
|
||
{
|
||
name: "原煤消耗(t)",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: "#c30add ",
|
||
},
|
||
},
|
||
{
|
||
name: "全厂电量(kwh)",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: "#df5413",
|
||
},
|
||
},
|
||
];
|
||
option5.series = [
|
||
{
|
||
name: '原煤消耗(t)',
|
||
type: 'line',
|
||
yAxisIndex: 0,
|
||
data: seriesData,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[6],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
},
|
||
|
||
{
|
||
name: '全厂电量(kwh)',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: seriesData1,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[5],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
},
|
||
];
|
||
option5.xAxis.data = [
|
||
"1月",
|
||
"2月",
|
||
"3月",
|
||
"4月",
|
||
"5月",
|
||
"6月",
|
||
"7月",
|
||
"8月",
|
||
"9月",
|
||
"10月",
|
||
"11月",
|
||
"12月",
|
||
];
|
||
myChart.setOption(option5); // 设置更新后的图表
|
||
let index3 = 0;
|
||
intervalId = setInterval(function () {
|
||
if (index3 <= maxId) {
|
||
myChart.dispatchAction({
|
||
type: "downplay",
|
||
seriesIndex: 0,
|
||
});
|
||
myChart.dispatchAction({
|
||
type: "highlight",
|
||
seriesIndex: 0,
|
||
dataIndex: index3,
|
||
});
|
||
myChart.dispatchAction({
|
||
type: "showTip",
|
||
seriesIndex: 0,
|
||
dataIndex: index3,
|
||
});
|
||
index3++;
|
||
} else {
|
||
index3 = 0;
|
||
// clearInterval(intervalId);
|
||
}
|
||
}, 1000);
|
||
});
|
||
},
|
||
//数据采集——设备运行状态
|
||
dataCollect() {
|
||
let that = this;
|
||
let params = {
|
||
enabled: true,
|
||
type: 10,
|
||
page: 0,
|
||
query: "{ id, name, code, last_data, gather_state }",
|
||
};
|
||
that.tableData = [];
|
||
function getTypeof(variable) {
|
||
return typeof variable;
|
||
}
|
||
that.$API.enm.mpoint.list.req(params).then((res) => {
|
||
let success_num = 0;
|
||
let error_num = 0;
|
||
res.forEach((item, index) => {
|
||
if (item.gather_state == 0) {
|
||
success_num++;
|
||
} else {
|
||
error_num++;
|
||
}
|
||
if (item.last_data.last_val) {
|
||
if (getTypeof(item.last_data.last_val) == "number") {
|
||
item.last_data.last_val.toFixed(2);
|
||
}
|
||
}
|
||
that.tableData.push(item);
|
||
});
|
||
});
|
||
},
|
||
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日"
|
||
);
|
||
},
|
||
addListener() {
|
||
var that = this;
|
||
window.addEventListener("resize", function () {
|
||
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];
|
||
var left_block = document.getElementsByClassName("left_block")[0];
|
||
var right_block = document.getElementsByClassName("right_block")[0];
|
||
var radarChart = document.getElementById("radar");
|
||
if (windowWidth > 960) {
|
||
container.style.overflow = "hidden";
|
||
container.style.height = windowHeight + "px";
|
||
model.style.position = "absolute";
|
||
model.style.height = windowHeight - 3 + "px";
|
||
model.style.top = 0;
|
||
left_block.style.position = "absolute";
|
||
left_block.style.width = "25%";
|
||
// left_block.style.display = "none";
|
||
right_block.style.position = "absolute";
|
||
right_block.style.width = "25%";
|
||
// right_block.style.display = "none";
|
||
var itemHeight = Math.round((windowHeight - 150) / 3);
|
||
var itemBodyHeight = itemHeight - 40;
|
||
var flexItems = document.getElementsByClassName("flexItem");
|
||
var itemBodys = document.getElementsByClassName("itemBody");
|
||
for (var i = 0; i < flexItems.length; i++) {
|
||
var flexItem = flexItems[i];
|
||
flexItem.style.height = itemHeight + "px";
|
||
}
|
||
for (var i = 0; i < itemBodys.length; i++) {
|
||
var itemBody = itemBodys[i];
|
||
itemBody.style.height = itemBodyHeight + "px";
|
||
}
|
||
// elTable.style.height = itemBodyHeight - 20 + "px";
|
||
let pieWidth = Math.round(windowWidth / 100) * 22 - 180;
|
||
let radarWidth = Math.round(windowWidth / 100) * 22 - 130;
|
||
// pieChart.style.width = pieWidth + "px";
|
||
radarChart.style.width = radarWidth + "px";
|
||
} 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("line1");
|
||
// that.resizeChart("pieChart");
|
||
that.resizeChart("radar");
|
||
that.resizeChart("line2");
|
||
that.resizeChart("line3");
|
||
},
|
||
resizeChart(name) {
|
||
// 根据name resize chart
|
||
var myChart = echarts.getInstanceByDom(
|
||
document.getElementById(name)
|
||
);
|
||
if (myChart != undefined) {
|
||
// console.log(name + ' :resize')
|
||
myChart.resize();
|
||
}
|
||
},
|
||
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();
|
||
// Add your code here matching the playground format
|
||
const createScene = function () {
|
||
const scene = new BABYLON.Scene(engine);
|
||
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
|
||
|
||
const ground = BABYLON.MeshBuilder.CreateGround("ground", {
|
||
width: 50,
|
||
height: 50,
|
||
});
|
||
const groundMaterial = new BABYLON_GRID.GridMaterial(
|
||
"groundMaterial",
|
||
scene
|
||
);
|
||
groundMaterial.majorUnitFrequency = 5;
|
||
groundMaterial.minorUnitVisibility = 0.5;
|
||
groundMaterial.gridRatio = 2;
|
||
// groundMaterial.opacity = 0.99;
|
||
ground.material = groundMaterial;
|
||
ground.position.y = -0.1;
|
||
|
||
// 加载背景图片
|
||
const backgroundImage = new BABYLON.Layer(
|
||
"",
|
||
"img/photon_bg.png",
|
||
scene,
|
||
true
|
||
);
|
||
// const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
|
||
const camera = new BABYLON.ArcRotateCamera(
|
||
"camera",
|
||
that.initialAlpha,
|
||
that.initialBeta,
|
||
that.initialRadius,
|
||
new BABYLON.Vector3(-0.45, 1.588, 1.93)
|
||
);
|
||
that.camera = camera;
|
||
that.initialTarget = camera.getTarget();
|
||
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
||
camera.attachControl(canvas, true);
|
||
camera.maxZ = 1000; // 调整适当的值
|
||
// 相机限制
|
||
camera.lowerRadiusLimit = 8;
|
||
camera.upperRadiusLimit = 20;
|
||
|
||
// 灯光
|
||
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;
|
||
// 创建一个高亮层
|
||
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 = "-15%";
|
||
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";
|
||
control_main.addControl(button_main);
|
||
button_main.onPointerClickObservable.add(() => {
|
||
that.flyToMesh();
|
||
});
|
||
|
||
// 高亮显示mesh名
|
||
const mesh_rect = new BABYLON_GUI.Rectangle("mesh_rect");
|
||
mesh_rect.width = "100px";
|
||
mesh_rect.height = "25px";
|
||
mesh_rect.background = "orange";
|
||
mesh_rect.alpha = 0.6;
|
||
mesh_rect.isVisible = false;
|
||
advancedTexture.addControl(mesh_rect);
|
||
|
||
var mesh_name = new BABYLON_GUI.TextBlock("mesh_name");
|
||
mesh_name.text = "";
|
||
mesh_name.color = "white";
|
||
mesh_name.fontSize = "14px";
|
||
mesh_rect.addControl(mesh_name);
|
||
var remoteGlbUrl = config.HOST_URL + "/media/model/factory.glb";
|
||
|
||
BABYLON.SceneLoader.Append(
|
||
remoteGlbUrl,
|
||
"",
|
||
scene,
|
||
function (scene) {
|
||
// 判断字符串是否包含中文------ /[\u4E00-\u9FA5]+/g.test(str)
|
||
for (let key in that.sectionNames) {
|
||
const value = that.sectionNames[key];
|
||
const mesh = scene.getMeshByName(key);
|
||
if (mesh) {
|
||
// that.createImgLabel(value, mesh);
|
||
that.getMgroupChartData(value, mesh);
|
||
|
||
// // 创建一个工段数据展示panel
|
||
const info = {
|
||
name: value,
|
||
rows: [
|
||
{
|
||
label: "产品产量(t)",
|
||
field: "total_production",
|
||
value: 100,
|
||
},
|
||
{
|
||
label: "运转率(%)",
|
||
field: "run_rate",
|
||
value: 100,
|
||
},
|
||
{
|
||
label: "单位电耗(kwh)",
|
||
field: "elec_consume_unit",
|
||
value: 100,
|
||
},
|
||
],
|
||
};
|
||
// that.createDetailPanel(info, mesh);
|
||
}
|
||
}
|
||
engine.hideLoadingUI();
|
||
},
|
||
function (evt) {
|
||
var loadedPercent = 0;
|
||
if (evt.lengthComputable) {
|
||
loadedPercent = parseInt(
|
||
(evt.loaded * 100) / evt.total
|
||
);
|
||
} else {
|
||
var dlCount = evt.loaded / (1024 * 1024);
|
||
loadedPercent = Math.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.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";
|
||
control_main.addControl(header);
|
||
// 工段数据checkbox
|
||
var checkbox1 = new BABYLON_GUI.Checkbox();
|
||
checkbox1.width = "20px";
|
||
checkbox1.height = "20px";
|
||
// checkbox1.isChecked = true;
|
||
checkbox1.marginLeft = "16px";
|
||
checkbox1.color = "green";
|
||
checkbox1.onIsCheckedChangedObservable.add(function (value) {
|
||
if (value) {
|
||
for (let key in that.sectionNames) {
|
||
let name = that.sectionNames[key] + "_data_detail";
|
||
let dataView =
|
||
advancedTexture.getControlByName(name);
|
||
dataView.isVisible = true;
|
||
}
|
||
} else {
|
||
for (let key in that.sectionNames) {
|
||
let name = that.sectionNames[key] + "_data_detail";
|
||
let dataView =
|
||
advancedTexture.getControlByName(name);
|
||
dataView.isVisible = false;
|
||
}
|
||
}
|
||
// console.log("Camera Alpha:", camera.alpha);
|
||
// console.log("Camera Beta:", camera.beta);
|
||
// console.log("Camera Radius:", camera.radius);
|
||
// console.log("Camera Radius:", camera.target);
|
||
});
|
||
control_main.addControl(checkbox1);
|
||
var header1 = new BABYLON_GUI.TextBlock();
|
||
header1.text = "工段数据";
|
||
header1.width = "80px";
|
||
header1.textHorizontalAlignment =
|
||
BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||
header1.color = "white";
|
||
control_main.addControl(header1);
|
||
|
||
// 添加抓取事件
|
||
canvas.addEventListener("mousemove", (event) => {
|
||
// 使用 scene.pick 检测鼠标拾取
|
||
const pickResult = scene.pick(
|
||
scene.pointerX,
|
||
scene.pointerY
|
||
);
|
||
if (that.currentLightMesh) {
|
||
mesh_rect.isVisible = false;
|
||
highlightLayer.removeAllMeshes();
|
||
}
|
||
});
|
||
return scene;
|
||
};
|
||
|
||
const scene = createScene();
|
||
// scene.debugLayer.show();
|
||
engine.runRenderLoop(function () {
|
||
scene.render();
|
||
});
|
||
this.engine = engine;
|
||
this.scene = scene;
|
||
window.addEventListener("resize", function () {
|
||
engine.resize();
|
||
});
|
||
},
|
||
flyToMesh(mesh = undefined) {
|
||
// 不传mesh默认回到初始位置
|
||
let that = this;
|
||
const camera = that.camera;
|
||
if (mesh == undefined) {
|
||
if (
|
||
camera.alpha != that.initialAlpha ||
|
||
camera.beta != that.initialBeta ||
|
||
camera.radius != that.initialRadius
|
||
) {
|
||
let 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)
|
||
);
|
||
let position = that.initialTarget;
|
||
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
|
||
);
|
||
}
|
||
} else if (camera.target != mesh.position) {
|
||
console.log("fly to");
|
||
// 计算新的相机位置
|
||
let position = mesh._parentNode._position;
|
||
if (mesh._parentNode.id == "__root__") {
|
||
position = mesh.position;
|
||
}
|
||
let 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
|
||
);
|
||
}
|
||
},
|
||
createImgLabel(value, mesh) {
|
||
let that = this;
|
||
let imgUrl = "";
|
||
if (value == "石灰石破碎") {
|
||
imgUrl = "img/ly/ps.png";
|
||
} else if (value == "原料磨") {
|
||
imgUrl = "img/ly/ylm.png";
|
||
} else if (value == "煤磨") {
|
||
imgUrl = "img/ly/mm.png";
|
||
} else if (value == "回转窑") {
|
||
imgUrl = "img/ly/hzy.png";
|
||
} else if (value == "余热发电") {
|
||
imgUrl = "img/ly/yrfd.png";
|
||
}
|
||
var image = new BABYLON_GUI.Image(value + "_img", imgUrl);
|
||
image.width = "40px";
|
||
image.height = "40px";
|
||
image.linkOffsetY = -30;
|
||
that.myui.addControl(image);
|
||
image.linkWithMesh(mesh);
|
||
image.onPointerDownObservable.add(() => {
|
||
that.flyToMesh(mesh);
|
||
});
|
||
},
|
||
getMgroupChartData(value, mesh) {
|
||
//value:工段名称,mesh:模块
|
||
let that = this;
|
||
//根据名称获取工段数据
|
||
let query = {
|
||
mgroup__name: value,
|
||
type: "month_s",
|
||
year_s: that.currentYear,
|
||
month_s: that.currentMonth,
|
||
page: 0,
|
||
query: "{total_production,run_rate,elec_consume_unit,production_elec_unit}",
|
||
};
|
||
that.$API.enm.enstat.req(query).then((res) => {
|
||
let info = {
|
||
name: value,
|
||
rows: [],
|
||
};
|
||
if (value == "余热发电") {
|
||
info.rows = [
|
||
{
|
||
label: "发电量(kwh)",
|
||
field: "total_production",
|
||
value: res[0].total_production,
|
||
},
|
||
{
|
||
label: "运转率(%)",
|
||
field: "run_rate",
|
||
value: res[0].run_rate,
|
||
},
|
||
{
|
||
label: "发电量(kwh/t)",
|
||
field: "production_elec_unit",
|
||
value: res[0].production_elec_unit
|
||
? res[0].production_elec_unit
|
||
: "0.00",
|
||
},
|
||
];
|
||
} else {
|
||
info.rows = [
|
||
{
|
||
label: "产品产量(t)",
|
||
field: "total_production",
|
||
value: res[0].total_production,
|
||
},
|
||
{
|
||
label: "运转率(%)",
|
||
field: "run_rate",
|
||
value: res[0].run_rate,
|
||
},
|
||
{
|
||
label: "单位电耗(kwh)",
|
||
field: "elec_consume_unit",
|
||
value: res[0].elec_consume_unit,
|
||
},
|
||
];
|
||
}
|
||
|
||
that.createDetailPanel(info, mesh);
|
||
});
|
||
},
|
||
// 创建3D数据展示层GUI
|
||
createDetailPanel(info, mesh) {
|
||
let that = this;
|
||
//背景框
|
||
const data_view = new BABYLON_GUI.StackPanel(
|
||
info.name + "_data_detail"
|
||
);
|
||
data_view.width = "240px"; // StackPanel的宽度
|
||
// data_view.height = "140px";
|
||
data_view.padding = "20px";
|
||
data_view.boxShow = "10px";
|
||
data_view.shadowBlur = 20; // 阴影模糊度
|
||
data_view.shadowOffsetX = 0; // 阴影水平偏移
|
||
data_view.shadowOffsetY = 5; // 阴影垂直偏移v
|
||
data_view.background = "rgba(0, 34, 51, 0.1)"; //暗色
|
||
// 头部蓝线
|
||
const mgroup_line = new BABYLON_GUI.Rectangle(info.name + "_line");
|
||
mgroup_line.height = "3px";
|
||
mgroup_line.width = "240px";
|
||
mgroup_line.thickness = 0;
|
||
mgroup_line.shadowBlur = 15; // 阴影模糊度
|
||
mgroup_line.shadowOffsetX = 0; // 阴影水平偏移
|
||
mgroup_line.shadowOffsetY = 0; // 阴影垂直偏移v
|
||
mgroup_line.shadowColor = "rgba(44, 237, 255, 0.2)";
|
||
mgroup_line.background = "rgba(44, 237, 255, 0.2)";
|
||
data_view.addControl(mgroup_line);
|
||
|
||
const titleImg = new BABYLON_GUI.Image();
|
||
//工序名
|
||
const header = new BABYLON_GUI.StackPanel(info.name + "_header");
|
||
header.width = "200px";
|
||
header.height = "60px";
|
||
// header.background = "rgba(0, 34, 51, 0.6)";
|
||
header.isVertical = false;
|
||
|
||
const mgroupName = new BABYLON_GUI.TextBlock(info.name + "_label");
|
||
mgroupName.height = "30px";
|
||
mgroupName.width = "175px";
|
||
mgroupName.color = "yellow"; //工序名字体颜色
|
||
mgroupName.text = info.name;
|
||
mgroupName.textHorizontalAlignment = 0;
|
||
mgroupName.paddingLeft = "8px";
|
||
header.addControl(mgroupName);
|
||
|
||
const mgroup_close = BABYLON_GUI.Button.CreateSimpleButton(
|
||
info.name + "_close",
|
||
"X"
|
||
);
|
||
mgroup_close.width = "25px";
|
||
mgroup_close.height = "25px";
|
||
mgroup_close.color = "rgba(255,165,0,0.7)";
|
||
mgroup_close.cornerRadius = 16;
|
||
mgroup_close.fontSize = "12px";
|
||
mgroup_close.thickness = 0;
|
||
// mgroup_close.background = "white";
|
||
mgroup_close.onPointerClickObservable.add(() => {
|
||
data_view.isVisible = false;
|
||
});
|
||
header.addControl(mgroup_close);
|
||
data_view.addControl(header);
|
||
|
||
info.rows.forEach((item, index) => {
|
||
const row = new BABYLON_GUI.StackPanel(
|
||
info.name + `_${item.field}` + "_row"
|
||
);
|
||
row.width = "200px";
|
||
row.height = "30px";
|
||
row.isVertical = false;
|
||
|
||
const field = new BABYLON_GUI.TextBlock(
|
||
info.name + `_${item.field}` + "_label"
|
||
);
|
||
field.width = "120px";
|
||
field.height = "30px";
|
||
field.color = "rgba(243,226,13,1)"; //字体颜色
|
||
field.fontSize = 14;
|
||
field.text = item.label;
|
||
field.textHorizontalAlignment = 0;
|
||
field.paddingLeft = "8px";
|
||
row.addControl(field);
|
||
|
||
const valx = new BABYLON_GUI.TextBlock(
|
||
info.name + `_${item.field}` + "_value"
|
||
);
|
||
valx.width = "80px";
|
||
valx.height = "30px";
|
||
valx.color = "yellow"; //字体颜色
|
||
valx.fontSize = 14;
|
||
valx.text = item.value;
|
||
valx.textHorizontalAlignment =
|
||
BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
|
||
valx.paddingRight = "8px";
|
||
row.addControl(valx);
|
||
data_view.addControl(row);
|
||
});
|
||
data_view.isVisible = false;
|
||
// 将StackPanel添加到GUI系统中
|
||
that.myui.addControl(data_view);
|
||
data_view.linkWithMesh(mesh);
|
||
data_view.linkOffsetY = -120;
|
||
},
|
||
deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
@font-face {
|
||
font-family: "myfont";
|
||
/* 字体名称 */
|
||
src: url("../../utils/youShe.ttf");
|
||
/* 字体文件相对路径 */
|
||
}
|
||
|
||
.container {
|
||
background: url("/public/img/photon_bg.png") no-repeat;
|
||
background-size: cover;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
/* header-start */
|
||
.pageHeader {
|
||
font-size: 32px;
|
||
background: none;
|
||
border-bottom: none;
|
||
position: relative;
|
||
display: block;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
padding: 1px;
|
||
font-family: "myfont";
|
||
background: url("/public/img/photon_header.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 100;
|
||
height: 80px;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
/* header-end */
|
||
/* 模型上方的三个统计数及时间--start */
|
||
.top_block {
|
||
position: absolute;
|
||
width: 100%;
|
||
text-align: center;
|
||
top: 80px;
|
||
}
|
||
.top_block_time {
|
||
margin: 5px 0 50px 0;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
.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%);
|
||
}
|
||
/* 模型上方的三个统计数及时间--end */
|
||
/* */
|
||
.left_block,
|
||
.right_block {
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10px 20px 0 20px;
|
||
}
|
||
.left_block {
|
||
left: 0;
|
||
}
|
||
.right_block {
|
||
right: 0;
|
||
}
|
||
.flexItem {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.itemTitle {
|
||
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;
|
||
}
|
||
|
||
.itemTitleIcon {
|
||
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%;
|
||
}
|
||
.itemBody {
|
||
width: 100%;
|
||
background: rgba(9, 31, 43, 0.5);
|
||
border-radius: 20px;
|
||
margin-top: 5px;
|
||
}
|
||
.bodyList {
|
||
width: 200px;
|
||
height: 100%;
|
||
color: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
}
|
||
.bodyListItem {
|
||
font-size: 1vh;
|
||
border: 1px solid #02f5f2;
|
||
height: 16%;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
}
|
||
.bodyListItemBg {
|
||
background: rgba(2, 245, 242, 0.18);
|
||
}
|
||
.tableHeader {
|
||
color: #02f5f2;
|
||
font-size: 1.1vh;
|
||
}
|
||
.bodyListItem_name {
|
||
width: 60px;
|
||
padding: 0.5vh 0;
|
||
font-size: 14px;
|
||
}
|
||
.bodyListItem_num {
|
||
width: 65px;
|
||
font-size: 14px;
|
||
}
|
||
.itemBodyFlex {
|
||
display: flex;
|
||
}
|
||
.itemBodyCircle {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
padding-top: 1vh;
|
||
}
|
||
.item_circle {
|
||
width: 49%;
|
||
text-align: center;
|
||
}
|
||
@keyframes rotate {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
25% {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
50% {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
75% {
|
||
transform: rotate(270deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.row-item {
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
}
|
||
|
||
#scrollTable > .hader {
|
||
background: rgb(10, 63, 68) !important;
|
||
background-color: #0a3f44 !important;
|
||
}
|
||
|
||
.model {
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#renderCanvas {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#loadingScreen {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 260px;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.numberFont {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.numberUnit {
|
||
font-size: 12px;
|
||
}
|
||
|
||
#dashbordProcess .el-progress-circle {
|
||
height: 60px !important;
|
||
width: 60px !important;
|
||
}
|
||
|
||
.el-progress--circle .el-progress__text {
|
||
display: block;
|
||
margin-top: 1px;
|
||
color: #fff;
|
||
font-size: 20px !important;
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
.inforBlock {
|
||
left: 60%;
|
||
top: 30%;
|
||
width: 420px;
|
||
height: 150px;
|
||
position: absolute;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(
|
||
to bottom left,
|
||
rgba(25, 154, 118, 0.5),
|
||
rgba(31, 44, 50, 0.5)
|
||
);
|
||
}
|
||
|
||
.inforBlock.clickBlock {
|
||
left: 50%;
|
||
width: 520px;
|
||
height: 225px;
|
||
padding: 40px;
|
||
font-size: 16px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.inforBlock > .border_corner {
|
||
z-index: 2500;
|
||
position: absolute;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: rgba(0, 0, 0, 0);
|
||
border: 2px solid rgba(54, 217, 187, 1);
|
||
}
|
||
|
||
.inforBlock > .border_left_top {
|
||
top: 0;
|
||
left: 0;
|
||
border-right: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.inforBlock > .border_right_top {
|
||
top: 0;
|
||
right: 0;
|
||
border-left: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.inforBlock > .border_left_bottom {
|
||
bottom: 0;
|
||
left: 0;
|
||
border-right: none;
|
||
border-top: none;
|
||
}
|
||
|
||
.inforBlock > .border_right_bottom {
|
||
bottom: 0;
|
||
right: 0;
|
||
border-left: none;
|
||
border-top: none;
|
||
}
|
||
|
||
.inforBlock > .title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
position: absolute;
|
||
top: -45px;
|
||
text-align: center;
|
||
width: 100%;
|
||
left: 0;
|
||
}
|
||
|
||
.inforBlock > .infoCantier {
|
||
display: flex;
|
||
}
|
||
|
||
.infoCantier > .leftBlock {
|
||
width: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.infoCantier > .rightBlock {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.infoCantier > .rightBlock > .countWrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 280px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.percentage-value {
|
||
display: block;
|
||
margin-top: 6px;
|
||
font-size: 1.5vh;
|
||
color: #02f5f2;
|
||
font-weight: bold;
|
||
}
|
||
.percentage-label {
|
||
color: #ffffff;
|
||
font-size: 1.2vh;
|
||
}
|
||
.circle_bottom_text {
|
||
color: #02f5f2;
|
||
font-size: 0.8vw;
|
||
}
|
||
|
||
.elecItem {
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
margin-top: 10px;
|
||
height: 30%;
|
||
width: 50%;
|
||
font-size: 1.2vh;
|
||
display: inline-block;
|
||
}
|
||
.elecItem_wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-left: 5px solid rgba(53, 156, 193, 0.66);
|
||
padding-left: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
.elec_number {
|
||
color: rgb(2, 245, 242);
|
||
font-weight: bold;
|
||
font-size: 1.4vh;
|
||
padding-top: 5px;
|
||
}
|
||
.elec_unit {
|
||
font-size: 0.9vh;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
.elecItem span {
|
||
font-size: 17px; /* 修改文字大小 */
|
||
}
|
||
|
||
.elec_number {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.elec_unit {
|
||
font-size: 17px; /* 修改单位的文字大小 */
|
||
}
|
||
|
||
.successState {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: #00ff00;
|
||
}
|
||
.warningState {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: #0000ff;
|
||
}
|
||
/* // 表格——el-table 去除背景颜色*/
|
||
|
||
.successCircle {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: #02f5f2;
|
||
}
|
||
.warningCircle {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: rgb(255, 0, 135);
|
||
}
|
||
:deep(.el-table),
|
||
:deep(.el-table__body),
|
||
:deep(.el-table .el-table__body-wrapper) {
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.el-table .el-table__header-wrapper) {
|
||
background: rgba(32, 93, 74, 0.83);
|
||
}
|
||
|
||
:deep(.el-table .el-table__body-wrapper) {
|
||
background: rgba(46, 139, 155, 0.48);
|
||
}
|
||
|
||
:deep(.el-table th),
|
||
:deep(.el-table tr),
|
||
:deep(.el-table tr:hover) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* 清除鼠标移入效果 */
|
||
:deep(.el-table__body tr.hover-row > td) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* 行底边线 */
|
||
:deep(.el-table .el-table__body-wrapper :deep(.el-table td.el-table__cell)),
|
||
:deep(.el-table th.el-table__cell.is-leaf) {
|
||
background: transparent;
|
||
}
|
||
|
||
:deep(.el-table td.el-table__cell),
|
||
:deep(.el-table th.el-table__cell.is-leaf) {
|
||
border-bottom: 1px solid rgba(25, 111, 115, 0.82);
|
||
}
|
||
|
||
/* 改变radio选中时的样式 */
|
||
:deep(.el-radio.elRadio > .el-radio__label) {
|
||
color: #ffffff;
|
||
}
|
||
|
||
:deep(.el-radio__input.is-checked .el-radio__inner) {
|
||
background: #13f1df;
|
||
border-color: #13f1df;
|
||
}
|
||
|
||
:deep(.el-table__inner-wrapper:before) {
|
||
background-color: rgba(0, 0, 0, 0);
|
||
}
|
||
/* 改变radio选中时的样式 */
|
||
</style>
|