odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

唐润平：视角切换修改版-重新提交

Browse Source
This commit is contained in:
trp
2023-12-15 14:17:56 +08:00
parent 02d9ba3ef1 077ff6a074
commit c91d93b24b
15 changed files with 865 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/badGasInfo/sp_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/images/site/zdgl_icon_sd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/topAndDown/sp_tb.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
src/assets/images/usedEle/bpq_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

144
src/assets/styles/index.scss
View File

@@ -16,16 +16,18 @@ a {
html, body, #app, .el-container, .el-aside, .el-main {
height: 100%;
}
.tunnel-title {
width: 2330px;
height: 156px;
width: 1718px;
height: 146px;
z-index: 2;
position: absolute;
top: 0;
left: 50%;
margin-left: -1165px;
margin-left: -859px;
background-image: url('../images/topAndDown/sp_tb.png');
}
.box-top {
.manage-btn {
display: flex;
@@ -125,7 +127,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
background-image: url('../images/topAndDown/sp_icon_zyc.png');
}
.tunnel-length{
.tunnel-length {
position: absolute;
top: 13%;
left: 36%;
@@ -242,3 +244,137 @@ html, body, #app, .el-container, .el-aside, .el-main {
transform: rotate(180deg);
}
}
//弹窗样式
.digital-tunnel {
.chat-dialog{
display: flex;
#container {
flex: 1;
height: 1160px;
//width: 1300px;
}
#containerEle {
flex: 1;
height: 1060px;
//width: 2180px;
}
}
.el-dialog {
position: relative;
display: flex;
flex-direction: column;
height: 1300px;
border: 2px solid #0F82AF;
background: rgba(6, 34, 71, 0.78);
border-radius: 20px;
padding: 47px 30px;
box-sizing: border-box;
margin: 520px auto 0 auto;
.el-dialog__header {
padding: 0 0 28px 0;
//display: none;
.el-dialog__title {
font-size: 50px;
font-weight: bold;
color: #D6F1FA;
}
.el-dialog__close {
color: #05FEFF;
font-size: 35px;
}
}
.el-dialog__body {
padding: 0;
}
}
.left-top-icon {
position: absolute;
top: -3px;
left: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
}
.right-top-icon {
position: absolute;
top: -3px;
right: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(90deg);
}
.time-select {
position: absolute;
top: 47px;
right: 119px;
}
.left-bottom-icon {
position: absolute;
bottom: -3px;
left: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(-90deg);
}
.right-bottom-icon {
position: absolute;
bottom: -3px;
right: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(180deg);
}
//用电量
.top-tag {
display: flex;
justify-content: center;
.allUsedEle {
width: 300px;
height: 200px;
border-radius: 10px;
border: 2px solid #0F82AF;
display: flex;
flex-direction: column;
align-items: center;
&:nth-child(2) {
margin-left: 39px;
}
.use-title {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background: #264A78;
font-size: 45px;
color: #FFFFFF;
}
.value {
margin-top: 15px;
font-size: 50px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
}
}
}
}

