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

Merge pull request 'dev' (#115) from dev into master

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/115
This commit is contained in:
odjbin
2023-12-13 15:04:27 +00:00
parent bb94d4b2a8 6912132e36
commit e95c24befe
8 changed files with 415 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/fanInfo/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/transducer/icon1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 788 B

After

Width:  |  Height:  |  Size: 520 B

BIN
src/assets/images/usedEle/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

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

@@ -4,16 +4,20 @@
<div class="info-list">
<gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
</div>
<el-dialog v-model="isVisited" title="1号有害气体监控数据" width="958px" :modal="false">
<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>
</template>
<script setup>
import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from 'echarts';
const props = defineProps({
list: Array,
@@ -21,21 +25,27 @@ const props = defineProps({
});
const isVisited = ref(false);
const badGasList = ref([])
const chart = ref(null);
let myEcharts = reactive({});
const option = reactive({
//图例
legend: {
data: [],
selected: {},
selectedMode: false
left: 0,
textStyle:{
color:'#FFFFFF',
fontSize:28
},
// itemWidth: 20,
// itemHeight: 20
},
//离容器四侧的距离
// grid: {
// left: 40, // 左边距
// right: 60, // 右边距
// top: 40, // 顶边距
// bottom: 20, // 底边距
// // containLabel: true,
// },
grid: {
left: 45, // 左边距
// right: 60, // 右边距
top: 60, // 顶边距
bottom: 40, // 底边距
// containLabel: true,
},
//提示框组件
tooltip: {
show: true,
@@ -43,27 +53,79 @@ const option = reactive({
},
//X轴
xAxis: {
name: '',
type: 'category',
data: [],
axisLine: {
show: true
}
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
fontSize: 24,
color:'#D6F1FA'
},
},
},
//Y轴
yAxis: {
name: '',
type: 'value',
data: [],
axisLine: {
show: true
}
},
radar: {
// shape: 'circle',
axisLabel: {
textStyle: {
fontSize: 24,
color:'#D6F1FA'
},
},
},
//配置项
series: []
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
}
},
]
})
watch(() => props.list, (now) => {
@@ -79,6 +141,13 @@ watch(() => props.list, (now) => {
watch(() => props.badGasData, (now) => {
getBadGasInfo(now.sensorList)
}, {deep: true});
onMounted(() => {
nextTick(() => {
initChart()
})
})
const getBadGasInfo = (now) => {
let windPressureObj = {}
let windPressureArr = []
@@ -103,15 +172,37 @@ const changeData = (item) => {
const handleOpenChart = () => {
console.log('有害气体弹窗')
isVisited.value = true
initChart()
}
/**
* 初始化echarts实例方法
*/
const initChart = () => {
//3.初始化container容器
myEcharts = echarts.init(chart.value);
//5.传入数据
myEcharts.setOption(option, true);
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();
}
}
</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 20px;
padding: 47px 30px;
box-sizing: border-box;
margin: 588px auto 0 auto;
@@ -158,7 +249,16 @@ const handleOpenChart = () => {
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;

2
src/components/content/badGasInfo/childComps/GasInfoItem.vue
View File

@@ -8,7 +8,7 @@
</template>
<script setup>
import { defineProps, ref, reactive, watch, onMounted } from "vue";
import { defineProps, ref, watch, onMounted } from "vue";
import * as Echarts from "echarts";
let e_info;
let params = defineProps({

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

@@ -98,6 +98,53 @@
</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'"
/></span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -112,6 +159,7 @@ const props = defineProps({
//当前功率
const powerOne = ref()
const powerTwo = ref()
const powerThree = ref(555)
//状态
const stateOne = ref()
const stateTwo = ref()
@@ -128,8 +176,11 @@ 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)
@@ -410,6 +461,119 @@ const handleOnMounted = () => {
],
}
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) => {
@@ -463,18 +627,17 @@ input[type="number"] {
}
#fan_info {
height: 521px;
height: 795px;
width: 830px;
position: absolute;
z-index: 100;
top: 184px;
left: 68px;
padding: 10px;
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;
.title {
width: 40%;
text-align: left;
@@ -491,7 +654,7 @@ input[type="number"] {
height: calc(100% - 30px);
.fan-item {
height: 50%;
height: 33.3%;
display: flex;
font-size: 14px;

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

@@ -52,7 +52,7 @@
<div class="other-item frequency">
<div>
<img
src="@/assets/images/transducer/icon2.png"
src="@/assets/images/transducer/icon1.png"
alt=""
/><span>给定频率:{{ item.frequencySetting }}HZ</span>
</div>
@@ -120,6 +120,20 @@ const getBasicData = (data) => {
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)
transducerData.value = tranArr
}
</script>
@@ -128,7 +142,7 @@ const getBasicData = (data) => {
#transducer-list {
color: rgb(226, 26, 26);
position: absolute;
top: 744px;
top: 1015px;
left: 70px;
width: 826px;
height: 928px;

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

@@ -1,23 +1,13 @@
<template>
<div id="used-ele">
<div class="title">用电量</div>
<div class="content">
<div class="item" v-for="item in eleData" :key="item.equipmentId">
<div class="name">{{ item.equipmentName }}</div>
<ul>
<li>
<div></div>
<span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
</li>
<li>
<div></div>
<span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
</li>
<li>
<div></div>
<span>日用电量：{{ item.electricityConsumptionDay }}v</span>
</li>
</ul>
<div class="item">
<div></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
</div>
<div class="item">
<div></div>
<span>当月节省量：{{ monthlySavings }}v</span>
</div>
</div>
</div>
@@ -29,6 +19,8 @@ const props = defineProps({
eleData: Array
});
const eleData = ref([])
const electricityConsumptionMonthly=ref()
const monthlySavings=ref(55555)
watch(() => props.eleData, (now) => {
getBasicData(now.frequencyChangerList)
}, {deep: true});
@@ -37,9 +29,10 @@ watch(() => props.list, (now) => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
if (newItem.electricityConsumptionDay) {
item.electricityConsumptionDay = newItem.electricityConsumptionDay
item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
electricityConsumptionMonthly.value=newItem.electricityConsumptionMonthly
// item.electricityConsumptionDay = newItem.electricityConsumptionDay
// item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
// item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
}
}
})
@@ -49,12 +42,13 @@ 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,
// equipmentName: item.equipmentName,
// electricityConsumptionDay: item.electricityConsumptionDay,
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
// electricityConsumptionTotal: item.electricityConsumptionTotal,
}
tranArr.push(tranObj)
})
@@ -65,10 +59,10 @@ const getBasicData = (data) => {
<style lang="scss" scoped>
#used-ele {
width: 830px;
height: 351px;
height: 90px;
color: aliceblue;
position: absolute;
top: 1711px;
top: 1980px;
left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png);
padding: 21px 62px 35px 62px;
@@ -84,99 +78,99 @@ const getBasicData = (data) => {
}
.content {
//border: white solid 1px;
height: calc(100% - 30px);
margin-top: 4px;
display: flex;
align-items: center;
justify-content: space-between;
.item {
flex: 1;
font-size: 12px;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38CAFB;
line-height: 37px;
display: flex;
align-items: center;
.name {
width: 150px;
height: 40px;
font-size: 30px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 40px;
margin: 24px 0px 28px 0px;
> div {
margin-right: 10px;
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
ul {
font-size: 14px;
li {
display: flex;
align-items: center;
//width: 270px;
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #cb7c4b;
line-height: 37px;
margin-bottom: 25px;
padding-left: 5px;
&:hover {
cursor: pointer;
width: 280px;
//height: 46px;
background: #2E5589;
border-radius: 7px;
color: #FBF7F4;
> div {
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
> div {
width: 29px;
height: 33px;
background-image: url(../../../assets/images/usedEle/icon-all.png);
margin-right: 14px;
}
&:nth-child(2) {
> div {
background-image: url(../../../assets/images/usedEle/icon-month.png);
}
&:hover {
> div {
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
}
&:nth-child(3) {
> div {
background-image: url(../../../assets/images/usedEle/icon-day.png);
}
&:hover {
> div {
background-image: url(../../../assets/images/usedEle/white-ele.png);
}
}
}
}
& > :nth-child(2) {
color: #4bcb6b;
}
& > :nth-child(3) {
color: #4bcbbc;
}
}
//ul {
// font-size: 14px;
//
// li {
// display: flex;
// align-items: center;
// //width: 270px;
// height: 37px;
// font-size: 28px;
// color: #38CAFB;
// line-height: 37px;
// margin-bottom: 25px;
// padding-left: 5px;
//
// &:hover {
// cursor: pointer;
// width: 280px;
// //height: 46px;
// background: #2E5589;
// border-radius: 7px;
// color: #FBF7F4;
//
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
//
// > div {
// width: 29px;
// height: 33px;
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// margin-right: 14px;
// }
//
// &:nth-child(2) {
// > div {
// background-image: url(../../../assets/images/usedEle/icon-month.png);
// }
//
// &:hover {
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
// }
//
// &:nth-child(3) {
// > div {
// background-image: url(../../../assets/images/usedEle/icon-day.png);
// }
//
// &:hover {
// > div {
// background-image: url(../../../assets/images/usedEle/white-ele.png);
// }
// }
// }
// }
//
// & > :nth-child(2) {
// color: #4bcb6b;
// }
//
// & > :nth-child(3) {
// color: #4bcbbc;
// }
//}
}
& > :nth-child(2) {
transform: translateX(25px);
}
//& > :nth-child(2) {
// transform: translateX(25px);
//}
}
}
</style>