baoman / Ezquiz_Platform

  <template>

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

        <template
          slot="btns"
          v-if="role != 'ROLE_JITUAN' && type == 1 && school !== '长水'"
        >

          <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="diaAnswerEqu = true"

            ></el-button>
          </el-tooltip>
        </template>
      </back-box>

      <div class="page-content">
        <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"

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

                    :options="gradeList"

                    :props="props"
                    :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 in scoped.row.classList" :key="item.classId">
                      {{ 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"

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

                    :options="gradeList"

                    :props="props"
                    :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"

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

                    :options="gradeList"

                    :props="props"
                    :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
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >

                <el-table-column type="selection" width="55"></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="otaVersionNumber"

                  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 id="downDevice" :url="url" 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="修改基站" :visible.sync="diaAnswerEqu" width="400">

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

          <el-form-item label="设备编码：" prop="deviceId">
            <el-col :span="16"

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

                v-model.trim="form.deviceId"

                maxlength="30"
                size="45"
                show-word-limit
              >
              </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="{ expandTrigger: 'hover',checkStrictly: true }"

                :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="addAnswerEqu">确 定</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, formatClass } from "@/utils";
  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 {

        role: "",

        school: "",
        loading: false,
        url: "/web/upLoadDevice",
        diaUp: false,
        diaAnswerEqu: false,

        gradeList: [],
        gradeListAll: [],

        schoolAll: [],

        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:"",

          frequency: "",
          pairingCode: "",

          classIds: [],

          roomName: "",

        },
        formRules: {

          deviceId: [

            { 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() {

      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;

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

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

    },
    methods: {

      edit(obj) {
        for(let key in this.form){
          if(key=="classIds"){
            this.form[key] = obj.classList?.map(item=>{
              return [item.classId]
            })
          }else{
            this.form[key] = obj[key]
  
          }
        }
        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.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.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);

      },

      async showSchool() {

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

          this.schoolAll = [
            {
              value: 0,
              label: "全部",
              children: data.list?.map((item) => {
                return {
                  value: item.id,
                  label: item.schoolName,
                };
              }),
            },
          ];
          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.message);
        }
      },
      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.message);
        }
      },
      async downExcel() {
        let data = await this.$request.downDevice({
          id: this.id,
        });
        if (data && !data.code) {
          let blob = new Blob([data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          downloadFile(`设备信息.xlsx`, blob);
        } else {
          this.$message.error(data.message);
        }
      },
  
      // 添加设备

      addAnswerEqu() {
        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]
            })
            const { data, status, info } = await this.$request.updateDevice({...query});
            this.loadingAnswerEqu = false;
            console.log(status);
            if (status === 0) {
              this.diaAnswerEqu=false
              this._QueryData();
            } else {
              this.$message.error(info);
            }
          } else {
            this.$message.warning("数据有误，请检查！");
          }
        });

      },
      // 查找班级

      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.classCode),

                        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 = [];
            this.query.classId?.map((item) => {
              if (item.length == 1) {

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

                  query.regionIds.push(item[0]);
                }
              } else {
                if (!query.schoolIds.includes(item[1])) {
                  query.schoolIds.push(item[1]);
                }
                if (query.regionIds.includes(item[0])) {
                  query.regionIds.remove(item[0]);
                }
              }
            });
          } 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;

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

      },
    },
  };

  </script>
  

  <style lang="scss" scoped>
  .page-content {
    padding: 20px 20px 0;
  }
  .tab-box {
    margin-bottom: 12px;
  }

  .sel{
    width:100%;
  }

  .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>