InstallServer.vue

<template>
  <div style="display: flex; flex-direction: column; align-items: center; height: 80vh;">
    <div style="display: flex; margin-bottom: 20px; flex-direction: column;">
      <h2>设备信息</h2>
      <table border="1" cellspacing="0" width="500" height="50">
        <tr>
          <td width="100">芯片型号:</td>
          <td>{{ data.chipInfo }}</td>
        </tr>
      </table>
    </div>
    <h2>线刷包</h2>
    <div style="display: flex; flex-direction: row; height: 30px;">
      <p style="margin: 0px;">如果是rockchip线刷包，请直接点击重启：</p>
      <button @click="reboot">重启</button>
    </div>
    <div style="display: flex; margin-bottom: 20px; flex-direction: column;">
      <h2>请选择刷机参数</h2>
      <table cellpadding="5px">
        <tbody>
          <tr v-for="(value) in packageInfoArray.model_database" :key="value.boxid">
            <td style="text-align: left;">
              <input type="radio" :value="value.boxid" name="boxid" :checked="index === 0"/>
            </td>
            <td style="text-align: left;">
              <label>boxid: {{ value.boxid }}</label>
            </td>
            <td style="text-align: left;">
              <label>soc: {{ value.soc }}</label>
            </td>
            <td style="text-align: left;">
              <label>model: {{ value.model }}</label>
            </td>
            <td style="text-align: left;">
              <label>dtb: {{ value.dtb }}</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <button style="align-items: end; margin-bottom: 20px;" @click="submitForm">提交</button>
    <textarea id="texts" style="width: 800px; height: 100%; margin-bottom: 20px; padding: 20px;" disabled v-model="outputTextarea">
    </textarea>
    <div style="display: flex; flex-direction: row; height: 30px;">
      <p style="margin: 0px;">提交数据后是否成功，如果不成功请关机设备后重启重新选择刷机参数：</p>
      <button @click="powerOff">关机</button>
    </div>
  </div>
</template>

<script setup>
import { useStore } from '@/stores'
import { ref,onMounted  } from 'vue'

const data = ref({})
const packageInfoArray = ref({})
const store = useStore()

const deviceData = () => {
  store.get('getInfo')
    .then((res) => {
      if(parseInt(JSON.parse(res.packageInfo).code, 10) !== 0){
        console.log(parseInt(JSON.parse(res.packageInfo).code, 10))
        alert("获取设备信息失败！")
      }
      data.value = res
      packageInfoArray.value = JSON.parse(data.value.packageInfo)
    })
    .catch((error) => {
      console.error(error);
    });
};

onMounted(deviceData)
const warning = '请根据您的设备型号，以及芯片型号选择正确的boxid进行刷机，若不知，可以重复尝试，注意：您在提交一组数据之后需要等待结果返回并进行关机重启之后。才可以选其他参数进行提交！！！'
const outputTextarea = ref(warning);

const submitForm = () => {
  const radioButtons = document.getElementsByName("boxid");
  let isChecked = false;
  outputTextarea.value = '写入emmc信息输出：写入中，请耐心等待....';
  for (let i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      store.post('armbianInstall', {
          body: JSON.stringify({
            'boxid': radioButtons[i].value,
          })
        }).then((res) => {
          if(res.code === 401){
            outputTextarea.value = warning;
            alert("请求参数错误");
          }else if(res.code === 102){
            outputTextarea.value = '安装信息输出：安装中，请耐心等待....';
            alert("正在处理中")
          }else if(res.code === 403){
            outputTextarea.value = "安装信息输出："+warning;
            alert("禁止访问，请关机重启后再进行");
          }else if(res.code === 200){
            outputTextarea.value = res.result
            alert("安装成功！请点击关机后重启设备！")
          }else{
            outputTextarea.value = "写入emmc失败!!请选择正确的参数进行提交\n"
            alert("写入emmc出错，请检查参数是否选择正确，可点击关机后重启设备重新选择！")
          }
        })
    .catch((error) => {
      console.error(error);
    });
      isChecked = true;
      break;
    }
  }
  if (!isChecked) {
    outputTextarea.value = warning;
    alert("请选择一个参数后提交！");
    return;
  }
};
  
const reboot = () => {             
        store.post('initDev').then((res) => {
          if(res.code === 401){
            alert("请求参数错误")
          }else if(res.code === 102){
            alert("正在处理中")
          }else if(res.code === 403){
            alert("禁止访问，请关机重启后再进行")
          }
        })
    .catch((error) => {
      console.error(error);
    });             
}

const powerOff = () => {
        store.post('powerOff').then((res) => {
          if(res.code === 401){
            alert("请求参数错误")
          }else if(res.code === 102){
            alert("正在处理中")
          }else if(res.code === 403){
            alert("禁止访问，请关机重启后再进行")
          }
        })
    .catch((error) => {
      console.error(error);
    });
}

</script>

<style>

</style>