解决冲突
This commit is contained in:
Hcat1314
@@ -1,42 +1,46 @@
|
||||
<template>
|
||||
<div id="air-info">
|
||||
<div class="fan-speed">
|
||||
<img src="/images/airInfo/fan-v-icon.png" alt="" />
|
||||
<img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
|
||||
<div class="fan-info">
|
||||
<div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
|
||||
<div class="output-fan"><span>风速</span><span>出风：13m/s</span></div>
|
||||
<div class="output-fan"><span>出风：13m/s</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<item-info
|
||||
:wp="info"
|
||||
icon="/images/airInfo/o2-icon.png"
|
||||
name="氧气"
|
||||
unit="%"
|
||||
:wp="info"
|
||||
icon="o2-icon.png"
|
||||
name="氧气"
|
||||
unit="%"
|
||||
/>
|
||||
<item-info
|
||||
:wp="info1"
|
||||
icon="/images/airInfo/tempture-icon.png"
|
||||
name="温度"
|
||||
unit=".c"
|
||||
:wp="info1"
|
||||
icon="tempture-icon.png"
|
||||
name="温度"
|
||||
unit=".c"
|
||||
/>
|
||||
<item-info
|
||||
:wp="info2"
|
||||
icon="/images/airInfo/water-icon.png"
|
||||
name="湿度"
|
||||
unit="%"
|
||||
:wp="info2"
|
||||
icon="water-icon.png"
|
||||
name="湿度"
|
||||
unit="%"
|
||||
/>
|
||||
<item-info
|
||||
:wp="info3"
|
||||
icon="/images/airInfo/dust-icon.png"
|
||||
name="粉尘"
|
||||
unit="mg/m3"
|
||||
:wp="info3"
|
||||
icon="dust-icon.png"
|
||||
name="粉尘"
|
||||
unit="mg/m3"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import {ref, reactive} from "vue";
|
||||
import ItemInfo from "./childComps/ItemInfo.vue";
|
||||
|
||||
const props = defineProps({
|
||||
list: Array
|
||||
});
|
||||
const info = reactive({
|
||||
windPId: 0, //编号
|
||||
max: 120, //最大值
|
||||
@@ -61,12 +65,17 @@ const info3 = reactive({
|
||||
value: 80, //测量值
|
||||
point: 88, //阈值
|
||||
});
|
||||
setInterval(() => {
|
||||
info.value = parseInt(Math.random() * 10) * 10;
|
||||
info1.value = parseInt(Math.random() * 10) * 10;
|
||||
info2.value = parseInt(Math.random() * 10) * 10;
|
||||
info3.value = parseInt(Math.random() * 10) * 10;
|
||||
}, 2000);
|
||||
watch(() => props.list, (now, old) => {
|
||||
console.log('传感器 ', now, old)
|
||||
// wpList.value=now
|
||||
}, {deep: true});
|
||||
// setInterval(() => {
|
||||
// info.value = parseInt(Math.random() * 10) * 10;
|
||||
// info1.value = parseInt(Math.random() * 10) * 10;
|
||||
// info2.value = parseInt(Math.random() * 10) * 10;
|
||||
// info3.value = parseInt(Math.random() * 10) * 10;
|
||||
// }, 2000);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -77,29 +86,42 @@ setInterval(() => {
|
||||
height: 400px;
|
||||
top: 1003px;
|
||||
right: 72px;
|
||||
background-image: url(/images/airInfo/bg.png);
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 43px 20px 30px 32px;
|
||||
background-image: url(@/assets/images/airInfo/bg.png);
|
||||
padding: 25px 20px 0 21px;
|
||||
|
||||
.fan-speed {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
//height: 40px;
|
||||
font-size: 30px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
align-items: center;
|
||||
padding:5px 0 5px 15px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&:hover {
|
||||
//width: 790px;
|
||||
background: #2E5589;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 29px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.fan-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.input-fan {
|
||||
margin: 0px 13px;
|
||||
margin: 0 26px;
|
||||
|
||||
> span:last-child {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div id="item-info">
|
||||
<div class="label">
|
||||
<img :src="icon" alt="" />
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
|
||||
<!-- <img :src="params.icon" alt="" />-->
|
||||
<span>{{ params.name }}</span>
|
||||
</div>
|
||||
<div class="container" ref="length">
|
||||
@@ -15,7 +16,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, watch, defineProps, computed } from "vue";
|
||||
import {onMounted, watch, defineProps, computed} from "vue";
|
||||
|
||||
const params = defineProps({
|
||||
wp: Object,
|
||||
icon: String,
|
||||
@@ -28,32 +30,37 @@ const params = defineProps({
|
||||
// value: 40, //测量值
|
||||
// point: 60, //阈值
|
||||
// };
|
||||
// const wp = reactive(info);
|
||||
const windIcon = reactive(params.icon);
|
||||
const length = ref(null);
|
||||
const value = ref(null);
|
||||
const point = ref(null);
|
||||
onMounted(handleOnMounted);
|
||||
|
||||
function handleOnMounted() {
|
||||
// const = length.value.offsetWidth);
|
||||
setValue();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => params.wp.value,
|
||||
(value) => {
|
||||
setValue();
|
||||
}
|
||||
() => params.wp.value,
|
||||
(value) => {
|
||||
setValue();
|
||||
}
|
||||
);
|
||||
function setValue() {
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
|
||||
}
|
||||
const setValue = () => {
|
||||
let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
|
||||
value.value.style.width = `${width}px`;
|
||||
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
|
||||
point.value.style.left = `${flag}px`;
|
||||
if (width >= flag) {
|
||||
value.value.style.background =
|
||||
"linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
|
||||
"linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
|
||||
} else {
|
||||
value.value.style.background =
|
||||
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
|
||||
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
|
||||
}
|
||||
}
|
||||
let isWaring = computed(() => {
|
||||
@@ -68,31 +75,44 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20px 0px 14px 0px;
|
||||
padding: 5px 14px;
|
||||
margin-bottom: 30px;
|
||||
&:hover {
|
||||
background: #2E5589;
|
||||
border-radius: 6px;
|
||||
|
||||
#point {
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 34px;
|
||||
.wind-icon {
|
||||
height: 36px;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 101px;
|
||||
width: 70px;
|
||||
height: 37px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #d6f1fa;
|
||||
line-height: 37px;
|
||||
margin: 0px 20px 0px 14px;
|
||||
margin: 0 20px 0 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 422px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #0f82af;
|
||||
position: relative;
|
||||
|
||||
.value {
|
||||
height: inherit;
|
||||
width: 0px;
|
||||
@@ -100,15 +120,19 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
|
||||
border-radius: 10px;
|
||||
transition: width 0.5s linear 0s;
|
||||
}
|
||||
|
||||
#point {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: 10px;
|
||||
background: #60ddde;
|
||||
top: 0px;
|
||||
height: 20px;
|
||||
width: 3px;
|
||||
background: #92D18F;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px #92D18F;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.value-num {
|
||||
height: 37px;
|
||||
width: 160px;
|
||||
@@ -119,6 +143,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
|
||||
margin-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #f75f34;
|
||||
font-size: 28px;
|
||||
|
||||
@@ -18,58 +18,65 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
|
||||
const gasInfo = reactive({
|
||||
name: "一氧化硫", //气体名称
|
||||
max: 100, //最大值
|
||||
value: 10, //传感器值
|
||||
value: 60, //传感器值
|
||||
point: 50, //阈值
|
||||
});
|
||||
const gasInfo2 = reactive({
|
||||
name: "一氧化氮", //气体名称
|
||||
max: 100, //最大值
|
||||
value: 10, //传感器值
|
||||
value: 40, //传感器值
|
||||
point: 10, //阈值
|
||||
});
|
||||
const gasInfo3 = reactive({
|
||||
name: "一氧化碳", //气体名称
|
||||
max: 100, //最大值
|
||||
value: 10, //传感器值
|
||||
value: 15, //传感器值
|
||||
point: 70, //阈值
|
||||
});
|
||||
const gasInfo4 = reactive({
|
||||
name: "二氧化碳", //气体名称
|
||||
max: 100, //最大值
|
||||
value: 10, //传感器值
|
||||
value: 25, //传感器值
|
||||
point: 40, //阈值
|
||||
});
|
||||
const gasInfo5 = reactive({
|
||||
name: "硫化氢", //气体名称
|
||||
max: 100, //最大值
|
||||
value: 10, //传感器值
|
||||
value: 30, //传感器值
|
||||
point: 20, //阈值
|
||||
});
|
||||
const gasInfo6 = reactive({
|
||||
name: "二氧化硫", //气体名称
|
||||
max: 100, //最大值
|
||||
value: 10, //传感器值
|
||||
value: 20, //传感器值
|
||||
point: 20, //阈值
|
||||
});
|
||||
setInterval(() => {
|
||||
gasInfo.value = parseInt(Math.random() * 10) * 10;
|
||||
gasInfo2.value = parseInt(Math.random() * 10) * 10;
|
||||
gasInfo3.value = parseInt(Math.random() * 10) * 10;
|
||||
gasInfo4.value = parseInt(Math.random() * 10) * 10;
|
||||
gasInfo6.value = parseInt(Math.random() * 10) * 10;
|
||||
gasInfo5.value = parseInt(Math.random() * 10) * 10;
|
||||
}, 2000);
|
||||
const props = defineProps({
|
||||
list: Array
|
||||
});
|
||||
watch(() => props.list, (now, old) => {
|
||||
console.log('传感器 ', now, old)
|
||||
// wpList.value=now
|
||||
}, {deep: true});
|
||||
// setInterval(() => {
|
||||
// gasInfo.value = parseInt(Math.random() * 10) * 10;
|
||||
// gasInfo2.value = parseInt(Math.random() * 10) * 10;
|
||||
// gasInfo3.value = parseInt(Math.random() * 10) * 10;
|
||||
// gasInfo4.value = parseInt(Math.random() * 10) * 10;
|
||||
// gasInfo6.value = parseInt(Math.random() * 10) * 10;
|
||||
// gasInfo5.value = parseInt(Math.random() * 10) * 10;
|
||||
// }, 2000);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#bad-gas-info {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 830px;
|
||||
width: 824px;
|
||||
height: 621px;
|
||||
top: 1441px;
|
||||
right: 62px;
|
||||
background-image: url(/images/badGasInfo/bg.png);
|
||||
right: 72px;
|
||||
background-image: url(@/assets/images/badGasInfo/bg.png);
|
||||
.title {
|
||||
width: 128px;
|
||||
height: 45px;
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div id="gas-info-item">
|
||||
<div class="info" ref="container"></div>
|
||||
<div class="point" ref="point">
|
||||
<div class="info" ref="container"></div>
|
||||
</div>
|
||||
|
||||
<div class="name">{{ gasInfo.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -37,7 +40,7 @@ const option = {
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
color: `${
|
||||
params.gasInfo.value > params.gasInfo.point ? "#F94236" : "#7EDFEC"
|
||||
params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#7EDFEC"
|
||||
}`,
|
||||
},
|
||||
},
|
||||
@@ -65,7 +68,9 @@ const option = {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 25,
|
||||
color: [[1, "#0a4265"]],
|
||||
color: [
|
||||
[1, "#0a4265"]
|
||||
],
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
@@ -73,7 +78,7 @@ const option = {
|
||||
height: 14,
|
||||
fontSize: 26,
|
||||
color: `${
|
||||
params.gasInfo.value > params.gasInfo.point ? "#F94236" : "#FFCE23"
|
||||
params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23"
|
||||
}`,
|
||||
formatter: "Vo{value}%",
|
||||
},
|
||||
@@ -85,6 +90,8 @@ onMounted(handleOnMounted);
|
||||
function handleOnMounted() {
|
||||
e_info = Echarts.init(container.value);
|
||||
e_info.setOption(option);
|
||||
// 设置阈值
|
||||
setPoint();
|
||||
}
|
||||
watch(
|
||||
() => params.gasInfo.value,
|
||||
@@ -101,13 +108,42 @@ watch(
|
||||
e_info.setOption(option);
|
||||
}
|
||||
);
|
||||
|
||||
// 获取阈值dom元素
|
||||
const point = ref(null);
|
||||
//手写js实现阈值的在表盘的刻度的位置
|
||||
function setPoint() {
|
||||
const deg = 360 * (params.gasInfo.point / params.gasInfo.max);
|
||||
point.value.style.transform = `rotate(${deg}deg)`; //旋转指定度数
|
||||
point.value.children[0].style.transform = `rotate(${-deg}deg)`; //注意子元素逆向旋转
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#gas-info-item {
|
||||
width: 231px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
//旋转定位阈值位于的刻度
|
||||
.point {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
//用伪元素标记阈值
|
||||
.point::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
background: #7EDFEC;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 0 10px #7EDFEC;
|
||||
}
|
||||
.info {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<div class="fan-name">一号风机</div>
|
||||
<!-- 功能 -->
|
||||
<div class="option-nav">
|
||||
<div class="state">
|
||||
<div class="state " :class="{ 'blue-state': isStart }">
|
||||
<div :class="{ stopColor: !isStart }">
|
||||
<span> <img :src="stateIcon1" alt=""/>状态：</span
|
||||
><span>{{ state }}</span>
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
|
||||
状态：{{ state }}
|
||||
</div>
|
||||
<div class="switch">
|
||||
<div
|
||||
@@ -53,27 +53,24 @@
|
||||
</div>
|
||||
<div class="fan-item">
|
||||
<!-- echarts -->
|
||||
|
||||
<div class="echart" ref="info2"></div>
|
||||
<!-- 风机名称 -->
|
||||
<div class="fan-name">二号风机</div>
|
||||
<!-- 功能 -->
|
||||
<div class="option-nav">
|
||||
<div class="state">
|
||||
<div class="state" :class="{ 'blue-state': isStart2 }">
|
||||
<div :class="{ stopColor: !isStart2 }">
|
||||
<span><img :src="stateIcon2" alt=""/>状态：{{ state2 }}</span
|
||||
><span></span>
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
|
||||
状态：{{ state2 }}
|
||||
</div>
|
||||
<div class="switch">
|
||||
<div
|
||||
id="auto"
|
||||
:class="{ active: isStart2 }"
|
||||
@click="isStart2 = true"
|
||||
>
|
||||
启动
|
||||
</div>
|
||||
<div
|
||||
id="stop"
|
||||
:class="{ active: !isStart2 }"
|
||||
@click="isStart2 = false"
|
||||
>
|
||||
@@ -108,6 +105,14 @@
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import {ref, reactive, onMounted, computed, watch} from "vue";
|
||||
const props = defineProps({
|
||||
list: Array
|
||||
});
|
||||
const socketData = ref()
|
||||
watch(() => props.list, (now, old) => {
|
||||
// console.log('socketDatawatch', now, old)
|
||||
// socketData.value=now
|
||||
}, {deep: true});
|
||||
|
||||
onMounted(handleOnMounted);
|
||||
|
||||
@@ -359,30 +364,62 @@ watch(fan02_option, () => {
|
||||
// 一号风机启动停止按钮
|
||||
const isStart = ref(true);
|
||||
let state = computed(() => {
|
||||
return isStart.value ? "启动" : "停止";
|
||||
return isStart.value ? "运行" : "故障";
|
||||
// return socketData[0].running ? "运行" : "故障";
|
||||
});
|
||||
const stateIcon1 = computed(() =>
|
||||
isStart.value
|
||||
? "/images/fanInfo/blue-state-icon.png"
|
||||
: "/images/fanInfo/red-state-icon.png"
|
||||
? "blue-state-icon.png"
|
||||
: "red-state-icon.png"
|
||||
);
|
||||
const isStart2 = ref(true);
|
||||
|
||||
const isStart2 = ref(false);
|
||||
let state2 = computed(() => {
|
||||
return isStart2.value ? "启动" : "停止";
|
||||
return isStart2.value ? "运行" : "故障";
|
||||
});
|
||||
const stateIcon2 = computed(() =>
|
||||
isStart2.value
|
||||
? "/images/fanInfo/blue-state-icon.png"
|
||||
: "/images/fanInfo/red-state-icon.png"
|
||||
? "blue-state-icon.png"
|
||||
: "red-state-icon.png"
|
||||
);
|
||||
let is = ref("isInput");
|
||||
// 功率是否自动
|
||||
let isSAuto1 = ref("false");
|
||||
let isSAuto2 = ref("false");
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-radio__input {
|
||||
:deep( .el-radio__input.is-checked + .el-radio__label) {
|
||||
color: #38CAFB;
|
||||
}
|
||||
|
||||
:deep( .el-radio__input.is-checked .el-radio__inner) {
|
||||
border-color: #062247;
|
||||
background: #38CAFB;
|
||||
}
|
||||
|
||||
:deep( .el-radio__inner) {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
:deep(.el-radio__inner::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
:deep( .el-radio__input) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid #38cafb;
|
||||
@@ -392,7 +429,7 @@ let isSAuto2 = ref("false");
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__label {
|
||||
:deep( .el-radio__label) {
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #38cafb;
|
||||
@@ -409,9 +446,6 @@ let isSAuto2 = ref("false");
|
||||
padding: 10px;
|
||||
|
||||
background-image: url(../../../assets/images/fanInfo/bg.png);
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
//clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
|
||||
color: #2fb0df;
|
||||
|
||||
@@ -441,6 +475,7 @@ let isSAuto2 = ref("false");
|
||||
margin: 0px 0px 0px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.echart::after {
|
||||
content: "Hz";
|
||||
font-size: 24px;
|
||||
@@ -470,6 +505,20 @@ let isSAuto2 = ref("false");
|
||||
display: flex;
|
||||
width: 70%;
|
||||
|
||||
.blue-state {
|
||||
> div:first-child:hover {
|
||||
color: #fff;
|
||||
background-color: #127399;
|
||||
width: 180px;
|
||||
padding-left: 5px;
|
||||
border-radius: 8px;
|
||||
|
||||
> div:first-child {
|
||||
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -479,13 +528,28 @@ let isSAuto2 = ref("false");
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #38cafb;
|
||||
line-height: 35px;
|
||||
gap: 33px;
|
||||
gap: 40px;
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
|
||||
> div {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 4px;
|
||||
transform: translateY(15%);
|
||||
}
|
||||
|
||||
.state-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
width: 160px;
|
||||
@@ -566,4 +630,15 @@ let isSAuto2 = ref("false");
|
||||
.stopColor {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.stopColor:hover {
|
||||
color: #fff;
|
||||
width: 180px;
|
||||
background: #9B2222;
|
||||
border-radius: 8px;
|
||||
|
||||
> div:first-child {
|
||||
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,126 @@
|
||||
<template>
|
||||
<div id="transducer-list">
|
||||
<transducer-item v-for="(item, key) in 6" :isFirst="key === 0" />
|
||||
<div v-for="(item,index) in socketData" :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">{{index===1?'二':'一'}}号变频器</div>
|
||||
<div class="state" v-if="item.phaseCurrentB>'100'">
|
||||
<img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
|
||||
<span style="color: red">异常</span>
|
||||
</div>
|
||||
<div class="state" v-else>
|
||||
<img src="@/assets/images/transducer/greenLight.png" alt=""/>
|
||||
<span>正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one-item">
|
||||
<div>A相电流:{{ item.phaseCurrentA }}A</div>
|
||||
<div :style="{'color':item.phaseCurrentB>'100'?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
|
||||
<div>C相电流:{{ item.phaseCurrentC }}A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transducer-item">
|
||||
<img src="@/assets/images/transducer/sp_icon_pbq.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="other-item frequency">
|
||||
<div>
|
||||
<img
|
||||
src="@/assets/images/transducer/icon2.png"
|
||||
alt=""
|
||||
/><span>给定频率:{{ item.frequencySetting }}HZ</span>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="@/assets/images/transducer/icon2.png"
|
||||
alt=""
|
||||
/><span>反馈频率:{{ item.frequencyFeedback }}HZ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TransducerItem from "./childComps/TransducerItem.vue";
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
feedback: Array,
|
||||
});
|
||||
const socketData = ref([
|
||||
{
|
||||
equipmentId: 23,
|
||||
phaseCurrentA: '124.01',
|
||||
phaseCurrentB: '124.51',
|
||||
phaseCurrentC: '125.01',
|
||||
phaseVoltageA: '404.01',
|
||||
phaseVoltageB: '404.51',
|
||||
phaseVoltageC: '414.01',
|
||||
frequencySetting: '23',
|
||||
frequencyFeedback: '23'
|
||||
},
|
||||
{
|
||||
equipmentId: 23,
|
||||
phaseCurrentA: '124.01',
|
||||
phaseCurrentB: '124.51',
|
||||
phaseCurrentC: '125.01',
|
||||
phaseVoltageA: '404.01',
|
||||
phaseVoltageB: '404.51',
|
||||
phaseVoltageC: '414.01',
|
||||
frequencySetting: '23',
|
||||
frequencyFeedback: '23'
|
||||
}
|
||||
])
|
||||
const contactData=ref([])
|
||||
watch(() => props.list, (now, old) => {
|
||||
console.log('电流电压',now,contactData.value)
|
||||
let obj={}
|
||||
let arr=[]
|
||||
contactData.value.forEach(contactItem=>{
|
||||
now.forEach(item=>{
|
||||
if(contactItem.equipmentId===item.equipmentId){
|
||||
obj={
|
||||
...item,
|
||||
frequencySetting: contactItem.frequencySetting,
|
||||
frequencyFeedback: contactItem.frequencyFeedback
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
})
|
||||
})
|
||||
socketData.value=arr
|
||||
}, {deep: true});
|
||||
watch(() => props.feedback, (now, old) => {
|
||||
console.log('变频器频率',now)
|
||||
contactData.value=now
|
||||
}, {deep: true});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -16,10 +131,92 @@ import TransducerItem from "./childComps/TransducerItem.vue";
|
||||
left: 70px;
|
||||
width: 826px;
|
||||
height: 928px;
|
||||
background-image: url(../../../assets/images/transducer/bg.png);
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 30px;
|
||||
background-image: url(@/assets/images/transducer/bg.png);
|
||||
padding: 0 30px;
|
||||
|
||||
.transducer-item {
|
||||
border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
|
||||
//height: 148px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px 0 30px 8px;
|
||||
|
||||
& > img {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.info {
|
||||
// border: white solid 1px;
|
||||
//padding: 2px 5px;
|
||||
flex: 1;
|
||||
//height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.name-state {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0 0 18px;
|
||||
|
||||
margin-bottom: 16px;
|
||||
|
||||
.name {
|
||||
width: 155px;
|
||||
height: 40px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #38cafb;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.state {
|
||||
width: 80px;
|
||||
height: 31px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #19d172;
|
||||
line-height: 31px;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.one-item,
|
||||
.other-item {
|
||||
//height: 47px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
align-items: center;
|
||||
font-size: 26px;
|
||||
line-height: 37px;
|
||||
padding: 0 0 0 18px;
|
||||
|
||||
img {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.frequency {
|
||||
justify-content: flex-start;
|
||||
|
||||
> div:first-child {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isFirst {
|
||||
border: none;
|
||||
height: calc(155px - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div class="transducer-item" :class="{ isFirst: isFirst }">
|
||||
<img src="../../../../assets/images/transducer/transducer.png" />
|
||||
<div class="info">
|
||||
<div class="name-state">
|
||||
<div class="name">一号变频器</div>
|
||||
<div class="state">
|
||||
<img src="../../../../assets/images/transducer/greenLight.png" />
|
||||
<span>正常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="one-item">
|
||||
<div>A项电压：21V</div>
|
||||
<div>B项电压：21V</div>
|
||||
<div>C项电压：21V</div>
|
||||
</div>
|
||||
<div class="other-item" v-if="false">
|
||||
<div>
|
||||
<img
|
||||
src="../../../../assets/images/transducer/icon2.png"
|
||||
alt=""
|
||||
/><span>给定频率：223HZ</span>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="../../../../assets/images/transducer/icon2.png"
|
||||
alt=""
|
||||
/><span>反馈频率：23HZ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, defineProps } from "vue";
|
||||
defineProps({
|
||||
isFirst: Boolean,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transducer-item {
|
||||
border-top: rgba(107, 163, 237, 0.4) solid 2px;
|
||||
height: 155px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
.info {
|
||||
// border: white solid 1px;
|
||||
padding: 2px 5px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.name-state {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
padding: 0px 20px 0px 20px;
|
||||
.name {
|
||||
width: 155px;
|
||||
height: 40px;
|
||||
font-size: 30px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #38cafb;
|
||||
line-height: 40px;
|
||||
}
|
||||
.state {
|
||||
width: 80px;
|
||||
height: 31px;
|
||||
font-size: 24px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #19d172;
|
||||
line-height: 31px;
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.one-item,
|
||||
.other-item {
|
||||
height: 47px;
|
||||
display: flex;
|
||||
font-family: MicrosoftYaHei;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
line-height: 37px;
|
||||
padding: 0px 0px 0px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isFirst {
|
||||
border: none;
|
||||
height: calc(155px - 30px);
|
||||
}
|
||||
</style>
|
||||
@@ -2,49 +2,20 @@
|
||||
<div id="used-ele">
|
||||
<div class="title">用电量</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="name">一号变频器</div>
|
||||
<div class="item" v-for="(item,index) in socketData" :key="item.equipmentId">
|
||||
<div class="name">{{index===1?'二':'一'}}号变频器</div>
|
||||
<ul>
|
||||
<li>
|
||||
<img
|
||||
src="../../../assets/images/usedEle/icon-all.png"
|
||||
alt=""
|
||||
/><span>总用电量：2345v</span>
|
||||
<div></div>
|
||||
<span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="../../../assets/images/usedEle/icon-month.png"
|
||||
alt=""
|
||||
/><span>总用电量：2345v</span>
|
||||
<div></div>
|
||||
<span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="../../../assets/images/usedEle/icon-day.png"
|
||||
alt=""
|
||||
/><span>总用电量：2345v</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name">二号变频器</div>
|
||||
<ul>
|
||||
<li>
|
||||
<img
|
||||
src="../../../assets/images/usedEle/icon-all.png"
|
||||
alt=""
|
||||
/><span>总用电量：2345v</span>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="../../../assets/images/usedEle/icon-month.png"
|
||||
alt=""
|
||||
/><span>总用电量：2345v</span>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="../../../assets/images/usedEle/icon-day.png"
|
||||
alt=""
|
||||
/><span>总用电量：2345v</span>
|
||||
<div></div>
|
||||
<span>日用电量：{{ item.electricityConsumptionDay }}v</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -53,11 +24,29 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
oneTransducer: Object,
|
||||
twoTransducer: Object,
|
||||
list: Array
|
||||
});
|
||||
const socketData = ref([
|
||||
{
|
||||
electricityConsumptionDay: 234,
|
||||
electricityConsumptionMonthly: 345,
|
||||
electricityConsumptionTotal: 235,
|
||||
equipmentId: 22,
|
||||
},
|
||||
{
|
||||
electricityConsumptionDay: 234,
|
||||
electricityConsumptionMonthly: 345,
|
||||
electricityConsumptionTotal: 235,
|
||||
equipmentId:23,
|
||||
}
|
||||
])
|
||||
watch(() => props.list, (now, old) => {
|
||||
console.log('用电量',now,old)
|
||||
socketData.value = now
|
||||
}, {deep: true});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -69,10 +58,8 @@ defineProps({
|
||||
top: 1711px;
|
||||
left: 68px;
|
||||
background-image: url(../../../assets/images/usedEle/bg.png);
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 21px 62px 37px 70px;
|
||||
padding: 21px 62px 35px 62px;
|
||||
|
||||
.title {
|
||||
width: 96px;
|
||||
height: 42px;
|
||||
@@ -82,14 +69,17 @@ defineProps({
|
||||
color: #38cafb;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.content {
|
||||
//border: white solid 1px;
|
||||
height: calc(100% - 30px);
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
|
||||
.name {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
@@ -100,32 +90,77 @@ defineProps({
|
||||
line-height: 40px;
|
||||
margin: 24px 0px 28px 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 270px;
|
||||
//width: 270px;
|
||||
height: 37px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #cb7c4b;
|
||||
line-height: 37px;
|
||||
margin-bottom: 25px;
|
||||
img {
|
||||
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;
|
||||
width: 33px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
|
||||
@@ -2,81 +2,78 @@
|
||||
<div id="wind-pressure">
|
||||
<div class="name">风压</div>
|
||||
<div class="list">
|
||||
<wind-pressure-item v-for="item in wpList" :wp="item" />
|
||||
<wind-pressure-item v-for="(item,index) in wpList" :wp="item" :index="index+1"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import WindPressureItem from "./childComps/WindPressureItem.vue";
|
||||
import { reactive } from "vue";
|
||||
const wpList = reactive([
|
||||
|
||||
const props = defineProps({
|
||||
list: Array
|
||||
});
|
||||
const wpList = ref([
|
||||
{
|
||||
windPId: 1, //编号
|
||||
max: 120, //最大值
|
||||
value: 40, //测量值
|
||||
point: 60, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 1, //编号
|
||||
max: 120, //最大值
|
||||
value: 66, //测量值
|
||||
point: 60, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 2, //编号
|
||||
max: 120, //最大值
|
||||
value: 70, //测量值
|
||||
point: 50, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 3, //编号
|
||||
max: 120, //最大值
|
||||
value: 90, //测量值
|
||||
point: 60, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 4, //编号
|
||||
max: 120, //最大值
|
||||
value: 40, //测量值
|
||||
point: 30, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 5, //编号
|
||||
max: 120, //最大值
|
||||
value: 30, //测量值
|
||||
point: 50, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 6, //编号
|
||||
max: 120, //最大值
|
||||
value: 20, //测量值
|
||||
point: 30, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 7, //编号
|
||||
max: 120, //最大值
|
||||
value: 20, //测量值
|
||||
point: 30, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 8, //编号
|
||||
max: 120, //最大值
|
||||
value: 120, //测量值
|
||||
point: 80, //阈值
|
||||
},
|
||||
{
|
||||
windPId: 9, //编号
|
||||
max: 120, //最大值
|
||||
value: 99, //测量值
|
||||
point: 70, //阈值
|
||||
},
|
||||
]);
|
||||
setInterval(() => {
|
||||
wpList.forEach((item) => {
|
||||
item.value = parseInt(Math.random() * 10) * 10;
|
||||
});
|
||||
}, 2000);
|
||||
watch(() => props.list, (now, old) => {
|
||||
console.log('风压', now, old)
|
||||
wpList.value = now
|
||||
}, {deep: true});
|
||||
// setInterval(() => {
|
||||
// wpList.forEach((item) => {
|
||||
// item.value = parseInt(Math.random() * 10) * 10;
|
||||
// });
|
||||
// }, 2000);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -87,10 +84,8 @@ setInterval(() => {
|
||||
top: 185px;
|
||||
right: 68px;
|
||||
background-image: url(../../../assets/images/windPressure/bg.png);
|
||||
background-position: center center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: 22px;
|
||||
padding: 22px 17px 0 23px;
|
||||
|
||||
.name {
|
||||
width: 64px;
|
||||
height: 42px;
|
||||
@@ -100,6 +95,7 @@ setInterval(() => {
|
||||
color: #38cafb;
|
||||
line-height: 42px;
|
||||
margin-left: 62px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div id="wind-pressure-item">
|
||||
<div id="wind-pressure-item" :class="{ abnormal:isWaring }">
|
||||
<div class="label">
|
||||
<img src="../../../../assets/images/windPressure/icon.png" alt="" /><span
|
||||
>{{ params.wp.windPId }}号风压</span
|
||||
>
|
||||
<img src="../../../../assets/images/windPressure/icon.png" alt=""/>
|
||||
<span>{{ index }}号风压</span>
|
||||
</div>
|
||||
<div class="container" ref="length">
|
||||
<div class="value" ref="value"></div>
|
||||
@@ -16,9 +15,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, watch, defineProps, computed } from "vue";
|
||||
import {reactive, onMounted, watch, defineProps, computed} from "vue";
|
||||
|
||||
const params = defineProps({
|
||||
wp: Object,
|
||||
index: Number,
|
||||
});
|
||||
// const info = {
|
||||
// windPId: 0, //编号
|
||||
@@ -31,16 +32,19 @@ const length = ref(null);
|
||||
const value = ref(null);
|
||||
const point = ref(null);
|
||||
onMounted(handleOnMounted);
|
||||
|
||||
function handleOnMounted() {
|
||||
// const = length.value.offsetWidth);
|
||||
setValue();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => params.wp.value,
|
||||
(value) => {
|
||||
setValue();
|
||||
}
|
||||
() => params.wp.value,
|
||||
(value) => {
|
||||
setValue();
|
||||
}
|
||||
);
|
||||
|
||||
function setValue() {
|
||||
let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
|
||||
value.value.style.width = `${width}px`;
|
||||
@@ -52,17 +56,40 @@ function setValue() {
|
||||
value.value.style.background = "#60DDDE";
|
||||
}
|
||||
}
|
||||
|
||||
let isWaring = computed(() => {
|
||||
return params.wp.value >= params.wp.point;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.abnormal:hover{
|
||||
background: #9C5252!important;
|
||||
border-radius: 6px;
|
||||
#point {
|
||||
background: #fff!important;
|
||||
}
|
||||
}
|
||||
#wind-pressure-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20px 0px 14px 33px;
|
||||
padding: 6px 38px 7px 10px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
&:hover {
|
||||
background: #2E5589;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.label {
|
||||
span {
|
||||
margin: 0 5px 0 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -71,22 +98,27 @@ let isWaring = computed(() => {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 101px;
|
||||
//width: 101px;
|
||||
white-space: nowrap;
|
||||
height: 37px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #d6f1fa;
|
||||
line-height: 37px;
|
||||
margin: 0px 20px 0px 14px;
|
||||
margin: 0 20px 0 14px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 500px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #0f82af;
|
||||
position: relative;
|
||||
|
||||
.value {
|
||||
height: inherit;
|
||||
width: 0px;
|
||||
@@ -94,15 +126,19 @@ let isWaring = computed(() => {
|
||||
border-radius: 10px;
|
||||
transition: width 0.5s linear 0s;
|
||||
}
|
||||
|
||||
#point {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: #60ddde;
|
||||
top: 0px;
|
||||
width: 3px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px #92D18F;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.value-num {
|
||||
height: 37px;
|
||||
font-size: 28px;
|
||||
@@ -111,6 +147,7 @@ let isWaring = computed(() => {
|
||||
line-height: 37px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #f53839;
|
||||
font-size: 28px;
|
||||
|
||||
Reference in New Issue
Block a user