baoman / Ezquiz_Platform

  <template>

    <div ref="main" class="page-content">

      <back-box>
        <template slot="title">
          <span>设备管理</span>
        </template>

        <template slot="btns" v-if="role == 'ROLE_XUEXIAO' && type == 1">

          <el-tooltip effect="dark" content="设备导入" placement="bottom">

            <el-button
              type="primary"
              icon="el-icon-upload2"
              size="mini"
              plain
              circle

              @click="diaUp = true"

            ></el-button>

          </el-tooltip>

          <el-tooltip

            effect="dark"
            content="添加基站"
            placement="bottom"
          >

            <el-button
              type="primary"
              icon="el-icon-receiving"
              size="mini"
              plain
              circle

              @click="addDev"

            ></el-button>

          </el-tooltip>

        </template>
      </back-box>

      <div>

        <div class="tab-box">
          <el-radio-group v-model="type">
            <el-radio-button :label="1">基站管理</el-radio-button>
            <el-radio-button :label="2">答题器管理</el-radio-button>
            <el-radio-button :label="3">授课端管理</el-radio-button>
          </el-radio-group>
        </div>
        <div class="content">

          <div v-show="type == 1">

            <div class="chart-box" v-if="count">

              <div class="device-num">

                <p class="p1">{{ count }}</p>

                <p class="p2">基站数量</p>
              </div>
              <div class="chart">
                <pie-chart
                  id="pieChart"
                  :params="chartData"
                  @clickPieChart="clickPieChart"
                ></pie-chart>
              </div>
            </div>
            <div class="table-box">
              <div class="answer-header">
                <div class="sel-box">
                  <el-cascader

                    size="small"

                    class="sel sel2"

                    clearable
                    placeholder="选择班级"
                    v-model="query.classId"

                    :options="gradeList"

                    :props="props"

                    collapse-tags

                    :show-all-levels="false"

                  ></el-cascader>
                  <el-select
                    class="sel"

                    v-model="query.onlineStatus"

                    placeholder="选择状态"

                    @change="_QueryData(true)"

                  >
                    <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input

                    placeholder="请输入设备编码"

                    v-model="query.sn"

                    class="input-with-select"
                    @keyup.enter.native="_QueryData(true)"
                  >
                    <el-button
                      slot="append"
                      icon="el-icon-search"
                      @click="_QueryData(true)"
                    ></el-button>
                  </el-input>

                  <el-button class="serach-box" round @click="_QueryData(true)"

                    >筛选</el-button
                  >

                </div>
              </div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column

                  prop="sn"

                  label="设备编码"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="frequency"

                  label="频点"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="pairingCode"

                  label="配对码"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="roomName"

                  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>

                <el-table-column

                  prop="otaVersionName"

                  label="固件版本号"

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

                  prop="onlineTime"

                  label="最近上报"

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

                <el-table-column label="状态" align="center"
                  ><template slot-scope="scope">
                    {{

                      scope.row.onlineStatus == 1

                        ? "在线"

                        : scope.row.onlineStatus == 2
                        ? "异常"
                        : "离线"

                    }}
                  </template></el-table-column
                >
                <el-table-column label="操作" align="center"
                  ><template slot-scope="scoped">

                    <el-tooltip
                      effect="dark"
                      v-if="role != 'ROLE_JITUAN'"
                      content="修改基站"
                      placement="top"
                    >

                      <el-button
                        type="primary"
                        circle
                        size="mini"
                        icon="fa fa-edit"
                        @click="edit(scoped.row)"
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="日志" placement="top">
                      <el-button
                        type="warning"
                        circle
                        size="mini"
                        icon="fa fa-eye"
                        @click="linkTo(scoped.row, 1)"
                      ></el-button>
                    </el-tooltip> </template
                ></el-table-column>
              </el-table>
            </div>
          </div>

          <div v-show="type == 2">

            <div class="chart-box" v-if="count">

              <div class="device-num">

                <p class="p1">{{ count }}</p>

                <p class="p2">答题器数量</p>
              </div>
              <div class="chart">
                <scatter-chart
                  id="scatterChart"
                  :params="chartData2"
                  @clickScatterChart="clickScatterChart"
                ></scatter-chart>
              </div>
            </div>
            <div class="table-box">
              <div class="answer-header">
                <div class="sel-box">
                  <el-cascader

                    size="small"

                    class="sel sel2"

                    clearable
                    placeholder="选择班级"
                    v-model="query.classId"

                    :options="gradeList"

                    :props="props"

                    collapse-tags

                    :show-all-levels="false"

                  ></el-cascader>
                  <el-select
                    class="sel"

                    v-model="query.type"

                    placeholder="选择状态"

                    @change="_QueryData(true)"

                  >
                    <el-option

                      v-for="item in typeList"

                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input

                    placeholder="请输入设备编码"

                    v-model="query.sn"

                    class="input-with-select"
                    @keyup.enter.native="_QueryData(true)"
                  >
                    <el-button
                      slot="append"
                      icon="el-icon-search"
                      @click="_QueryData(true)"
                    ></el-button>
                  </el-input>

                  <el-button class="serach-box" round @click="_QueryData(true)"

                    >筛选</el-button

                  >

                </div>
              </div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column

                  prop="sn"

                  label="设备编码"
                  align="center"
                ></el-table-column>

                <el-table-column label="学生信息" align="center"
                  ><template slot-scope="scoped"
                    ><p

                      v-for="(item, index) in scoped.row.studentList"
                      :key="index"

                    >
                      {{ item.studentName }}
                    </p></template
                  ></el-table-column
                >

                <el-table-column

                  prop="electricity"

                  label="电量"
                  align="center"
                ></el-table-column>

                <el-table-column prop="class" 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
                >

                <el-table-column

                  prop="pairingCode"

                  label="配对码"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="answerTimes"

                  label="答题次数"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="latestReportTime"

                  label="最后答题时间"
                  align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center"
                  ><template slot-scope="scoped">
                    <el-tooltip effect="dark" content="日志" placement="top">
                      <el-button
                        type="warning"
                        circle
                        size="mini"
                        icon="fa fa-eye"
                        @click="linkTo(scoped.row, 2)"
                      ></el-button>
                    </el-tooltip> </template
                ></el-table-column>
              </el-table>
            </div>
          </div>

          <div v-show="type == 3">

            <div class="table-box">
              <div class="answer-header">
                <div class="sel-box">
                  <el-cascader

                    size="small"

                    class="sel sel2"

                    clearable
                    placeholder="选择班级"
                    v-model="query.classId"

                    :options="gradeList"

                    :props="props"

                    collapse-tags

                    :show-all-levels="false"
                    @change="_QueryData(false)"
                  ></el-cascader>

                  <span class="sel"
                    >共选择{{ selectionTabIds.length }}个授课端</span
                  >

                  <el-button plan round @click="autoUpDate(false)"

                    >开启自动更新</el-button
                  >

                  <el-button plan round @click="stopUpdate(false)"

                    >停止自动更新</el-button
                  >
                </div>
              </div>
              <el-table

                ref="multipleTable"

                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >

                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column
                  prop="sn"
                  label="设备编码"
                  align="center"
                ></el-table-column>

                <el-table-column prop="class" 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
                >

                <el-table-column

                  prop="lastUpdateTime"

                  label="最近更新"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="osInfo"

                  label="软件系统"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="hardwareInfo"

                  label="硬件环境"
                  align="center"
                ></el-table-column>
                <el-table-column

                  prop="otaVersionName"

                  label="版本号"
                  align="center"
                ></el-table-column>
                <el-table-column label="状态" align="center"
                  ><template slot-scope="scope">
                    {{

                      scope.row.onlineStatus == 1

                        ? "在线"

                        : scope.row.onlineStatus == 2
                        ? "异常"
                        : "离线"

                    }}
                  </template></el-table-column
                >
                <el-table-column label="自动更新" align="center"
                  ><template slot-scope="scoped">
                    <el-switch

                      v-model="scoped.row.upgradeFlag"

                      @change="changeUpdate($event, scoped.row, this)"
                    >
                    </el-switch> </template
                ></el-table-column>
              </el-table>
            </div>
          </div>

          <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>
      </div>
      <el-dialog title="设备导入" :visible.sync="diaUp" width="400">

        <up-load :url="url" @upSuccess="upSuccess" fileName="设备信息">

          <p class="down-txt" slot="down">
            通过Excel名单导入设备，需要提供设备编码，点击

            <el-link type="danger" @click="downExcel">模板下载</el-link> 。

          </p>
        </up-load>
        <div class="dialog-footer" slot="footer">
          <el-button @click="diaUp = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :title="isAdd ? '添加基站' : '修改基站'"
        :visible.sync="diaAnswerEqu"
        width="400"
      >

        <el-form ref="forms" :model="form" :rules="formRules" label-width="140px">

          <el-form-item label="设备编码：" prop="sn">

            <el-col :span="16"

              ><el-input
                type="text"
                placeholder="输入设备编码"

                v-model.trim="form.sn"

                maxlength="30"
                size="45"
                show-word-limit

                :disabled="!isAdd"

              >
              </el-input
            ></el-col>
          </el-form-item>

          <el-form-item label="频点：" prop="frequency">

            <el-col :span="16"

              ><el-input
                type="text"
                placeholder="输入频点"

                v-model.trim="form.frequency"

                maxlength="30"
                size="45"
                show-word-limit
              >
              </el-input
            ></el-col>
          </el-form-item>

          <el-form-item label="配对码：" prop="pairingCode">

            <el-col :span="16"

              ><el-input
                type="text"
                placeholder="输入配对码"

                v-model.trim="form.pairingCode"

                maxlength="30"
                size="45"
                show-word-limit
              >
              </el-input
            ></el-col>
          </el-form-item>

          <el-form-item label="选择班级：" prop="classIds">
            <el-col :span="16">

              <el-cascader

                class="sel"

                clearable

                v-model="form.classIds"

                :options="gradeList"

                :props="{
                  multiple: true,
                  checkStrictly: false,
                }"
                collapse-tags

                :show-all-levels="false"
              ></el-cascader>
            </el-col>
          </el-form-item>
          <el-form-item label="所在教室：">

            <el-col :span="16"

              ><el-input
                type="text"
                placeholder="输入所在教室"

                v-model.trim="form.roomName"

                maxlength="30"
                size="45"
                show-word-limit
              >
              </el-input
            ></el-col>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">

          <el-button type="primary" @click="setAnswerEqu">确 定</el-button>

          <el-button @click="diaAnswerEqu = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>

  </template>
  
  <script>

  import pieChart from "@/components/charts/pieChart";
  import scatterChart from "@/components/charts/scatterChart";
  import _ from "lodash";

  import { downloadFile, getBlob, formatGradeNameClass } from "@/utils";

  import api from "@/api/apis/apis";

  import BusEvent from "@/utils/busEvent";

  export default {
    components: { pieChart, scatterChart },

    watch: {
      type: function (val) {
        this.page = 1;
        this.total = 0;

        this.count = 0;

        this.query.classId = [];
        this.query.onlineStatus = "";
        this.query.sn = "";
        this.query.type = "";
        if (val == 1) {
          this.stationReport();
        } else if (val == 2) {
          this.keyboardReport();
        }
        this._QueryData();
      },
    },

    data() {
      return {

        isAdd: false, //添加还是修改基站

        role: "",

        code: "",

        loading: false,

        url: "/api_html/school/manager/importStation",

        diaUp: false,
        diaAnswerEqu: false,

        gradeList: [],
        gradeListAll: [],

        schoolAll: [],

        school: {}, //校园账号所属学校信息

        props: {
          multiple: true,
          checkStrictly: true,

        },

        type: 1,
        query: {
          classId: [],

          onlineStatus: "",
          sn: "",
          type: "",

        },
        statusList: [

          { label: "全部", value: "" },

          { label: "离线", value: 0 },

          { label: "在线", value: 1 },

          { label: "异常", value: 2 },
        ],
        typeList: [
          { label: "全部", value: 0 },
          { label: "1日内", value: 1 },
          { label: "3日内", value: 2 },
          { label: "7日内", value: 3 },
          { label: "1月内", value: 4 },
          { label: "3月内", value: 5 },
          { label: "3月以上", value: 6 },

        ],
        form: {

          deviceId: "",

          sn: "",

          frequency: "",
          pairingCode: "",

          classIds: [],

          roomName: "",

        },
        formRules: {

          sn: [{ required: true, message: "请输入设备编码", trigger: "blur" }],

          frequency: [{ required: true, message: "请输入频点", trigger: "blur" }],
          pairingCode: [
            { required: true, message: "请输入配对码", trigger: "blur" },
          ],

          classIds: [{ required: true, message: "请选择班级", trigger: "blur" }],

        },

        tableData: [],
        total: 0,

        count: 0,

        chartData: [],
        chartData2: [],

        selectionTabIds: [],

        page: 1,
        size: 20,

      };
    },
    created() {

      this.code = localStorage.getItem("csCode") || "";

      let role = "";
      this.$store.getters.info.permissions.map((item) => {
        if (item.roleName == this.$store.getters.info.showRoleName) {
          role = item.role;
        }
      });
      this.role = role ? role : this.$store.getters.info.permissions[0].role;

      if (this.role == "ROLE_JITUAN") {

        (this.props.lazy = true),
          (this.props.lazyLoad = function (node, resolve) {
            const { level } = node;
            if (level == 2) {
              console.log(node);
              api
                .tenantClassList({
                  schoolId: node.data.value,
                })
                .then((res) => {
                  let children = formatGradeNameClass(res.data?.list).sort(
                    (a, b) => {
                      return a.grade - b.grade;
                    }
                  );
                  console.log();

                  const nodes = [...children];
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(nodes);
                });
            } else {
              resolve(node);
            }
          });
      }
      if (this.role == "ROLE_XUEXIAO") {
        this._QueryDataSchool();

      }

      this.stationReport();
      this._QueryGradeList();
      this._QueryData();

      if (role == "ROLE_JITUAN") {
        this.showSchool();
      }

    },

    activated() {
      const that = this;
      BusEvent.$on("keepAlive", async function () {
        that.type = 1;
        that.page = 1;
        that.total = 0;
        that.count = 0;
        that.query.classId = [];
        that.query.onlineStatus = "";
        that.query.sn = "";
        that.query.type = "";
        that.stationReport();
        that._QueryData();
      });
    },

    methods: {

      upSuccess(res) {

        //导入成功

        this.$message.closeAll();
        this.$message({
          showClose: true,

          message: `成功（${res.data.success}）`,

          type: "success",

          duration: 5000,

        });

        this.diaUp = false;

        this.page = 1;

        this._QueryData();
      },

      edit(obj) {
        //修改设备

        this.isAdd = false;

        for (let key in this.form) {
          if (key == "classIds") {

            this.form[key];
            let classIds = obj.classList.map((item) => {
              return item.classId;
            });
            let checkClassData = [];
            this.gradeList.map((item) => {
              item.children.map((items) => {
                if (classIds.includes(items.value)) {
                  checkClassData.push([item.value, items.value]);
                }
              });
            });
            this.form[key] = [...checkClassData];

          } else {
            this.form[key] = obj[key];

          }
        }

        delete this.form.schoolId;

        this.form.deviceId = obj.id;

        this.diaAnswerEqu = true;

      },

      linkTo(obj, type) {
        this.$router.push({
          path: "/deviceLog",
          query: {
            id: obj.id,
            type: type,
          },
        });
      },
      clickPieChart(obj) {

        this.query.onlineStatus =
          obj.name == "在线" ? 1 : obj.name == "离线" ? 0 : 2;
        this.query.sn = "";

        this.query.classId = [];

        this.page = 1;

        this._QueryData(false);

      },
      clickScatterChart(obj) {

        this.query.type =
          obj.name == "1日内"
            ? 1
            : obj.name == "3日内"
            ? 2
            : obj.name == "7日内"
            ? 3
            : obj.name == "1月内"
            ? 4
            : obj.name == "3月内"
            ? 5
            : 6;
        this.query.sn = "";

        this.query.classId = [];

        this.page = 1;

        this._QueryData(false);

      },
      handleSelectionChange(val) {
        console.log(val);
        this.selectionTabIds = val.map((item) => {
          return item.id;
        });
      },
      changeUpdate: _.debounce(function (event, obj) {
        console.log(this);
        if (event) {
          this.autoUpDate(obj.id);
        } else {
          this.stopUpdate(obj.id);
        }
      }, 800),

      changePage(page) {
        this.page = page;

        this._QueryData(false);

      },

      addDev() {
        this.form.sn = "";
        this.form.frequency = "";
        this.form.pairingCode = "";

        this.form.classIds = [];

        this.form.roomName = "";

        this.form.schoolId = this.school.id;
        delete this.form.deviceId;
        this.isAdd = true;

        this.diaAnswerEqu = true;
      },

      async showSchool() {

        const { data, status, info } = await this.$request.schoolList();
        if (status === 0) {

          let gradeListAll = data.list?.map((item) => {
            return {
              value: item.id,
              label: item.schoolName,
            };
          });

          this.schoolAll = [
            {
              value: 0,
              label: "全部",

              children: [...gradeListAll],

            },
          ];
          this.gradeList = [...this.schoolAll, ...this.gradeList];

        } else {
          this.$message.error(info);
        }
      },

      async autoUpDate(id) {
        if (!this.selectionTabIds.length && !id) {
          this.$message.warning("请选择授课端~");
          return;
        }
        if (this.loadingUpDate) return;
        this.loadingUpDate = true;

        let data = await this.$request.modifyUpgradeFlag({

          deviceIds: id ? [id] : this.selectionTabIds,

          upgradeFlag: 1,

        });
        this.loadingUpDate = false;
        if (data && !data.code) {
          this._QueryData(false);

          this.selectionTabIds = [];

          this.$message.success("开启自动更新成功");
        } else {

          this.$message.error(data.info);

        }
      },
      async stopUpdate(id) {
        if (!this.selectionTabIds.length && !id) {
          this.$message.warning("请选择授课端~");
          return;
        }
        if (this.loadingUpDate) return;
        this.loadingUpDate = true;

        let data = await this.$request.modifyUpgradeFlag({

          deviceIds: id ? [id] : this.selectionTabIds,

          upgradeFlag: 0,

        });
        this.loadingUpDate = false;
        if (data && !data.code) {

          this.selectionTabIds = [];

          this._QueryData(false);
          this.$message.success("关闭自动更新成功");
        } else {

          this.$message.error(data.info);

        }
      },
      async downExcel() {

        let { data, status, info } = await this.$request.stationTemplateUrl({

          id: this.id,
        });

        if (status == 0) {

          getBlob(data.downloadUrl).then((res) => {
            downloadFile("基站模版", res);
          });

        } else {

          this.$message.error(info);

        }
      },
  

      // 修改基站
      setAnswerEqu() {

        this.$refs.forms.validate(async (valid) => {
          if (valid) {
            if (this.loadingAnswerEqu) return;
            this.loadingAnswerEqu = true;

            let query = { ...this.form };

            query.classIds = query.classIds.map((item) => {
              return item[1];
            });

            let deviceApi = this.isAdd
              ? this.$request.addStation
              : this.$request.updateDevice;

            const { data, status, info } = await deviceApi({

              ...query,
            });

            this.loadingAnswerEqu = false;
            console.log(status);
            if (status === 0) {

              this.diaAnswerEqu = false;

              this.$message.success(info);

              this._QueryData();

              if (this.isAdd) {
                this.stationReport();

              }

            } else {
              this.$message.error(info);
            }
          } else {
            this.$message.warning("数据有误，请检查！");
          }
        });

      },

      async _QueryDataSchool() {
        const { data, status, info } = await this.$request.schoolDetail();
        if (status === 0) {
          this.school = { ...data };
        } else {
          this.$message.error(info);
        }
      },

      // 查找班级

      async _QueryGradeList() {
        this.loading = true;

        const gradeList =
          this.role != "ROLE_JITUAN"
            ? this.$request.gradeList
            : this.$request.regionList;
        const { data, status, info } = await gradeList();

        if (status === 0) {
          if (!!data.list) {

            if (this.role != "ROLE_JITUAN") {
              this.gradeList =
                data.list?.map((item) => {
                  let gradeList = {

                    value: item.gradeName,

                    label: item.gradeName,
                  };
                  gradeList.children =
                    item.classList?.map((items) => {
                      return {

                        value: Number(items.id),

                        label: items.className,
                      };
                    }) || [];
                  return gradeList;
                }) || [];
            } else {
              this.gradeList =
                data.list?.map((item) => {
                  let gradeList = {
                    value: item.id,
                    label: item.regionName,
                  };
                  gradeList.children =
                    item.schoolList?.map((items) => {
                      return {
                        value: items.id,
                        label: items.schoolName,
                      };
                    }) || [];
                  return gradeList;
                }) || [];

              this.gradeList = [...this.schoolAll, ...this.gradeList];

            }

          }
        } else {
          this.$message.error(info);
        }
      },
      // 基站统计数据
      async stationReport() {

        const stationReport =
          this.role != "ROLE_JITUAN"
            ? this.$request.stationReport
            : this.$request.tenantStationReport;
        const { data, status, info } = await stationReport();

        if (status === 0) {
          this.chartData =
            data.list?.map((item) => {
              return {
                name:

                  item.onlineStatus == "1"
                    ? "在线"
                    : item.onlineStatus == 0
                    ? "离线"
                    : "异常",

                value: item.total,
                rate: item.rate,

              };
            }) || [];

          this.count = data.total || 0;

        } else {
          this.$message.error(info);
        }
      },
      // 答题器统计数据
      async keyboardReport() {

        const keyboardReport =
          this.role != "ROLE_JITUAN"
            ? this.$request.keyboardReport
            : this.$request.tenantKeyboardReport;
        const { data, status, info } = await keyboardReport();

        if (status === 0) {
          this.chartData2 =
            data.list?.map((item) => {
              return {
                name:
                  item.type == 1
                    ? "1日内"
                    : item.type == 2
                    ? "3日内"
                    : item.type == 3
                    ? "7日内"
                    : item.type == 4
                    ? "1月内"
                    : item.type == 5
                    ? "3月内"
                    : "3月以上",

                count: item.total,
                value: item.rate * 100,

              };
            }) || [];

          this.count = data.total || 0;

        } else {
          this.$message.error(info);
        }

      },

      setQuery() {
        //整理传参
        let query = {};

        if (this.query.sn) {
          query.sn = this.query.sn;
        } else {

          if (this.type == 1) {
            this.query.onlineStatus !== ""
              ? (query.onlineStatus = this.query.onlineStatus)
              : "";
          } else if (this.type == 2) {
            this.query.type !== "" ? (query.type = this.query.type) : "";
          }

          if (this.role == "ROLE_JITUAN") {
            query.regionIds = [];
            query.schoolIds = [];

            query.gradeNames = [];
            query.classIds = [];

            this.query.classId?.map((item) => {
              if (item.length == 1) {

                if (!query.regionIds.includes(item[0])) {

                  query.regionIds.push(item[0]);
                }

              } else if (item.length == 2) {

                if (!query.schoolIds.includes(item[1])) {
                  query.schoolIds.push(item[1]);
                }

                query.regionIds.includes(item[0])
                  ? query.regionIds.remove(item[0])
                  : "";
              } else if (item.length == 3) {

                if (!query.schoolIds.includes(item[1])) {
                  query.schoolIds.push(item[1]);
                }

                if (!query.gradeNames.includes(item[2])) {
                  query.gradeNames.push(item[2]);

                }

                query.regionIds.includes(item[0])
                  ? query.regionIds.remove(item[0])
                  : "";

              } else if (item.length == 4) {
                if (!query.classIds.includes(item[3])) {
                  query.classIds.push(item[3]);
                }
                query.regionIds.includes(item[0])
                  ? query.regionIds.remove(item[0])
                  : "";
                query.schoolIds.includes(item[1])
                  ? query.schoolIds.remove(item[1])
                  : "";
                query.gradeNames.includes(item[2])
                  ? query.gradeNames.remove(item[2])
                  : "";

              }
            });
          } else {
            query.gradeNames = [];
            query.classIds = [];
            this.query.classId?.map((item) => {
              if (item.length == 1) {

                if (!query.gradeNames.includes(item[0])) {

                  query.gradeNames.push(item[0]);
                }
              } else {
                if (!query.classIds.includes(item[1])) {
                  query.classIds.push(item[1]);
                }
                if (query.gradeNames.includes(item[0])) {
                  query.gradeNames.remove(item[0]);
                }
              }
            });
          }
          delete query.classId;

        }

        return query;

      },
      // 设备列表信息
      async _QueryData(isRef) {
        this.loading = true;

        let query = this.setQuery();

        if (isRef) {
          this.page = 1;

        }

        this.loading = true;

        const deviceList =
          this.role != "ROLE_JITUAN"
            ? this.$request.deviceList
            : this.$request.tenantDeviceList;

        this.tableData = [];

        const { data, status, info } = await deviceList({

          ...query,
          deviceType: this.type,
          page: this.page,
          size: this.size,
        });
        this.loading = false;

        if (status == 0) {

          this.tableData =

            (data?.list &&
              data?.list.map((item) => {
                item.upgradeFlag = item.upgradeFlag == 1 ? true : false;
                return item;
              })) ||
            [];

          this.total = data.count;

          this.$nextTick(function () {
            this.$refs.main.scrollTop = 0;

            if (this.query.classId.length) {
              this.selectionTabIds = this.tableData.map((item) => {
                this.$refs.multipleTable.toggleRowSelection(item);
                return item.id;
              });
            }

          });

        } else {
          this.$message.error(info);
        }

      },
    },
  };

  </script>
  

  <style lang="scss" scoped>
  .page-content {

    padding: 0 20px;
    height: 100%;
    overflow-y: auto;

  }
  .tab-box {

    padding: 20px 0 12px;

  }

  .content {
    background: #f8f8f8;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    :deep(.fa-edit) {
      width: 12px;
      height: 12px;
      &::before {
        margin-left: 2px;
      }
    }
    :deep(.fa-eye) {
      width: 12px;
      height: 12px;
      &::before {
        margin-left: 1px;
      }
    }
    .chart-box {
      display: flex;
      overflow: hidden;
      height: 240px;
      border-bottom: 0.5px solid #e2e2e2;
      .device-num {
        width: 280px;
        border-right: 0.5px solid #e2e2e2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .p1 {
          font-size: 28px;
        }
      }
      .chart {
        flex: 1;
        height: 100%;
      }
    }
    .table-box {
      padding: 20px;
      .answer-header {
        padding: 0;
        margin-bottom: 12px;
      }
    }
  }

  </style>