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

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/53

.drone.yml

@@ -16,7 +16,7 @@ steps:
       - export NODE_MODULES_PATH=`pwd`/node_modules
       - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+#      - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

src/assets/styles/index.scss

@@ -3,6 +3,9 @@
   padding: 0;
   list-style: none;
   box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
 }
 
 a {
@@ -13,3 +16,192 @@ a {
 html, body, #app, .el-container, .el-aside, .el-main {
   height: 100%;
 }
+
+.box-top {
+  .manage-btn {
+    display: flex;
+    z-index: 3;
+    position: absolute;
+    top: 85px;
+    left: 30px;
+
+    .btn-box {
+      cursor: pointer;
+      margin-left: 37px;
+      display: flex;
+      align-items: center;
+
+      > * {
+        font-size: 28px;
+        color: #FFFFFF;
+        line-height: 37px;
+      }
+
+      > div:first-child {
+        margin-right: 11px;
+        width: 60px;
+        height: 60px;
+      }
+      .select-active{
+        color: #11EAF2!important;
+      }
+    }
+  }
+
+  .tunnel-title {
+    width: 2330px;
+    height: 156px;
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -1165px;
+    background-image: url('../images/topAndDown/sp_tb.png');
+  }
+
+  .top-right {
+    z-index: 2;
+    position: absolute;
+    top: 50px;
+    right: 70px;
+    font-size: 28px;
+    color: #FFFFFF;
+
+    .current-site {
+      display: flex;
+      align-items: center;
+
+      > span:first-child {
+        color: #F7B500;
+        margin-right: 20px;
+      }
+
+      .toggle {
+        cursor: pointer;
+        width: 50px;
+        height: 50px;
+        background-image: url('../images/topAndDown/sp_icon_zdqh.png');
+      }
+    }
+
+    .current-user {
+      margin-top: 26px;
+      display: flex;
+      align-items: center;
+
+      > span:first-child {
+        color: #F7B500;
+        margin-right: 20px;
+      }
+
+      .logout {
+        cursor: pointer;
+        margin-left: 27px;
+        width: 50px;
+        height: 50px;
+        background-image: url('../images/topAndDown/sp_icon_tcdl.png');
+      }
+    }
+  }
+}
+
+.modal-box {
+  z-index: -1 !important;
+  position: static !important;
+
+  .el-drawer {
+    width: 900px !important;
+    background-color: transparent;
+  }
+}
+
+.left-arrow {
+  position: absolute;
+  top: 1095px;
+  left: 900px;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_icon_zyc.png');
+}
+
+.shrink-left {
+  position: absolute;
+  top: 1095px;
+  left: 0;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_yyc.png');
+}
+
+.right-arrow {
+  position: absolute;
+  top: 1095px;
+  right: 900px;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_yyc.png');
+}
+
+.shrink-right {
+  position: absolute;
+  top: 1095px;
+  right: 0;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_icon_zyc.png');
+}
+
+.switch-btn {
+  display: flex;
+  justify-content: space-between;
+  width: 1850px;
+  height: 146px;
+  z-index: 2;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -925px;
+  background-image: url('../images/topAndDown/sp_dbbj.png');
+
+  .arrow {
+    margin: 50px 0 0 263px;
+    width: 46px;
+    height: 54px;
+    background-image: url('../images/topAndDown/sp_icon_zst.png');
+  }
+
+  .btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 14px;
+    font-size: 26px;
+    color: #9FC3CD;
+
+    > div {
+      display: flex;
+      justify-content: center;
+    }
+
+    > div:nth-child(2) {
+      color: #FFFFFF;
+      padding-top: 7px;
+      width: 201px;
+      height: 62px;
+      background-image: url('../images/topAndDown/sp_icon_sdqhd.png');
+    }
+
+    > div:first-child, > div:last-child {
+      padding-top: 5px;
+      width: 158px;
+      height: 50px;
+      background-image: url('../images/topAndDown/sp_icon_sdqhx.png');
+    }
+  }
+
+  .right {
+    margin: 50px 263px 0 0;
+    transform: rotate(180deg);
+  }
+}

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

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/components/manageBtn/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="manage-btn">
+    <div v-for="(item,index) in btnList" :key="item.name" class="btn-box" @click="select(index)">
+      <div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
+      <div :class="{'select-active':selectButton===index}">{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+})
+const emit = defineEmits(["update:modelValue", "select"]);
+const btnList = ref([
+  {
+    icon: 'sp_icon_zdgl.png',
+    name: '站点管理'
+  },
+  {
+    icon: 'sp_icon_sdgl.png',
+    name: '隧道管理'
+  },
+  {
+    icon: 'sp_icon_yhgl.png',
+    name: '用户管理'
+  },
+  {
+    icon: 'sp_icon_xtgl.png',
+    name: '系统管理'
+  },
+  {
+    icon: 'sp_icon_mngl.png',
+    name: '模拟仿真'
+  },
+])
+const selectButton = ref(props.modelValue);
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
+}
+const select = (index) => {
+  if (selectButton.value === index) return;
+  selectButton.value = index;
+  emit("update:modelValue", index);
+  emit("select", index);
+};
+</script>