391
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -1,5 +1,8 @@
<template>
<div id="bad-gas-info">
<div
id="bad-gas-info"
:style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"
>
<div class="title">有害气体</div>
<div class="info-list">
<gas-info-item
@@ -9,133 +12,50 @@
@click="handleOpenChart"
/>
</div>
<el-dialog
v-model="isVisited"
title="有害气体监控数据"
width="1996px"
:modal="false"
>
<div class="left-icon"></div>
<div class="right-icon"></div>
<div id="container" ref="chart" @click.stop></div>
<div class="time-select"></div>
</el-dialog>
<div class="digital-tunnel">
<el-dialog
v-model="isVisited"
title="有害气体监控数据"
width="2400px"
:modal="false"
>
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="chat-dialog">
<div id="container"></div>
<div style="width: 1px"></div>
</div>
<div class="time-select">
<time-range-btn
:buttonList="timeList"
v-model="selectTimeButton"
@select="timeSelect"
/>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
>>>>>>> 077ff6a0744d396411f6b0bd5f409d42997965e9
</div>
</template>
<script setup>
import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from "echarts";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
const props = defineProps({
list: Array,
badGasData: Array,
});
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const isVisited = ref(false);
const badGasList = ref([]);
const chart = ref(null);
let myEcharts = reactive({});
const option = reactive({
//图例
legend: {
left: 0,
textStyle: {
color: "#FFFFFF",
fontSize: 28,
},
// itemWidth: 20,
// itemHeight: 20
},
//离容器四侧的距离
grid: {
left: 45, // 左边距
// right: 60, // 右边距
top: 60, // 顶边距
bottom: 40, // 底边距
// containLabel: true,
},
//提示框组件
tooltip: {
show: true,
trigger: "axis",
},
//X轴
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
textStyle: {
fontSize: 24,
color: "#D6F1FA",
},
},
},
//Y轴
yAxis: {
type: "value",
axisLabel: {
textStyle: {
fontSize: 24,
color: "#D6F1FA",
},
},
},
//配置项
series: [
{
name: "二氧化碳",
data: [5, 9, 10, 7, 8, 15, 12],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "一氧化碳",
data: [8, 15, 5, 9, 10, 7, 12],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "二氧化氮",
data: [5, 15, 1, 9, 10, 7, 8],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "二氧化硫",
data: [8, 15, 12, 5, 9, 2, 7],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "硫化氢",
data: [2, 9, 10, 15, 12, 7, 8],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
],
});
const bgImage = computed(() => (isVisited.value ? "sp_active.png" : "bg.png"));
watch(
() => props.list,
(now) => {
@@ -157,13 +77,16 @@ watch(
},
{ deep: true }
);
onMounted(() => {
nextTick(() => {
initChart();
});
});
const timeSelect = (index) => {
console.log("选择时间", index);
if (index === 0) {
console.log("--年");
} else if (index === 1) {
console.log("--月");
} else if (index === 2) {
console.log("--日");
}
};
const getBadGasInfo = (now) => {
let windPressureObj = {};
let windPressureArr = [];
@@ -195,16 +118,175 @@ const changeData = (item) => {
const handleOpenChart = () => {
console.log("有害气体弹窗");
isVisited.value = true;
initChart();
nextTick(() => {
initChart();
});
};
const getImageUrl = (name) => {
return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
.href;
};
/**
* 初始化echarts实例方法
*/
const initChart = () => {
//3.初始化container容器
myEcharts = echarts.init(chart.value);
myEcharts = echarts.init(document.getElementById("container"));
//5.传入数据
myEcharts.setOption(option, true);
let option = {
//图例
legend: {
left: 0,
textStyle: {
color: "#FFFFFF",
fontSize: 40,
},
// itemWidth: 20,
// itemHeight: 20
},
//离容器四侧的距离
grid: {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
containLabel: true,
},
//提示框组件
tooltip: {
show: true,
trigger: "axis",
},
//X轴
xAxis: {
type: "category",
data: [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
axisLabel: {
textStyle: {
fontSize: 45,
color: "#D6F1FA",
},
},
},
//Y轴
yAxis: {
type: "value",
axisLabel: {
textStyle: {
fontSize: 45,
color: "#D6F1FA",
},
},
},
//配置项
series: [
{
name: "二氧化碳",
data: [
56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
69, 25, 31, 49, 81, 63,
],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "一氧化碳",
data: [
96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
79, 51, 29, 60, 48, 83, 15,
],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "二氧化氮",
data: [
53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
77, 82, 13, 68, 49, 55, 7, 39,
],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "一氧化氮",
data: [
37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
17, 66, 30, 78, 55, 23, 47,
],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "二氧化硫",
data: [
6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
23, 80, 44, 62, 59, 13, 86,
],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: "硫化氢",
data: [
13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
100, 11, 21, 31, 41, 51,
],
type: "line",
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5,
},
},
],
};
myEcharts.setOption(option);
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();
@@ -213,37 +295,6 @@ const initChart = () => {
</script>
<style lang="scss" scoped>
#container {
box-sizing: border-box;
height: 754px;
width: 1996px;
margin: 0 auto;
}
:deep(.el-dialog) {
border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78);
border-radius: 20px;
padding: 47px 30px;
box-sizing: border-box;
margin: 588px auto 0 auto;
.el-dialog__header {
padding: 0;
//display: none;
.el-dialog__title {
font-size: 32px;
font-weight: bold;
color: #d6f1fa;
}
.el-dialog__close {
color: #05feff;
font-size: 35px;
}
}
}
#bad-gas-info {
position: absolute;
z-index: 100;
@@ -251,36 +302,8 @@ const initChart = () => {
height: 621px;
top: 1441px;
right: 72px;
background-image: url(@/assets/images/badGasInfo/bg.png);
background-image: url(../../../assets/images/badGasInfo/bg.png);
.left-icon {
position: absolute;
top: -3px;
left: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
}
.right-icon {
position: absolute;
top: -3px;
right: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(90deg);
}
.time-select {
position: absolute;
top: 47px;
right: 119px;
//display: flex;
width: 204px;
height: 68px;
border-radius: 10px;
border: 2px solid #0f82af;
}
.title {
width: 128px;
height: 45px;

647
src/components/content/fanInfo/FanInfo.vue
View File

@@ -2,30 +2,30 @@
<div id="fan_info">
<div class="title">风机</div>
<div class="fans">
<div class="fan-item">
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
<!-- echarts -->
<div class="echart" ref="info1"></div>
<div class="echart"></div>
<!-- 风机名 -->
<div class="fan-name">一号风机</div>
<div class="fan-name">{{ changeNum(index + 1) }}号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div class="state " :class="{ 'blue-state': isStartOne }">
<div :class="{ stopColor: !stateOne }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconOne)+')' }" class="state-icon"></div>
状态：{{ stateOne ? '运行' : '故障' }}
<div class="state " :class="{ 'blue-state': !item.breakdown }">
<div :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态：{{ item.breakdown ? '故障' : '运行' }}
</div>
<div class="switch">
<div
id="auto"
:class="{ active: isStartOne }"
@click="isStartOne = true"
:class="{ active: item.running }"
@click="item.running = true"
>
启动
</div>
<div
id="stop"
:class="{ active: !isStartOne }"
@click="isStartOne = false"
:class="{ active: !item.running }"
@click="item.running = false"
>
停止
</div>
@@ -33,9 +33,9 @@
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="isSAuto1" class="radio-group">
<el-radio label="true">自动</el-radio>
<el-radio label="false">手动</el-radio>
<el-radio-group v-model="item.autoMode" class="radio-group">
<el-radio :label="true">自动</el-radio>
<el-radio :label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power">
@@ -44,102 +44,8 @@
><input
type="number"
min="0"
v-model="powerOne"
:disabled="isSAuto1 === 'true'"
/></span>
</div>
</div>
</div>
</div>
<div class="fan-item">
<!-- echarts -->
<div class="echart" ref="info2"></div>
<!-- 风机名称 -->
<div class="fan-name">二号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div class="state" :class="{ 'blue-state': isStartTwo }">
<div :class="{ stopColor: !stateTwo }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconTwo)+')' }" class="state-icon"></div>
状态：{{ stateTwo ? '运行' : '故障' }}
</div>
<div class="switch">
<div
:class="{ active: isStartTwo }"
@click="isStartTwo = true"
>
启动
</div>
<div
:class="{ active: !isStartTwo }"
@click="isStartTwo = false"
>
停止
</div>
</div>
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="isSAuto2" class="radio-group">
<el-radio label="true">自动</el-radio>
<el-radio label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power">
<span style="color: white">当前功率</span>
<span class="units"
><input
type="number"
min="0"
v-model="powerTwo"
:disabled="isSAuto2 === 'true'"
/></span>
</div>
</div>
</div>
</div>
<div class="fan-item">
<!-- echarts -->
<div class="echart" ref="info3"></div>
<!-- 风机名称 -->
<div class="fan-name">三号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div class="state" :class="{ 'blue-state': isStartTwo }">
<div :class="{ stopColor: !stateTwo }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconTwo)+')' }" class="state-icon"></div>
状态：{{ stateTwo ? '运行' : '故障' }}
</div>
<div class="switch">
<div
:class="{ active: isStartTwo }"
@click="isStartTwo = true"
>
启动
</div>
<div
:class="{ active: !isStartTwo }"
@click="isStartTwo = false"
>
停止
</div>
</div>
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="isSAuto2" class="radio-group">
<el-radio label="true">自动</el-radio>
<el-radio label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power">
<span style="color: white">当前功率</span>
<span class="units"
><input
type="number"
min="0"
v-model="powerThree"
:disabled="isSAuto2 === 'true'"
v-model="item.frequencyFeedback"
:disabled="item.autoMode"
/></span>
</div>
</div>
@@ -156,61 +62,51 @@ const props = defineProps({
list: Array,
fanData: Array
});
//当前功率
const powerOne = ref()
const powerTwo = ref()
const powerThree = ref(555)
//状态
const stateOne = ref()
const stateTwo = ref()
// 一号风机启动停止按钮
const isStartOne = ref(true);
const isStartTwo = ref(true);
// 功率是否自动
let isSAuto1 = ref("false");
let isSAuto2 = ref("false");
const socketData = ref()
// 一号风机echarts实例
const info1 = ref(null);
let Echarts_info1 = null;
// 二号风机实例
const info2 = ref(null);
let Echarts_info2 = null;
const info3 = ref(null);
let Echarts_info3 = null;
let fan01_option = reactive();
let fan02_option = reactive();
let fan03_option = reactive();
watch(() => props.fanData, (now) => {
getBasicData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.list, (now) => {
console.log('socketDatawatch------------', now)
socketData.value.forEach(item => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
if(newItem.frequencyFeedback){
item.frequencyFeedback= newItem.frequencyFeedback
if (newItem.frequencyFeedback) {
item.frequencyFeedback = newItem.frequencyFeedback
}
}
})
})
// socketData.value=now
}, {deep: true});
const stateIconOne = computed(() =>
stateOne.value
? "blue-state-icon.png"
: "red-state-icon.png"
);
const stateIconTwo = computed(() =>
stateTwo.value
? "blue-state-icon.png"
: "red-state-icon.png"
);
onMounted(() => {
handleOnMounted()
}, {deep: true});
onMounted(() => {
setTimeout(() => {
nextTick(() => {
handleOnMounted()
})
}, 100);
});
const getImage = (type) => {
switch (type) {
case false:
return "blue-state-icon.png";
case true:
return "red-state-icon.png";
}
}
const changeNum = (index) => {
switch (index) {
case 1:
return '一';
case 2:
return '二';
case 3:
return '三';
}
}
const getBasicData = (data) => {
let tranObj = {}
let tranArr = []
@@ -219,365 +115,135 @@ const getBasicData = (data) => {
equipmentId: item.equipmentId,
autoMode: item.autoMode,//自动模式
breakdown: item.breakdown,//故障
manualMode: item.manualMode,//手动模式
running: item.running,//启动,
frequencyFeedback: item.frequencyFeedback//当前功率
}
tranArr.push(tranObj)
})
socketData.value = tranArr
powerOne.value = socketData.value[0].frequencyFeedback
powerTwo.value = socketData.value[1].frequencyFeedback
stateOne.value = socketData.value[0].breakdown
stateTwo.value = socketData.value[1].breakdown
isStartOne.value = socketData.value[0].running
isStartTwo.value = socketData.value[1].running
handleOnMounted()
}
const handleOnMounted = () => {
Echarts_info1 = echarts.init(info1.value);
fan01_option = {
series: [
{
type: "gauge",
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
const chart = document.getElementsByClassName('echart');
for (let i = 0; i < chart.length; i++) {
Echarts_info1 = echarts.init(chart[i]);
fan01_option = {
series: [
{
type: "gauge",
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
},
max: 1000,
splitLine: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: powerOne.value,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
max: 1000,
splitLine: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: socketData.value[i].frequencyFeedback,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
],
],
}
fan01_option && Echarts_info1.setOption(fan01_option);
}
Echarts_info1.setOption(fan01_option);
// 挂载二号风机实例
Echarts_info2 = echarts.init(info2.value);
fan02_option = {
series: [
{
type: "gauge",
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
},
max: 1000,
splitLine: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: powerTwo.value,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
],
}
Echarts_info2.setOption(fan02_option);
//三号风机
Echarts_info3 = echarts.init(info3.value);
fan03_option = {
series: [
{
type: "gauge",
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
},
max: 1000,
splitLine: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: powerThree.value,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
],
}
Echarts_info3.setOption(fan03_option);
}
const getImageUrl = (name) => {
return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
let icon = getImage(name)
return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
}
</script>
@@ -637,7 +303,8 @@ input[type="number"] {
background-image: url(../../../assets/images/fanInfo/bg.png);
//clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
color: #2fb0df;
box-sizing: border-box;
box-sizing: border-box;
.title {
width: 40%;
text-align: left;

64
src/components/content/transducerList/TransducerList.vue
View File

@@ -1,28 +1,11 @@
<template>
<div id="transducer-list">
<div v-for="item in transducerData" :key="item.equipmentId">
<!-- <div class="transducer-item">-->
<!-- <img src="@/assets/images/transducer/sp_icon_dy.png"/>-->
<!-- <div class="info">-->
<!-- <div class="name-state">-->
<!-- <div class="name">{{index===1?'二':'一'}}号变频器</div>-->
<!-- <div class="state">-->
<!-- <img src="@/assets/images/transducer/greenLight.png"/>-->
<!-- <span>正常</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="one-item">-->
<!-- <div>A相电压:{{ item.phaseVoltageA }}V</div>-->
<!-- <div>B相电压:{{ item.phaseVoltageB }}V</div>-->
<!-- <div>C相电压:{{ item.phaseVoltageC }}V</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="transducer-item">
<img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
<div class="info">
<div class="name-state">
<div class="name">{{item.equipmentName}}</div>
<div class="name">{{ item.equipmentName }}</div>
<div class="state" v-if="stateA||stateB||stateC">
<img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
<span style="color: red">异常</span>
@@ -43,7 +26,7 @@
<img src="@/assets/images/transducer/sp_icon_pbq.png"/>
<div class="info">
<div class="name-state">
<div class="name">{{item.equipmentName}}</div>
<div class="name">{{ item.equipmentName }}</div>
<div class="state">
<img src="@/assets/images/transducer/greenLight.png"/>
<span>正常</span>
@@ -96,16 +79,16 @@ watch(() => props.list, (now) => {
})
})
}, {deep: true});
const stateA=ref(false)
const stateB=ref(false)
const stateC=ref(false)
const stateA = ref(false)
const stateB = ref(false)
const stateC = ref(false)
const getBasicData = (data) => {
let tranObj = {}
let tranArr = []
data.map(item => {
tranObj = {
equipmentId: item.equipmentId,
equipmentName:item.equipmentName,
equipmentName: item.equipmentName,
phaseCurrentA: item.phaseCurrentA,
phaseCurrentAThreshold: item.phaseCurrentAThreshold,
phaseCurrentB: item.phaseCurrentB,
@@ -115,25 +98,25 @@ const getBasicData = (data) => {
frequencySetting: item.frequencySetting,
frequencyFeedback: item.frequencyFeedback,
}
stateA.value=item.phaseCurrentA>item.phaseCurrentAThreshold
stateB.value=item.phaseCurrentB>item.phaseCurrentBThreshold
stateC.value=item.phaseCurrentC>item.phaseCurrentCThreshold
stateA.value = item.phaseCurrentA > item.phaseCurrentAThreshold
stateB.value = item.phaseCurrentB > item.phaseCurrentBThreshold
stateC.value = item.phaseCurrentC > item.phaseCurrentCThreshold
tranArr.push(tranObj)
})
//mock数据
let newObj = {
equipmentId: 0,
equipmentName:'3号变频器',
phaseCurrentA: 210,
phaseCurrentAThreshold: 200,
phaseCurrentB: 231,
phaseCurrentBThreshold: 300,
phaseCurrentC: 154,
phaseCurrentCThreshold:200,
frequencySetting: 23,
frequencyFeedback: 34,
}
tranArr.push(newObj)
// let newObj = {
// equipmentId: 0,
// equipmentName:'3号变频器',
// phaseCurrentA: 210,
// phaseCurrentAThreshold: 200,
// phaseCurrentB: 231,
// phaseCurrentBThreshold: 300,
// phaseCurrentC: 154,
// phaseCurrentCThreshold:200,
// frequencySetting: 23,
// frequencyFeedback: 34,
// }
// tranArr.push(newObj)
transducerData.value = tranArr
}
</script>
@@ -144,10 +127,11 @@ const getBasicData = (data) => {
position: absolute;
top: 1015px;
left: 70px;
width: 826px;
width: 830px;
height: 928px;
background-image: url(@/assets/images/transducer/bg.png);
padding: 0 30px;
box-sizing: border-box;
.transducer-item {
border-bottom: rgba(107, 163, 237, 0.4) solid 2px;

9
src/components/content/tunnelScene/sceneClass/demo.js
View File

@@ -164,7 +164,6 @@ export default class Demo {
// 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
if (child.isMesh && /^point+/.test(child.name)) {
this.points.push(child);
console.log(child.name);
// 改变为基础材质
child.material = new this.THREE.MeshBasicMaterial();
child.scale.set(0.01, 0.01, 0.01);
@@ -420,10 +419,10 @@ export default class Demo {
);
this.opacityTween.start();
this.opacityTween.onUpdate((obj) => {
mesh.material.opacity = obj.opacity;
mesh2.material.opacity = obj.opacity;
mesh3.material.opacity = obj.opacity;
mesh4.material.opacity = obj.opacity;
// mesh.material.opacity = obj.opacity;
// mesh2.material.opacity = obj.opacity;
// mesh3.material.opacity = obj.opacity;
// mesh4.material.opacity = obj.opacity;
if (!isNeedLookAt) return;
this.camera.lookAt(obj.lookX, obj.lookY, obj.lookZ);
this.orbitControls.target.set(obj.lookX, obj.lookY, obj.lookZ);

24
src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
View File

@@ -22,29 +22,28 @@ export function handleRClick(targetPoint) {
this.tag3CSS2DObj.translateX(3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this, 4.31, -2.55, -10);
intoAnimation.call(this, 4.31, -2.55, -11);
} else if (/tl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this, -4.31, -2.55, -10);
intoAnimation.call(this, -4.31, -2.55, -11);
} else if (/tc$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(0);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-8);
intoAnimation.call(this, 0, -2.55, -10);
this.tag3CSS2DObj.translateY(-6);
intoAnimation.call(this, 0, -2.55, -11);
} else if (/br$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(4);
this.tag3CSS2DObj.translateZ(6);
this.tag3CSS2DObj.translateY(5);
this.tag3CSS2DObj.translateX(2);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(3);
intoAnimation.call(this, 4.31, 5, -11);
} else if (/bl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-4);
this.tag3CSS2DObj.translateZ(6);
this.tag3CSS2DObj.translateY(5);
this.tag3CSS2DObj.translateX(-2);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(3);
intoAnimation.call(this, -4.31, 5, -11);
}
this.scene.add(this.tag3CSS2DObj);
// 返回给编辑组件的回调函数
this.editDev(targetPoint);
@@ -86,4 +85,7 @@ function intoAnimation(x = -10, y = 3, z = -12) {
// this.orbitControls.target.set(obj.x, obj.y, -obj.z);
this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
});
this.intoPointAnimation.onComplete(() => {
this.scene.add(this.tag3CSS2DObj);
});
}

146
src/components/content/usedEle/UsedEle.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="used-ele">
<div class="content">
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
<div class="content" @click="handleOpenChart">
<div class="item">
<div></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
@@ -10,17 +10,52 @@
<span>当月节省量：{{ monthlySavings }}v</span>
</div>
</div>
<div class="digital-tunnel">
<el-dialog v-model="isVisited" width="2400px" :modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="top-tag">
<div class="allUsedEle">
<div class="use-title">
12月总用电量
</div>
<div class="value">2345v</div>
</div>
<div class="allUsedEle">
<div class="use-title">
当月节省量
</div>
<div class="value">345v</div>
</div>
</div>
<div class="chat-dialog">
<div id="containerEle"></div>
<div style="width: 1px;"></div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
const props = defineProps({
list: Array,
eleData: Array
});
let myEcharts = reactive({});
const isVisited = ref(false);
const eleData = ref([])
const electricityConsumptionMonthly=ref()
const monthlySavings=ref(55555)
const electricityConsumptionMonthly = ref()
const monthlySavings = ref(55555)
const bgImage = computed(() =>
isVisited.value
? "bpq_active.png"
: "bg.png"
);
watch(() => props.eleData, (now) => {
getBasicData(now.frequencyChangerList)
}, {deep: true});
@@ -29,7 +64,7 @@ watch(() => props.list, (now) => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
if (newItem.electricityConsumptionDay) {
electricityConsumptionMonthly.value=newItem.electricityConsumptionMonthly
electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
// item.electricityConsumptionDay = newItem.electricityConsumptionDay
// item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
// item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
@@ -42,21 +77,104 @@ const getBasicData = (data) => {
let tranObj = {}
let tranArr = []
data.map(item => {
electricityConsumptionMonthly.value=item.electricityConsumptionMonthly,
tranObj = {
equipmentId: item.equipmentId,
// equipmentName: item.equipmentName,
// electricityConsumptionDay: item.electricityConsumptionDay,
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
// electricityConsumptionTotal: item.electricityConsumptionTotal,
}
electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
tranObj = {
equipmentId: item.equipmentId,
// equipmentName: item.equipmentName,
// electricityConsumptionDay: item.electricityConsumptionDay,
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
// electricityConsumptionTotal: item.electricityConsumptionTotal,
}
tranArr.push(tranObj)
})
eleData.value = tranArr
}
const handleOpenChart = () => {
console.log('用电量弹窗')
isVisited.value = true
nextTick(() => {
initChart()
})
}
/**
* 初始化echarts实例方法
*/
const initChart = () => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerEle'));
//5.传入数据
let option = {
//图例
legend: {
left: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 45
}
},
//离容器四侧的距离
grid: {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 20, // 底边距
containLabel: true,
},
//提示框组件
tooltip: {
show: true,
trigger: 'axis'
},
//X轴
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
axisLabel: {
textStyle: {
fontSize: 45,
color: '#D6F1FA'
},
},
},
//Y轴
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
fontSize: 45,
color: '#D6F1FA'
},
},
},
//配置项
series: [
{
name:'日用电量',
data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
type: 'bar'
},
{
name:'日节省量',
data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50,120, 200, 150, 80, 70, 110, 130, 100, ],
type: 'bar'
},
]
}
myEcharts.setOption(option);
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();
}
}
const getImageUrl = (name) => {
return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog__header) {
padding: 0!important;
}
#used-ele {
width: 830px;
height: 90px;
@@ -82,7 +200,7 @@ const getBasicData = (data) => {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.item {
height: 37px;
font-size: 28px;

120
src/components/content/windPressure/WindPressureList.vue
View File

@@ -2,18 +2,43 @@
<div id="wind-pressure">
<div class="name">风压</div>
<div class="list">
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1"/>
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1" @click="handleOpenChart(index+1)"/>
</div>
<div class="digital-tunnel">
<el-dialog v-model="isVisited" :title="windSort+'号风压监控数据'" width="2400px" :modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="chat-dialog">
<div id="container"></div>
<div style="width: 1px;"></div>
</div>
<div class="time-select">
<time-range-btn
:buttonList="timeList"
v-model="selectTimeButton"
@select="timeSelect"
/>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
</div>
</template>
<script setup>
import WindPressureItem from "./childComps/WindPressureItem.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts';
const props = defineProps({
list: Array,
winData: Array
});
const windSort=ref(1)
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const isVisited = ref(false);
let myEcharts = reactive({});
const wpList = ref([]);
watch(() => props.list, (now) => {
wpList.value.forEach(item=>{
@@ -28,7 +53,24 @@ watch(() => props.list, (now) => {
watch(() => props.winData, (now) => {
getScreenInfo(now.windPressureSensorList)
}, {deep: true});
const handleOpenChart = (index) => {
console.log('用电量弹窗')
isVisited.value = true
windSort.value=index
nextTick(() => {
initChart()
})
}
const timeSelect = (index) => {
console.log('选择时间', index)
if(index===0){
console.log('--年')
}else if(index===1){
console.log('--月')
}else if(index===2){
console.log('--日')
}
};
const getScreenInfo = (now) => {
let windPressureObj = {}
let windPressureArr = []
@@ -44,6 +86,78 @@ const getScreenInfo = (now) => {
})
wpList.value = windPressureArr
}
/**
* 初始化echarts实例方法
*/
const initChart = () => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('container'));
//5.传入数据
let option = {
//图例
legend: {
left: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 40
},
// itemWidth: 20,
// itemHeight: 20
},
//离容器四侧的距离
grid: {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
containLabel: true,
},
//提示框组件
tooltip: {
show: true,
trigger: 'axis'
},
//X轴
xAxis: {
type: 'category',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
axisLabel: {
textStyle: {
fontSize: 45,
color: '#D6F1FA'
},
},
},
//Y轴
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
fontSize: 45,
color: '#D6F1FA'
},
},
},
//配置项
series: [
{
data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
type: 'line',
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5
}
}
]
}
myEcharts.setOption(option);
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();
}
}
</script>
<style lang="scss" scoped>

