yf_tjq/yfbch/src/components/system/system.vue

<template>
  <div class="system-boxA">
    <!-- 页面头部 -->
    <el-header>
      <el-page-header title @back="goBack" content="系统设置"></el-page-header>
    </el-header>

    <!-- 页面主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <ul class="system-ul">
        <!-- 地点设置 -->
        <!-- <li class="system-li" @click="site()">
          <img src="../../assets/imageOne/dingwei.png" alt class="system-img" />
          <div class="system-box">
            <div class="system-div1 didian">地点和月份设置</div>
            <div
              class="system-div2 dizhi"
              v-show="isShow"
            >{{this.dizhi + this.yuefen + '月份'}}</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li>-->

        <!-- 病害统计模板 -->
        <li class="system-li" @click="crop()">
          <img src="../../assets/imageOne/plant.png" alt class="system-img leaf" />
          <div class="system-box">
            <div class="system-div1 kindA">病害统计模板</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li>

        <!-- 虫害统计模板 -->
        <li class="system-li" @click="kunchong()">
          <img src="../../assets/imageOne/insect.png" alt class="system-img forbid" />
          <div class="system-box">
            <div class="system-div1 kindA">虫害统计模板</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li>

        <!-- 用户反馈 -->
        <li class="system-li" @click="fedk()">
          <img src="../../assets/imageOne/fankui.png" alt class="system-img forbidA" />
          <div class="system-box">
            <div class="system-div1 kind">用户反馈</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li>

        <!-- 版本更新 -->
        <!-- <li class="system-li" @click="update()">
          <img src="../../assets/imageOne/gengxin.png" alt class="system-img forbidB" />
          <div class="system-box">
            <div class="system-div1 kind">版本更新</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li> -->

        <!-- 版本更新历史记录 -->
        <li class="system-li" @click="updateHistory()">
          <img src="../../assets/imageOne/gengjilu.png" alt class="system-img forbidB" />
          <div class="system-box">
            <div class="system-div1 kind">版本更新历史记录</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li>

        <!-- 删除app默认设置 -->
        <!-- <li class="system-li" @click="dialogVisibleshan = true">
          <img src="../../assets/imageOne/delMoren.png" alt class="system-img forbidB" />
          <div class="system-box">
            <div class="system-div1 kind">删除默认设置</div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="system-img1" />
        </li>-->
      </ul>

      <!-- 删除框 -->
      <el-dialog title="提示" :visible.sync="dialogVisibleshan" :before-close="handleCloseshanchu">
        <span>此操作将删除默认设置(地址、虫害、病害)</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleshan = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleshan = false,delDefault()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除框 -->

      <!-- 进度条 -->
      <div class="schedule_box" v-if="scheduleShow" :style="'height:' + fullHeight + 'px'">
        <div class="schedule_box_div">
          <div class="schedule_box_title">正在下载...</div>
          <el-progress :percentage="percentage" :color="customColors"></el-progress>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "system",
  data() {
    return {
      value1: localStorage.identification,
      dizhi: localStorage.regionNameset, //地区
      yuefen: localStorage.monthset, //月份
      xianName: localStorage.xianAname,
      fullHeight: document.documentElement.clientHeight,
      isShow: false, // 判断是否显示
      timer: null, //定时器
      dialogVisibleshan: false, //删除
      dialogVisible: false, //更新弹框
      scheduleShow: false, //进度条
      redataName: localStorage.getItem("redataName"), //获取到后端发来的app的名字
      //测试进度条
      percentage: 20,
      customColor: "#409eff",
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      isClick: true //更新弹框
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
    //判断进度条是否为100%
    percentage(time) {
      if (time === 100) {
        this.scheduleShow = false;
        this.$message({
          message: "已经下载成功，可以安装",
          type: "success",
          duration: 1000
        });
        localStorage.removeItem("redataName"); //删除存在本地的apk名字
      }
    }
  },
  mounted() {
    this.get_boderHeight();
  },
  created() {
    let _this = this;
    if (localStorage.getItem("default") !== "MoRen") {
      _this.isShow = false;
    } else {
      _this.isShow = true;
    }
  },
  computed: {
    //操作默认采集人设置的值
    num() {
      return this.$store.state.changableNum;
    }
  },

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

    //点击返回到主页
    goBack() {
      let _this = this;
      localStorage.removeItem("newdataID");
      localStorage.removeItem("chonghaiID");
      localStorage.removeItem("zuowuID");
      localStorage.removeItem("kunchongid");
      // _this.$router.push("/home");
      _this.$router.replace("/home");
    },

    // 点击进入地点设置页面
    // site() {
    //   let _this = this;
    //   _this.$router.push("/Site");
    // },

    //点击进入作物种类设置页面
    crop() {
      let _this = this;
      localStorage.removeItem("insectsetID");
      _this.$router.push("/plantset");

      // _this.$router.push("/crop");
    },

    //点击进入昆虫种类设置
    kunchong() {
      let _this = this;
      localStorage.removeItem("plantsetID");
      _this.$router.push("/insectset");

      // _this.$router.push("/insectType");
    },

    //点击删除默认设置
    delDefault() {
      let _this = this;
      localStorage.removeItem("xianAname");
      localStorage.removeItem("shiAname");
      localStorage.removeItem("shengAname");
      localStorage.removeItem("textarea");
      localStorage.removeItem("shengAcode");
      localStorage.removeItem("shiAcode");
      localStorage.removeItem("userName");
      localStorage.removeItem("default");
      localStorage.removeItem("crop");
      localStorage.removeItem("insectType");
      localStorage.removeItem("insectTypeIndex");
      localStorage.removeItem("cropIndex");
      this.$message({
        type: "success",
        message: "删除成功!"
      });
      const timer = setInterval(() => {
        // location.reload();
      }, 1000);
    },

    //删除框
    handleCloseshanchu(done) {
      let _this = this;
      _this.dialogVisibleshan = false;
    },

    //点击进入用户反馈页面
    fedk() {
      let _this = this;
      //判断账号是普通用户还是管理用户
      if (sessionStorage.getItem("common") !== null) {
        _this.$router.push("feedback");
      } else if (sessionStorage.getItem("Administrator") !== null) {
        _this.$router.push("/feedback_list");
      }
    },

    //点击请求后端进行更新
    update() {
      let _this = this;
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;

        _this
          .$axios({
            method: "get",
            url: "bigservers/app_upgrade"
          })
          .then(res => {
            if (res.data.app_num > "1.1.7") {
              this.$notify({
                title: "成功",
                message: "检测到有新版本，需要更新",
                type: "success",
                duration: 1500
              });
              // const timerA = setInterval(() => {
              //   window.location.href =
              //     "bigservers/app_file/" + res.data.app_name;
              //   clearInterval(timerA);
              // }, 1500);

              const timerA = setInterval(() => {
                var wait = plus.nativeUI.showWaiting("下载更新中，请勿关闭");
                //创建一个下载任务
                var dtask = plus.downloader.createDownload(
                  "bigservers/app_file/" + res.data.app_name,
                  {
                    method: "GET"
                  },
                  function(d, status) {
                    if (status == 200) {
                      console.log("Download success: " + d.filename);
                      plus.runtime.install(d.filename); // 安装下载的apk文件
                    } else {
                      alert("更新失败");
                      //						plus.runtime.install('../H5B2852C7_0925104810.apk'); // 安装下载的apk文件
                    }
                    wait.close();
                  }
                );
                //开始下载
                dtask.start();
                clearInterval(timerA);
              }, 1500);
            } else if (res.data.app_num == "1.1.7") {
              this.$notify({
                title: "警告",
                message: "已是最新版本",
                type: "warning",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //点击跳转到历史记录页面
    updateHistory() {
      this.$router.push("/updateHistory");
    }
  }
};
</script>

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