Merge pull request '邓洁 : 完善首页' (#62) from dj into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/62
2023-12-09 06:22:46 +00:00
parent 07614c00af cb289963bc
commit 61f5381c93
3 changed files with 47 additions and 37 deletions
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -1,13 +1,12 @@
 <template>
  <div id="air-info">
    <div class="fan-speed">
-      <img src="../../../../public/images/airInfo/fan-v-icon.png" alt="" />
+      <img src="/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"
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -11,21 +11,21 @@
        <div class="option-nav">
          <div class="state">
            <div :class="{ stopColor: !isStart }">
-              <span> <img :src="stateIcon1" alt="" />状态：</span
+              <span> <img :src="stateIcon1" alt=""/>状态：</span
              ><span>{{ state }}</span>
            </div>
            <div class="switch">
              <div
-                id="auto"
-                :class="{ active: isStart }"
-                @click="isStart = true"
+                  id="auto"
+                  :class="{ active: isStart }"
+                  @click="isStart = true"
              >
                启动
              </div>
              <div
-                id="stop"
-                :class="{ active: !isStart }"
-                @click="isStart = false"
+                  id="stop"
+                  :class="{ active: !isStart }"
+                  @click="isStart = false"
              >
                停止
              </div>
@@ -41,7 +41,7 @@
            <div class="edit-power">
              <span style="color: white">当前功率</span>
              <span class="units"
-                ><input
+              ><input
                  type="number"
                  min="0"
                  v-model="fan01_option.series[0].data[0].value"
@@ -61,21 +61,21 @@
        <div class="option-nav">
          <div class="state">
            <div :class="{ stopColor: !isStart2 }">
-              <span><img :src="stateIcon2" alt="" />状态：{{ state2 }}</span
+              <span><img :src="stateIcon2" alt=""/>状态：{{ state2 }}</span
              ><span></span>
            </div>
            <div class="switch">
              <div
-                id="auto"
-                :class="{ active: isStart2 }"
-                @click="isStart2 = true"
+                  id="auto"
+                  :class="{ active: isStart2 }"
+                  @click="isStart2 = true"
              >
                启动
              </div>
              <div
-                id="stop"
-                :class="{ active: !isStart2 }"
-                @click="isStart2 = false"
+                  id="stop"
+                  :class="{ active: !isStart2 }"
+                  @click="isStart2 = false"
              >
                停止
              </div>
@@ -91,7 +91,7 @@
            <div class="edit-power">
              <span style="color: white">当前功率</span>
              <span class="units"
-                ><input
+              ><input
                  type="number"
                  min="0"
                  v-model="fan02_option.series[0].data[0].value"
@@ -107,7 +107,7 @@

 <script setup>
 import * as echarts from "echarts";
-import { ref, reactive, onMounted, computed, watch } from "vue";
+import {ref, reactive, onMounted, computed, watch} from "vue";

 onMounted(handleOnMounted);

@@ -184,8 +184,7 @@ const option = {
              },
            ],
            global: false, // 缺省为 false
-          },
-          borderWidth: 10,
+          }
        },
      },
      max: 1000,
@@ -295,8 +294,7 @@ const option2 = {
              },
            ],
            global: false, // 缺省为 false
-          },
-          borderWidth: 10,
+          }
        },
      },
      max: 1000,
@@ -340,8 +338,9 @@ const option2 = {
  ],
 };

-const fan01_option = reactive(option, { deep: true });
-const fan02_option = reactive(option2, { deep: true });
+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);
@@ -363,18 +362,18 @@ let state = computed(() => {
  return isStart.value ? "启动" : "停止";
 });
 const stateIcon1 = computed(() =>
-  isStart.value
-    ? "/images/fanInfo/blue-state-icon.png"
-    : "/images/fanInfo/red-state-icon.png"
+    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"
+    isStart2.value
+        ? "/images/fanInfo/blue-state-icon.png"
+        : "/images/fanInfo/red-state-icon.png"
 );
 let is = ref("isInput");
 // 功率是否自动
@@ -392,12 +391,14 @@ let isSAuto2 = ref("false");
  align-items: center;
  justify-content: center;
 }
+
 ::v-deep .el-radio__label {
  font-size: 28px;
  font-family: MicrosoftYaHei;
  color: #38cafb;
  line-height: 37px;
 }
+
 #fan_info {
  height: 521px;
  width: 830px;
@@ -413,6 +414,7 @@ let isSAuto2 = ref("false");
  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;
@@ -424,12 +426,15 @@ let isSAuto2 = ref("false");
    color: #38cafb;
    line-height: 42px;
  }
+
  .fans {
    height: calc(100% - 30px);
+
    .fan-item {
      height: 50%;
      display: flex;
      font-size: 14px;
+
      .echart {
        height: 100%;
        width: 30%;
@@ -448,6 +453,7 @@ let isSAuto2 = ref("false");
        left: 50%;
        transform: translate(-50%, 60%);
      }
+
      .fan-name {
        width: 39px;
        height: 140px;
@@ -459,9 +465,11 @@ let isSAuto2 = ref("false");
        margin-right: 42px;
        transform: translateY(33%);
      }
+
      .option-nav {
        display: flex;
        width: 70%;
+
        .state {
          flex: 1;
          display: flex;
@@ -472,10 +480,12 @@ let isSAuto2 = ref("false");
          color: #38cafb;
          line-height: 35px;
          gap: 33px;
+
          img {
            margin-right: 4px;
            transform: translateY(15%);
          }
+
          .switch {
            display: flex;
            width: 160px;
@@ -487,6 +497,7 @@ let isSAuto2 = ref("false");
            font-weight: bold;
            color: #127399;
            line-height: 35px;
+
            & > div {
              flex: 1;
              text-align: center;
@@ -506,6 +517,7 @@ let isSAuto2 = ref("false");
          color: #38cafb;
          line-height: 37px;
          gap: 33px;
+
          .edit-power {
            margin-top: 10px;

@@ -528,9 +540,11 @@ let isSAuto2 = ref("false");
    }
  }
 }
+
 .units {
  position: relative;
 }
+
 .units::after {
  content: "Hz";

@@ -543,10 +557,12 @@ let isSAuto2 = ref("false");
  color: #38cafb;
  line-height: 37px;
 }
+
 .active {
  color: white;
  background: #0f7da9;
 }
+
 .stopColor {
  color: red;
 }
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -50,7 +50,6 @@
      <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" @click="previousBtn"></div>
      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
@@ -62,8 +61,6 @@
      </el-carousel>
      <div class="arrow right" @click="nextBtn"></div>
    </div>
-
-
  </div>
 </template>

@@ -87,7 +84,7 @@ const drawerRight = ref(true)
 const currentSite = ref('松江站')
 const currentUser = ref('admin')
 const currentDate = ref(dateFormat())
-const tunnelBtn=ref()
+const tunnelBtn = ref()
 const tunnelList = ref([
  {
    value: 0,
@@ -130,8 +127,6 @@ const previousBtn = () => {
 }
 const nextBtn = () => {
  tunnelBtn.value.next();
-  // tunnelList.value.push(tunnelList.value.shift())
-  // console.log('tunnelList.value', tunnelList.value)
 }
 </script>