油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/IndexView.vue

@@ -12,6 +12,9 @@
  },
  data() {
    return {
      button:{
        setButton:false
      },
      totalData: [],
      // 保存设置
      save: false,
@@ -70,17 +73,9 @@
        checkedShops: []
      }

      // chartInstance: []
      // // 内部设备
      // devices: []
    };
  },
  watch: {
    // 'outside.checkedShops'(){
    //   this.saveOutsideData()
    //     console.log('111');
    // }
  },

  methods: {
    //获取所有店铺名字
    getDeviceInfo() {
@@ -245,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();
     
          });
      }

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

      // 合并
@@ -273,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 = [];
@@ -290,6 +281,8 @@
      }
      // 根据所选的店铺请求数据
      this.request();
      this.button.setButton = false
      // 定时更新
      setInterval(() => {
        this.request();
      }, this.timeInterval);
@@ -428,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>
@@ -453,6 +441,13 @@
    </el-switch>
  </div>

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



  <div>
    <el-row :gutter="20">
      <el-col
@@ -461,30 +456,40 @@
        :key="device.mvStatCode"
      >
        <!-- 内部设备 -->
        <el-card v-if="index < inner.inFumeValue.length" height="1900px">
        <el-card v-if="index < inner.inFumeValue.length"  class="card-font-color" height="1900px">
          <template #header>
            <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>
          <!-- <hr class="divider-margin" /> -->
          <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>
        <el-card v-else class="card-font-color">
          <template #header>
            <div class="card-header">
            <div class="card-header out-device">
              {{ device.diName }}
            </div>
          </template>
@@ -501,11 +506,11 @@
          </span>
         </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"
@@ -598,6 +603,11 @@
  color: #999999;
}

.card-font-color {
  color: #000000;
}





@@ -641,10 +651,7 @@
  width: calc(100% / 6);
  // margin-left: 70px;
}
// .input-search {
//   display: flex;
//   justify-content: left;
// }

.save-switch {
  margin-top: 20px;
  margin-left: 20px;
@@ -667,4 +674,7 @@
  height: 1px;
  background-color: rgb(221, 217, 217);
}
.out-device {
  margin-top:34px;
}
</style>