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

<template>
  <view class="content">
    <view class="" v-for="(obj, index) in tabList" :key="index">
      <view class="title">
        <text>设备ID:</text>
        <text :style="obj.status == 1 ? 'color: #00ff08;' : 'color: #ff0000;'">
          {{ 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.abbreviation }}
            </text>
          </view>
          <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">
            <text>连接类型:</text>
            <text :class="obj.status == 1 ? 'showFalw' : 'showTres'">
              {{ obj.connectionType }}
            </text>
          </view>
          <view class="content_boby_view">
            <text>生产线:</text>
            <text :class="obj.status == 1 ? 'showFalw' : 'showTres'">
              {{ obj.productionLine }}
            </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" style="justify-content: end">
          <view class="content_boby_view">
            <view class="content_boby_button">
              <u-button
                style="margin: 0 2vw; width: 63px"
                v-show="isCodeReadDevice(obj.deviceName)"
                @click="readingFrame(obj)"
                size="mini"
                type="warning">
                读码
              </u-button>
              <u-button
                style="width: 113px"
                @click="logReter(obj.deviceId)"
                size="mini"
                type="error">
                查看设备日志
              </u-button>
            </view>
          </view>
        </view>
        <view class="hr"></view>
      </view>
    </view>
    <u-modal v-model="show" :content="content"></u-modal>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      show: true,
      content: "东临碣石，以观沧海",
      obj: {},

      statusType: [
        {
          name: "开始",
          id: 1,
        },
        {
          name: "完成",
          id: 2,
        },
        {
          name: "开始取货",
          id: 3,
        },
        {
          name: "取货完成",
          id: 4,
        },
        {
          name: "开始卸货",
          id: 5,
        },
        {
          name: "卸货完成",
          id: 6,
        },
        {
          name: "取消",
          id: 7,
        },
        {
          name: "异常",
          id: 8,
        },
        {
          name: "待下发",
          id: 9,
        },
        {
          name: "已下发",
          id: 10,
        },
        {
          name: "取消并归于起点",
          id: 11,
        },
        {
          name: "取消并归于终点",
          id: 12,
        },
        {
          name: "生成",
          id: 13,
        },
        {
          name: "卸货待确认",
          id: 14,
        },
      ],
      page: 1,
      tabList: [],
      host: "",
    };
  },
  onLoad(option) {
    let _this = this;
    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,
      });
    },
    isCodeReadDevice(name) {
      let pattern = /^CodeReader/;
      return pattern.test(name);
    },
    readingFrame(data) {
      let that = this;
      uni.showModal({
        title: "读码",
        content: "你确定要读码这个数据吗？",
        confirmColor: "red",
        success: function (res) {
          if (res.confirm) {
            uni.getStorage({
              key: "GetPhone_Token",
              success: function (res) {
                uni.request({
                  url: `http://${that.host}` + "/device/triggerCodeRead",
                  header: {
                    Authorization: res.data,
                  },
                  data: data,
                  method: "POST",
                  success(respenon) {
                    console.log("chaoShiPanDuan", respenon);
                    if (respenon.data.code == 200) {
                      uni.showToast({
                        title: respenon.data.msg,
                        icon: "none",
                      });
                    } else if (respenon.data.code == 401) {
                      uni.reLaunch({
                        url: "/pages/index/login",
                      });
                    } else {
                      uni.showToast({
                        title: respenon.data.msg,
                        icon: "none",
                      });
                    }
                  },
                });
              },
            });
          } else if (res.cancel) {
            console.log("用户点击了取消按钮");
          }
        },
      });
    },
    getData(type) {
      let that = this;
      let data = {
        pageNum: this.page,
        pageSize: 10,
      };

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/device/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.data;
                }
              } else if (respenon.data.code == 401) {
                uni.reLaunch({
                  url: "/pages/index/login",
                });
              } 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;
  }
  .content_boby {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .showFalw {
      color: #00ff08;
    }
    .showTres {
      color: red;
    }
    .content_boby_button {
      display: flex;
    }
  }
  .hr {
    width: 100%;
    height: 1px;
    background: #cfcfcf;
  }
}
</style>