2235 lines
53 KiB
Vue
2235 lines
53 KiB
Vue
<template>
|
||
<div class="container">
|
||
<header class="pageHeader">
|
||
<span class="top-line top-line-left"></span>
|
||
凌源特种水泥数智化管控平台
|
||
<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" />
|
||
<span>凌源</span>
|
||
{{ currentDay }}{{ currentWeek }}{{ currentTime }}
|
||
<img
|
||
src="img/photon_top_line.png"
|
||
style="transform: rotateY(180deg)"
|
||
/>
|
||
</div>
|
||
<div class="totalNumContnier">
|
||
<div class="totalNumWrap totalNum_orange">
|
||
<img class="" src="img/number_bg_orange.png" />
|
||
<span class="totalNumText">熟料产量</span>
|
||
<div class="totalNumber">
|
||
{{ totalData.total_production }}
|
||
</div>
|
||
</div>
|
||
<div class="totalNumWrap totalNumWrap_green">
|
||
<img src="img/number_bg_green.png" />
|
||
<span class="totalNumText">实物煤耗</span>
|
||
<div class="totalNumber">
|
||
{{ totalData.pcoal_consume }}
|
||
</div>
|
||
</div>
|
||
<div class="totalNumWrap totalNum_blue">
|
||
<img src="img/number_bg_blue.png" />
|
||
<span class="totalNumText">吨熟料综合电耗</span>
|
||
<div class="totalNumber">
|
||
{{ totalData.celec_consume_unit }}
|
||
</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.value"
|
||
:color="colors"
|
||
>
|
||
<template #default="{ percentage }">
|
||
<span class="percentage-value"
|
||
>{{ percentage }}%</span
|
||
>
|
||
<p class="percentage-label">{{ item.name }}</p>
|
||
</template>
|
||
</el-progress>
|
||
<!-- <div class="circle_bottom_text">{{ item.name }}</div> -->
|
||
</div>
|
||
</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>
|
||
电耗<span
|
||
style="
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
"
|
||
>kwh</span
|
||
>
|
||
</th>
|
||
</tr>
|
||
<tr class="bodyListItem bodyListItemBg">
|
||
<td class="bodyListItem_name">
|
||
石灰石破碎
|
||
</td>
|
||
<td class="bodyListItem_num">
|
||
{{ radarSeriesData[0] }}
|
||
</td>
|
||
</tr>
|
||
<tr class="bodyListItem">
|
||
<td class="bodyListItem_name">原料磨</td>
|
||
<td class="bodyListItem_num">
|
||
{{ radarSeriesData[1] }}
|
||
</td>
|
||
</tr>
|
||
<tr class="bodyListItem bodyListItemBg">
|
||
<td class="bodyListItem_name">回转窑</td>
|
||
<td class="bodyListItem_num">
|
||
{{ radarSeriesData[2] }}
|
||
</td>
|
||
</tr>
|
||
<tr class="bodyListItem">
|
||
<td class="bodyListItem_name">余热发电</td>
|
||
<td class="bodyListItem_num">
|
||
{{ radarSeriesData[3] }}
|
||
</td>
|
||
</tr>
|
||
<tr class="bodyListItem bodyListItemBg">
|
||
<td class="bodyListItem_name">煤磨</td>
|
||
<td class="bodyListItem_num">
|
||
{{ radarSeriesData[4] }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flexItem">
|
||
<div class="itemTitle">
|
||
<div class="itemTitleIcon"></div>
|
||
<div>质量分析</div>
|
||
<el-radio-group v-model="deptName">
|
||
<el-radio label="入窑生料" class="elRadio"
|
||
>入窑生料</el-radio
|
||
>
|
||
<el-radio label="出磨熟料" class="elRadio"
|
||
>出磨熟料</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</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.total_production }}
|
||
<span class="elec_unit">kwh</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>NOx折算值</span>
|
||
<p class="elec_number">
|
||
{{ hotData.NOx }}
|
||
<span class="elec_unit">mg/m³</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>吨熟料发电量</span>
|
||
<p class="elec_number">
|
||
{{ hotData.production_elec_unit }}
|
||
<span class="elec_unit">kwh</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>SO2折算值</span>
|
||
<p class="elec_number">
|
||
{{ hotData.SO2 }}
|
||
<span class="elec_unit">mg/m³</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>自用电量</span>
|
||
<p class="elec_number">
|
||
{{ hotData.elec_consume }}
|
||
<span class="elec_unit">kwh</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="elecItem">
|
||
<div class="elecItem_wrap">
|
||
<span>颗粒物折算值</span>
|
||
<p class="elec_number">
|
||
{{ hotData.klw }}
|
||
<span class="elec_unit">mg/m³</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 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 {
|
||
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: -Math.PI / 4.5,
|
||
initialBeta: Math.PI / 2,
|
||
initialRadius: 2.5,
|
||
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(128, 255, 165)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(1, 191, 236)",
|
||
},
|
||
]),
|
||
|
||
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(55, 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)",
|
||
},
|
||
]),
|
||
],
|
||
sectionNames: {
|
||
石灰石破碎筛分生产系统: "石灰石破碎",
|
||
原料磨: "原料磨",
|
||
回转窑: "回转窑",
|
||
煤磨: "煤磨",
|
||
余热发电: "余热发电",
|
||
},
|
||
totalData: {
|
||
total_production: 0,
|
||
pcoal_consume: 0,
|
||
celec_consume_unit: 0,
|
||
},
|
||
rateData: [
|
||
{ name: "石灰石破碎", value: 0 },
|
||
{ name: "原料磨", value: 0 },
|
||
{ name: "煤磨", value: 0 },
|
||
{ name: "回转窑", value: 0 },
|
||
{ name: "余热发电", value: 0 },
|
||
],
|
||
hotData: {
|
||
total_production: "",
|
||
production_elec_unit: "",
|
||
elec_consume: "",
|
||
NOx: "",
|
||
SO2: "",
|
||
klw: "",
|
||
},
|
||
tableData: [],
|
||
tezhongData: [],
|
||
option: {
|
||
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
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",
|
||
nameTextStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
axisLabel: {
|
||
color: "#ffffff",
|
||
},
|
||
|
||
splitLine: {
|
||
show: false,
|
||
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: {
|
||
textStyle: {
|
||
padding: [-20, -20], // 控制文字padding
|
||
},
|
||
},
|
||
nameGap: 2,
|
||
radius: 63, //缩放
|
||
center: ["50%", "50%"], //位置
|
||
// shape: "circle",
|
||
splitNumber: 4,
|
||
axisName: {
|
||
color: "#2adbbc",
|
||
},
|
||
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(128, 255, 165)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(1, 191, 236)",
|
||
},
|
||
]
|
||
),
|
||
},
|
||
label: {
|
||
show: true,
|
||
color: "#02f5f2",
|
||
formatter: function (params) {
|
||
return params.value;
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.factoryName = that.$TOOL.data.get("BASE_INFO").base.base_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.productNum();
|
||
//获取设备运转率
|
||
that.eqRate();
|
||
//余热发电
|
||
that.generation();
|
||
//工序电耗
|
||
that.proceElec();
|
||
//质量分析
|
||
that.qualAnalys();
|
||
//数据采集
|
||
that.dataCollect();
|
||
|
||
that.initDomStyle();
|
||
that.initFactory();
|
||
that.timerTime = setInterval(() => {
|
||
that.showTime();
|
||
}, 1000);
|
||
that.qualityTimer = setInterval(() => {
|
||
let lineDom = document.getElementById("line3");
|
||
if (lineDom) {
|
||
that.KHData = [];
|
||
that.SMData = [];
|
||
that.IMData = [];
|
||
if (that.deptName == "出磨熟料") {
|
||
that.deptName = "入窑生料";
|
||
for (let i = 0; i < day; i++) {
|
||
that.KHData.push(that.shengliaoData.KH[i]);
|
||
that.SMData.push(that.shengliaoData.SM[i]);
|
||
that.IMData.push(that.shengliaoData.IM[i]);
|
||
}
|
||
} else {
|
||
that.deptName = "出磨熟料";
|
||
for (let i = 0; i < day; i++) {
|
||
that.KHData.push(that.shuliaoData.KH[i]);
|
||
that.SMData.push(that.shuliaoData.SM[i]);
|
||
that.IMData.push(that.shuliaoData.IM[i]);
|
||
}
|
||
}
|
||
that.initChart();
|
||
}
|
||
}, 5000);
|
||
// that.timerTime = setInterval(() => {
|
||
// that.productNum();
|
||
// that.eqRate();
|
||
// that.generation();
|
||
// that.proceElec();
|
||
// that.dataCollect();
|
||
// }, 3600000);
|
||
});
|
||
},
|
||
methods: {
|
||
//熟料产量
|
||
productNum() {
|
||
let that = this;
|
||
this.$API.mtm.mgroup.list
|
||
.req({ page: 0, search: "回转窑" })
|
||
.then((res) => {
|
||
// console.log("回转窑", res);
|
||
that.huihzuanyaoId = res[0].id;
|
||
let query = {};
|
||
query.page = 0;
|
||
query.year_s = that.currentYear;
|
||
query.month_s = that.currentMonth;
|
||
query.type = "day_s";
|
||
query.mgroup = that.huihzuanyaoId;
|
||
this.$API.enm.enstat.req(query).then((response) => {
|
||
let seriesData = [];
|
||
let data = response;
|
||
data.forEach((item) => {
|
||
let ind = item.day_s - 1;
|
||
seriesData[ind] = item.total_production;
|
||
if (item.day_s == that.currentDay) {
|
||
that.totalData.total_production =
|
||
item.total_production;
|
||
that.totalData.pcoal_consume =
|
||
item.pcoal_consume;
|
||
that.totalData.celec_consume_unit =
|
||
item.celec_consume_unit;
|
||
}
|
||
});
|
||
let option1 = that.deepCopy(that.option);
|
||
let chartDom = document.getElementById("line1");
|
||
let myChart = echarts.init(chartDom);
|
||
option1.legend.data = [
|
||
{
|
||
name: "熟料",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
},
|
||
{
|
||
name: "特种熟料",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[1],
|
||
},
|
||
},
|
||
];
|
||
option1.series = [
|
||
{
|
||
name: "熟料",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: seriesData,
|
||
},
|
||
{
|
||
name: "特种熟料",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[1],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: that.tezhongData,
|
||
},
|
||
];
|
||
myChart.setOption(option1);
|
||
});
|
||
});
|
||
},
|
||
//设备运转率
|
||
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 = Number(item.run_rate);
|
||
} else if (item.mgroup_name == "原料磨") {
|
||
that.rateData[1].value = Number(item.run_rate);
|
||
} else if (item.mgroup_name == "煤磨") {
|
||
that.rateData[2].value = Number(item.run_rate);
|
||
} else if (item.mgroup_name == "回转窑") {
|
||
that.rateData[3].value = Number(item.run_rate);
|
||
} else if (item.mgroup_name == "余热发电") {
|
||
that.rateData[4].value = Number(item.run_rate);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
//余热发电&环保数据
|
||
generation() {
|
||
let that = this;
|
||
this.$API.mtm.mgroup.list
|
||
.req({ page: 0, search: "余热发电" })
|
||
.then((res) => {
|
||
// console.log("余热发电", 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.total_production =
|
||
ress[0].total_production;
|
||
that.hotData.production_elec_unit =
|
||
ress[0].production_elec_unit;
|
||
that.hotData.elec_consume = ress[0].elec_consume;
|
||
});
|
||
});
|
||
//环保数据
|
||
this.$API.enm.mpoint.list
|
||
.req({
|
||
page: 0,
|
||
code: "K_TX_IP20_TX_MD500", //nox
|
||
query: " { id, name, code, last_data, gather_state }",
|
||
})
|
||
.then((res0) => {
|
||
if (res0[0].last_data.last_val) {
|
||
that.hotData.NOx =
|
||
res0[0].last_data.last_val.toFixed(2);
|
||
}
|
||
});
|
||
this.$API.enm.mpoint.list
|
||
.req({
|
||
page: 0,
|
||
code: "K_TX_IP20_TX_MD508", //so2
|
||
query: "{ id, name, code, last_data, gather_state }",
|
||
})
|
||
.then((res1) => {
|
||
if (res1[0].last_data.last_val) {
|
||
that.hotData.SO2 =
|
||
res1[0].last_data.last_val.toFixed(2);
|
||
}
|
||
});
|
||
this.$API.enm.mpoint.list
|
||
.req({
|
||
page: 0,
|
||
code: "K_TX_IP20_TX_MD504", //颗粒物
|
||
query: "{ id, name, code, last_data, gather_state }",
|
||
})
|
||
.then((res2) => {
|
||
if (res2[0].last_data.last_val) {
|
||
that.hotData.klw =
|
||
res2[0].last_data.last_val.toFixed(2);
|
||
}
|
||
});
|
||
},
|
||
//工序电耗
|
||
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;
|
||
console.log("工序电耗", data);
|
||
let seriesData = [0, 0, 0, 0, 0];
|
||
data.forEach((item, index) => {
|
||
if (item.mgroup_name == "石灰石破碎") {
|
||
seriesData[0] = item.elec_consume;
|
||
} else if (item.mgroup_name == "原料磨") {
|
||
seriesData[1] = item.elec_consume;
|
||
} else if (item.mgroup_name == "回转窑") {
|
||
seriesData[2] = item.elec_consume;
|
||
} else if (item.mgroup_name == "余热发电") {
|
||
console.log("余热发电工序电耗", item.elec_consume);
|
||
seriesData[3] = item.elec_consume;
|
||
} else if (item.mgroup_name == "煤磨") {
|
||
seriesData[4] = item.elec_consume;
|
||
}
|
||
});
|
||
that.radarSeriesData = seriesData;
|
||
that.radarOption.series.data[0].value = seriesData;
|
||
//右1---工序电耗---雷达图
|
||
let radarDom = document.getElementById("radar");
|
||
let radarChart = echarts.init(radarDom);
|
||
radarChart.setOption(that.radarOption);
|
||
});
|
||
},
|
||
//质量分析---待定
|
||
qualAnalys() {},
|
||
//数据采集——设备运行状态
|
||
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) => {
|
||
console.log("数据采集", 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);
|
||
});
|
||
console.log("数据采集tableData", that.tableData);
|
||
|
||
let chartDom6 = document.getElementById("pieChart");
|
||
let myChart6 = echarts.init(chartDom6);
|
||
let colors = [];
|
||
colors.push(that.linearGradientColors[0]);
|
||
colors.push(that.linearGradientColors[3]);
|
||
let option6 = {
|
||
color: colors,
|
||
tooltip: {
|
||
trigger: "item",
|
||
},
|
||
legend: {
|
||
top: "2%",
|
||
left: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "运行状态",
|
||
type: "pie",
|
||
radius: ["40%", "70%"],
|
||
padAngle: 5,
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "inner",
|
||
fontSize: 16,
|
||
formatter: "{d}%",
|
||
color: "#fff",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{ value: success_num, name: "正常" },
|
||
{ value: error_num, name: "掉线" },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
myChart6.setOption(option6);
|
||
});
|
||
},
|
||
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 pieChart = document.getElementById("pieChart");
|
||
var elTable = document.getElementById("elTable");
|
||
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("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, 0, 1.2)
|
||
);
|
||
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/ly.glb";
|
||
// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/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;
|
||
}
|
||
}
|
||
});
|
||
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(); //Call the createScene function
|
||
// scene.debugLayer.show();
|
||
|
||
// // Register a render loop to repeatedly render the scene
|
||
engine.runRenderLoop(function () {
|
||
scene.render();
|
||
});
|
||
this.engine = engine;
|
||
this.scene = scene;
|
||
// Watch for browser/canvas resize events
|
||
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.6)"; //暗色
|
||
|
||
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.8)";
|
||
mgroup_line.background = "rgba(44, 237, 255, 0.8)";
|
||
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 = "white";
|
||
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(255,255,255, 0.7)";
|
||
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 = "white";
|
||
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 = true;
|
||
// 将StackPanel添加到GUI系统中
|
||
that.myui.addControl(data_view);
|
||
data_view.linkWithMesh(mesh);
|
||
data_view.linkOffsetY = -120;
|
||
},
|
||
deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
},
|
||
//质量分析模拟数据
|
||
initChart() {
|
||
let that = this;
|
||
function deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
}
|
||
//右2---质量分析---折线图
|
||
let option5 = deepCopy(that.option);
|
||
let chartDom5 = document.getElementById("line3");
|
||
let myChart5 = echarts.init(chartDom5);
|
||
option5.legend.data = [
|
||
{
|
||
name: "KH",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
},
|
||
{
|
||
name: "SM",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[1],
|
||
},
|
||
},
|
||
{
|
||
name: "IM",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
borderRadius: 2,
|
||
itemStyle: {
|
||
color: that.linearGradientColors[2],
|
||
},
|
||
},
|
||
];
|
||
option5.series = [
|
||
{
|
||
name: "KH",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[0],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: that.KHData,
|
||
},
|
||
{
|
||
name: "SM",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[1],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: that.SMData,
|
||
},
|
||
{
|
||
name: "IM",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: that.linearGradientColors[2],
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: that.IMData,
|
||
},
|
||
];
|
||
myChart5.setOption(option5);
|
||
},
|
||
},
|
||
beforeUnmount() {
|
||
let that = this;
|
||
clearInterval(that.timerTime);
|
||
clearInterval(that.timerData);
|
||
clearInterval(that.qualityTimer);
|
||
that.timerTime = null;
|
||
that.timerData = null;
|
||
that.qualityTimer = null;
|
||
},
|
||
beforeDestoryed() {
|
||
let that = this;
|
||
clearInterval(that.timerTime);
|
||
clearInterval(that.timerData);
|
||
clearInterval(that.qualityTimer);
|
||
that.timerTime = null;
|
||
that.timerData = null;
|
||
that.qualityTimer = null;
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
@font-face {
|
||
font-family: "myfont";
|
||
/* 字体名称 */
|
||
src: url("../../utils/youShe.ttf");
|
||
/* 字体文件相对路径 */
|
||
}
|
||
|
||
.container {
|
||
background: url("/public/img/photon_bg.png") no-repeat;
|
||
background-size: cover;
|
||
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;
|
||
}
|
||
.bodyListItem_num {
|
||
width: 65px;
|
||
}
|
||
.itemBodyFlex {
|
||
display: flex;
|
||
}
|
||
.itemBodyCircle {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
padding-top: 1vh;
|
||
}
|
||
.item_circle {
|
||
width: 33%;
|
||
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;
|
||
}
|
||
.successState {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: #00ff00;
|
||
}
|
||
.warningState {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: #0000ff;
|
||
}
|
||
/* // 表格——el-table 去除背景颜色*/
|
||
#elTable {
|
||
/* border-radius: 5px; */
|
||
margin-top: 10px;
|
||
}
|
||
.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,
|
||
.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) !important;
|
||
}
|
||
/deep/ .el-table .el-table__body-wrapper {
|
||
background: rgba(46, 139, 155, 0.48) !important;
|
||
}
|
||
/deep/ .el-table th {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table tr {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/ .el-table tr :hover {
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/
|
||
.el-table--enable-row-hover
|
||
.el-table__body
|
||
tr:hover
|
||
> td.el-table__cell {
|
||
background-color: transparent !important;
|
||
}
|
||
/* //清除鼠标移入效果 */
|
||
/deep/.el-table__body tr.hover-row > td {
|
||
background-color: transparent !important;
|
||
}
|
||
/* // 行底边线 */
|
||
/deep/ .el-table .el-table__body-wrapper /deep/ .el-table td.el-table__cell,
|
||
.el-table th.el-table__cell.is-leaf {
|
||
background: transparent !important;
|
||
}
|
||
/deep/ .el-table td.el-table__cell,
|
||
/deep/ .el-table th.el-table__cell.is-leaf {
|
||
border-bottom: 1px solid rgb(25, 111, 115, 0.82) !important;
|
||
}
|
||
/* 改变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) !important;
|
||
}
|
||
/* 改变radio选中时的样式 */
|
||
</style>
|