baoman / Ezquiz_Platform

  <template>
    <div>
      <back-box>
        <template slot="title">
          <span>异常设备信息</span>
        </template>
      </back-box>
      <div class="page-content">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="sn"
            label="设备编码"
            align="center"
            width="160"
          ></el-table-column>

          <el-table-column prop="deviceType" label="设备类型" align="center">
            <template slot-scope="scoped">
              {{
                scoped.row.deviceType == 1
                  ? "基站"
                  : scoped.row.deviceType == 2
                  ? "键盘"
                  : "PC"
              }}
            </template>
          </el-table-column>

          <el-table-column label="异常类型" align="center">
            <template slot-scope="scoped">
              {{
                scoped.row.status == 0
                  ? "正常"
                  : scoped.row.status == 1
                  ? "低电量异常"
                  : scoped.row.status == 2
                  ? "配对码异常"
                  : "关联班级异常"
              }}
            </template></el-table-column
          >
          <template v-if="type == 1">
            <el-table-column
              prop="pairingCode"
              label="配对码"
              align="center"
            ></el-table-column>
            <el-table-column label="关联班级" align="center">
              <template slot-scope="scoped">
                <p v-for="(item, index) in scoped.row.classList" :key="index">
                  {{ item.className }}
                </p>
              </template>
            </el-table-column>
          </template>

          <el-table-column

            prop="modifiedTime"

            label="最早发现时间"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column

            v-if="type == 2"

            prop="answerTimes"
            label="答题次数"

            align="center"
          ></el-table-column>
          <el-table-column

            prop="abnormalRemark"

            label="状态"
            align="center"
          ></el-table-column>

          <el-table-column prop="abnormalSource" label="信息来源" align="center">
            <template slot-scope="scoped">
              {{
                scoped.row.abnormalSource == 0
                  ? "无"
                  : scoped.row.abnormalSource == 1
                  ? "云平台"
                  : scoped.row.abnormalSource == 2
                  ? "授课端"
                  : scoped.row.abnormalSource == 3
                  ? "出厂工具"
                  : "发卡工具"
              }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100"

            ><template slot-scope="scoped">

              <el-link

                :disabled="!!scoped.row.abnormalRemark"

                @click="openDia(scoped.row)"
                >处理</el-link
              ></template

            ></el-table-column
          >
        </el-table>
        <div class="pagination-box">
          <el-pagination
            small=""
            layout="total,prev, pager, next"
            :hide-on-single-page="true"
            :total="total"
            @current-change="changePage"
            :current-page="page"
            :page-size="size"
          >
          </el-pagination>
        </div>
      </div>

      <el-dialog :append-to-body="true"

        :close-on-click-modal="false"
        title="备注"
        :visible.sync="diaNotes"
        width="400"
      >

        <el-form ref="formClass" label-width="100px">
          <el-form-item label="处理备注：" prop="studentName">
            <el-col :span="12">
              <el-input
                type="textarea"
                :rows="3"
                maxlength="200"
                v-model="ntoes"
              />
            </el-col>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="_SaveNotes" type="primary">确 定</el-button>
          <el-button @click="diaNotes = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {

        role: "",
        loading: false,
        diaNotes: false,
        ntoes: "",
        deviceId: "",
        type: 1,

        tableData: [],
        total: 0,
        page: 1,
        size: 20,
      };
    },
    created() {

      this.type = this.$route.query.type;
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
      this._QueryData();

    },
    methods: {
      changePage(page) {
        this.page = page;
        this._QueryData();
      },

      openDia(obj) {
        this.diaNotes = true;
        this.deviceId = obj.id;
        this.ntoes = "";
      },
      async _SaveNotes() {
        if (!this.ntoes.trim()) {
          this.$message.warning("请填写备注内容！");
          return;
        }
        const { status, info } = await this.$request.abnormalRemark({
          deviceId: this.deviceId,
          abnormalRemark: this.ntoes,
        });
        if (status === 0) {
          this.ntoes = "";
          this.diaNotes = false;
          this._QueryData();
        } else {
          this.$message.error(info);
        }
      },

      async _QueryData() {
        this.loading = true;

        const deviceList =
          this.role != "ROLE_JITUAN"
            ? this.$request.deviceList
            : this.$request.tenantDeviceList;
        this.tableData = [];
        const { data, status, info } = await deviceList({
          status: 1,
          deviceType: this.type,

          page: this.page,
          size: this.size,
        });
        this.loading = false;
        if (status === 0) {
          this.tableData = (data?.list && [...data?.list]) || [];
          this.total = data.count;
        } else {
          this.$message.error(info);
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .page-content {
    padding: 20px;
  }
  </style>