warewms-PDA/pages/index/me/log/log.vue

<template>
  <view class="content">
    <view class="" v-if="show == true">
      <view class="" v-for="(obj, index) in tabList" :key="index">
        <view class="title">
          <text>设备ID:</text>
          <!-- :style="obj.status == 1 ? 'color: #00ff08;' : 'color: #ff0000;'" -->
          <text>
            {{ obj.deviceId }}
          </text>
        </view>
        <view class="">
          <view class="content_boby">
            <view class="content_boby_view">
              <text>设备名称:</text>
              <text :class="obj.status == 1 ? 'showFalw' : 'showTres'">
                {{ obj.deviceName }}
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view" style="width: 100%">
              <text>日志内容:</text>
              <text :class="obj.status == 1 ? 'showFalw' : 'showTres'">
                {{ obj.content }}
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view">
              <text>状态:</text>
              <text
                :class="obj.status == 1 ? 'showFalw' : 'showTres'"
                v-if="obj.status == 1">
                连接正常
              </text>
              <text :class="obj.status == 1 ? 'showFalw' : 'showTres'" v-else>
                连接中断
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view">
              <text>时间:</text>
              <text :class="obj.status == 1 ? 'showFalw' : 'showTres'">
                {{ obj.createTime }}
              </text>
            </view>
          </view>

          <!--  <view class="content_boby">
            <view class="content_boby_view">
              <text>备注:</text>
              <text>{{ obj.remark }}</text>
            </view>
          </view> -->

          <view class="hr"></view>
        </view>
      </view>
    </view>

    <view class="text" style="text-align: center; margin: 10vw 0" v-else>
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      obj: {},
      show: true,
      page: 1,
      tabList: [],
      host: "",
      deviceId: "",
    };
  },
  onLoad(option) {
    let _this = this;
    this.deviceId = option.id;
    uni.getStorage({
      key: "hostappst",
      success(res) {
        console.log("获取成功", res.data);
        _this.host = res.data;
      },
    });
    this.getData();
  },
  onShow() {},
  created() {},
  mounted() {},
  onReachBottom() {
    this.page++;
    this.getData("addList");
  },
  methods: {
    logReter(id) {
      uni.navigateTo({
        url: "/pages/index/me/log/log?id=" + id,
      });
    },
    getData(type) {
      let that = this;
      let data = {
        deviceId: this.deviceId,
        pageNum: this.page,
        pageSize: 10,
      };

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/device/log/list",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },
            data: data,
            method: "GET",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                if (type == "addList") {
                  that.tabList = [...that.tabList, ...respenon.data.rows];
                } else {
                  that.tabList = respenon.data.rows;
                  if (that.tabList.length > 0) {
                    that.show = true;
                  } else {
                    that.show = false;
                  }
                }
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  color: #787878;

  font-size: 14px;
  font-weight: 400;
  .title {
    height: 44px;
    padding: 12px 15px;
    font-size: 17px;
    font-weight: 600;
    color: #000;
  }
  .content_boby {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .showFalw {
      color: #0bbc11;
    }
    .showTres {
      color: red;
      // display: -webkit-box;
      // overflow-wrap: anywhere;
      word-wrap: break-word;
    }
  }
  .hr {
    width: 100%;
    height: 1px;
    background: #cfcfcf;
  }
}
</style>