kuangshan-project/src/views/zaoquan/yiqing/yiqing-tiwen.vue

<template>
  <div>
    <div v-if="shows">
      <van-nav-bar
        title="体温填报"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="records" size="18" @click="tianbao" />
        </template>
      </van-nav-bar>
    </div>

    <div class="contents">
      <form>
        <!-- 地理定位 -->
        <!-- <div class="contents_one">
          <img src="../../../assets/images/zaoquan/yiqing/定位.png" alt="" />
          <p>宁夏自治区灵武市枣泉煤矿东大门</p>
          <input type="button" value="重新定位" />
        </div> -->
        <div class="contents_two">
          <van-cell-group>
            <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
            <van-field
              v-model="department"
              label="部门"
              placeholder="请输入部门"
            />
            <van-field v-model="mobile" label="工号" placeholder="请输入工号" />
          </van-cell-group>
        </div>
        <div class="contents_three">
          <label for="tiwen">体温</label>
          <input
            type="text"
            name="tiwen"
            placeholder="请输入30.0~45.0"
            dir="rtl"
            size="14"
            v-model="tiwen"
          />
        </div>
        <div class="contents_six">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="身体状况"
            placeholder="请选择"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
        </div>

        <div class="contents_six">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value1"
            label="来自地点"
            placeholder="请选择"
            @click="showPicker1 = true"
          />
          <van-popup v-model="showPicker1" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns1"
              @confirm="onConfirm1"
              @cancel="showPicker1 = false"
            />
          </van-popup>
        </div>

        <div class="contents_six">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value2"
            label="交通方式"
            placeholder="请选择"
            @click="showPicker2 = true"
          />
          <van-popup v-model="showPicker2" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns2"
              @confirm="onConfirm2"
              @cancel="showPicker2 = false"
            />
          </van-popup>
        </div>
        <div class="contents_four">
          <label for="yimiao">是否接种疫苗</label>
          <div>
            <el-radio-group v-model="radio1" @change="reasons($event)">
              <el-radio-button label="第二剂"></el-radio-button>
              <el-radio-button label="第一剂"></el-radio-button>
              <el-radio-button label="未接种"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="contents_four">
          <label for="hesuan">是否做过核酸检测</label>
          <div>
            <el-radio-group v-model="radio2">
              <el-radio-button label="是"></el-radio-button>
              <el-radio-button label="否"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="contents_nex">
          <div>请上传图片</div>
          <van-uploader :after-read="uploadImg" v-model="fileList" multiple />
          <!-- <van-uploader :after-read="afterRead" /> -->
          <!-- <input type="file" @change="getFile" ref="file" name="image" id="file" class="imgChoose"> -->
        </div>
      </form>
    </div>
    <div class="contents" v-show="reason">
      <p class="contents_five">未接种疫苗原因</p>
      <textarea
        placeholder="请说明原因"
        class="textareas"
        v-model="textareas"
      ></textarea>
    </div>
    <div class="buttons">
      <button @click="Submits">提交</button>
    </div>
  </div>
</template>

