唐润平：UI显示面板开发起步版

src/components/content/airInfo/AirInfo.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="air-info">
+    <div class="fan-speed">
+      <img src="../../../../public/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>
+    </div>
+    unit="%"
+    <item-info
+      :wp="info"
+      icon="/images/airInfo/o2-icon.png"
+      name="氧气"
+      unit="%"
+    />
+    <item-info
+      :wp="info1"
+      icon="/images/airInfo/tempture-icon.png"
+      name="温度"
+      unit=".c"
+    />
+    <item-info
+      :wp="info2"
+      icon="/images/airInfo/water-icon.png"
+      name="湿度"
+      unit="%"
+    />
+    <item-info
+      :wp="info3"
+      icon="/images/airInfo/dust-icon.png"
+      name="粉尘"
+      unit="mg/m3"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import ItemInfo from "./childComps/ItemInfo.vue";
+const info = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 70, //测量值
+  point: 60, //阈值
+});
+const info1 = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 60, //测量值
+  point: 70, //阈值
+});
+const info2 = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 90, //测量值
+  point: 100, //阈值
+});
+const info3 = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 80, //测量值
+  point: 88, //阈值
+});
+</script>
+
+<style lang="scss" scoped>
+#air-info {
+  position: absolute;
+  z-index: 100;
+  width: 824px;
+  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;
+  .fan-speed {
+    display: flex;
+    height: 40px;
+    font-size: 30px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 40px;
+    align-items: center;
+    img {
+      width: 29px;
+      height: 34px;
+    }
+    .fan-info {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      .input-fan {
+        margin: 0px 13px;
+      }
+    }
+  }
+}
+</style>

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -0,0 +1,129 @@
+<template>
+  <div id="item-info">
+    <div class="label">
+      <img :src="icon" alt="" />
+      <span>{{ params.name }}</span>
+    </div>
+    <div class="container" ref="length">
+      <div class="value" ref="value"></div>
+      <div id="point" ref="point"></div>
+    </div>
+    <div class="value-num" :class="{ warning: isWaring }">
+      {{ valueAndUnit }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, watch, defineProps, computed } from "vue";
+const params = defineProps({
+  wp: Object,
+  icon: String,
+  name: String,
+  unit: String,
+});
+// const info = {
+//   windPId: 0, //编号
+//   max: 120, //最大值
+//   value: 40, //测量值
+//   point: 60, //阈值
+// };
+// const wp = reactive(info);
+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();
+  }
+);
+function 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%)";
+  } else {
+    value.value.style.background =
+      "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
+  }
+}
+let isWaring = computed(() => {
+  return params.wp.value >= params.wp.point;
+});
+
+const valueAndUnit = computed(() => params.wp.value + params.unit + "");
+</script>
+
+<style lang="scss" scoped>
+#item-info {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 20px 0px 14px 0px;
+  .label {
+    display: flex;
+    align-items: center;
+
+    img {
+      height: 34px;
+      width: 34px;
+    }
+    span {
+      width: 101px;
+      height: 37px;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #d6f1fa;
+      line-height: 37px;
+      margin: 0px 20px 0px 14px;
+    }
+  }
+  .container {
+    width: 422px;
+    height: 24px;
+    border-radius: 12px;
+    border: 1px solid #0f82af;
+    position: relative;
+    .value {
+      height: inherit;
+      width: 0px;
+      background: linear-gradient(270deg, #38cafb 0%, #e9d726 100%);
+      border-radius: 10px;
+      transition: width 0.5s linear 0s;
+    }
+    #point {
+      position: absolute;
+      height: inherit;
+      width: 10px;
+      background: #60ddde;
+      top: 0px;
+      left: 1px;
+    }
+  }
+  .value-num {
+    height: 37px;
+    width: 160px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #d6f1fa;
+    line-height: 37px;
+    margin-left: 20px;
+    text-align: right;
+  }
+  .warning {
+    color: #f75f34;
+    font-size: 28px;
+    font-weight: bold;
+    font-family: MicrosoftYaHei;
+  }
+}
+</style>