zmc
2023-12-22 c7e4dd9bd50cf6e6426598753c796ec1a27f333f
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() {
@@ -97,7 +92,6 @@
          this.outside.allDataLoaded = true;
        }
      });
      //从内部接口获取实时数据的所有店铺名称
      axiosInstanceInstance
        .get('https://fyami.com.cn/device/min/value/real_time', {
@@ -246,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();
          });
      }
@@ -264,7 +255,6 @@
            this.inner.inFumeValue.push(item);
          }
        });
        console.log(this.inner.inFumeValue);
      }
      // 合并
@@ -274,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 = [];
@@ -291,6 +281,8 @@
      }
      // 根据所选的店铺请求数据
      this.request();
      this.button.setButton = false
      // 定时更新
      setInterval(() => {
        this.request();
      }, this.timeInterval);
@@ -429,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>
@@ -454,6 +441,13 @@
    </el-switch>
  </div>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col
@@ -462,47 +456,62 @@
        :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 }}</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>
          <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>
        <el-card v-else class="card-font-color">
          <template #header>
            <div class="card-header">
            <div class="card-header out-device">
              {{ 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 }}
          </div>
          <hr class="divider-margin" />
          <div>数据发布时间:{{ device.mvDataTime }}</div>
          </span>
         </div>
         <div class="horizontal-line"></div>
          <div>设备编号:{{ device.mvStatCode }}</div>
          <div class="horizontal-line"></div>
          <div>设备供应商:{{ device.diSupplier }}</div>
          <div
            class="status"
            :class="{ exceed: device.mvFumeConcentration2 >= 1 }"
@@ -534,13 +543,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 +578,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 +598,25 @@
  background-color: #f5f7fa;
}
.report-time-text {
  font-size: 12px;
  color: #999999;
}
.card-font-color {
  color: #000000;
}
/* 超标 文字效果*/
.status {
  font-size: 18px;
  color: #ff4d4f;
  font-weight: bold;
  margin-top: 5px;
}
.exceed {
@@ -606,17 +643,15 @@
}
// 分割线上下距离
.divider-margin {
  margin-top: 3px;
  margin: 10px 0px;
  border: 1px solid gray;
}
.el-input {
  width: calc(100% / 6);
  // margin-left: 70px;
}
// .input-search {
//   display: flex;
//   justify-content: left;
// }
.save-switch {
  margin-top: 20px;
  margin-left: 20px;
@@ -625,4 +660,21 @@
  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);
}
.out-device {
  margin-top:34px;
}
</style>