VehicleClassification/vue/src/views/DirectionAndCategory.vue

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { genFileId } from "element-plus";
import axios from "axios";

const leftDirection = ref("东");
const rightDirection = ref("西");
const directionList = ref<any>([
  { value: "东", label: "东" },
  { value: "西", label: "西" },
  { value: "南", label: "南" },
  { value: "北", label: "北" },
]);
const flag = ref<string>("");
const disableFlag = ref<boolean>(false);
const upload = ref<any>();

const formData = ref<any>();

const fileType = ref<string>("");

const taskType = ref<string>("class_direc");

//车辆类型
const car_type = ref<string>("");
//运动方向
const direction_run = ref<string>("");

//文件的对象
const currentFile = ref<any>();
const uploadFile = (file: any) => {
  currentFile.value = file.file;
  let name = file.file.name;
  let index = name.lastIndexOf(".");
  fileType.value = name.substr(index + 1);
  //   fileType.value = e.target.files[0].name;
  //校验文件名字
  if (!reType(fileType.value)) {
    alert;
    ElMessage({
      message: "请选择正确的文件格式",
      type: "error",
    });
    //清空选择的列表
    upload.value.clearFiles();
    currentFile.value = null;
    fileType.value = "";
    return;
  }
};
const startFun = () => {
  const formData = new FormData();
  formData.append("file", currentFile.value);
  formData.append("userName", name.value);
  formData.append("fileType", fileType.value);
  //第一个方向
  formData.append("negativaDir", leftDirection.value);
  //第二个方向
  formData.append("positiveDir", rightDirection.value);

  formData.append("taskType", taskType.value);
  disableFlag.value = true;
  axios
    .post(`/v1/record/create`, formData)
    .then((res) => {
      console.log(res);
      debugger;
      //如果结果是返回的是正确的
      if (res?.data?.code == 200) {
        disableFlag.value = false;
        flag.value = res.data.data;
        //   chartList = arr2;
        //开始调用 //查询记录详情
        queryDetail();
        //发送以后得到返回的id，然后一直启动轮询一直调接口
      }
    })
    .catch((err) => {
      disableFlag.value = false;
    });
  //   formData.append("userName", params.name);
  //   formData.append("fileType", fileForma.value);
};

const queryDetail = () => {
  axios.get(`/v1/record/${flag.value}/find`, {}).then((res) => {
    if (res.data.code == 200) {
      //当结果为空时
      //   ElMessage({
      //   message: `结果为${res.data.data.Result}`,
      //   type: "error",
      // });
      car_type.value = res.data.data.Result;
      direction_run.value = res.data.data.Result;
      if (res.data.data.Result == "") {
        ElMessage({
          message: `解析结果为空`,
          type: "success",
        });
      }else{
        //查看是否包含；
        //判断字符串中是否包含分号 ;
        let a =res.data.data.Result;
       
        if( a.inclides('；')){
            let b = res.data.data.Result
            car_type.value = b[0];
            direction_run.value =b[1];
        }else{
            car_type.value = res.data.data.Result;
            direction_run.value = res.data.data.Result;
        }

       
      }
    }
    // console.log(res.data.data.Result !== "");
  });
};
const fileList = ref<any>([]);

const name = ref<string>("");

const reType = (val: string): boolean => {
  if (
    val == "json" ||
    val == "txt" ||
    val == "wav" ||
    val == "npy" ||
    val == "xls" ||
    val == "xlsx" ||
    val == "sql"
  ) {
    return true;
  } else {
    return false;
  }
};

const handleExceed: any["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as any;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

onMounted(() => {
  name.value = JSON.parse(sessionStorage.getItem("userInfo") ?? "{}")?.organName;
});
</script>
<template>
  <div class="out">
    <p>车辆类别与方向检测</p>
    <div class="inner_content">
      <div class="inner_first">
        <div style="margin-bottom: 10px">选择文件</div>
        <el-upload
          ref="upload"
          auto-upload="false"
          class="upload-demo"
          :on-change="handleChange"
          :file-list="fileList"
          drag
          :limit="1"
          :on-exceed="handleExceed"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :http-request="uploadFile"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text"><em>点击上传</em></div>
          <template #tip>
            <!-- <div class="el-upload__tip">jpg/png files with a size less than 500kb</div> -->
          </template>
        </el-upload>
        <div style="margin-bottom: 10px">选择方向</div>
        <div class="class_dre">
          <el-select
            v-model="leftDirection"
            placeholder="Select"
            size="large"
            style="width: 70px"
          >
            <el-option
              v-for="item in directionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value == rightDirection"
            />
          </el-select>
          <img style="width: 350px" src="../assets/content/kedu.png" alt="" />
          <el-select
            v-model="rightDirection"
            placeholder="Select"
            size="large"
            style="width: 70px"
          >
            <el-option
              v-for="item in directionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value == leftDirection"
            />
          </el-select>
        </div>
        <div class="start_pg">
          <el-button @click="startFun" :disabled="disableFlag">开始检测</el-button>
        </div>
        <div></div>
        <div class="run_dir">
          <div>检测结果：</div>
          <div class="run_input">{{ car_type }}</div>
        </div>
        <div class="run_dir">
          <div>运动方向：</div>
          <div class="run_input">{{ direction_run }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.out {
  height: 80vh;
  display: flex;
  flex-direction: column;
  /* background-color: #F0F3FA; */
}
.inner_content {
  display: flex;
  justify-content: center;
  width: 100%;
  flex: 1;
  .inner_first {
    width: 500px;
    .class_dre {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  /* background-color: #f0f3fa; */
}
.start_pg {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}
.run_dir {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  .run_input {
    word-break: break-all;
    margin-left: 20px;
    flex: 1;
    border: 1px solid #d0d3d9;
    height: 40px;
    // line-height: 40px;
    padding-left: 20px;
  }
}
</style>