油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/views/IndexView.vue

@@ -97,7 +97,6 @@
          this.outside.allDataLoaded = true;
        }
      });

      //从内部接口获取实时数据的所有店铺名称
      axiosInstanceInstance
        .get('https://fyami.com.cn/device/min/value/real_time', {
@@ -464,12 +463,17 @@
        <!-- 内部设备 -->
        <el-card v-if="index < inner.inFumeValue.length" height="1900px">
          <template #header>
            <div class="card-header">{{ device.siteName }}</div>
            <div class="card-header">{{ device.siteName }} 
              <img src="@/assets/inner_device.jpg" class="icon-inner"/>
            </div>
           
          </template>
          <div class="report-time-text">数据发布时间：{{ device.time }}</div>
          <DashBoard :data="device.value"></DashBoard>
          <div>设备编号：{{ device.mnCode }}</div>
          <hr class="divider-margin" />
          <div>数据发布时间：{{ device.time }}</div>
          <!-- <hr class="divider-margin" /> -->
          <div class="horizontal-line"></div>
          
          <div class="status" :class="{ exceed: device.value > 1 }">
            {{ device.value >= 1 ? '超标' : '' }}
          </div>
@@ -482,27 +486,27 @@
          <template #header>
            <div class="card-header">
              {{ device.diName }}
              <el-tooltip
                class="box-item"
                effect="dark"
                content="其他设备"
                placement="top-start"
              >
                <i-ep-Shop></i-ep-Shop>
              </el-tooltip>
              <span> </span>
            </div>
          </template>
          <div  class="report-time-text">数据发布时间：{{ device.mvDataTime }}</div>
          <DashBoard :data="device.mvFumeConcentration2"></DashBoard>
          <div>设备编号：{{ device.mvStatCode }}</div>
          <hr class="divider-margin" />
          <divr class="data">风机电流(A)：{{ device.mvFanElectricity }} </divr>
          <hr class="divider-margin" />
          <div class="data">

          <div class="imag-container">
            <img src="@/assets/wind.jpg" class="image"/>
          <span class="chart-below-text"> 风机电流(A)：{{ device.mvFanElectricity }} </span>
         
          <span class="chart-below-text2">
            <img src="@/assets/purifier.jpg" class="image"/>
            净化器电流(A)：{{ device.mvPurifierElectricity }}
          </span>
          </div>
          <hr class="divider-margin" />
          <div>数据发布时间：{{ device.mvDataTime }}</div>
         <div class="horizontal-line"></div>
          <!-- <hr class="divider-margin" /> -->

          <div>设备编号：{{ device.mvStatCode }}</div>
          <div class="horizontal-line"></div>
          <!-- <hr class="divider-margin" /> -->
          <div>设备供应商：{{ device.diSupplier }}</div>
          <div
            class="status"
            :class="{ exceed: device.mvFumeConcentration2 >= 1 }"
@@ -534,13 +538,15 @@
}
.el-card {
  margin-bottom: 10px;
  border-radius: 9px;
  border-radius: 15px;
  margin-left: 5px;
}
.card-header {
  // display: flex;
  // align-items: center;
  // position: center;
  text-align: center;
  position: relative;
}
.card-header-item {
  display: flex;
@@ -567,7 +573,19 @@
  margin-bottom: 20px;
  border: #1de01d;
}

.chart-below-text2{
  float: right;
}
.image {
  height: 18px;
}
.icon-inner {
  position: relative;
  top: -20px;
  right: -115px;
  width: 50px;
  height: 50px;
}
.dashboard-title {
  font-size: 20px;
  text-align: center;
@@ -575,11 +593,20 @@
  background-color: #f5f7fa;
}

.report-time-text {
  font-size: 12px;
  color: #999999;
}




/* 超标 文字效果*/
.status {
  font-size: 18px;
  color: #ff4d4f;
  font-weight: bold;
  margin-top: 5px;
}

.exceed {
@@ -606,7 +633,8 @@
}
// 分割线上下距离
.divider-margin {
  margin-top: 3px;
  margin: 10px 0px;
  border: 1px solid gray;
}

.el-input {
@@ -625,4 +653,18 @@
  padding: 0px;
  margin: 0px;
}
.horizontal-line {
  position: relative;
  height: 1px;
  margin: 10px 0px;
}
.horizontal-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgb(221, 217, 217);
}
</style>