tropsCode/src/views/set/config.vue

<template>
  <div class="config">
    <Header @confirmExit="confirmExit"></Header>
    <div class="main">
      <el-table :data="examList" class="table" @row-click="handleSelectionChange" highlight-current-row>
        <el-table-column prop="0" label="项目" sortable />
        <el-table-column prop="1" label="状态" />
        <el-table-column prop="2" label="工作站" :formatter="showWorkers" sortable />
        <el-table-column fixed="right" label="操作" width="210">
          <template #default="scope">
            <el-button @click="chooseItem(scope.row)" size="small" type="primary" plain>部署</el-button>
            <el-button @click="delExamConf(scope.row)" size="small" type="danger" plain>删除</el-button>
            <el-button @click="closeExam(scope.row)" size="small" type="warning" plain v-show="scope.row[1] == '已开启'">下课
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footerBtn">
      <div class="btn" @click="openWorkstation('add', '添加项目')">添加项目</div>
      <div class="btn" @click="openWorkstation('led', '关闭LED屏幕')">关闭LED屏幕</div>
      <div class="btn" @click="openWorkstation('restart', '重启工作站')">重启工作站</div>
      <div class="btn" @click="openWorkstation('close', '关闭工作站')">关闭工作站</div>
      <div class="btn" @click="getExamList">刷新</div>
    </div>
    <WorkstationWindow ref="workstationWindowRef" @returnData="returnRefresh" />
  </div>
</template>

<script setup name="Login" lang="ts">
import dataDictionary from "@/utils/dataDictionary"
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const dic: any = dataDictionary;
const workstationWindowRef = ref();

const data = reactive<any>({
  examList: [],
  selectValue: [],
  loginname: "",
  workers: {},
  workerMap: [],
  oLWorkers: {},
  examMaxIdxMap: {},
  existExamIds: {},
});

const { examList, selectValue, loginname, workers, workerMap, oLWorkers, examMaxIdxMap, existExamIds } = toRefs(data);

//被选行
const handleSelectionChange = (data: any) => {
  selectValue.value = data;
};

//获取列表
const getExamList = async () => {
  let myInfo: any = localStorage.getItem("userInfo");
  let userInfo = JSON.parse(myInfo);
  let params: any = {
    school_id: userInfo.school_id
  };
  let res = await proxy?.$http.common.allExams(params)
  workers.value = res.workers
  Object.keys(res.workers).forEach((item) => {
    workerMap.value[res.workers[item][0]] = item
    let wkVal = workers.value[item]
    if (wkVal[1] === "在线") {
      oLWorkers.value[item] = wkVal
    }
  })
  loginname.value = res.login_name
  let list = [];
  for (let i in res.exams) {
    if (i.indexOf("skiprope") != 0 && i.indexOf("heartbeat") != 0) {
      let enIndex = i.split('_')
      let en = enIndex[0]
      let eindex = enIndex[1]
      res.exams[i].worker.forEach((worker: any) => {
        if (worker in examMaxIdxMap.value) { }
        else { examMaxIdxMap.value[worker] = {} }
        if (en in examMaxIdxMap.value[worker]) {
          if (Number(eindex) > Number(examMaxIdxMap.value[worker][en])) {
            examMaxIdxMap.value[worker][en] = Number(eindex)
          }
        } else {
          examMaxIdxMap.value[worker][en] = Number(eindex)
        }
        if (worker in existExamIds.value) {
          existExamIds.value[worker].push(i)
        } else {
          existExamIds.value[worker] = []
        }
      })
      list.push(
        [dic.project[en] + "_" + eindex, res.exams[i].isopen,
        res.exams[i].worker, i])
    }
  }
  examList.value = list;
};

//转换
const showWorkers = (row: any) => {
  return row[2].join(",")
};

//操作工作站
const openWorkstation = (type: any, title: any) => {
  workstationWindowRef.value.open(type, title);
};

//部署
const chooseItem = (item: any) => {
  // let itemName = this.exams[item]
  let isOn = false
  item[2].forEach((wkId: any) => {
    if (workers.value[wkId]) {
      if (workers.value[wkId][1] == "在线") {
        isOn = true
      }
    }
  })
  if (isOn) {

  } else {
    proxy?.$modal.msgError(`工作站不在线暂不允许配置`);
  }
};

//删除项目
const delExamConf = (item: any) => {
  let conTitle = `是否移除项目-${item[0]}`
  proxy?.$modal.confirm(conTitle).then(() => {
    let examId = item[3]
    let ename = examId.split("_")[0]
    let eidx = Number(examId.split("_")[1])

    let myInfo: any = localStorage.getItem("userInfo");
    let userInfo = JSON.parse(myInfo);
    let params: any = {
      exam_id: examId,
      school_id: userInfo.school_id
    };
    proxy?.$http.common.delExamSettings(
      params
    ).then((res: any) => {
      if (res.status == 200) {
        let selWorker: any;
        let existIdx: any;
        item[2].forEach((worker: any) => {
          existIdx = existExamIds.value[worker].indexOf(examId)
          if (examMaxIdxMap.value[worker][ename] == eidx) {
            examMaxIdxMap.value[worker][ename] = eidx - 1
            selWorker = worker
          } else if (existIdx > -1) {
            selWorker = worker
          }
        })
        console.log(selWorker, examMaxIdxMap.value, "examMaxIdxMap.value")
        // let existIdx = existExamIds.value[selWorker].indexOf(examId)
        let index = examList.value.indexOf(item)
        if (existIdx > -1) {
          existExamIds.value[selWorker].splice(existIdx, 1)
        }
        if (index > -1) {
          examList.value.splice(index, 1)
        }
        proxy?.$modal.msgSuccess(`删除成功`);
      } else {
        proxy?.$modal.msgError(`${res.message}`);
      }

    })
  }).catch((err: any) => {
  });
};

// 下课
const closeExam = (item: any) => {
  let myInfo: any = localStorage.getItem("userInfo");
  let userInfo = JSON.parse(myInfo);
  let params: any = {
    exam_id: item[3],
    school_id: userInfo.school_id
  };
  proxy?.$http.common.closeExamForce(
    params
  ).then((res: any) => {
    if (res.status == 200) {
      proxy?.$modal.msgSuccess(`下课成功`);
    }
    getExamList()
  })
};


/**
 * 返回刷新列表
*/
const returnRefresh = () => {
  getExamList();
};

/**
 * 返回
*/
const confirmExit = () => {
  router.go(-1);
};

onMounted(() => {
  getExamList();
})

onActivated(() => {
  getExamList()
})
</script>

<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.main {
  width: calc(100% - ($waiPadding * 2));
  padding-top: 10rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;

  .table {
    width: 100%;
    height: 65vh;
  }
}

.footerBtn {
  width: 100%;
  padding: 0 calc(13.02rem /2);
  box-sizing: border-box;
  position: fixed;
  bottom: 3vh;
  display: flex;
  justify-content: end;

  .btn {
    width: 11vw;
    height: 6.1vh;
    line-height: 6.1vh;
    font-size: 3vh;
    color: #1A293A;
    text-align: center;
    border-radius: 1vh;
    cursor: pointer;
    background: radial-gradient(159% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
    box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
    margin-left: 10px;

    &:hover {
      background: #8EFFA9;
    }
  }
}
</style>