yf_tjq/yfbch/src/components/secondstep/secondstep.vue

<template>
  <div class="secondstep-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页头 -->
    <el-header>
      <el-page-header title @back="goBack" content="病害"></el-page-header>
      <el-button type="primary" class="secondstep-btn1" @click="judge()">完成</el-button>
    </el-header>

    <!-- 页面主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <!-- 主内容列表 -->
      <ul class="secondstep-ul">
        <!-- 病虫害数据添加 -->
        <li class="secondstep-li">
          <img src="../../assets/plantImg/addr.png" alt class="secondstep-li-imgone dandu" />
          <div class="secondstep-li-div">
            <div class="secondstep-li-divone danoneA">病害名称添加</div>
            <div class="secondstep-li-input">
              <el-input
                type="text"
                :rows="10"
                placeholder="输入要添加的病害名称"
                v-model.trim="inputPlant"
                maxlength="20"
                @blur="animateWidthB()"
                clearable
              ></el-input>
            </div>
          </div>
        </li>
        <!-- 生育期 -->

        <!-- 病害名称 -->
        <li class="secondstep-li">
          <img src="../../assets/imageOne/plant.png" alt class="secondstep-li-imgone dandu" />
          <div class="secondstep-li-div">
            <div class="secondstep-li-divone danoneA">病害名称</div>
            <el-cascader
              :options="optionsB"
              v-model="valueA"
              placeholder="请选择病害种类"
              @change="resultB($event)"
              class="content"
            ></el-cascader>
          </div>
        </li>

        <!-- 生育期 -->
        <li class="secondstep-li">
          <img src="../../assets/imageOne/raise.png" alt class="secondstep-li-imgone dandu" />
          <div class="secondstep-li-div">
            <div class="secondstep-li-divone danoneA">生育期</div>
            <div class="secondstep-li-input">
              <el-input
                v-bind:disabled="disabledInput"
                maxlength="20"
                type="text"
                :rows="10"
                placeholder="请输入生育期"
                v-model.trim="inputB"
                @blur="animateWidthC()"
                clearable
              ></el-input>
            </div>
          </div>
        </li>
        <!-- 生育期 -->

        <!-- 统计方法 -->
        <li class="secondstep-li">
          <img src="../../assets/imageOne/danwei.png" alt class="secondstep-li-imgone dandu1" />
          <div class="secondstep-li-div danxuan">
            <div class="secondstep-li-divone danxuan2">统计方法</div>
            <!-- 测试 -->
            <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
            <!-- 测试 -->
          </div>
        </li>

        <!-- 作物数量 -->
        <li class="secondstep-li">
          <img src="../../assets/imageOne/number.png" alt class="secondstep-li-imgone dandu1" />
          <div class="secondstep-li-div">
            <div>
              <div class="secondstep-li-divone shuliang">作物数量</div>
            </div>
            <!-- 测试 -->
            <div class="secondstep-li-input">
              <el-input
                type="number"
                :rows="10"
                placeholder="只能输入数字"
                v-model.trim="inputA"
                @blur="animateWidthA()"
                @focus="animateWidth()"
                clearable
              ></el-input>
            </div>
            <!-- 测试 -->
          </div>
        </li>

        <!-- 上传图片 -->
        <li class="secondstep-li ceshi">
          <img src="../../assets/imageOne/image.png" alt class="secondstep-li-imgone dandu" />
          <div class="secondstep-li-div">
            <div class="secondstep-li-divone danone">上传图片</div>

            <!-- 删除 -->
            <el-button @click="delBtn()" type="primary" v-if="btnShow">删除</el-button>
          </div>
          <div class="shangchuan_box">
            <el-upload
              ref="upload"
              action="/account_photo"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :http-request="handleHttpRequest"
              :on-remove="handleRemove"
              :limit="imgLimit"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </li>

        <!-- 病级 -->
        <li class="secondstep-li bgji">
          <img src="../../assets/imageOne/plant.png" alt class="secondstep-li-img" />
          <div class="secondstep-li-div">
            <div class="secondstep-li-text bingji">病级</div>
            <div class="secondstep-div-box">
              <div class="secondstep-text-box">
                (1)
                <input type="text" class="secondstep-input" v-model.number="input1" />
                值:
                <input
                  type="number"
                  class="secondstep-input"
                  v-model.number="input2"
                />
              </div>
              <div class="secondstep-text-box">
                (2)
                <input type="text" class="secondstep-input" v-model.number="input3" />
                值:
                <input
                  type="number"
                  class="secondstep-input"
                  v-model.number="input4"
                />
              </div>
              <div class="secondstep-text-box">
                (3)
                <input type="text" class="secondstep-input" v-model.number="input5" />
                值:
                <input
                  type="number"
                  class="secondstep-input"
                  v-model.number="input6"
                />
              </div>
              <div class="secondstep-text-box">
                (4)
                <input type="type" class="secondstep-input" v-model.number="input7" />
                值:
                <input
                  type="number"
                  class="secondstep-input"
                  v-model.number="input8"
                />
              </div>
              <div class="secondstep-text-box">
                (5)
                <input type="text" class="secondstep-input" v-model.number="input9" />
                值:
                <input
                  type="number"
                  class="secondstep-input"
                  v-model.number="input10"
                />
              </div>
              <div class="secondstep-text-box">
                (6)
                <input type="text" class="secondstep-input" v-model.number="input11" />
                值:
                <input
                  type="number"
                  placeholder="0"
                  class="secondstep-input"
                  v-model.number="input12"
                />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </el-main>

    <!-- 添加病害名称提示框 -->
    <el-dialog
      title="病害名称添加"
      :visible.sync="dialogVisibleA"
      width="7rem"
      :before-close="handleClose"
    >
      <span>如是否添加{{this.inputPlant}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false, delPlant()">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleA = false, addPlant($event)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "secondstep",
  data() {
    return {
      valueA: "", //病害名称数据
      disabledInput: true, //生育期input框是否禁用
      inputPlant: "", //添加病虫害名称
      dialogVisibleA: false, //添加病害名称弹框
      // radioVal1: localStorage.type,
      // radioVal2: localStorage.tyNumber,
      bingType: "", //作物名称-新建
      // zuoNumberA: localStorage.textBNumber, //面积大小
      // iptlistA: JSON.parse(localStorage.getItem("iptList")), //病虫害值input框值
      fullHeight: document.documentElement.clientHeight,
      // isShow: false,
      area: [], //作物数量单位和数字
      crop: [], //作物数量单位和数字
      //统计方法
      value: [],
      options: [
        {
          value: "面积大小",
          label: "面积大小",
          children: [
            {
              value: "平方米",
              label: "平方米"
            },
            {
              value: "亩",
              label: "亩"
            }
          ]
        },
        {
          value: "作物数量",
          label: "作物数量",
          children: [
            {
              value: "株数",
              label: "株数"
            },
            {
              value: "叶数",
              label: "叶数"
            }
          ]
        }
      ],
      inputA: "", //数字
      inputB: "", //病害名称
      //病级
      input1: localStorage.getItem("input1"),
      input2: "0",
      input3: localStorage.getItem("input2"),
      input4: "0",
      input5: localStorage.getItem("input3"),
      input6: "0",
      input7: localStorage.getItem("input4"),
      input8: "0",
      input9: localStorage.getItem("input5"),
      input10: "0",
      input11: localStorage.getItem("input6"),
      input12: "0",
      // input1: '病级1',
      // input2: "0",
      // input3: '病级2',
      // input4: "0",
      // input5: '病级3',
      // input6: "0",
      // input7: '病级4',
      // input8: "0",
      // input9: '病级5',
      // input10: "0",
      // input11: '病级6',
      // input12: "0",
      dialogImageUrl: "",
      dialogVisible: false,
      add: [],
      btnShow: false, //删除按钮显示隐藏
      imgLimit: 3, //限制上传图片张数
      optionsB: [],
      selectedOptionsB: ""
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    this.get_boderHeight();
    this.confirm();

    //作物种类数据
    // this.optionsB = JSON.parse(localStorage.getItem("pestName"));

    //判断病级在本地的值是否为空
    if (
      localStorage.getItem("input1") === null &&
      localStorage.getItem("input2") === null &&
      localStorage.getItem("input3") === null &&
      localStorage.getItem("input4") === null &&
      localStorage.getItem("input5") === null &&
      localStorage.getItem("input6") === null
    ) {
      this.input1 = "病级1";
      this.input3 = "病级2";
      this.input5 = "病级3";
      this.input7 = "病级4";
      this.input9 = "病级5";
      this.input11 = "病级6";
    }
  },

  created() {
    let _this = this;
  },
  computed: {},
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //返回
    goBack() {
      let _this = this;
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量
      localStorage.removeItem("pestName"); //作物选择返回的病虫害名称
      _this.$router.push("/newmessage");
    },

    // 判断必填项是否都以填完
    judge() {
      if (
        localStorage.getItem("classify_palnt") &&
        this.inputB &&
        localStorage.getItem("area") &&
        localStorage.getItem("unit") &&
        localStorage.getItem("plantNumber") &&
        localStorage.getItem("add")
      ) {
        this.baocun();
      } else {
        this.$message.error("必填项没有完成不能保存！！");
      }
    },

    //保存病级值
    bingji() {
      let _this = this;
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push(_this.input1 + ":" + _this.input2);
        b1.push(_this.input3 + ":" + _this.input4);
        b1.push(_this.input5 + ":" + _this.input6);
        b1.push(_this.input7 + ":" + _this.input8);
        b1.push(_this.input9 + ":" + _this.input10);
        b1.push(_this.input11 + ":" + _this.input12);

        var b2 = JSON.stringify(b1);
      } else {
        let adlist = [];
        adlist.push(_this.input1 + ":" + _this.input2);
        adlist.push(_this.input3 + ":" + _this.input4);
        adlist.push(_this.input5 + ":" + _this.input6);
        adlist.push(_this.input7 + ":" + _this.input8);
        adlist.push(_this.input9 + ":" + _this.input10);
        adlist.push(_this.input11 + ":" + _this.input12);

        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
    },

    //点击完成按钮给后端发送作物种类，作物数量，病级分类，病虫害值等数据
    baocun() {
      let _this = this;
      _this.bingji(); //调用保存病级值
      // 将用户修改的病级存在本地
      localStorage.setItem("input1", _this.input1);
      localStorage.setItem("input2", _this.input3);
      localStorage.setItem("input3", _this.input5);
      localStorage.setItem("input4", _this.input7);
      localStorage.setItem("input5", _this.input9);
      localStorage.setItem("input6", _this.input11);

      let postData = _this.$qs.stringify({
        harm_id: localStorage.getItem("classify_palnt"), //病虫害ID
        growth_stages: _this.inputB, //生育期
        addr_photo: localStorage.getItem("add"), //病虫害照片路径
        area: localStorage.getItem("plantNumber"), //统计面积
        pestname: localStorage.getItem("iptList"), //病害值
        cens_method: localStorage.getItem("area") + localStorage.getItem("unit") //统计方法
      });

      _this
        .$axios({
          method: "POST",
          url: "bigservers/cate",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == null) {
            this.$notify.error({
              title: "失败",
              message: "数据保存失败",
              duration: 1000
            });
          } else if (res.data.code == 200) {
            _this.$router.push("home");
            this.$notify({
              title: "成功",
              message: "数据保存成功了",
              type: "success",
              duration: 1000
            });
            //删除存在本地的值
            this.delData();
          }
        })
        .catch(error => {
          alert("请求失败");
          console.log(error);
        });
    },

    //统计方法的值
    handleChange(value) {
      localStorage.setItem("area", value[0]); //作物数量还是面积
      localStorage.setItem("unit", value[1]); //单位
    },

    //监听数字input-失去焦点
    animateWidthA() {
      if (this.inputA === "") {
        this.$notify({
          title: "警告",
          message: "这是必填项，不能为空",
          type: "warning",
          duration: 1000
        });
      } else {
        localStorage.setItem("plantNumber", this.inputA); // 存数量
      }
    },

    //监听数字input-获取焦点
    animateWidth() {
      if (
        localStorage.getItem("area") === null &&
        localStorage.getItem("unit") === null
      ) {
        this.$notify({
          title: "警告",
          message: "请先选择统计方法之后，再填写数量",
          type: "warning",
          duration: 1000
        });
      }
    },

    //监听病害名称添加input-失去焦点-病害名称
    animateWidthB() {
      let _this = this;
      //判断是否为空
      if (_this.inputPlant !== "") {
        _this.dialogVisibleA = true;
      }
    },
    handleClose(done) {
      let _this = this;
      _this.dialogVisibleA = false;
    },
    //添加病虫害名称弹框确定事件
    addPlant() {
      let _this = this;
      let postData = _this.$qs.stringify({
        ret: "add_harm",
        harm: localStorage.getItem("plantName"), //分类id
        pest_sort: localStorage.getItem("radioData"), //病虫害区分
        pest_name: _this.inputPlant, //病虫害名称
        month_id: localStorage.getItem("monthID") //月份ID
      });
      _this
        .$axios({
          url: "bigservers/city",
          method: "post",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "病害名称新建成功！",
              duration: 1500
            });
            this.confirm();
          } else if (res.data.code == 201) {
            this.$message({
              showClose: true,
              message: "该病害名称已经存在了！",
              type: "warning"
            });
          } else if (res.data.code == null) {
            this.$message({
              type: "warning",
              message: "该病害名称新建失败！",
              duration: 1500
            });
          }
          _this.inputPlant = "";
        })
        .catch(err => {
          console.log(err);
        });
    },
    //添加病虫害名称弹框取消事件
    delPlant() {
      let _this = this;
      _this.inputPlant = "";
    },

    //生育期input获取焦点事件
    animateWidthC() {
      let _this = this;
      //判断是否选择病害名称
      if (
        localStorage.getItem("classify_palnt") !== null &&
        _this.inputB === ""
      ) {
        this.$notify({
          title: "警告",
          message: "此项为必填项，请填写完后再填写下一项",
          type: "warning",
          duration: 1000
        });
      }
    },

    //保存成功后删除存在本地的数据
    delData() {
      //第二步页面的数据
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量

      //第一步页面数据
      localStorage.removeItem("regionID"); //地区ID
      localStorage.removeItem("regionName"); //地区名称
      localStorage.removeItem("regionData"); //地区
      localStorage.removeItem("monthID"); //月份ID
      localStorage.removeItem("month"); //月份
      localStorage.removeItem("screebIndex");
      localStorage.removeItem("plantType");
      localStorage.removeItem("plantName");
      localStorage.removeItem("pestName");
      localStorage.removeItem("radioData");
      localStorage.removeItem("screenIndex");
    },

    //点击进入上传图片页面
    handleRemove(file, fileList) {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleHttpRequest(file) {
      let _this = this;
      // console.log(file.file);
      // console.log(file);
      let form = new FormData();
      form.append("file", file.file);
      _this
        .$axios({
          method: "post",
          url: "bigservers/account_photo",
          anync: true,
          data: form,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          // _this.add = res.data.src
          _this.add.push(res.data.src);
          _this.btnShow = true;
          localStorage.setItem("add", _this.add);
          // console.log(_this.add);
        })
        .catch(error => {
          // console.log("222");
          console.log(err);
        });
    },

    //删除上传的图片
    delBtn() {
      let _this = this;
      let postData = _this.$qs.stringify({
        pic_list: localStorage.getItem("add")
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/del_account_photo",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          localStorage.removeItem("add");
          this.$notify({
            title: "成功",
            message: "图片删除成功",
            type: "success"
          });
          this.$refs.upload.clearFiles();
          localStorage.removeItem("add");
          // const timer = setInterval(() => {
          //   location.reload();
          // }, 1000);
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "失败",
            message: "图片删除失败"
          });
        });
    },

    //下拉框选中病害名称
    resultB(e) {
      localStorage.setItem("classify_palnt", e);
      this.disabledInput = false; //生育期
    },

    //请求病虫害名
    confirm() {
      let _this = this;
      //判断当前数据是新建还是默认编辑
      if (localStorage.getItem("defaultID") !== null) {
        if (localStorage.getItem("yfenID") !== null) {
          //默认编辑
          var postData = _this.$qs.stringify({
            ret: "details",
            harm_name: localStorage.getItem("plantName"), //作物名称
            pest_sort: localStorage.getItem("defaultType"), //作物类型
            month_id: localStorage.getItem("yfenID") //月份ID
          });
        } else if (localStorage.getItem("yuefenID") !== null) {
          //默认编辑
          var postData = _this.$qs.stringify({
            ret: "details",
            harm_name: localStorage.getItem("plantName"), //作物名称
            pest_sort: localStorage.getItem("defaultType"), //作物类型
            month_id: localStorage.getItem("yuefenID") //月份ID
          });
        } else {
          var postData = _this.$qs.stringify({
            ret: "details",
            harm_name: _this.redata.pest_name, //作物名称
            pest_sort: _this.redata.crop_sort, //作物类型
            month_id: _this.redata.month //月份ID
          });
        }
      } else {
        //新建
        var postData = _this.$qs.stringify({
          ret: "details",
          harm_name: localStorage.getItem("plantName"), //作物名称
          pest_sort: localStorage.getItem("radioData"), //作物类型
          month_id: localStorage.getItem("monthID") //月份ID
        });
      }
      _this
        .$axios({
          url: "bigservers/city",
          method: "post",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          this.optionsB = res.data;
          // this.optionsB = JSON.parse(localStorage.getItem("pestName"));
        })
        .catch(err => {});
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/secondstep.scss";
</style>