设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 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() {
@@ -281,6 +276,8 @@

    // 点击按钮触发
    show() {
      // 
      this.button.setButton = true
      // 当取消选择时，防止图形还保留在页面。
      if (this.outside.checkedShops.length == 0) {
        this.outside.realTimeData = [];
@@ -290,6 +287,8 @@
      }
      // 根据所选的店铺请求数据
      this.request();
      this.button.setButton = false
      // 定时更新
      setInterval(() => {
        this.request();
      }, this.timeInterval);
@@ -440,7 +439,7 @@
      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>
@@ -461,7 +460,7 @@
        :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"/>
@@ -470,8 +469,9 @@
          </template>
          <div class="report-time-text">数据发布时间：{{ device.time }}</div>
          <DashBoard :data="device.value"></DashBoard>

          <div >设备编号：{{ device.mnCode }}</div>
          <!-- <hr class="divider-margin" /> -->

          <div class="horizontal-line"></div>
          
          <div class="status" :class="{ exceed: device.value > 1 }">
@@ -482,7 +482,7 @@
          <br />
        </el-card>
        <!-- 外部设备 -->
        <el-card v-else>
        <el-card v-else class="card-font-color">
          <template #header>
            <div class="card-header">
              {{ device.diName }}
@@ -501,11 +501,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 +598,11 @@
  color: #999999;
}

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





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

.save-switch {
  margin-top: 20px;
  margin-left: 20px;