唐润平：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>

src/components/content/badGasInfo/BadGasInfo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="bad-gas-info">
+    <div class="title">有害气体</div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+#bad-gas-info {
+  position: absolute;
+  z-index: 100;
+  width: 830px;
+  height: 621px;
+  top: 1441px;
+  right: 62px;
+  background-image: url(/images/badGasInfo/bg.png);
+  .title {
+    width: 128px;
+    height: 45px;
+    font-size: 32px;
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: 800;
+    color: #38cafb;
+    line-height: 45px;
+    margin: 22px 0px 0px 62px;
+  }
+}
+</style>

src/components/content/fanInfo/FanInfo.vue

@@ -0,0 +1,438 @@
+<template>
+  <div id="fan_info">
+    <div class="title">风机</div>
+    <div class="fans">
+      <div class="fan-item">
+        <!-- echarts -->
+        <div class="echart" ref="info1"></div>
+        <!-- 风机名 -->
+        <div class="fan-name">一号风机</div>
+        <!-- 功能 -->
+        <div class="option-nav">
+          <div class="state">
+            <div :class="{ stopColor: !isStart }">
+              <span> <img :src="stateIcon1" alt="" />状态：</span
+              ><span>{{ state }}</span>
+            </div>
+            <div class="switch">
+              <div
+                id="auto"
+                :class="{ active: isStart }"
+                @click="isStart = true"
+              >
+                启动
+              </div>
+              <div
+                id="stop"
+                :class="{ active: !isStart }"
+                @click="isStart = false"
+              >
+                停止
+              </div>
+            </div>
+          </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>
+            </div>
+            <div class="edit-power">
+              <span style="color: white">当前功率</span>
+              <span class="units"
+                ><input
+                  type="number"
+                  min="0"
+                  v-model="fan01_option.series[0].data[0].value"
+                  :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">
+            <div :class="{ stopColor: !isStart2 }">
+              <span><img :src="stateIcon2" alt="" />状态：{{ state2 }}</span
+              ><span></span>
+            </div>
+            <div class="switch">
+              <div
+                id="auto"
+                :class="{ active: isStart2 }"
+                @click="isStart2 = true"
+              >
+                启动
+              </div>
+              <div
+                id="stop"
+                :class="{ active: !isStart2 }"
+                @click="isStart2 = 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="fan02_option.series[0].data[0].value"
+                  :disabled="isSAuto2 === 'true'"
+              /></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, reactive, onMounted, computed, watch } from "vue";
+
+onMounted(handleOnMounted);
+
+// 一号风机echarts实例
+const info1 = ref(null);
+let Echarts_info1 = null;
+// 二号风机实例
+const info2 = ref(null);
+let Echarts_info2 = null;
+const option = {
+  series: [
+    {
+      type: "gauge",
+      progress: {
+        show: true,
+        width: 15,
+        lineStyle: {
+          color: "yellow",
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          width: 5,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          width: 1,
+          color: "#099",
+        },
+      },
+      axisLabel: {
+        show: false,
+        distance: 25,
+        color: "#999",
+        fontSize: 20,
+      },
+      pointer: {
+        show: false,
+      },
+      anchor: {
+        show: false,
+        showAbove: true,
+        size: 0,
+        itemStyle: {
+          borderWidth: 10,
+        },
+      },
+      title: {
+        show: true,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 40,
+        offsetCenter: [0, "0%"],
+        formatter: "{value}Hz",
+        color: "white",
+      },
+      data: [
+        {
+          value: 10,
+        },
+      ],
+    },
+  ],
+};
+const option2 = {
+  series: [
+    {
+      type: "gauge",
+      progress: {
+        show: true,
+        width: 15,
+        lineStyle: {
+          color: "yellow",
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          width: 5,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          width: 1,
+          color: "#099",
+        },
+      },
+      axisLabel: {
+        show: false,
+        distance: 25,
+        color: "#999",
+        fontSize: 20,
+      },
+      pointer: {
+        show: false,
+      },
+      anchor: {
+        show: false,
+        showAbove: true,
+        size: 0,
+        itemStyle: {
+          borderWidth: 10,
+        },
+      },
+      title: {
+        show: true,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 40,
+        offsetCenter: [0, "0%"],
+        formatter: "{value}Hz",
+        color: "white",
+      },
+      data: [
+        {
+          value: 10,
+        },
+      ],
+    },
+  ],
+};
+
+const fan01_option = reactive(option, { deep: true });
+const fan02_option = reactive(option2, { deep: true });
+function handleOnMounted() {
+  Echarts_info1 = echarts.init(info1.value);
+  Echarts_info1.setOption(fan01_option);
+  //  挂载二号风机实例
+  Echarts_info2 = echarts.init(info2.value);
+  Echarts_info2.setOption(fan02_option);
+}
+
+watch(fan01_option, () => {
+  Echarts_info1.setOption(fan01_option);
+});
+watch(fan02_option, () => {
+  Echarts_info2.setOption(fan02_option);
+});
+
+// 一号风机启动停止按钮
+const isStart = ref(true);
+let state = computed(() => {
+  return isStart.value ? "启动" : "停止";
+});
+const stateIcon1 = computed(() =>
+  isStart.value
+    ? "/images/fanInfo/blue-state-icon.png"
+    : "/images/fanInfo/red-state-icon.png"
+);
+const isStart2 = ref(true);
+let state2 = computed(() => {
+  return isStart2.value ? "启动" : "停止";
+});
+const stateIcon2 = computed(() =>
+  isStart2.value
+    ? "/images/fanInfo/blue-state-icon.png"
+    : "/images/fanInfo/red-state-icon.png"
+);
+let is = ref("isInput");
+// 功率是否自动
+let isSAuto1 = ref("false");
+let isSAuto2 = ref("false");
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-radio__input {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #38cafb;
+  border-radius: 50%;
+  text-align: center;
+}
+::v-deep .el-radio__label {
+  font-size: 28px;
+  font-family: MicrosoftYaHei;
+  color: #38cafb;
+  line-height: 37px;
+}
+#fan_info {
+  height: 521px;
+  width: 830px;
+  position: absolute;
+  z-index: 100;
+  top: 184px;
+  left: 68px;
+  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;
+  .title {
+    width: 40%;
+    text-align: left;
+    font-size: 20px;
+    padding: 0px 0px 0px 62px;
+    font-size: 32px;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    color: #38cafb;
+    line-height: 42px;
+  }
+  .fans {
+    height: calc(100% - 30px);
+    .fan-item {
+      height: 50%;
+      display: flex;
+      font-size: 14px;
+      .echart {
+        height: 100%;
+        width: 30%;
+        margin: 0px 0px 0px 10px;
+      }
+      .fan-name {
+        width: 39px;
+        height: 140px;
+        font-size: 26px;
+        font-family: MicrosoftYaHei;
+        color: #38cafb;
+        line-height: 35px;
+        text-align: center;
+        margin-right: 42px;
+        transform: translateY(33%);
+      }
+      .option-nav {
+        display: flex;
+        width: 70%;
+        .state {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          font-size: 26px;
+          font-family: MicrosoftYaHei;
+          color: #38cafb;
+          line-height: 35px;
+          gap: 33px;
+          img {
+            margin-right: 4px;
+            transform: translateY(15%);
+          }
+          .switch {
+            display: flex;
+            width: 160px;
+            height: 40px;
+            border-radius: 22px;
+            border: 2px solid #0f82af;
+            overflow: hidden;
+            font-family: MicrosoftYaHei, MicrosoftYaHei;
+            font-weight: bold;
+            color: #127399;
+            line-height: 35px;
+            & > div {
+              flex: 1;
+              text-align: center;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .power {
+          flex: 1.3;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 0px 20px;
+          font-size: 28px;
+          font-family: MicrosoftYaHei;
+          color: #38cafb;
+          line-height: 37px;
+          gap: 33px;
+          .edit-power {
+            margin-top: 10px;
+
+            input {
+              width: 130px;
+              height: 44px;
+              border: 2px solid #0f82af;
+              background: transparent;
+              margin-left: 14px;
+
+              font-size: 28px;
+              font-family: MicrosoftYaHei, MicrosoftYaHei;
+              font-weight: bold;
+              color: #38cafb;
+              line-height: 37px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.units {
+  position: relative;
+}
+.units::after {
+  content: "Hz";
+
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 28px;
+  font-family: MicrosoftYaHei;
+  color: #38cafb;
+  line-height: 37px;
+}
+.active {
+  color: white;
+  background: #0f7da9;
+}
+.stopColor {
+  color: red;
+}
+</style>

src/components/content/transducerList/TransducerList.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="transducer-list">
+    <transducer-item v-for="(item, key) in 6" :isFirst="key === 0" />
+  </div>
+</template>
+
+<script setup>
+import TransducerItem from "./childComps/TransducerItem.vue";
+</script>
+
+<style lang="scss" scoped>
+#transducer-list {
+  color: rgb(226, 26, 26);
+  position: absolute;
+  top: 744px;
+  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;
+}
+</style>

src/components/content/transducerList/childComps/TransducerItem.vue

@@ -0,0 +1,110 @@
+<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>

src/components/content/usedEle/UsedEle.vue

@@ -0,0 +1,134 @@
+<template>
+  <div id="used-ele">
+    <div class="title">用电量</div>
+    <div class="content">
+      <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>
+          </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>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  oneTransducer: Object,
+  twoTransducer: Object,
+});
+</script>
+
+<style lang="scss" scoped>
+#used-ele {
+  width: 830px;
+  height: 351px;
+  color: aliceblue;
+  position: absolute;
+  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;
+  .title {
+    width: 96px;
+    height: 42px;
+    font-size: 32px;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    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;
+        font-size: 30px;
+        font-family: MicrosoftYaHei, MicrosoftYaHei;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 40px;
+        margin: 24px 0px 28px 0px;
+      }
+      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;
+          img {
+            width: 29px;
+            width: 33px;
+            margin-right: 14px;
+          }
+        }
+        & > :nth-child(2) {
+          color: #4bcb6b;
+        }
+        & > :nth-child(3) {
+          color: #4bcbbc;
+        }
+      }
+    }
+    & > :nth-child(2) {
+      transform: translateX(25px);
+    }
+  }
+}
+</style>

src/components/content/windPressure/WindPressureList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="wind-pressure">
+    <div class="name">风压</div>
+    <div class="list">
+      <wind-pressure-item v-for="item in wpList" :wp="item" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import WindPressureItem from "./childComps/WindPressureItem.vue";
+const wpList = [
+  {
+    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, //阈值
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+#wind-pressure {
+  width: 830px;
+  height: 779px;
+  position: absolute;
+  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;
+  .name {
+    width: 64px;
+    height: 42px;
+    font-size: 32px;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    color: #38cafb;
+    line-height: 42px;
+    margin-left: 62px;
+  }
+}
+</style>

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -0,0 +1,121 @@
+<template>
+  <div id="wind-pressure-item">
+    <div class="label">
+      <img src="../../../../assets/images/windPressure/icon.png" alt="" /><span
+        >{{ params.wp.windPId }}号风压</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 }">
+      {{ params.wp.value }}Pa
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, watch, defineProps, computed } from "vue";
+const params = defineProps({
+  wp: Object,
+});
+// 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 = "#F53839";
+  } else {
+    value.value.style.background = "#60DDDE";
+  }
+}
+let isWaring = computed(() => {
+  return params.wp.value >= params.wp.point;
+});
+</script>
+
+<style lang="scss" scoped>
+#wind-pressure-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 20px 0px 14px 33px;
+  .label {
+    display: flex;
+    align-items: center;
+
+    img {
+      height: 26px;
+      width: 26px;
+    }
+    span {
+      width: 101px;
+      height: 37px;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #d6f1fa;
+      line-height: 37px;
+      margin: 0px 20px 0px 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: inherit;
+      width: 10px;
+      background: #60ddde;
+      top: 0px;
+      left: 1px;
+    }
+  }
+  .value-num {
+    height: 37px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #d6f1fa;
+    line-height: 37px;
+    margin-left: 20px;
+  }
+  .warning {
+    color: #f53839;
+    font-size: 28px;
+    font-weight: bold;
+    font-family: MicrosoftYaHei;
+  }
+}
+</style>

src/views/tunnel/index.vue

@@ -1,13 +1,24 @@
 <template>
   <div>
-    <tunnel-scene id="tunnel-box"/>
+    <tunnel-scene id="tunnel-box" />
+    <fan-info />
+    <transducer-list />
+    <used-ele />
+    <wind-pressure-list />
+    <air-info />
+    <bad-gas-info />
   </div>
 </template>
 
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
+// 两边echarts展示
+import FanInfo from "../../components/content/fanInfo/FanInfo.vue";
+import TransducerList from "../../components/content/transducerList/TransducerList.vue";
+import UsedEle from "../../components/content/usedEle/UsedEle.vue";
+import WindPressureList from "../../components/content/windPressure/WindPressureList.vue";
+import AirInfo from "../../components/content/airInfo/AirInfo.vue";
+import BadGasInfo from "../../components/content/badGasInfo/BadGasInfo.vue";
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-
-</style>