pn532_web/src/components/cardHome.vue

<template>
  <div class="back">
    <el-form :inline="true" :model="formInline" class="formCard">
      <!-- <el-form-item label="读卡">
        <el-input
          v-model="formInline.user"
          ref="input"
          placeholder="读卡"
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <!-- <el-button type="primary" @click="onSubmit" :disabled="flag"
          >查询</el-button
        > -->
        <el-image :src="start" @click="onSubmit"></el-image>
      </el-form-item>
    </el-form>
    <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
      :show-close="false"
      style="margintop: 25vh"
    >
      <lottie
        :options="defaultOptions"
        :height="300"
        :width="300"
        v-on:animCreated="handleAnimation"
      />
    </el-dialog>
  </div>
</template>

<script>
import * as animationData from "../assets/loding.json";
import { newUpload, getLonLat } from "../api/home";
import start from "../assets/start.png";
import qs from "qs";
export default {
  name: "cardHome",
  data() {
    return {
      start,
      formInline: {
        user: "",
      },
      flag: false,
      chipData: null,
      formChip: {
        dateTime: this.etCurrentTime(),
        chipNumber: null, //7218开头52位
        vaccinationCipher: null, //完整的报文
        longitude: "12958160.97", //经度
        latitude: "4825907.72", //纬度
        inoculators: "",
        agin: true,
        incs: "",
        temperatureData: null,
      },
      latModel: {
        ak: "n1B7YBnthymcNeuLL9vdPF69m2SA5cHq",
      },
      dialogVisible: false,
      newUrl:
        "http://evvmapi.vandh.org/file/pdf/7218ee5b49cbcd0e2a707a20c0756263c38f99b4df9af78e61cea1a2a3a4a5a6a7a83caf84f96583.pdf",
      set: null,
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {},
    };
  },
  created() {
    // if (this.formInline !== "") {
    //   this.$nextTick(() => {
    //     this.$refs.input.focus();
    //   });
    // }
    // this.ipLL();
  },
  methods: {
    onSubmit() {
      this.flag = true;
      // $.ajax({
      //   type: "get",
      //   url: "http://localhost:9000/readChip",
      //   success: function (res) {
      //     console.log(res);
      //   },
      // });
      //this.$api +
      this.$http
        .get(
          this.$api + "/readChip",
          {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
          },
          { withCredentials: true }
        )
        .then((res) => {
          console.log(res);
          if (res.body.code == 200) {
            this.flag = false;
            this.dialogVisible = true;
            // const loading = this.$loading({
            //   lock: true,
            //   text: "Loading",
            //   spinner: "el-icon-loading",
            //   background: "rgba(0, 0, 0, 0.7)",
            // });
            this.chipData = res.body.data;
            this.formChip.chipNumber = this.chipData.chipNumber;
            this.formChip.vaccinationCipher = this.chipData.vaccinationCipher;
            this.formChip.temperatureStr = this.chipData.list;
            this.upLoad();
            // loading.close();
          }
        });
    },
    upLoad() {
      newUpload(qs.stringify(this.formChip)).then((res) => {
        // setTimeout(() => {
        //   this.dialogVisible = false;
        // }, 3000);
        if (res.code == 200) {
          this.set = setTimeout(() => {
            this.dialogVisible = false;
            window.open(
              "http://evvmapi.vandh.org/file/pdf/" +
                res.data.chipNumber +
                "_.pdf",
              "_blank"
            );
          }, 3000);
          // window.open(
          //   "http://evvmapi.vandh.org/file/pdf/7218ee5b49cbcd0e2a707a20c0756263c38f99b4df9af78e61cea1a2a3a4a5a6a7a83caf84f96583.pdf",
          //   "_blank"
          // );
        } else if (res.code == 1628) {
          this.dialogVisible = false;
        }
      });
    },
    etCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      var gettime = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf + ":" + ss;
      return gettime;
    },
    ipLL() {
      getLonLat(this.latModel).then((res) => {
        console.log(res);
      });
    },
    handleAnimation: function (anim) {
      this.anim = anim;
      console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
  },
};
</script>

<style lang="less" scoped>
.back {
  padding: 0;
  margin: 0;
  background-image: url("../assets/5g.png");
  background-repeat: no-repeat;
  height: 100vh;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  .formCard {
    width: 1250px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .iframe {
    width: 100%;
    height: 1200px;
  }
  /deep/.el-dialog,
  .el-pager li {
    background: none;
    box-shadow: none;
  }
  /deep/.el-dialog {
    background: none;
    box-shadow: none;
    margin-top: 25vh;
  }
}
</style>