3
src/components/content/windPressure/childComps/WindPressureItem.vue
View File

@@ -99,7 +99,6 @@ let isWaring = computed(() => {
white-space: nowrap;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #d6f1fa;
line-height: 37px;
margin: 0 20px 0 14px;
@@ -125,7 +124,7 @@ let isWaring = computed(() => {
#point {
position: absolute;
height: 20px;
background: #60ddde;
background: #92D18F;
width: 3px;
border-radius: 4px;
box-shadow: 0 0 10px #92D18F;

69
src/components/timeRangeBtn/index.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div class="time-range-group">
<div
class="time-range-button"
:class="{ 'time-range-button-active': selectButton == index }"
@click="select(index)"
v-for="(item, index) in buttonList"
:key="index"
>
<div class="time-range-text">{{ item }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
// 按钮列表
buttonList: {
type: Array,
default: () => [],
},
// 按钮选中的值
modelValue: {
type: Number,
default: 0,
},
width: {
type: String,
default: "auto",
},
});
const emit = defineEmits(["update:modelValue", "select"]);
const selectButton = ref(props.modelValue);
const select = (index) => {
if (selectButton.value === index) return;
selectButton.value = index;
emit("update:modelValue", index);
emit("select", index);
};
watchEffect(() => {
selectButton.value = props.modelValue;
});
</script>
<style scoped lang="scss">
.time-range-group {
//width: 254px;
//height: 78px;
border: 2px solid #0F82AF;
border-radius: 10px;
background: #062247;
display: flex;
font-size: 40px;
.time-range-button {
cursor: pointer;
padding: 18px 24px;
box-sizing: border-box;
color: #FFFFFF;
&.time-range-button-active {
background: #264A78;
border-radius: 10px;
color: #FFFFFF;
}
}
}
</style>

2
src/views/site/index.vue
View File

@@ -415,7 +415,7 @@ const handleClickSite = () => {
.tunnel-icon {
width: 62px;
height: 64px;
background: #FFFFFF;
background-image: url('@/assets/images/site/zdgl_icon_sd.png');
margin: 30px 0 40px 0;
}
}