yf_tjq/yfbch/src/components/redact/redact.vue

<template>
  <div class="redact-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页头 -->
    <el-header>
      <el-page-header title @back="goBack" content="编辑"></el-page-header>

      <!-- 编辑保存图标 -->
      <el-button type="text">
        <img src="../../assets/imageOne/24.png" alt class="redact-img" />
      </el-button>
    </el-header>

    <!-- 调查详情主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <div class>
        <ul class="redact-ul">
          <!-- 调查时间 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/39.png" alt class="redact-ul-li-img" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text">调查时间</div>
              <div v-if="errorShow" class="redact-ul-li-time">{{redata[1].time}}</div>
            </div>
          </li>

          <!-- 采集地址 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/10.png" alt class="redact-ul-li-img image-one" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text text-one">采集地址</div>
              <div
                v-if="errorShow"
                class="redact-ul-li-time time-one"
              >{{redata[1].user_pro + redata[1].user_city + redata[1].user_area + redata[1].user_country }}</div>
            </div>
          </li>

          <!-- GPS定位 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/10.png" alt class="redact-ul-li-img image-one" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text text-two">GPS定位</div>
              <div v-if="errorShow" class="redact-ul-li-time time-two">
                经度:
                <span class>{{redata[1].lng}}</span>
                纬度:
                <span class>{{redata[1].lat}}</span>
              </div>
            </div>
          </li>

          <!-- 采集人 -->
          <li class="redact-ul-li" @click="collect()">
            <img src="../../assets/imageOne/14.png" alt class="redact-ul-li-img" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text text-three">采集人</div>
              <div v-if="errorShow" class="redact-ul-li-time time-three">{{redata[1].name}}</div>
            </div>
          </li>

          <!-- 统计分类 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/35.png" alt class="redact-ul-li-img fangkuai" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text text-four">统计分类</div>
              <!-- <div v-if="errorShow" class="redact-ul-li-time time-four">{{redata[1].statistical}}</div> -->
              <div class="radiobutton">
                <el-radio v-model="radio1" label="植物病害" @change="zhiwu()">植物病害</el-radio>
                <el-radio v-model="radio1" label="昆虫病害" @change="zhiwu()">昆虫病害</el-radio>
              </div>
            </div>
          </li>

          <!-- 作物种类 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/16.png" alt class="redact-ul-li-img img-one" />
            <div v-if="errorShow" class="redact-ul-li-box">
              <div class="redact-ul-li-text text-five" v-if="isShow">作物种类</div>
              <div class="redact-ul-li-text text-five" v-else>昆虫种类</div>
              <div class="redact-ul-li-time time-five" v-if="isShow">{{redata[1].plant}}</div>
              <div class="redact-ul-li-time time-five" v-else>{{redata[1].insect}}</div>
            </div>
          </li>

          <!-- 统计方法 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/35.png" alt class="redact-ul-li-img fangkuai" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text text-six">统计方法</div>
              <!-- <div
                v-if="errorShow"
                class="redact-ul-li-time time-six"
              >按{{redata[1].statistical_method}}统计</div> -->

              <div class="radiobutton">
                <el-radio v-model="radio2" label="面积大小" @change="mianji()">面积大小</el-radio>
                <el-radio v-model="radio2" label="作物数量" @change="zuowu()">作物数量</el-radio>
              </div>
            </div>
          </li>

          <!-- 统计面积 -->
          <li class="redact-ul-li" @click="proportion()">
            <img src="../../assets/imageOne/36.png" alt class="redact-ul-li-img fangkuai" />
            <div class="redact-ul-li-box">
              <div class="redact-ul-li-text text-seven">统计面积</div>
              <div v-if="errorShow">
                <div class="redact-ul-li-time time-seven" v-if="manShow">{{redata[1].area}}</div>
                <div class="redact-ul-li-time time-seven" v-else>{{redata[1].crop}}</div>
              </div>
            </div>
          </li>

          <!-- 病害名称 -->
          <li class="redact-ul-li">
            <img src="../../assets/imageOne/17.png" alt class="redact-ul-li-img" />
            <div v-if="errorShow" class="redact-ul-li-box">
              <div class="redact-ul-li-text text-eight" v-if="isShow">病害名称</div>
              <div class="redact-ul-li-text text-eight" v-else>昆虫名称</div>
              <div class="redact-ul-li-time time-eight" v-if="isShow">{{redata[1].plant_name}}</div>
              <div class="redact-ul-li-time time-eight" v-else>{{redata[1].insect_name}}</div>
            </div>
          </li>

          <!-- 病害级别 -->
          <li class="redact-ul-li li-one" v-if="errorShow">
            <img src="../../assets/imageOne/34.png" alt class="redact-ul-li-img fangkuai" />
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="病虫害值" name="4">
                <div class="insect-li-txt" v-for="item in this.redata[0]" :key="item">{{item}}</div>
              </el-collapse-item>
            </el-collapse>
          </li>
        </ul>
      </div>
    </el-main>

    <!-- 采集人编辑弹框 -->
    <el-dialog title="采集人" :visible.sync="dialogFormVisible" :before-close="handleCloseA">
      <el-form :model="form">
        <el-form-item label :label-width="formLabelWidth">
          <el-input v-model.trim="form.newmeg" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false,cancel()">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,collectAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 统计面积编辑弹框 -->
    <el-dialog title="统计面积" :visible.sync="dialogFormVisible1" :before-close="handleCloseA">
      <el-form :model="form">
        <el-form-item label :label-width="formLabelWidth">
          <!-- <el-input v-model.trim="form.area" autocomplete="off"></el-input> -->

          <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model.trim="form.area" class="input-with-select">
              <el-select v-model="select" slot="append" placeholder="请选择">
                <el-option label="平方米" value="平方米"></el-option>
                <el-option label="亩" value="亩"></el-option>
                <el-option label="株数" value="株数"></el-option>
                <el-option label="叶数" value="叶数"></el-option>
              </el-select>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false,cancel()">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false,proportionAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "redact",
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      radio1: '', //统计分类单选
      radio2: '', //统计方法单选
      redata: [], //数据
      manShow: false, //判断是面积还是株数
      activeName: "1", //手风琴效果
      errorShow: false, //页面数据
      dialogFormVisible: false, //采集人
      dialogFormVisible1: false, //统计面积
      select: "", //统计面积
      form: {
        newmeg: "", //采集人
        area: "", //统计面积
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        userList: ""
      },
      formLabelWidth: "120px"
    };
  },
  created() {
    let _this = this;
    let postData = _this.$qs.parse({
      id: localStorage.examineID
    });
    _this
      .$axios({
        method: "post",
        url: "bigservers/seeuser",
        data: postData,
        headers: {
          "Content-Type": "application/json"
        }
      })
      .then(res => {
        _this.redata = res.data;
        //判断是作物还是昆虫
        if (res.data[1].statistical === "植物病害") {
          _this.isShow = true;
        } else {
          _this.isShow = false;
        }

        //判断area是否为null
        if (res.data[1].crop !== null) {
          _this.manShow = false;
        } else {
          _this.manShow = true;
        }
        _this.errorShow = true;
        localStorage.setItem('redactAxios', res.data)
      })
      .catch(error => {
        alert("失败");
      });
      console.log(_this.radio1)
  },
  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();
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    goBack() {
      let _this = this;
      _this.$router.push("/examine");
    },

    //弹出框右上角关闭按钮回调
    handleCloseA() {
      let _this = this;
      _this.dialogFormVisible = false;
      _this.dialogFormVisible1 = false;
      _this.cancel();
    },

    //取消按钮
    cancel() {
      let _this = this;
      _this.form.newmeg = "";
      _this.form.area = "";
      _this.select = "";
    },

    //采集人弹框显示
    collect() {
      let _this = this;
      _this.dialogFormVisible = true;
    },

    //采集人确定事件
    collectAdd() {
      let data = this.form.newmeg;
      console.log(data);
    },

    //统计面积弹框显示
    proportion() {
      let _this = this;
      _this.dialogFormVisible1 = true;
    },

    //统计面积确定事件
    proportionAdd() {
      let data = this.form.area + this.select;
      console.log(data);
    },

    //统计分类面积
    mianji () {
      console.log('面积大小')
    },

    //统计分类作物
    zuowu () {
      console.log('作物种类')
    },

    // 统计分类植物病害和昆虫病害
    zhiwu () {
      let _this = this
      if (_this.radio1 === '植物病害') {
        _this.isShow = false
      } else {
        _this.isShow = true
      }
      
    },
  }
};
</script>

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