油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/IndexView.vue

@@ -12,6 +12,9 @@
  },
  data() {
    return {
      button:{
        setButton:false
      },
      totalData: [],
      // 保存设置
      save: false,
@@ -237,10 +240,7 @@
          .get('/fume/lastest', { params: params })
          .then((result) => {
            this.outside.realTimeData = result.data.data;
            console.log('66', this.outside.realTimeData);
            // console.log('长度为：',this.outside.realTimeData.length);
            // 渲染折线图
            // this.updateCharts();
     
          });
      }

@@ -255,7 +255,6 @@
            this.inner.inFumeValue.push(item);
          }
        });
        console.log(this.inner.inFumeValue);
      }

      // 合并
@@ -265,14 +264,14 @@
          ...this.inner.inFumeValue,
          ...this.outside.realTimeData
        ];
        console.log('总选数据', this.totalData);
        console.log('长度为：', this.totalData.length);
   
      }, 200);
      console.log('调用了');
    },

    // 点击按钮触发
    show() {
      // 
      this.button.setButton = true
      // 当取消选择时，防止图形还保留在页面。
      if (this.outside.checkedShops.length == 0) {
        this.outside.realTimeData = [];
@@ -282,6 +281,8 @@
      }
      // 根据所选的店铺请求数据
      this.request();
      this.button.setButton = false
      // 定时更新
      setInterval(() => {
        this.request();
      }, this.timeInterval);
@@ -420,19 +421,14 @@

            <!-- </el-form-item> -->
          </el-form>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>

  <div>
          <div>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="点击展示实时数据"
      placement="top-start"
    >
      <el-button type="success" @click="show" style="margin-left: 10px">
      <el-button type="success" :loading="button.setButton" @click="show" style="margin-left: 10px">
        设置
      </el-button>
    </el-tooltip>
@@ -444,6 +440,13 @@
    >
    </el-switch>
  </div>

        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>



  <div>
    <el-row :gutter="20">
@@ -458,26 +461,35 @@
            <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 class="imag-container">
            <img src="@/assets/wind.jpg" class="image"/>
          <span class="chart-below-text"> 风机电流(A)：0 </span>
         
          <span class="chart-below-text2">
            <img src="@/assets/purifier.jpg" class="image"/>
            净化器电流(A)：0
          </span>
         </div>
         <div class="horizontal-line"></div>
          <div >设备编号：{{ device.mnCode }}</div>

          <div class="horizontal-line"></div>
          
          <div class="status" :class="{ exceed: device.value > 1 }">
            {{ device.value >= 1 ? '超标' : '' }}
          </div>
          <br />
          <br />
          <br />
 
        </el-card>


        <!-- 外部设备 -->
        <el-card v-else class="card-font-color">
          <template #header>
            <div class="card-header">
            <div class="card-header out-device">
              {{ device.diName }}
            </div>
          </template>
@@ -662,4 +674,7 @@
  height: 1px;
  background-color: rgb(221, 217, 217);
}
.out-device {
  margin-top:34px;
}
</style>