src/utils/date.js

@@ -0,0 +1,24 @@
+export const dateFormat = (time = new Date().getTime()) => { //YYYY年MM月DD日 星期d
+  const _time = time.toString().length > 10 ? time : time * 1000
+  const weekList = ["一", "二", "三", "四", "五", "六", "日"];
+  const date = new Date(_time);
+  const Y = date.getFullYear();
+  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
+  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
+  const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
+  const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+  const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+  let weekDay = new Date().getDay();
+  const week= weekList[weekDay - 1]
+  // const strDate = `${Y}/${M}/${D} ${h}:${m}:${s}`
+  return `${Y}年${M}月${D}日 星期${week}`;
+}
+
+export default {
+  dateFormat
+}
+
+
+
+
+

src/views/home/index.vue

@@ -7,6 +7,7 @@
       </div>
       <el-button type="primary" @click="initWebSocket">确认连接</el-button>
       <el-button type="primary" @click="closeSocket">关闭连接</el-button>
+      <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
       <div class="socket-box">
         <div v-for="item in data" ref="child">
           <div v-if="item.type == 3">
@@ -20,7 +21,10 @@
           </div>
         </div>
       </div>
-      <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
+      <div style="display: flex">
+        <el-input v-model="number" placeholder="请输入" clearable></el-input>
+        <el-button type="primary" @click="handleSend" style="float: right">发送</el-button>
+      </div>
     </div>
     <div class="logout">
       <el-button @click="handleLogout">退出登录</el-button>
@@ -35,6 +39,7 @@ import {useAuthStore} from '@/store/userstore.js'
 const router = useRouter()
 const authStore = useAuthStore()
 const serialNumber = ref('')
+const number = ref('')
 let send = {
   type: "ping"
 }
@@ -54,8 +59,16 @@ watch(
     }
 );
 let socket = reactive('')
+const handleSend=()=>{
+  console.log('JSON.stringify(number.value))',JSON.stringify(number.value))
+  let data = {
+    type: 1,
+    cmd : number.value
+  }
+  socket.send(JSON.stringify(data))
+}
 const initWebSocket = () => {
-  // let wsUrl = `ws://192.168.31.175:8000/wstunnel/debug/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://192.168.31.175:9000/debug/${token}/${serialNumber.value}`
   let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
   console.log(wsUrl)
   socket = new WebSocket(wsUrl)

src/views/tunnel/index.vue

@@ -1,11 +1,101 @@
 <template>
   <div>
+    <div class="box-top">
+      <manage-btn v-model="selectIndex" @select="manageSelect"/>
+      <div class="tunnel-title"></div>
+      <div class="top-right">
+        <div class="current-site">
+          当前站点：<span>{{ currentSite }}</span>
+          <div class="toggle"></div>
+        </div>
+        <div class="current-user">
+          上午好：<span>{{ currentUser }}</span>
+          <span>今天是：{{ currentDate }}</span>
+          <div class="logout" @click="handleLogout"></div>
+        </div>
+      </div>
+    </div>
     <tunnel-scene id="tunnel-box"/>
+    <div class="left">
+      <el-drawer
+          v-model="drawerLeft"
+          direction="ltr"
+          modal-class="modal-box"
+          :modal="false"
+          :show-close="false"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+      >
+        <fan-info/>
+        <transducer-list/>
+        <used-ele/>
+      </el-drawer>
+      <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
+      <div v-else class="shrink-left" @click="closeLeft"></div>
+    </div>
+    <div class="right">
+      <el-drawer
+          v-model="drawerRight"
+          direction="rtl"
+          modal-class="modal-box"
+          :modal="false"
+          :show-close="false"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+      >
+        <wind-pressure-list/>
+        <air-info/>
+        <bad-gas-info/>
+      </el-drawer>
+      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
+      <div v-else class="shrink-right" @click="closeRight"></div>
+    </div>
+    <div class="switch-btn">
+      <div class="arrow"></div>
+      <div class="btn">
+        <div>一号隧道</div>
+        <div>二号隧道</div>
+        <div>三号隧道</div>
+      </div>
+      <div class="arrow right"></div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
+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";
+import ManageBtn from "@/components/manageBtn/index.vue";
+import {dateFormat} from "@/utils/date.js";
+import {useAuthStore} from '@/store/userstore.js'
+
+const authStore = useAuthStore()
+const router = useRouter()
+const selectIndex=ref(1)
+const drawerLeft = ref(true)
+const drawerRight = ref(true)
+const currentSite = ref('松江站')
+const currentUser = ref('admin')
+const currentDate = ref(dateFormat())
+
+const manageSelect = () => {
+  // getInfo();
+};
+const closeLeft = () => {
+  drawerLeft.value = !drawerLeft.value
+}
+const closeRight = () => {
+  drawerRight.value = !drawerRight.value
+}
+const handleLogout = () => {
+  authStore.userLogout()
+  router.push('/login')
+}
 </script>
 
 <style lang="scss" scoped>