邓洁: 修改首页风机样式

2023-12-21 20:13:11 +08:00
parent 9d90ad9dd1
commit f178bc80cd
6 changed files with 505 additions and 164 deletions
--- a/src/components/content/fanInfo/FanInfoItem.vue
+++ b/src/components/content/fanInfo/FanInfoItem.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+    <div class="label">
+      A相电流:{{params.wp.valueA}}A
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="valueA"></div>
+      <div class="point" ref="pointA"></div>
+    </div>
+  </div>
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+    <div class="label">
+      B相电流:{{params.wp.valueB}}A
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="valueB"></div>
+      <div class="point" ref="pointB"></div>
+    </div>
+  </div>
+  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
+    <div class="label">
+      C相电流:{{params.wp.valueC}}A
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="valueC"></div>
+      <div class="point" ref="pointC"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const params = defineProps({
+  wp: Object
+});
+const length = ref(null);
+const valueA = ref(null);
+const valueB = ref(null);
+const valueC= ref(null);
+const pointA = ref(null);
+const pointB = ref(null);
+const pointC = ref(null);
+onMounted(()=>{
+  setValueA();
+  setValueB();
+  setValueC();
+})
+
+watch(() => params.wp.value, () => {
+  setValueA();
+  setValueB();
+  setValueC();
+});
+
+const setValueA=()=> {
+  let width = (params.wp.valueA* length.value.offsetWidth) / params.wp.max;
+  valueA.value.style.width = `${width}px`;
+  let flag = (params.wp.pointA * length.value.offsetWidth) / params.wp.max;
+  pointA.value.style.left = `${flag}px`;
+  if (width >= flag) {
+    valueA.value.style.background = "#F53839";
+  } else {
+    valueA.value.style.background = "#60DDDE";
+  }
+}
+const setValueB=()=> {
+  let width = (params.wp.valueB* length.value.offsetWidth) / params.wp.max;
+  valueB.value.style.width = `${width}px`;
+  let flag = (params.wp.pointB * length.value.offsetWidth) / params.wp.max;
+  pointB.value.style.left = `${flag}px`;
+  if (width >= flag) {
+    valueB.value.style.background = "#F53839";
+  } else {
+    valueB.value.style.background = "#60DDDE";
+  }
+}
+const setValueC=()=> {
+  let width = (params.wp.valueC* length.value.offsetWidth) / params.wp.max;
+  valueC.value.style.width = `${width}px`;
+  let flag = (params.wp.pointC * length.value.offsetWidth) / params.wp.max;
+  pointC.value.style.left = `${flag}px`;
+  if (width >= flag) {
+    valueC.value.style.background = "#F53839";
+  } else {
+    valueC.value.style.background = "#60DDDE";
+  }
+}
+
+let isWaringA = computed(() => {
+  return params.wp.valueA >= params.wp.pointA;
+});
+let isWaringB = computed(() => {
+  return params.wp.valueB >= params.wp.pointB;
+});
+let isWaringC = computed(() => {
+  return params.wp.valueC >= params.wp.pointC;
+});
+</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: 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;
+    white-space: nowrap;
+    align-items: center;
+    margin-right: 20px;
+
+    img {
+      height: 26px;
+      width: 26px;
+    }
+
+    span {
+      //width: 101px;
+      white-space: nowrap;
+      height: 37px;
+      font-size: 28px;
+      color: #d6f1fa;
+      line-height: 37px;
+      margin: 0 20px 0 14px;
+
+    }
+  }
+
+  .container {
+    width: 500px;
+    height: 24px;
+    border-radius: 12px;
+    border: 1px solid #0f82af;
+    position: relative;
+
+    .value {
+      height: inherit;
+      width: 0px;
+      background: #60ddde;
+      border-radius: 10px;
+      transition: width 0.5s linear 0s;
+    }
+
+    .point {
+      position: absolute;
+      height: 20px;
+      background: #92D18F;
+      width: 3px;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
+      left: 1px;
+    }
+  }
+
+  .value-num {
+    height: 37px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #d6f1fa;
+    line-height: 37px;
+    margin-left: 20px;
+  }
+}
+</style>