<script>
//时间戳
var getTime = function () {
  var date = new Date();
  var year = date.getFullYear();
  var month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  var mytime = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
  return mytime;
};
import { location } from "../../../plugins/map.js";
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
export default {
  data() {
    return {
      fileList: [], //图片放置数组
      shows: false, //tabbar隐藏
      name: "", //员工姓名
      department: "", //员工部门
      mobile: "", //员工工号
      reason: false, //控制原因栏的显示或隐藏
      tiwen: "", //体温
      yimiao: 0, //疫苗
      hesuan: 0, //核酸
      textareas: "", //未接种疫苗原因
      value: "", //身体状况
      value1: "", //来自地点
      value2: "", //交通方式
      values: "", //身体状况
      values1: "", //来自地点
      values2: "", //交通方式
      columns: ["正常", "异常"],
      showPicker: false, //是否显示列表
      columns1: ["住矿(宿舍)", "银川", "吴忠", "灵武", "宁东", "石嘴山"],
      showPicker1: false, //是否显示列表
      columns2: ["私家车", "步行", "客运车", "出租车"],
      showPicker2: false, //是否显示列表
      radio1: "第二剂", //默认为第二剂
      radio2: "否",
      // token: sessionStorage.getItem("mytoken")
      //   ? sessionStorage.getItem("mytoken")
      //   : "", //token值保存在本地，有的话取值，没有为空
      remarks: "备注",
      location: "gps暂无",
      times: getTime(), //填报时间

    };
  },
  // witch: {
  //   computed: {
  //     tiwen() {
  //       if (this.tiwen > 45 || this.tiwen < 30) {
  //         this.$toast("请输入30-45");
  //       }
  //     },
  //   },
  // },

  methods: {
    /**获取地图定位*/
    getLocation() {
      let _that = this;
      let geolocation = location.initMap("map-container"); //定位
      AMap.event.addListener(geolocation, "complete", (result) => {
        _that.lat = result.position.lat;
        _that.lng = result.position.lng;
        _that.province = result.addressComponent.province;
        _that.city = result.addressComponent.city;
        _that.district = result.addressComponent.district;
      });
    },

    uploadImg(file) {
      // 大于3MB的jpeg和png图片都缩小像素上传
      if (/\/(?:jpeg|png)/i.test(file.file.type) && file.file.size > 3000000) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement("canvas");
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext("2d");
        // 创建新的图片对象
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content;
        // 监听浏览器加载图片完成，然后进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 800;
          canvas.height = 600;
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。*/
          /* 如果不指定缩小的像素，图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后得到的图片就是张局部图。图片小于画布就会有黑边。*/
          context.drawImage(img, 0, 0, 800, 600);
          // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
          file.content = canvas.toDataURL(file.file.type, 0.92);
        }
      }
    },

    //接种疫苗
    reasons(e) {
      console.log(e)
      if(e == "未接种"){
        this.reason = true;
      }else{
        this.reason = false
      }
    },
    //提交数据到后台
    Submits() {
      //判断体温是否在30-45区间且不能为空
      if (
        Number(this.tiwen) > 45 ||
        Number(this.tiwen < 30) ||
        this.tiwen == ""
      ) {
        this.$toast("体温请填写30~45");
      } else {
        // console.log(this.name);
        // console.log(this.department);
        // console.log(this.tiwen);
        // console.log(this.radio1);
        // console.log(this.radio2);
        //疫苗情况
        if (this.radio1 == "第一剂") {
          this.yimiao = 1;
        } else if (this.radio1 == "未接种") {
          this.yimiao = 3;
        } else {
          this.yimiao = 2;
        }
        //是否做过核酸
        if (this.radio2 == "是") {
          this.hesuan = 2;
        } else {
          this.hesuan = 1;
        }
        //身体状况
        if (this.value == "正常") {
          this.values = 2;
        } else {
          this.values = 1;
        }
        //来自地点
        if (this.value1 == "住矿(宿舍)") {
          this.values1 = 1;
        } else if (this.value1 == "银川") {
          this.values1 = 2;
        } else if (this.value1 == "吴忠") {
          this.values1 = 3;
        } else if (this.value1 == "灵武") {
          this.values1 = 4;
        } else if (this.value1 == "宁东") {
          this.values1 = 5;
        } else {
          this.values1 = 6;
        }
        //交通方式
        if (this.value2 == "私家车") {
          this.values2 = 1;
        } else if (this.value2 == "步行") {
          this.values2 = 2;
        } else if (this.value2 == "客运车") {
          this.values2 = 3;
        } else {
          this.values2 = 4;
        }
        // console.log(this.yimiao);
        // console.log(this.times);
        // console.log(typeof this.tiwen);
        console.log(this.fileList);

        // console.log(images);

        // if (this.fileList.length == 0) {
        //   this.$toast("请上传图片");
        //   return;
        // }

        this.$toast.loading({
          message: "提交中...",
          forbidClick: true,
          overlay: true,
          duration: this.duration,
        });

        this.$http
          .post(
            "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/clock_in",
            {
              temperature: String(this.tiwen),
              vaccination: String(this.yimiao),
              not_vaccination_cause: this.textareas,
              // remarks: this.remarks,
              // location: this.location,
              nucleic_acid_test: String(this.hesuan),
              transport: String(this.values2),
              place: String(this.values1),
              health: String(this.values),
              clock_in_time: this.times,
              staff_num: this.mobile,
              image_path: this.fileList,
            }
          )
          .then((res) => {
            this.$toast.clear();
            console.log(res);

            if(res.data.code == 1){
              this.$toast("请完整填写信息");
              return
            }

            this.$dialog.alert({
              message: "提交成功",
            });
            var myinfo = setInterval(
              this.$router.push(
                `/zaoquan/yiqing/yiqing?token=${this.gettoken}`
              ),
              2000
            );
            clearInterval(myinfo);
            // this.$router.push(`/zaoquan/yiqing/yiqing?token=${this.token}`);
          })
          .catch((res) => {
            this.$toast.clear();
            this.$toast("提交失败");
            console.log(res);
          });
      }
    },
    //跳转至填报列表，填报列表隐藏在tabbar上，shows为true看查看
    tianbao() {
      this.$router.push(
        `/zaoquan/yiqing/yiqing-tianbao?token=${this.token}&mobile=${this.mobile}`
      );
    },
    //弹出层-身体状况
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    //弹出层-来自地点
    onConfirm1(value1) {
      this.value1 = value1;
      this.showPicker1 = false;
    },
    //弹出层-交通方式
    onConfirm2(value2) {
      this.value2 = value2;
      this.showPicker2 = false;
    },
    //在有token的情况下获取员工姓名，工号和部门
    getxinxi() {
      this.$http
        .post("http://zaoquan.nxjiewei.com:8011/api/user/info")
        .then((res) => {
          // console.log(res);
          this.name = res.data.data.name;
          this.department = res.data.data.section_fullname;
          this.mobile = res.data.data.staff_num;
        });
    },
    //返回按钮
    onClickLeft() {
      window.history.back();
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#39f"; //背景色
    // this.getLocation();
    this.gettoken = getAllUrlParams(window.location.href).token;
    // this.gettoken =  "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImU5MDQ2MWNiODRjMTlkMzBlMDRkYjYzY2I5ZTc5OWZlODk0MDU4ZGZlMTQwYjkzODU3ZjEzNWJhNTAxZTNmMmQ1YTA5NmVkZWQyZDRkYWZjIn0.eyJhdWQiOiIyIiwianRpIjoiZTkwNDYxY2I4NGMxOWQzMGUwNGRiNjNjYjllNzk5ZmU4OTQwNThkZmUxNDBiOTM4NTdmMTM1YmE1MDFlM2YyZDVhMDk2ZWRlZDJkNGRhZmMiLCJpYXQiOjE2Mjg1Nzk4NTAsIm5iZiI6MTYyODU3OTg1MCwiZXhwIjoxNjMxMTcxODUwLCJzdWIiOiIyMTA5Iiwic2NvcGVzIjpbIioiXX0.IN0d0HNck3NuGN-HYaKFbn1c0Li9YUgMgr_rtIeaNUt_b5YhT_Pv-5clNy06sKb9ZiQ_wqbfrfveQwZZ2si3zLZYMx8dMuFMdo6UNKZ8v_wKNWE1SwNtE41ug_4bhoMoR-m-hXYe-Euxyz0VImXGKJsfMrR7h40sQJvA6Dx0sVsy-4XPj2bytTlnIYPN-hQ-mzBDpPWBmEef-smRKq8_fUn1CESaJYovJ6CzY9U6P1mB8ZN-lYCSj3C5EWDx31ZRNZo8FQ6UY_59UlZjwiAigu8CozO9u8_ZA0S8_80ZKPRwosMsurHpwqaT9SmPm0fNRxc5hViy0oE6CBiZSo214_W89Qh3EwZWvvrtY1UruWL-PhzIJk00_TWvfVzIzPPM5maOysltAXv6qeOmps7tM-YJKzKJ6X6U3phwz7-n1KTPdTIkVEXzB8zr33XGqc6YytIUfVoo9cCZbwdS6qXf1xdaiJNNl_7CvXhyuM744DaaxUn2T6Vp6PUwHttmC0n7YNvIslSUHoYgdSRWabNoZpLMB2O-VpBdwr314Hvn_BL0k5Pupopa4yBfJLCbg5g_pWYKT_7LGyzXS7Ts29tki-PIcRvOCBoZ4TX4pt66J00VNlG35LGTzsFyZ5wbzHBJYoerAsRT-Q4uCXxRESD8ZtWzO-Z_ZbvXrte3ivL4DO0";
    // this.token = `Bearer ${this.gettoken}`; //获取token值
    this.token = getAllUrlParams(window.location.href).token;
    this.gettoken = getAllUrlParams(window.location.href).gettoken;
    // console.log(this.token);
    this.tabbar = Boolean(getAllUrlParams(window.location.href).tabbar);
    this.shows = this.tabbar;
    console.log(this.shows);
    // sessionStorage.setItem("mytoken", this.token); //存入token值
    this.getxinxi();
    // this.myinfo=setInterval(this.Submits,this.$router.push(`/zaoquan/yiqing/yiqing?toen=${this.token}`), 2000);
  },
  beforeDestroy() {
    clearInterval(this.myinfo); //销毁阶段清除定时器
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
.contents1 {
  width: 90%;
  margin: 7px auto 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid transparent;
  text-align: center;
}
.contents {
  width: 90%;
  margin: 7px auto 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid transparent;
}
.contents_one {
  width: 95%;
  margin: 5px auto;
  padding-bottom: 10px;
  display: flex;
  justify-content: left;
  border-bottom: 1px solid #f0f0f0;
}
.contents_one > img {
  width: 40px;
  height: 40px;
}
.contents_one > p {
  width: 194px;
  font-size: 14px;
  margin-left: 15px;
  color: #00a1e9;
}
.contents_one > input {
  border: none;
  width: 77px;
  background: #39f;
  color: #fff;
  border-radius: 10px;
  height: 27px;
  font-size: 14px;
  margin-top: 6px;
  margin-left: 13px;
}
.contents_two {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #f0f0f0;
}
.van-cell {
  padding: 10px 5px;
}
.van-cell__value {
  color: black;
}
.contents_three {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
}
.contents_three > label {
  font-size: 14px;
  margin-left: 4px;
}
.contents_three > input {
  border: none;
}
input::-webkit-input-placeholder {
  color: #969799;
  font-size: 14px;
  text-align: right;
}
.contents_four {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
}
.contents_four > label {
  font-size: 14px;
  margin-left: 4px;
}
.contents_five {
  width: 95%;
  margin: 0 auto;
  font-size: 14px;
  margin-left: 4px;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 5px;
}
.contents_six {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #f0f0f0;
}
.buttons {
  text-align: center;
  margin: 25px auto;
}
.buttons > button {
  width: 90%;
  height: 40px;
  border: none;
  background: #fff;
  color: #39f;
  border-radius: 10px;
}
.textareas {
  border: none;
  margin-left: 8px;
  font-size: 15px;
  width: 95%;
  margin-top: 10px;
  resize: none;
}
>>> .van-field__control {
  text-align: right;
}
>>> .el-radio-button {
  margin-left: 4px;
}
>>> .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 14px;
}
>>> .el-radio-button__inner {
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dcdfe6;
  font-weight: 500;
  /* border-left: 1px; */
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 6px 12px;
  font-size: 11px;
}
>>> .el-radio-button__inner {
  border-radius: 14px;
}
>>> .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 14px;
}
.contents_nex {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 5px;
}
.contents_nex > div {
  font-size: 14px;
  margin-left: 4px;
  margin-bottom: 5px;
}
</style>